Three complete starting points
These are the same complete presets available in the editor. The values below are resolved from each validated preset at build time; they are not a separate set of editorial design tokens.
Neutral
Calm, balanced defaults for general application work.
A balanced starting point for general product work when the team needs a calm visual baseline.
- Default-theme primary
- #2563EB
- Medium radius
- 8px
- Control height
- 40px
- Content density
- comfortable
What changes
It keeps the default balanced spacing, 8px medium radius, 40px controls, and a #2563EB light primary color.
How to adapt it
Start with Neutral when no strong brand direction exists, then adjust identity, color tokens, and component choices for the product before exporting a new file.
Limitations
Neutral is a complete starting configuration, not a claim that every general application should look the same. Review both themes and the generated guidance before handoff.
Compact
Tighter spacing and controls for information-dense work.
An information-dense workspace where tighter controls and spacing help people scan more content.
- Default-theme primary
- #2563EB
- Medium radius
- 4px
- Control height
- 36px
- Content density
- compact
What changes
It reduces the medium radius to 4px, sets compact density, and uses 36px controls while retaining the balanced primary color.
How to adapt it
Use Compact for dense workflows, then verify that its tighter spacing and 36px controls still suit the people and tasks in the product.
Limitations
Compact improves information density but does not replace usability review. Change the configuration when the condensed rhythm or control size is unsuitable.
Expressive
A larger, more rounded purple-accented visual system.
A brand-forward application that benefits from a larger scale, rounded geometry, and a purple accent.
- Default-theme primary
- #7C3AED
- Medium radius
- 12px
- Control height
- 48px
- Content density
- comfortable
What changes
It uses a #7C3AED light primary color, 12px medium radius, 48px controls, and more spacious visual foundations.
How to adapt it
Use Expressive when a larger, more rounded direction fits the product, then tune the purple accent, scale, and component defaults to the actual brand.
Limitations
Expressive is not a universal brand treatment. The preset should be reviewed in both themes and changed when the visual direction conflicts with product requirements.
Adapt a preset in the editor
Choose a preset, confirm the replacement, then change any validated parameter that does not fit the product. Review the preview in Light and Dark before you export. The downloads above are complete public starting points, not user projects; use the JSON backup to continue editing a selected example.