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

Container

The shared centered content column every app aligns to.

.container · .container--narrow

Web Mobile 375px

One centered column, --container = 1200px, side padding --gutter.

Content column

<div class="container" style="border:1px dashed var(--border-strong);padding-block:var(--space-4)">
  <p class="muted" style="margin:0">One centered column, <code>--container</code> = 1200px, side padding <code>--gutter</code>.</p>
</div>

760px for long-form reading.

Narrow (reading) column

<div class="container container--narrow" style="border:1px dashed var(--border-strong);padding-block:var(--space-4)">
  <p class="muted" style="margin:0">760px for long-form reading.</p>
</div>

Usage

Header, nav, and main share this one column, the logo and menu never float to the window edge.
Page ground is always white --bg; never a tinted page ground.