Components

Cards

Cards group related content in a bounded container. Use elevation (shadow) to signal interactivity — static information cards use a border, not a shadow.

Basic card

Card title

Supporting text that describes what this card is about. Keep it concise — two lines maximum before truncating or expanding. 

<div class="card">
  <h3 class="card-title">Card title</h3>
  <p class="card-body">Supporting text.</p>
</div>

Card with header and footer

Design tokens

165 tokens across 5 categories

Color primitives, semantic aliases, typography, spacing, and motion — all versioned and synced with Figma. 

<div class="card card--structured">
  <div class="card-header">...</div>
  <div class="card-content">...</div>
  <div class="card-footer">...</div>
</div>

Interactive card (hover elevation)

Quick start

Get the design system running in under 10 minutes.

Templates

Browse AI-ready templates for every content type.

Token API

All 165 tokens as CSS custom properties, JSON, and more.

 
<!-- Use an <a> for linked cards; <button> for action cards -->
<a href="/path" class="card card--interactive">
  <h3 class="card-title">...</h3>
  <p class="card-body">...</p>
</a>

Elevation guidance

Flat border: 1px solid var(--border-subtle) Static information. No hover state.
Raised box-shadow: var(--shadow-sm) Interactive on hover. Signals clickability.
Floating box-shadow: var(--shadow-md) Popovers, dropdowns, floating panels.