# BPFmap.html — Design Tokens Audit
Date: 2026-05-12 · File: BPFmap.html (~34,771 lines, ~50 V-layer overrides V35x–V44x)
## Executive summary
- **Color sprawl is the #1 problem.** ~50+ distinct white-with-alpha values (every alpha step from 0.04 to 0.96 is in use, frequently with both `rgba(255,255,255,X)` and `rgba(255, 255, 255, X)` spelling variants). Plus ~12 navy/ink variants, ~10 coral/orange variants, ~6 amber/cream variants. A 12-token palette would cover ~85% of usage.
- **Typography is double-scaled.** A canonical even-integer scale (8/9/10/11/12/13/14/16/18/22) coexists with a parallel half-step scale (7.5/8.5/9.5/10.5/11.5/12.5/13.5) — 273 declarations use half-steps that almost certainly should snap to neighbors. Plus 6 stray decimal outliers (9.1, 9.2, 9.4, 9.6, 9.8, 10.2, 10.8, 12.25).
- **Border-radius is already coherent.** 999px pill (86×) + 50% circle (62×) + a clear 8/10/12/14/18/24px scale dominate. Only ~8 outliers (5/7/9/26/34px) — cheapest area to consolidate.
- **Z-index is chaotic and tier-collision-prone.** Values span 0 → 99999 with no implicit scale. The 8500/8590/8600 cluster (V402 saved-panel) sits next to 9500/9999 (toast/modal) with no semantic distance. 7 values live in the 600–900 band with unclear purpose.
- **Spacing has a clean micro-scale (2/4/6/8/10/12/14) but no macro-scale.** Padding shorthand is wildly heterogeneous (~80 distinct combinations) — the same "card-style" panel appears as `11px 14px`, `12px 14px`, `10px 14px 8px`, `7px 14px`, `6px 14px`. Snap target: 6/8/10/12/14/16/20 + a 4-step shorthand library.
- **Typography family is single-source** (Inter, system-ui, sans-serif — 68 declarations, 3 whitespace variants). Weights cluster cleanly around 300/400/500/600/700 (rare 100/200/800). Lowest-risk area.
---
## 1. Color palette
### 1.1 Canonical (proposed)
Build on the 3 root vars already at line 27–29 (`--bpf-cream`, `--bpf-coral`, `--bpf-navy`). Extend to ~14 tokens:
| Token | Value | Used as |
|--------------------|------------------------|----------------------------------------------------|
| `--bpf-ink-950` | `#03060e` / `rgb(4,6,14)` | Deepest sheet bg, modal scrim base |
| `--bpf-ink-900` | `#0b1020` / `#0b101a` | Sheet bg, deep panels (consolidates 4 near-dups) |
| `--bpf-ink-800` | `#0d1733` ✅ `--bpf-navy` | Primary navy, headers (already a token) |
| `--bpf-ink-700` | `#0f172a` / `#101828` | Card surfaces, secondary panels |
| `--bpf-ink-600` | `#25324a` | Borders, dividers on dark |
| `--bpf-cream` | `rgba(247,224,146,1)` ✅ | Brand cream (already a token) — used for highlights |
| `--bpf-coral` | `#b66a4c` ✅ | Brand coral (already a token) — CTAs |
| `--bpf-coral-deep` | `#c4391c` / `#c0271\*` | Pressed/hover coral |
| `--bpf-amber` | `#f59e0b` | Warning, "open now" badges |
| `--bpf-success` | `#22c55e` / `#4ade80` | Saved / success state |
| `--bpf-danger` | `#dc2626` / `#f87171` | Errors |
| `--bpf-muted-500` | `#6b7280` / `#6b7386` | Secondary text |
| `--bpf-muted-400` | `#9ca3af` | Tertiary text |
| `--bpf-blue-500` | `#5d77ca` / `#5a72c8` | Info/link accent |
Plus a **white-alpha ramp** (replaces ~50 ad-hoc values):
| Token | Value | Use case |
|--------------------|---------------------------|--------------------------------|
| `--bpf-w-05` | `rgba(255,255,255,0.05)` | Hairline borders |
| `--bpf-w-08` | `rgba(255,255,255,0.08)` | Subtle surface tint |
| `--bpf-w-12` | `rgba(255,255,255,0.12)` | Soft dividers |
| `--bpf-w-18` | `rgba(255,255,255,0.18)` | Inactive button bg |
| `--bpf-w-30` | `rgba(255,255,255,0.30)` | Disabled text |
| `--bpf-w-60` | `rgba(255,255,255,0.60)` | Secondary text on dark |
| `--bpf-w-80` | `rgba(255,255,255,0.80)` | Body text on dark |
| `--bpf-w-95` | `rgba(255,255,255,0.95)` | Primary text on dark |
### 1.2 Divergent values found in code
- **Whites with alpha — 50+ distinct values, 700+ total declarations.** Every alpha step from 0.04 → 0.96 is in use, often duplicated with comma-spacing variants (e.g. `rgba(255,255,255,0.08)` 25× AND `rgba(255, 255, 255, 0.08)` 20×). → Collapse to the 8-step ramp above.
- **Dark navy — 12 near-duplicate values:**
- `#0d1733` (15× — already token), `#0f172a` (8×), `#0b1221` (8×), `#101828` (7×), `#111827` (5×), `#0b1020` (3×), `#0b101a` (3×), `#25324a` (4×), `#173061` (3×), `rgba(4,6,14,1.0)` (15×), `rgba(8,10,22,1.0)` (5×), `rgb(5,7,16)` (6×). → Collapse to **3 tokens**: `--bpf-ink-950 / -800 / -700`.
- **Coral / orange / red — 10 variants:**
- `#b66a4c` (6× — token), `#c4391c` (2×), `#c0271\*`, `#ea580c` (2×), `#dc2626` (4×), `#b91c1c` (3×), `#f87171` (7×), plus `rgba(196,45,28,X)`, `rgba(224,109,72,X)`, `rgba(239,68,68,X)`, `rgba(192,39,24,X)`. → Distinguish brand-coral vs system-danger; consolidate to `--bpf-coral`, `--bpf-coral-deep`, `--bpf-danger`.
- **Greens — 4 variants** for the same "saved/success" semantic: `#22c55e`, `#4ade80`, `#16a34a`, `rgba(72,210,96,0.90)`, `rgba(74,222,128,X)`. → ONE `--bpf-success` + alpha ramp.
- **Greys — 6 variants:** `#6b7280` (8×), `#6b7386` (7×), `#9ca3af` (6×), `#778096` (4×), `#667085` (4×), `#374151` (3×). → Two tokens: `--bpf-muted-400`, `--bpf-muted-500`.
- **Cream / amber — 4 variants:** `--bpf-cream` (token) vs `rgba(247,224,146,X)` (varies), `rgba(245,229,163,0.68)`, `#a07020` (5×), `rgba(160,112,32,0.45)`. → Build cream-alpha ramp from `--bpf-cream` via `color-mix()` or fixed-alpha tokens.
- **Dark scrim — 6 variants:** `rgba(0,0,0,0.5/0.40/0.38/0.28/0.22/0.12)`, with comma-spaced duplicates. → 3-step black-alpha ramp `--bpf-k-30 / -50 / -70`.
---
## 2. Typography
### 2.1 Canonical scale (proposed)
| Token | Value | Used for |
|--------------|-------|--------------------------------|
| `--fs-2xs` | 9px | Micro labels, badges (61 uses) |
| `--fs-xs` | 10px | Helper text (82 uses) |
| `--fs-sm` | 11px | Meta text (63 uses) |
| `--fs-base` | 12px | Body small (41 uses) |
| `--fs-md` | 13px | Body (36 uses) |
| `--fs-lg` | 14px | Buttons, emphasized body (33 uses) |
| `--fs-xl` | 16px | Section headers (10 uses) |
| `--fs-2xl` | 18px | Sheet titles (13 uses) |
| `--fs-3xl` | 22px | Hero / welcome (12 uses) |
| `--fs-display` | 28–48px | Hero (rare, ≤3 each) |
### 2.2 Divergent values
- **Half-step parallel scale — 273 declarations** snap to: 7.5 (16×), 8.5 (26×), 9.5 (43×), 10.5 (37×), 11.5 (19×), 12.5 (7×), 13.5 (7×). These almost always live in V-overrides that "nudged" a value by 0.5px. → Snap up to the nearest integer in canonical scale.
- **Decimal outliers (single uses):** 9.1, 9.2 (3×), 9.4, 9.6 (2×), 9.8, 10.2, 10.8, 12.25, 14.5 (2×). → Remove, snap to integer.
- **Whitespace duplicates:** `font-size:10px`, `font-size: 10px`, `font-size: 10px` all appear; minifier-style spacing inconsistency.
- **Font family — 1 family, 3 whitespace spellings** (`Inter, system-ui, sans-serif` 44× + 15× + 9×). → Single `--font-sans` token.
- **Font weight — 5 canonical** (300/400/500/600/700) accounting for >95%. Outliers: 100 (7×), 200 (17×), 800 (16×). → Keep 300/400/500/600/700/800; drop 100 and 200 (probably typos for 300).
---
## 3. Spacing
### 3.1 Canonical scale (proposed)
| Token | Value | Use |
|-------------|-------|------------------------------|
| `--sp-1` | 2px | Tight hairline gaps |
| `--sp-2` | 4px | Icon spacing |
| `--sp-3` | 6px | Inline gaps (34 uses of `gap:6px`) |
| `--sp-4` | 8px | Default gap |
| `--sp-5` | 10px | Component padding y |
| `--sp-6` | 12px | Standard padding |
| `--sp-7` | 14px | Card padding (very common) |
| `--sp-8` | 16px | Section padding |
| `--sp-9` | 18px | Wide card padding |
| `--sp-10` | 20px | Section gap |
Plus **shorthand presets** (the real problem):
| Token | Value | Use |
|------------------------|----------------|------------------------------|
| `--pad-pill` | `6px 14px` | Pill chips |
| `--pad-button` | `7px 14px` | Default button |
| `--pad-button-tall` | `11px 14px` | Primary CTA (7× — most common card shorthand) |
| `--pad-card` | `14px 20px` | Card body |
| `--pad-sheet-header` | `52px 18px 14px` | Sheet header |
### 3.2 Divergent values
- **Padding shorthand chaos** — ~80 distinct combinations. Same visual "button" appears as: `11px 14px` (7×), `7px 14px` (4×), `6px 14px` (6×), `5px 12px` (4×), `4px 10px` (4×), `8px 10px` (5×), `6px 10px` (3×), `9px 12px` (2×), `9px 13px` (2×), `9px 14px` (2×), `9px 16px` (2×).
- **Asymmetric paddings reveal V-layer drift:** `4px 22px 8px`, `4px 22px 4px`, `8px 0 0`, `14px 0 8px`, `10px 14px 8px` — almost certainly V-overrides "nudging" a single edge.
- **`gap` is mostly clean:** 6/8/10 dominate (66 of 100+ uses). Outliers: 2/3/5/7/12/14 px — most can snap up.
- **`padding: 0` and `margin: 0` resets** are heavy (77 combined) — could move to a base reset rule.
---
## 4. Border radius
### 4.1 Canonical (proposed)
| Token | Value | Use |
|--------------|--------|------------------------------|
| `--r-sm` | 8px | Small chips |
| `--r-md` | 10px | Buttons, inputs (17 uses) |
| `--r-lg` | 12px | Cards (13 uses) |
| `--r-xl` | 14px | Larger cards (13 uses) |
| `--r-2xl` | 18px | Panels (14 uses) |
| `--r-3xl` | 24px | Hero / featured cards (12 uses) |
| `--r-sheet` | `24px 24px 0 0` | Bottom-sheet header (6 uses) |
| `--r-pill` | 999px | Pills (86 uses) |
| `--r-circle` | 50% | Avatars, dots (62 uses) |
### 4.2 Divergent values
- **Cheapest area to fix** — only ~8 outliers total: `5px` (1), `7px` (1), `9px` (3), `16px` (3), `20px` (4), `22px` (2), `26px` (4), `34px` (2).
- **Sheet-corner shorthand** appears as `24px 24px 0 0` (6×) AND `20px 20px 0 0` (2×) — drift between V-layers on the same component.
- **Whitespace inconsistencies:** `border-radius:999px` and `border-radius: 999px` and `border-radius: 999px` all coexist.
---
## 5. Z-index
### 5.1 Implicit tiers + proposed tokens
| Layer | Token | Suggested | Currently in code |
|--------------|-------------------|-----------|----------------------------------|
| base | `--z-base` | 0 | 0–5 (~55 declarations) |
| content | `--z-content` | 10 | 8, 10 (6) |
| sticky | `--z-sticky` | 50 | 20, 25 (8) |
| nav / chrome | `--z-nav` | 100 | 50, 80, 85, 90, 94, 96, 100 (8) |
| dropdown | `--z-dropdown` | 200 | 120, 135, 160 (4) |
| sheet | `--z-sheet` | 500 | 620, 640, 650, 700, 820 (6) |
| panel / saved| `--z-panel` | 1000 | 8500, 8590, 8600 (V402 cluster) ⚠️ |
| modal | `--z-modal` | 2000 | 9500, 9999 (3) |
| toast | `--z-toast` | 3000 | 99999 (2) — anti-pattern |
### 5.2 Problems
- **V402 saved-panel cluster (8500/8590/8600)** is a self-contained 3-step ladder for one component — it should be ONE token at `--z-panel` (1000), with internal stacking handled by source order or `isolation: isolate`.
- **The 99999 toast hammer** beats everything including modal — replace with `--z-toast` = 3000.
- **The 620–820 band** (6 ad-hoc values) is the sheet/overlay tier with no consistent semantic — flatten to single `--z-sheet`.
- **Whitespace duplicates again:** `z-index:0` vs `z-index: 0` vs `z-index: 0` (multiple).
---
## 6. Risk + migration order
### V-layer offenders (worst → best)
1. **V35x–V37x** (early overrides) — most of the half-step font-sizes and the 80+ padding-shorthand variants come from this band. Highest sprawl.
2. **V402** — `.bpf-saved-panel` z-index cluster (8500/8590/8600), known stale.
3. **V292F** — `background: transparent` on welcome sheet (known user-disliked).
4. **V41x–V44x** — newer, more disciplined; mostly fine.
### Proposed migration order
1. **Sprint 2 — Color (highest ROI).** Extend `:root` with the 14 brand tokens + 8-step white-alpha ramp + 3-step black-scrim ramp. Find/replace the 5 most-used surfaces first: sheet bg, card surface, button bg, text-primary, text-muted. Expect ~400 replacements covering ~60% of color uses.
2. **Sprint 3 — Border radius (cheapest finish).** Only ~8 outliers + the `20px / 24px` sheet-corner drift. Should be a single 30-min pass.
3. **Sprint 4 — Spacing.** First snap half-step paddings; then introduce the 5 `--pad-*` shorthand presets and migrate the highest-frequency CTAs/pills/cards.
4. **Sprint 5 — Typography.** Snap 273 half-step font-sizes to integer scale. Replace 3 whitespace-variant font-family declarations.
5. **Sprint 6 — Z-index.** Define the 9-tier scale, then migrate from the top: kill `99999`, collapse V402's 8500-band, normalize the 620–820 sheet band.
6. **Sprint 7 — Dead V-layer cleanup.** Comment-archive V292F welcome quirk, prune stale V402 `.bpf-saved-panel` rules once tokenized.
### Risk notes
- Whitespace-variant duplicates (e.g., `rgba(255,255,255,0.08)` vs `rgba(255, 255, 255, 0.08)`) inflate the apparent count but are easy: a normalize-pass first will halve the divergent-color list.
- Many V-overrides exist precisely *because* a downstream rule used a slightly different shade — tokenizing may surface latent specificity bugs. Migrate per component, not per token, to catch these.
- `--bpf-cream/coral/navy` are already declared as `--bpf-*` — keep this prefix for the whole token system (don't switch to `--color-*` etc.).
---
## 7. Appendix — raw frequency tables
### 7.1 Top hex colors
```
56 #fff 15 #0d1733 10 #ffffff 9 #5b3c37 9 #4ade80 9 #000
8 #6b7280 8 #0f172a 8 #0b1221 7 #f87171 7 #6b7386 7 #101828
6 #b66a4c 6 #9ca3af 6 #5d77ca 6 #22c55e 5 #a07020 5 #4a64b3
5 #111827 4 #dc2626 4 #778096 4 #667085 4 #3257ab 4 #25324a
3 #b91c1c 3 #5a72c8 3 #374151 3 #173061 3 #16a34a 3 #111111
3 #0b1020 3 #0b101a 2 #f59e0b 2 #eef1f4 2 #edf0f2 2 #ea580c
2 #d97706 2 #c4391c
```
### 7.2 Top non-white rgba (alpha colors)
```
15 rgba(4,6,14,1.0) 13 rgba(247,224,146,0) 12 rgba(15, 23, 42, 0.06)
8 rgba(247,224,146,0.30) 8 rgba(245,158,11,0.88) 8 rgba(17,24,39,0.06)
8 rgba(15, 23, 42, 0.12) 8 rgba(15, 23, 42, 0.1) 7 rgba(196,45,28,0.18)
6 rgba(247,224,146,0.20) 6 rgba(17,24,39,0.50) 6 rgba(17,24,39,0.07)
6 rgba(0,0,0,0.5) 6 rgba(0,0,0,0.38) 6 rgba(0,0,0,0.12)
6 rgb(5,7,16) 5 rgba(8,10,22,1.0) 5 rgba(245,158,11,0.14)
5 rgba(17, 24, 39, 0.08) 5 rgba(0,0,0,0.40) 5 rgba(0,0,0,0.28)
4 rgba(74,100,179,0.45) 4 rgba(245,229,163,0.68) 4 rgba(239,68,68,0.90)
4 rgba(224,109,72,0.84) 4 rgba(196,45,28,0.92) 4 rgba(192,39,24,0.52)
4 rgba(182,106,76,0.50) 4 rgba(160,112,32,0.45) 4 rgba(13,23,51,0.40)
```
### 7.3 Top white-alpha values (extracted)
```
58 rgba(255,255,255,0.07) 57 rgba(255,255,255,0.10) 40 rgba(255,255,255,0.14)
40 rgba(255,255,255,0.06) 27 rgba(255,255,255,0.92) 25 rgba(255,255,255,0.18)
25 rgba(255,255,255,0.08) 24 rgba(255,255,255,0.13) 23 rgba(255,255,255,0.38)
23 rgba(255,255,255,0.28) 20 rgba(255,255,255,0.62) 20 rgba(255,255,255,0.22)
20 rgba(255, 255, 255, 0.08) [whitespace dup]
19 rgba(255,255,255,0.34) 18 rgba(255,255,255,0.05) 17 rgba(255,255,255,0.72)
17 rgba(255,255,255,0.52) 17 rgba(255,255,255,0.30) 17 rgba(255,255,255,0.16)
17 rgba(255, 255, 255, 0) 16 rgba(255,255,255,0.90) 16 rgba(255,255,255,0.60)
15 rgba(255,255,255,0.82) 15 rgba(255,255,255,0.78) 15 rgba(255,255,255,0.50)
14 rgba(255,255,255,0.96) 14 rgba(255,255,255,0.55) 13 rgba(255,255,255,0.94)
13 rgba(255,255,255,0.12)
```
### 7.4 Font sizes (normalized px)
```
82 10px 63 11px 61 9px 43 9.5px 41 12px 37 10.5px 36 13px
33 14px 30 8px 26 8.5px 19 11.5px 16 7.5px 13 18px 12 22px
10 16px 8 24px 7 7px 7 19px 7 15px 7 13.5px 7 12.5px
6 34px 6 20px 6 17px 5 26px 4 21px 3 9.2px 3 48px
3 30px 3 28px 2 9.6px 2 32px 2 25px 2 23px 2 14.5px
1 9.8px 1 9.4px 1 9.1px 1 86–100px (single hero uses)
```
### 7.5 Spacing (top patterns)
```
41 padding: 0 36 margin: 0
gap (top): 34× 6px, 18× 8px, 14× 5px, 14× 10px, 10× 4px, 8× 7px, 8× 2px
padding shorthand (top): 7× 11px 14px, 6× 6px 14px, 5× 8px 10px, 5× 6px,
4× 7px 14px, 4× 6px 2px, 4× 5px 12px, 4× 4px 10px, 4× 2px 7px,
4× 14px 0, 4× 12px 0, 4× 10px 14px 8px, 4× 0 14px,
3× 14px 20px, 3× 12px 14px, 3× 10px 18px, 3× 0 18px
```
### 7.6 Border radius
```
86 999px 62 50% 17 10px 14 18px 13 14px 13 12px
12 24px 8 8px 7 22px 6 16px 4 6px 4 26px
4 20px 3 9px 2 4px 2 34px 1 7px 1 5px
```
### 7.7 Z-index (numeric order)
```
0 (~55) 1 (~25) 2 (~21) 3 (4) 4 (2) 5 (5) 8 (2)
10 (~6) 20 (6) 25 (3) 50 (1) 80 (1) 85 (1) 90 (2)
94 (1) 96 (1) 100 (1) 120 (1) 135 (2) 160 (1)
620 (1) 640 (1) 650 (2) 700 (1) 820 (1)
8500 (1) 8590 (1) 8600 (1) 9500 (1) 9999 (2) 99999 (2)
```
### 7.8 Font family + weight
```
font-family: Inter, system-ui, sans-serif (44 + 15 + 9 whitespace variants = 68)
font-family: inherit (4)
font-weight: 600 (~101) 700 (~98) 500 (~63) 400 (~44)
font-weight: 300 (~41) 200 (17) 800 (16) 100 (7)
```
---
*End of audit. Source data captured via `grep | sort | uniq -c | sort -rn` against `BPFmap.html` on 2026-05-12; no modifications made to the source file.*