Variables, utility classes, examples, and token records are package-owned.

Foundations

Foundations own values, shared schemas, reset-level utilities, and raw design tokens. They do not render product UI.
12 registered
Typography
Typographic rolesDisplay / sans / mono
Concretedisplayeditorial display
Research noteh2section hierarchy
Dense product copy stays legible at interface scale.bodydefault UI copy
Run auditlabelcontrols and metadata
catalog.render("default")monocode and traces
DisplayFraunces

Two families, one voice.

Plus Jakarta Sans carries the interface. Fraunces is reserved for display moments, chapter plates, and pull quotes.

Foundation specimens

Curated specimens are rendered from package-owned foundation examples, so the docs page stays a consumer instead of duplicating token truth.
Typography
Typographic rolesDisplay / sans / mono
Concretedisplayeditorial display
Research noteh2section hierarchy
Dense product copy stays legible at interface scale.bodydefault UI copy
Run auditlabelcontrols and metadata
catalog.render("default")monocode and traces
Colors
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
Spacing
Spacing scale4px base increments
space-14
space-28
space-312
space-416
space-520
space-624
space-832
space-1040
space-1248
space-1664
Radii
Corner scale0 / 4 / 6 / 10 / 14 / 20 / pill
radius-00
radius-24px
radius-36px
radius-410px
radius-514px
radius-620px
radius-pill9999px
Elevation
Surface separationFive elevation steps
Base planeborder onlyhairline
Raised tileresting cardshadow-1
Popoveranchored layershadow-2
Overlaymodal surfaceshadow-3
Lifted shellrare emphasisshadow-4
Motion
Motion vocabulary120ms / 180ms / ease
duration-fast120ms
duration180ms
easecubic-bezier(0.2, 0, 0, 1)
Textures
Texture tokensLattice / dots / lines / field / perspective / depth
latticediagram coordinates
dotssoft sample fields
linesreading and rows
fieldpage atmospheres
perspectivelayered systems
depthperspective grounds
Iconography
Iconography rolesRoles / aliases / stroke
actioncommand

Command and toolbar actions.

navigationnavigation

Open, close, and directional navigation.

statusstatus

Validation, completion, and lifecycle punctuation.

datadata

Data legends, trend marks, and generated-output glyphs.

brandbrand

Rubric and Concrete identity marks.

editorialconcept

Educational and editorial concept glyphs.

State
State vocabularyTones / statuses / hierarchy / density
tonesignals

The three high-signal Concrete channels used for status and intent.

terminalultraerror
tonedata-tones

Shared data and diagram tone language for generated output and dense tables.

inkmutedskyterminalultraerror
intentcommand-intents

Command and token intent language for compact interactive lists.

defaulterrorskyterminalultra
statusfield-status

Field-level validation state used by forms, settings rows, and summaries.

defaulterrorsuccess
statusupload-status

Lifecycle state for uploaded file and media rows.

erroridlesuccessuploading
statusdata-component-state

Data-rendering state shared by tables, charts, metrics, and generated panels.

readyloadingemptyerror
statusmessage-status

Agent message stream state shared by transcript, reasoning, and tool-call surfaces.

completeerrorpendingstreaming
statustool-call-status

Tool execution lifecycle state used by tool-call displays.

errorqueuedrunningsuccess
hierarchyhierarchy

Interface hierarchy language for command priority without visual override props.

primarysecondarytertiaryghost
densitydensity

Composition density language for compact product and lower-density reading modes.

compactcomfortableeditorial
Accessibility
Accessibility foundationUtilities / constraints
visually-hiddenvisually-hidden

Utility class for content that should stay available to assistive technology.

.concrete-visually-hidden
focusfocus-target

Shared focus target geometry and ring language consumed by primitives.

.concrete-focus-target
hit-targethit-target

Interactive controls must preserve a scannable touch/click target.

foundation sizing tokens
reduced-motionreduced-motion

Motion tokens and primitives must respect reduced-motion behavior.

prefers-reduced-motion
forced-colorsforced-colors

