Color
The default palette is intentionally restrained. A reusable design system should communicate hierarchy and status without turning every interface into the same blue dashboard.
Light theme
Section titled “Light theme”| Token | Value | Purpose |
|---|---|---|
--frasto-bg |
#f4f1ea |
page background |
--frasto-surface |
#ffffff |
primary contained surface |
--frasto-surface-subtle |
#ece9e2 |
subtle region / inline code / quiet state |
--frasto-ink |
#111111 |
primary text / primary action |
--frasto-ink-muted |
#66645f |
secondary text |
--frasto-ink-soft |
#8a8882 |
tertiary metadata |
--frasto-border |
#d7d3ca |
default divider/border |
--frasto-border-strong |
#b9b5ac |
selected/strong boundary |
--frasto-positive |
#166534 |
positive state |
--frasto-warning |
#92400e |
warning state |
--frasto-danger |
#991b1b |
destructive/error state |
--frasto-info |
#315b70 |
informational state |
Usage rules
Section titled “Usage rules”- Near-black is the default primary action, not blue.
- Success, warning, and danger are functional colors.
- Red is not a general brand accent.
- Selection should use more than color alone.
- Borders should be visible enough to communicate structure but quiet enough not to dominate the interface.
Functional color
Section titled “Functional color”Functional color communicates an application state. Pair it with text, an icon, or another visible cue.
| State | Use | Do not use for |
|---|---|---|
| Positive | success, completed, healthy | decoration or primary navigation |
| Warning | attention, pending risk | neutral informational metadata |
| Danger | error, destructive action, failure | general emphasis |
Information states may use a product-defined token later. Frasto does not make bright blue the default brand action merely because it is conventional.
Contrast and state
Section titled “Contrast and state”- Test text, icons, borders, and focus indicators against their actual surface.
- Disabled content may be quieter but must remain understandable.
- Hover must not be the only way to discover an interactive element.
- Selected and error states need a non-color indicator.
Dark theme
Section titled “Dark theme”Dark mode keeps a warm neutral character. It should feel like the same product under different luminance, not a separate theme identity.
| Token | Value | Purpose |
|---|---|---|
--frasto-bg |
#11110f |
page background |
--frasto-surface |
#181816 |
primary contained surface |
--frasto-surface-subtle |
#22221f |
subtle region / quiet state |
--frasto-ink |
#f4f1ea |
primary text / primary action |
--frasto-ink-muted |
#b8b4aa |
secondary text |
--frasto-ink-soft |
#8f8b83 |
tertiary metadata |
--frasto-border |
#34332f |
default divider/border |
--frasto-border-strong |
#504e48 |
selected/strong boundary |
--frasto-positive |
#86b991 |
positive state |
--frasto-warning |
#d2a46f |
warning state |
--frasto-danger |
#d98a86 |
destructive/error state |
--frasto-info |
#8ab4c7 |
informational state |
The canonical token values live in packages/ui/src/styles/tokens.css.