Color Palette

A carefully curated palette optimized for accessibility, contrast, and brand consistency. Click any swatch to copy the hex value.

Typography Scale

Modular type scale using a 1.25 ratio. Headings use `font-weight: 600`, body text uses `400`. Line heights adjust per scale.

Display Heading

4xl / 2.5rem / 800

Section Heading

3xl / 2rem / 700

Card / Block Title

2xl / 1.5rem / 600

Large Body Text / Subtitles

lg / 1.125rem / 400

Standard Body Copy

base / 1rem / 400

Small / Captions / Metadata

sm / 0.875rem / 400

Spacing & Grid

All spacing follows an 8px base grid. Use variables instead of hardcoded values for consistency.

xs (12px)

sm (24px)

md (48px)

lg (72px)

xl (96px)

2xl (120px)

3xl (144px)

4xl (168px)

Buttons

Primary actions use solid fills. Secondary actions use outlines. Ghost buttons are for low-emphasis actions.

Variants

<button class="ds-btn ds-btn-primary">Primary</button>
<button class="ds-btn ds-btn-outline">Outline</button>

Sizes

Form Inputs

Accessible, focus-trapped inputs with consistent padding and border states.

Text Fields

<input type="text" class="ds-input" placeholder="Default input">

Cards & Badges

Surface containers for content grouping. Badges indicate status or category.

Card Layout

Project Title

Brief description of the project or component. Follows standard body text scale.

Active Verified

Iconography

System icons should be 24×24px with 1.5px stroke width. Click to copy SVG reference name.

📁folder

⚙️settings

🔍search

✉️mail

👤user

📅calendar

🔔bell

📊chart

Usage Guidelines

Rules to maintain consistency across all touchpoints.

Always use design tokens

Never hardcode colors, spacing, or typography values. Reference `--ds-*` variables to ensure theme compatibility and easy updates.
Maintain contrast ratios

Text must meet WCAG AA standards (4.5:1 for normal text, 3:1 for large text). Use the provided neutral palette for body copy.
Component hierarchy

Limit primary buttons to one per section. Use outline/ghost variants for secondary or tertiary actions to avoid visual noise.
Responsive behavior

All components must gracefully adapt to viewport changes. Use relative units (`rem`, `%`) and CSS Grid/Flexbox for layout shifts.