Creating & Managing Projects

Each project contains a complete design system

What is a Project?

Projects in BreakColorUI are containers for your entire design system. Each project is saved to your account and includes all design tokens you configure.

Color Palettes

Brand, neutral, and custom color schemas with 12-step scales

Typography System

Fluid font sizes, line heights, and typographic scales

Spacing Scales

Component and section spacing with viewport-based scaling

Theme Configuration

Page layout, responsive breakpoints, and border radius presets

Creating Your First Project

Quick Start Guide

  1. 1. Navigate to Dashboard - After signing in, you'll be on the Projects dashboard. Click "Dashboard" in the navigation if needed.
  2. 2. Click "Create New Project" - Look for the button in the top right. A dialog will appear.
  3. 3. Enter Project Name - Choose a descriptive name like "Client Website 2025" or "E-commerce Store".
  4. 4. Start Configuring - Your project is created with defaults. Click the card to open the editor.

Project Naming Tips

  • • Use clear, descriptive names that identify the project
  • • Include client names or website purposes
  • • You can create unlimited projects for different clients/websites
  • • Names can be changed later if needed

Project Editor Interface

Once you open a project, you'll see the editor with six main tabs. Each tab manages a specific part of your design system:

Colors

Configure brand colors, neutral palettes, and custom color schemas

Typography

Set up fluid typography with font size scales and line heights

Spacing

Define component and section spacing with responsive scales

Theme

Configure page layout, responsive breakpoints, and border radius

Tokens

View and copy all generated CSS custom properties

Export

Export CSS or sync with Chrome Extension for Breakdance

Saving Your Work

Auto-Save System

  • • Automatic tracking - All changes are detected as you edit
  • • Global save button - Appears when modifications are detected
  • • One-click save - Click "Save Changes" to persist to database
  • • Independent configs - Colors, typography, spacing, and theme save separately
  • • Batch saving - Make changes across tabs and save all at once

Don't forget to save!

Changes are not saved automatically. Always click the "Save Changes" button before leaving the editor to ensure your work is persisted to your account.

Managing Projects

You can perform several actions on your projects from the dashboard:

Edit Project

Click any project card to open the editor and modify your design system

Duplicate Project

Create a copy of an existing project to use as a starting point

Delete Project

Permanently remove a project and all its design tokens

Deletion is permanent

Deleted projects cannot be recovered. Make sure you've exported your CSS or duplicated the project before deleting.

Next Steps

Now that you understand projects, it's time to configure your design system. Start with the Color System to create your brand palette.

Continue learning

Jump to the Color System guide to start building your palette, or explore Typography and Spacing configuration.