Surfaces
Design tokens for backgrounds, text, and borders — the foundational layers of the Ontopix visual system.
Surface tokens define the visual layering system. They control backgrounds, text colors, and borders across light and dark modes, driven from color_modes.yaml.
Background Tokens
Background surfaces create visual depth through layering. Each level provides a distinct contrast step.
bg-aside Special background tone for sidebars and possiblly some modals. Is very accented from default.
bg-default Default background. Soft and subtle, but there.
bg-muted Slight elevated, not capturing much attention.
bg-elevated Define clearly boundary from the surroundings and captures attention.
bg-accented Radical elevated. Use wisely.
bg-inverted The oposite of the normal background. Can't capture more attention.
| Token | Tailwind Class | Description |
|---|---|---|
--ui-bg-aside | bg-aside | Special background tone for sidebars and possiblly some modals. Is very accented from default. |
--ui-bg | bg-default | Default background. Soft and subtle, but there. |
--ui-bg-muted | bg-muted | Slight elevated, not capturing much attention. |
--ui-bg-elevated | bg-elevated | Define clearly boundary from the surroundings and captures attention. |
--ui-bg-accented | bg-accented | Radical elevated. Use wisely. |
--ui-bg-inverted | bg-inverted | The oposite of the normal background. Can't capture more attention. |
Text Tokens
Text tokens ensure readable contrast across all surface levels.
text-dimmed Barely readable. Use to signal disabled or unimportant text.
text-muted Readable, but way less prominent than default text.
text-toned Second tier text tone, after normal text.
text-default Normal text. Use by default.
text-highlighted Slightly prominent than default. Should be use with bolder fonts.
text-inverted To use only with inverted background. This text have no contrast with normal background.
| Token | Tailwind Class | Description |
|---|---|---|
--ui-text-dimmed | text-dimmed | Barely readable. Use to signal disabled or unimportant text. |
--ui-text-muted | text-muted | Readable, but way less prominent than default text. |
--ui-text-toned | text-toned | Second tier text tone, after normal text. |
--ui-text | text-default | Normal text. Use by default. |
--ui-text-highlighted | text-highlighted | Slightly prominent than default. Should be use with bolder fonts. |
--ui-text-inverted | text-inverted | To use only with inverted background. This text have no contrast with normal background. |
Border Tokens
Border tokens provide visual separation between content areas.
border-default Default border. Subtle. Set the reference for the rest. Use commonly when needing border.
border-muted Like the default or very slightly pronounced.
border-accented This border is very accented. Use wisely.
border-inverted Radical border tone, inverted from the background. Use to catch all attention.
| Token | Tailwind Class | Description |
|---|---|---|
--ui-border | border-default | Default border. Subtle. Set the reference for the rest. Use commonly when needing border. |
--ui-border-muted | border-muted | Like the default or very slightly pronounced. |
--ui-border-accented | border-accented | This border is very accented. Use wisely. |
--ui-border-inverted | border-inverted | Radical border tone, inverted from the background. Use to catch all attention. |
Layered Surfaces
Surfaces nest to create visual depth hierarchy. Each layer adds subtle contrast.
bg-default
bg-muted
bg-elevated
bg-accented
Cards on Surfaces
Cards adapt their appearance when placed on different background surfaces.
bg-default
Outline
Card on default surface.
Soft
Card on default surface.
Subtle
Card on default surface.
bg-muted
Outline
Card on muted surface.
Soft
Card on muted surface.
Subtle
Card on muted surface.
Inverted Surface
Inverted surfaces provide maximum contrast for hero sections, CTAs, or footer areas.
Inverted Hero Section
This surface uses bg-inverted and text-inverted tokens. Useful for hero sections, CTAs, or footer areas that need maximum contrast.