Color and border choices should remain visible in forced-colors environments.

system color compatible

Registry

Each foundation page shows the live item definition, token role, states, props, and render routes.

Colors

Color tokens for ink, surfaces, accents, and the three Concrete signals.
foundation
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
Open

Typography

Type families, scale, line height, and tracking for Concrete reading and product UI.
typography
Typographic rolesDisplay / sans / mono
Concretedisplayeditorial display
Research noteh2section hierarchy
Dense product copy stays legible at interface scale.bodydefault UI copy
Run auditlabelcontrols and metadata
catalog.render("default")monocode and traces
Open

Spacing

Compact spacing steps for dense but legible composition.
layout
Spacing scale4px base increments
space-14
space-28
space-312
space-416
space-520
space-624
space-832
space-1040
space-1248
space-1664
Open

Sizing

Dimension tokens for controls, icons, tracks, media, viewports, and measures.
foundation
Sizing rolesControls / tracks / measures
controlfield-controlvar(--concrete-size-field-control)
controlcontrol-compactvar(--concrete-size-control-compact)
controlcontrolvar(--concrete-size-control)
controlcontrol-comfortablevar(--concrete-size-control-comfortable)
controlcontrol-leadingvar(--concrete-size-control-leading)
controlcontrol-actionvar(--concrete-size-control-action)
controlbutton-mediumvar(--concrete-size-button-medium)
controlcontrol-strip-actionvar(--concrete-size-control-strip-action)
measuresurface-padding-compactvar(--concrete-size-surface-padding-compact)
measuresurface-paddingvar(--concrete-size-surface-padding)
measuresurface-padding-editorialvar(--concrete-size-surface-padding-editorial)
measurefeedback-paddingvar(--concrete-size-feedback-padding)
measuredata-surface-paddingvar(--concrete-size-data-surface-padding)
measuredata-surface-padding-compactvar(--concrete-size-data-surface-padding-compact)
measurelayout-grid-minvar(--concrete-size-layout-grid-min)
measurelayout-sidebarvar(--concrete-measure-layout-sidebar)
measurecontainer-contentvar(--concrete-measure-container-content)
measurecontainer-widevar(--concrete-measure-container-wide)
viewportscroll-area-mediumvar(--concrete-size-scroll-area-medium)
iconicon-mediumvar(--concrete-size-icon-medium)
iconspinner-compactvar(--concrete-size-spinner-compact)
iconspinner-comfortablevar(--concrete-size-spinner-comfortable)
iconspinner-editorialvar(--concrete-size-spinner-editorial)
avataravatar-mediumvar(--concrete-size-avatar-medium)
trackprogress-trackvar(--concrete-size-progress-track)
trackprogress-ring-compactvar(--concrete-size-progress-ring-compact)
trackprogress-ringvar(--concrete-size-progress-ring)
trackprogress-ring-editorialvar(--concrete-size-progress-ring-editorial)
trackslider-hitvar(--concrete-size-slider-hit)
measuredialog-surfacevar(--concrete-measure-dialog-surface)
measuretrace-panelvar(--concrete-measure-trace-panel)
viewportdiagramvar(--concrete-size-diagram-height)
datachart-heightvar(--concrete-size-chart-height)
mediathumbnailvar(--concrete-size-media-thumb)
mediamedia-fieldvar(--concrete-measure-media-field)
Open

Layout

Composition recipes for grids, layers, offsets, responsive behavior, and templates.
layout
Layout tokensTemplates / layers / offsets
templatefield-rowvar(--concrete-template-field-row)
templatelayout-splitvar(--concrete-template-layout-split)
templatelayout-split-evenvar(--concrete-template-layout-split-even)
templatelayout-split-sidebarvar(--concrete-template-layout-split-sidebar)
templatepicker-buttonvar(--concrete-template-picker-button)
templatecalendar-gridvar(--concrete-template-calendar-days)
templatedistribution-rowvar(--concrete-template-distribution-row)
templateheatmap-gridvar(--concrete-template-heatmap-grid)
gridtrack-fillvar(--concrete-grid-track-fill)
gridtrack-sidebarvar(--concrete-grid-track-sidebar)
gridcolumn-fullvar(--concrete-grid-column-full)
layeroverlay-tipvar(--concrete-z-overlay-tip)
layeroverlayvar(--concrete-z-overlay)
offsetoverlay-tip-gapvar(--concrete-offset-overlay-tip-gap)
responsivequery-control-wrapvar(--concrete-query-control-flex-wrap)
utilityflex-fillvar(--concrete-flex-fill)
Open

