design kit v0.9.0

Menu

General

Button Badge Pills Avatar Brand lockup

Layout

Container Grid & Row Surface & text utilities App shell Page header

Data Display

Card Table Charts Calendar Stats Bullets Leaders Logo wall Collapse & Disclosure Timeline Value chain Descriptions

Feedback

Alert Progress Modal Slide-over Skeleton Empty state

Forms

Field & Input Dropdown Lead form & CTA row Date picker Filter bar

Navigation

Nav Side navigation Top navigation App switcher User menu Stepper Tabs Breadcrumb Pagination

Templates

Sign-in page Signed-out page Settings layout

Theming

Browser tab Product themes

Layout

Surface & text utilities

Surface ground and secondary-text helpers that stay correct in dark mode.

.surface · .muted

Web Mobile 375px

Primary text on a surface.

Secondary text uses .muted, it re-tunes correctly in dark mode.

Surface and secondary text

<div class="surface" style="border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-4)">
  <p style="margin:0">Primary text on a surface.</p>
  <p class="muted" style="margin:0">Secondary text uses <code>.muted</code>, it re-tunes correctly in dark mode.</p>
</div>

Usage

Never pair a hardcoded dark text colour with a token surface, it turns dark-on-dark in dark mode. Use the role tokens (--text-secondary, --accent-text, --success-text…).
In dark mode, raised surfaces get lighter, not darker, the kit's --surface-raised handles it.

‹ Grid & Row App shell ›