Schaad Advisors — UI Kit

Visual source of truth for design tokens and reusable components. Edit a token in shared/tokens.css or a class in shared/components.css — every page in the project picks it up.

Tokens · Colors

Palette

V1 token palette — synced from Figma node 18:413. Dark → light. Each chip is the source of truth — semantic aliases (--color-accent, --color-ink) point at these.

V1 token palette — curated (dark → light)

abyss0D3F5C
atlas-dk0D4F72
atlas116490
charcoal1E2A35
pewter6B7C8D
alpine9FBACD
borderD8E5ED
sky-paleE8F2F7
paperF4F6F8
whiteFFFFFF

Semantic aliases

--color-accent→--color-atlas
--color-accent-deep→--color-atlas-dk
--color-accent-soft→--color-sky-pale
--color-accent-mute→--color-alpine
--color-ink→--color-charcoal
--color-mute→--color-pewter
--color-divider→--color-border
Tokens · Typography

Type scale (6 steps)

Display 56 / 700 The quick brown fox.
H2 32 / 600 Section heading goes here.
H3 20 / 600 Sub-block heading
Body 16 / 400 Body copy is the default reading size — paragraphs, descriptions, supporting text.
Small 14 / 500 Small text for bullets, footnotes, secondary labels.
Caption 12 / 500 Caption · meta · timestamps
Mono 11 / 500 123,456,789 · TABULAR NUMERALS
Tokens · Spacing

4px scale

--space-1 (4)
--space-2 (8)
--space-3 (12)
--space-4 (16)
--space-5 (20)
--space-6 (24)
--space-8 (32)
--space-10 (40)
--space-12 (48)
--space-16 (64)
--space-20 (80)
Tokens · Radii

Corner radius

--radius-sm · 4
--radius-md · 8
--radius-lg · 12
--radius-xl · 14
--radius-2xl · 16
--radius-pill
Tokens · Shadow

Elevation

--shadow-island
--shadow-card
--shadow-accent
--shadow-chip
Component

Buttons · .btn

Component

Chips & tags · .chip

Success Info Warning Accent VERIFIED Live · 12m ago Eyebrow label
Component

Icon tiles · .icon-tile

Patterns

Button states · .btn--primary

Default
Hover
Active
Focus
Disabled
Patterns

Motion primitives

Pulse
scale 0.85 ↔ 1.15 · 2.4s · ease-in-out · loop
Fade in
opacity 0 → 1 · 2s · ease-out · loop
Scale + fade
scale 0.85 → 1 · 2s · --ease-back · loop
Slide up
translateY 12 → 0 · 2s · --ease-out · loop
Shimmer
loading skeleton · 1.6s · linear · loop