Foundation

Colors

Color tokens for ink, surfaces, accents, and the three Concrete signals.

Use tokens directly through Concrete CSS variables; do not create component-local palettes.
foundation
DOM renderImage render
ColorsDefault
Concrete color tokensCore palette
Surfaces
canvasF7F8FAsurfaceFFFFFFraisedFCFCFDsunkenF1F2F5mistEAECF0
Ink ramp
ink-90A0B0Fink-816171Cink-722242Bink-63A3C45ink-55A5D68ink-4878A95ink-3B4B7C0ink-2D7D9E0ink-1E8EAEE
Sky accent
sky-1EEF3FBsky-2D9E6F8sky-3A9C6EFsky-44E8BDEsky1F6FD4sky-strong0F4E9E
Signals
terminal16C46Aultra6B5BFFerrorF03A3A

Playground

Foundation examples are token specimens. The route stays registry-led so every foundation can be rendered, linked, and screenshotted through the same catalog surface.

Loading playground

Rendered matrix

Every state maps to the same foundation render route through the state query param.

Default

Surface, ink, accent, and signal tokens in one compact color system.
Concrete color tokensCore palette
Surfaces
canvasF7F8FAsurfaceFFFFFFraisedFCFCFDsunkenF1F2F5mistEAECF0
Ink ramp
ink-90A0B0Fink-816171Cink-722242Bink-63A3C45ink-55A5D68ink-4878A95ink-3B4B7C0ink-2D7D9E0ink-1E8EAEE
Sky accent
sky-1EEF3FBsky-2D9E6F8sky-3A9C6EFsky-44E8BDEsky1F6FD4sky-strong0F4E9E
Signals
terminal16C46Aultra6B5BFFerrorF03A3A
Render state

Signals

Terminal, ultra, and error remain the only semantic signal colors.
Three signal channelsSemantic color
terminalrunning and successful state
ultrafeatured and elevated state
errorcritical and destructive state
Render state

Data

Chart and generated-output colors inherit the same restrained palette.
Data color orderGenerated UI
data-1primary
data-2accent
data-3success
data-4muted
data-5featured
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription