40 lines
1.8 KiB
Markdown
40 lines
1.8 KiB
Markdown
|
# 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)
|