Radii

Tight corner tokens for calm product surfaces.
foundation
Corner scale0 / 4 / 6 / 10 / 14 / 20 / pill
radius-00
radius-24px
radius-36px
radius-410px
radius-514px
radius-620px
radius-pill9999px
Open

Elevation

Restrained shadows and borders for Concrete surfaces.
foundation
Surface separationFive elevation steps
Base planeborder onlyhairline
Raised tileresting cardshadow-1
Popoveranchored layershadow-2
Overlaymodal surfaceshadow-3
Lifted shellrare emphasisshadow-4
Open

Motion

Short motion tokens for focus, hover, disclosure, and loading feedback.
foundation
Motion vocabulary120ms / 180ms / ease
duration-fast120ms
duration180ms
easecubic-bezier(0.2, 0, 0, 1)
Open

Textures

Quiet texture grounds for diagrams, editorial frames, and educational examples.
foundation
Texture tokensLattice / dots / lines / field / perspective / depth
latticediagram coordinates
dotssoft sample fields
linesreading and rows
fieldpage atmospheres
perspectivelayered systems
depthperspective grounds
Open

Iconography

Icon roles, alias policy, stroke policy, and semantic glyph categories.
foundation
Iconography rolesRoles / aliases / stroke
actioncommand

Command and toolbar actions.

navigationnavigation

Open, close, and directional navigation.

statusstatus

Validation, completion, and lifecycle punctuation.

datadata

Data legends, trend marks, and generated-output glyphs.

brandbrand

Rubric and Concrete identity marks.

editorialconcept

Educational and editorial concept glyphs.

Open

State

Shared semantic state schemas for tones, statuses, hierarchy, and density.
foundation
State vocabularyTones / statuses / hierarchy / density
tonesignals

The three high-signal Concrete channels used for status and intent.

terminalultraerror
tonedata-tones

Shared data and diagram tone language for generated output and dense tables.

inkmutedskyterminalultraerror
intentcommand-intents

Command and token intent language for compact interactive lists.

defaulterrorskyterminalultra
statusfield-status

Field-level validation state used by forms, settings rows, and summaries.

defaulterrorsuccess
statusupload-status

Lifecycle state for uploaded file and media rows.

erroridlesuccessuploading
statusdata-component-state

Data-rendering state shared by tables, charts, metrics, and generated panels.

readyloadingemptyerror
statusmessage-status

Agent message stream state shared by transcript, reasoning, and tool-call surfaces.

completeerrorpendingstreaming
statustool-call-status

Tool execution lifecycle state used by tool-call displays.

errorqueuedrunningsuccess
hierarchyhierarchy

Interface hierarchy language for command priority without visual override props.

primarysecondarytertiaryghost
densitydensity

Composition density language for compact product and lower-density reading modes.

compactcomfortableeditorial
Open

Accessibility

Reset-level accessibility utilities and interaction constraints.
foundation
Accessibility foundationUtilities / constraints
visually-hiddenvisually-hidden

Utility class for content that should stay available to assistive technology.

.concrete-visually-hidden
focusfocus-target

Shared focus target geometry and ring language consumed by primitives.

.concrete-focus-target
hit-targethit-target

Interactive controls must preserve a scannable touch/click target.

foundation sizing tokens
reduced-motionreduced-motion

Motion tokens and primitives must respect reduced-motion behavior.

prefers-reduced-motion
forced-colorsforced-colors

Color and border choices should remain visible in forced-colors environments.

system color compatible
Open
registry backed