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

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

• 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

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.

Component color roles

The base palette remains useful for page-level composition. Components also expose role tokens so a product can recolor controls without targeting internal selectors.

Token	Default alias	Purpose
--frasto-control-bg	--frasto-surface	resting control background
--frasto-control-fg	--frasto-ink	primary control text and icons
--frasto-control-fg-muted	--frasto-ink-muted	unselected or secondary control text
--frasto-control-border	--frasto-border-strong	resting interactive boundary
--frasto-control-hover-bg	--frasto-surface-subtle	hover background
--frasto-control-hover-border	--frasto-ink	hover boundary
--frasto-control-selected-bg	--frasto-ink	checked or selected fill and indicator
--frasto-control-selected-fg	--frasto-bg	content placed on a selected fill
--frasto-control-disabled-bg	--frasto-surface-subtle	unavailable control background
--frasto-control-disabled-fg	--frasto-ink-soft	unavailable control content
--frasto-overlay-backdrop	rgb(17 17 17 / 48%)	dialog and drawer backdrop

Override the smallest role that expresses the design change. For example, changing --frasto-control-selected-bg customizes selected tabs, checkboxes, and radios as one coherent interaction family.

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

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.