Inspect a design system as rendered work, edit its parameters, save or apply it to the project, and verify pages against the resulting colors, typography, spacing, components, and themes.
Where: Designer → Add page → Design system; top-bar Design system chip → Edit; or chat + menu → Design system.
Key ideas
- A hosted gallery, not a settings sidebar: The Design system page replaces the canvas with eighteen full-width sections. Real specimens show what the system makes, token sections show resolved values, and Parameters edits the brief that repaints the gallery.
- Direction and system are complementary: Art direction owns typography behavior, layout, imagery, shape, and motion; the design system supplies reusable tokens/components and especially project color. Both are visible in the top bar and both reach the assistant.
- Saving and using are distinct: Save preserves the system in Yours. Use for project pins it as the project’s active system. Export CSS delivers the resolved stylesheet. Editing a saved system without applying it does not silently restyle every page.
Steps
- Open the Design system page from Add page or the top-bar chip. If none exists, choose a prebuilt system, one under Yours, or create/derive one from a supported reference.
- Review Templates, Deck, and Landing first to judge the system as whole compositions.
- Inspect Components, Buttons & tags, Cards, Dialog, Forms, Navigation, and Table at their real usage scale.
- Review Foundations, Color, Icons, Imagery, Spacing & elevation, Typography, and Theme for resolved tokens and treatment.
- Open Parameters last, adjust the brief, and watch the specimens repaint. Check that changes improve the system across pages—not just one swatch.
- Save when it should be reusable, choose Use for project when it should become active, or Export CSS when you need the resolved stylesheet outside Designer.
- Run check_design_system on representative authored pages and fix hard-coded colors, foreign fonts, missing button sizing, or palette drift.
The eighteen sections
- Examples: Templates, Deck, Landing
- Components: Components, Buttons & tags, Cards, Dialog, Forms, Navigation, Table
- Foundations: Foundations, Color, Icons, Imagery, Spacing & elevation, Typography, Theme
- System: Parameters
Ways to choose/create
- Prebuilt systems
- Yours / previously saved systems
- Connected system supplied by the host/Flowgen
- Create or derive from site/image/reference where offered
- A Brand Brain record may offer its stylesheet, but accepting it remains explicit
Toolbar actions
- Rename the system
- Save
- Use for project / show In use
- Export CSS
- Navigate instantly between the eighteen sections
Unified library and expanded system knobs
The current system chooser merges owned, project-local, starter, and older systems into one searchable preview list. Type, Sizing, Layout, Imagery, Motion, and prohibitions are first-class parameter groups; a pending motion choice waits for system selection rather than being lost.
- Sizing: spacing, container, radius, border, shadow
- Motion: named directions, fine timing/easing, or None
- Cards identify Brain versus project storage
- Save and Use for project are separate actions
Tips
- Judge the Landing and Deck examples before tuning individual token values; the system exists to produce coherent work.
- Use design-system variables/classes in pages so future system changes propagate instead of leaving hard-coded exceptions.
Limitations and important notes
- The hosted page does not expose the normal page canvas, device selector, or motion timeline.
- Applying a system guides and repaints supported authored structures; arbitrary imported CSS may retain hard-coded values.
- Export CSS does not publish or deploy a site.
Troubleshooting
I edited Parameters but a page still uses old colors.
Confirm the system is In use for the project and that the page uses system tokens rather than hard-coded declarations.
The top-bar chip opens a picker instead of the system page.
Choose or create the system, then use Edit this design system; a host unable to persist pages cannot open a durable hosted page.