# Stackless — Brand Specification

Extracted from the supplied brand identity sheet (`mqjbdjo3...jpg`) via pixel sampling.

## Palette (extracted hex from image)

| Token | Hex | Approx OKLch | Role |
|---|---|---|---|
| `--bg` | `#F4F2EC` | `oklch(96% 0.008 95)` | Paper / page |
| `--surface` | `#FFFFFF` | `oklch(100% 0 0)` | Cards / panels |
| `--ink` | `#212A40` | `oklch(28% 0.04 265)` | Primary navy text |
| `--ink-2` | `#1C2439` | `oklch(24% 0.04 265)` | Deepest neutral |
| `--muted` | `#6E7387` | `oklch(56% 0.015 265)` | Secondary text |
| `--border` | `#E5E2D8` | `oklch(91% 0.012 95)` | Hairline dividers |
| `--accent` | `#1DB897` | `oklch(70% 0.13 175)` | Teal — primary brand |
| `--accent-2` | `#F76857` | `oklch(72% 0.16 28)` | Coral — CTA accent |

## Typography

- Display: **Inter Tight** at heavy weight (600/700) with `-0.02em` tracking, all lowercase
- Body: **Inter** at 400/500, normal tracking
- Mono: **JetBrains Mono** for numerals / metadata
- Headlines are short and tight; the wordmark itself is lowercase, so brand copy follows suit

## Posture

- Hairline borders (1px), no shadows except on dropdowns/modals
- Generous whitespace — the brand sheet itself breathes
- Teal as the dominant brand surface (section markers, code-like chips, key numbers)
- Coral is the *single* CTA color across the site — used at most twice per screen, always the click target
- One decisive flourish per screen (a display headline or a code-style label, never both)
- No gradients on backgrounds, no emoji icons, no left-border "card with accent stripe" — these break the brand's quiet confidence

## Layout grammar

- Section rhythm: alternating wide / tight
- Cards use 16–20px radius, no shadow
- Stat blocks use tabular monospaced numerals
- Buttons: filled coral (primary), outline teal (secondary), ghost (tertiary)