Organizing Your System

A Color System is the main container for your project. It represents a complete and isolated color system, similar to a project or workspace.

Each Color System contains:

• Collections: organize palettes into logical groups
• Styles: define default generation settings
• Palettes: the actual color palettes
• Settings: global settings like gamut and color format

Collections are organizational groups that gather related palettes and styles within a Color System. Think of a Collection as a folder that organizes your work.

Collections allow you to:

• Organize palettes by category (e.g., Primary, Secondary, Neutral)
• Group styles with similar settings
• Manage large color systems in a structured way
• Easily reorganize palettes by dragging them between collections

Each Collection can contain multiple palettes and styles. Palettes can be moved between collections, but each palette always belongs to only one collection.

Styles are generation configurations that define default values for creating new palettes. Each Style belongs to a Collection and can be applied to all palettes in that collection.

A Style contains:

• Algorithm: either Curve (manual control) or Pattern (keyframe-based, e.g., pattern:tailwind-4)
• Curve Editor: for Curve algorithm, defines how to distribute lightness, chroma, hue, and opacity
• Pattern Keyframes: for Pattern algorithm, defines keyframes for each channel across the hue spectrum
• Naming Pattern: how to name shades (100-900, 1-9, library:systemId, etc.)
• Number of Shades: how many shades to generate
• Anchor Shade Index: where to position the base color

When you create a new palette, you can link it to a Style. Linked palettes inherit style values, but you can unlink individual parameters to customize them.

A Palette is a collection of shades (color variations) generated from a base color. Each palette represents a coherent color scale, such as "Blue", "Red", "Gray", etc.

Each Palette contains:

• Base Color: the starting color for generation
• Shades: the array of generated colors (e.g., 50, 100, 200...900)
• Generation Settings: algorithm, distributions, number of shades
• Shade Overrides: custom colors for specific shades
• Linked to Style: which parameters are linked to the style

You can customize each palette by modifying:

• The base color using the color picker
• Individual shades with manual overrides
• Generation settings (if unlinked from the style)
• The palette name and description