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

Feedback

Alert

Inline banner in the four semantic tones; risk messages are always red.

.alert · .alert--info · .alert--success · .alert--warning · .alert--danger

Web Mobile 375px

Scheduled maintenance window: Sunday 02:00–04:00 SGT.

Settlement file processed.

Certificate expires in 14 days.

Reconciliation breach, review required.

Tones

<div class="grid" style="gap:var(--space-3)">
  <div class="alert alert--info">Scheduled maintenance window: Sunday 02:00–04:00 SGT.</div>
  <div class="alert alert--success">Settlement file processed.</div>
  <div class="alert alert--warning">Certificate expires in 14 days.</div>
  <div class="alert alert--danger">Reconciliation breach, review required.</div>
</div>

Usage

Any textual risk, alert, or warning message is red (--danger) so risks read instantly, amber is for at-risk metrics, not alert messages.
Tints and text colours are role tokens; they re-tune in dark mode automatically.