# SAHI Base — Design System

Monochrome-first design system for SAHI on the web. Capital Purple is an accent only. Display type: SAHI Season; body type: SAHI Sans.

## Logo
SAHI Stride mark — an S curve, the letter S, steps (growth) and the Power of 3. Use the vector wherever possible; keep clear space, respect minimum size, and follow the construction (66deg) and co-branding rules.

## Colors
Core tokens:
- **SAHI Capital Purple** #66033C — accent only (loaders, radio, strokes)
- **Capital Black** #0F0F0F — text, dark background, solid CTA
- **Capital White** #FFFFFF — primary background, inverse CTA
- **Capital Spring Wood** #F9F6F1 — soft warm surface

Scales:
- **Brand** (magenta -> deep purple): #FEF1FA, #FDE6F7, #FECCF1, #FEA3E5, #FC6AD0, #E61C9A, #C80E7D, #A50F66, #8A1157, #66033C, #3D0920, #15020B
- **Warm neutral** (sand -> espresso): #F9F6F1, #EDE5D8, #D9C9AE, #C5AA84, #B89367, #AC7C54, #976448, #835241, #694137, #573730, #301C18
- **Error** (red): #FDF3F3, #FCE5E4, #FAD0CE, #F6AEAB, #EE807B, #E35650, #C4342E, #AE2C27, #902824, #782724, #41100E
- **Success** (green): #EFFEF6, #DAFEEC, #B7FBD9, #7FF6BC, #40E897, #17D077, #0CAD60, #0E8A4F, #116A40, #105737, #02311D
- **Black** (neutral): #FAFAFA, #F5F5F5, #E6E6E6, #D3D3D3, #A3A3A3, #727272, #535353, #404040, #272727, #1A1A1A, #0F0F0F

## Typography
- Display: **SAHI Season** (Regular 400, Medium 500)
- Body: **SAHI Sans** (Light 300, Regular 400, Medium 500, SemiBold 600, Bold 700)

Type scale:
- Display large — 80px / 400 / SAHI Season
- Display — 60px / 400 / SAHI Season
- Heading 1 — 44px / 400 / SAHI Season
- Heading 2 — 32px / 500 / SAHI Season
- Heading 3 — 24px / 500 / SAHI Season
- Heading 4 — 20px / 600 / SAHI Sans
- Body large — 18px / 400 / SAHI Sans
- Body — 16px / 400 / SAHI Sans
- Small — 14px / 400 / SAHI Sans
- Caption — 12px / 500 / SAHI Sans
- Micro — 10px / 500 / SAHI Sans

## Materials
- Radii: **16px** recommended for cards, **8px** for smaller/inline surfaces, **100%** for pills
- Shadows: raised `0 2px 8px rgba(0,0,0,.08)`, overlay `0 16px 40px rgba(0,0,0,.14)`
- Surface types:
- `material-base` — Everyday resting cards. Radius 8px.
- `material-small` — Slightly raised content. Radius 8px.
- `material-medium` — Further raised content. Radius 16px.
- `material-large` — Elevated content. Radius 16px.
- `material-tooltip` — Floating tooltips. Radius 8px.
- `material-menu` — Dropdowns and popovers. Radius 16px.
- `material-modal` — Dialogs and sheets. Radius 16px.
- `material-fullscreen` — Full-screen takeovers. Radius 0.

## Grid
- Spacing: 4px base — use 4px or a multiple of 4px for all spacing, sizing and placement.
- Mobile (360 x 780): 4 columns, stretch, margin 16px, gutter 16px.
- Desktop (1440 x 804): 12 columns, stretch, margin 120px, gutter 24px.

## Icons
Phosphor Icons — Regular (outline) weight, 1,512 icons, rendered in Capital Black.

## Loader
Lottie spinner (300x300 vector, 2.35s loop @ 60fps). Set the color via `data-lottie-color`; default is Accent. The stage flips its background for contrast (dark for white, light for black).
- **Accent** (default, theme-aware): #A50F66 on light, #FC6AD0 on dark
- **Capital Black** #0F0F0F
- **Capital White** #FFFFFF — for dark surfaces/overlays