Choose or create a reusable design system, understand where it is stored, tune its visual and motion parameters, and deliberately apply it to the current project.
Where: Designer → Design system page, or composer + → Design system.
Before you start
- A Designer project with edit access.
- A Brain-backed workspace when the system must be reusable outside this project.
Key ideas
- One searchable library: The page combines systems you own, project-local saved systems, eight starters, and older presets in a searchable two-column browser. Each card identifies where the system is kept and includes a rendered preview.
- Select, save, and apply are separate: Selecting previews a system. A starter materializes as a real project system when chosen. Save to my systems creates a reusable copy; Use for project adopts the system CSS as the active project system.
- Parameters are a coherent visual brief: Beyond palette and fonts, the system describes corners, density, mood, type behavior, sizing, layout, imagery, motion, and prohibitions. Sizing jointly controls spacing, container width, radius, border weight, and shadow depth.
- Motion belongs to the system: Motion can match the system, use a named direction or fine timing/easing bands, or be disabled. A motion choice made before system selection remains pending, then attaches to the selected system.
Steps
- Open Design system, search the unified list, and compare real previews under Yours, starters, and older presets.
- Select a candidate to preview it. Choose Use for project only when it should become the project’s active system.
- Choose Create; enter a name, Light or Dark ground, brand color, automatic palette or manual colors, font pair, corners, density, and mood.
- Review the live preview. Open Advanced when you need to inspect the generated CSS before saving.
- Tune Type, Sizing, Layout, Imagery, Motion, and prohibitions. Review the five sizing controls as a group.
- Choose Match the system, a named motion direction, fine timing/easing, or None. If it is pending, select the intended system afterward.
- Choose Save to my systems for reuse, and confirm whether the card is stored in Brain or only in this project.
- Apply the system to representative pages and run a design-system check for hard-coded colors, foreign fonts, inconsistent sizing, and motion drift.
Create-system fields
- Name
- Ground: Light or Dark
- Brand color
- Automatic derived palette or manual colors
- Font pair
- Corner/radius treatment
- Density / visual air
- Mood
- Live preview
- Advanced generated CSS
Sizing controls
- Spacing: tight, normal, generous
- Container: narrow, default, wide
- Radius: square, soft, round, pill
- Border: hairline, normal, heavy
- Shadow: none, soft, deep
Motion directions
- Match the system
- Calm editorial
- Cinematic
- Playful
- Warm craft
- Precise
- Brutal
- Serif poise
- Paper cut
- None
- Fine bands including Quick, Measured, and Slow
Storage behavior
- Brain-backed cards say From your Brain.
- Project-local systems remain in that project.
- A library selection adopts CSS into the project instead of depending on a remote preview.
- Save and Use for project remain explicit decisions.
Tips
- Judge a system with real page and component specimens, not swatches alone.
- Treat sizing and motion as families of decisions; mixing extremes usually creates visual incoherence.
Limitations and important notes
- Hard-coded page styles may not conform automatically.
- A local system is not automatically available in every workspace.
- Motion guidance cannot retrofit every arbitrary script.
Troubleshooting
Selecting a system did not change the project.
Selection previews it. Choose Use for project to make it active.
A saved system is missing elsewhere.
Check its storage label. Project-local systems stay with the project; use a supported Brain save for workspace reuse.
I chose motion before choosing a system.
Select or create the intended system; the pending motion choice is then attached to it.