# GFS Design v9 — full design system tokens

Sources:
- `https://gfs-design-v9.pages.dev/cards` (cards + shadow ladder)
- `https://gfs-design-v9.pages.dev/foundation` (colors + fonts + scales)

Captured R574/R577. **The canonical visual language for GFS. All workflow, substrate, and system diagrams + admin UIs should match these tokens.**

---

## Color tokens (named, with usage doctrine)

### Cobalt scale — the brand identity
| Token | Hex | Usage |
|---|---|---|
| `--midnight` | `#051B3A` | Deepest accent, inverse bg |
| `--cobalt` | `#092F64` | **Primary** — headings, primary actions, brand |
| `--navy` | `#1A5799` | Mid-tier accent, secondary buttons |
| `--tufts` | `#468BE6` | **Interactive elements** — links, active arrows |
| `--jordy` | `#93BFEF` | **Hover / selected** states |
| `--alice` | `#E9F5FF` | **Light tinted backgrounds** |

### Neutrals
| Token | Hex | Usage |
|---|---|---|
| `--eerie` | `#1F1F1F` | Primary ink |
| `--charcoal` | `#2D2D2D` | Secondary ink |
| `--graphite` | `#4B5F7A` | Body text |
| `--slate` | `#6B7280` | Secondary text |
| `--steel` | `#9CA3AF` | Tertiary text, metadata |
| `--silver` | `#D9E1EA` | Default borders (1px solid silver) |
| `--fog` | (light gray) | Subtle dividers |
| `--white` | `#FFFFFF` | Surface |

### Status colors
| Token | Hex | Usage |
|---|---|---|
| `--success` | `#0F766E` | Delivered, verified, REAL |
| `--warning` | `#B45309` | Pending, warn, restricted |
| `--error` | `#DC2626` | Alert, breach, HITL/security |

### Color usage doctrine (verbatim from the foundation page)

> **Primary**: Cobalt for headings & primary actions. **Tufts for interactive elements. Jordy for hover/selected states. Alice/Ice for backgrounds.**

---

## Typography

### Fonts
- **`Inter`** (sans-serif, Google Fonts variable) — primary, headings, body
- **`IBM Plex Mono`** (monospace, Google Fonts variable) — labels, IDs, SKUs, dates, routes, weights, temperatures, locations, system messages, code, coordinates

Both Open Source SIL OFL 1.1.

### Type scale (from foundation page)

| Style | Size | Weight | Line-height | Letter-spacing | Color |
|---|---|---|---|---|---|
| H1 / Hero | 96px | 900 | 0.9 | — | `--cobalt` |
| H2 / Display | 56px | 800 | 1.05 | -0.02em | `--cobalt` |
| H3 / Heading | (32-48px) | 700 | 1.15 | -0.01em | `--cobalt` |
| Body | 14-16px | 400-500 | 1.6-1.7 | 0 | `--graphite` |
| Caption / SM | 13px | 500 | 1.5 | 0 | `--graphite` |
| **Label / XS** | **11px** | **600** | **1.4** | **0.08em UPPERCASE** | **`--slate` (mono)** |
| **Micro / XXS** | **9px** | **500** | **1.3** | **0.06em UPPERCASE** | **`--steel` (mono)** |

### CSS variable scale
- `--text-xs`, `--text-sm`, `--text-lg`, `--text-xl`, `--text-2xl`, `--text-5xl`

---

## Spacing scale
- `--sp-1` `--sp-2` `--sp-3` `--sp-4` `--sp-5` `--sp-6` `--sp-8` (no -7)
- Typical: sp-1 ≈ 4px, sp-2 ≈ 8px, sp-4 ≈ 16px, sp-5 ≈ 20px, sp-6 ≈ 24px, sp-8 ≈ 32px

---

## Border radius
- `--radius-sm` = 2px (tight)
- `--radius-md` = 4px (small cards)
- `--radius-lg` = larger (modals, large cards)
- Cards system exception: 16px (per cards page)

---

## Borders (the doctrine)

```
1px solid silver  — Default border (D9E1EA)
1px solid fog     — Subtle divider
2px solid cobalt  — Section emphasis (the BRAND border)
3px solid tufts   — Active indicator (the LIVE border)
1px dashed jordy  — Guide / helper
1px dotted steel  — Secondary divider
```

---

## Shadow ladder (cobalt-tinted)

**Defining detail: shadows use `rgba(9, 47, 100, ...)` not `rgba(0, 0, 0, ...)`** — cobalt-tinted = brand-aligned.

```css
/* sm — cards at rest */
box-shadow: 0 4px 12px rgba(9, 47, 100, 0.15), 0 1px 3px rgba(0, 0, 0, 0.08);

/* md — cards lifted */
box-shadow: 0 4px 16px rgba(9, 47, 100, 0.2);

/* lg — modals + hover */
box-shadow: 0 6px 24px rgba(9, 47, 100, 0.3);

/* xl — overlays */
box-shadow: 0 8px 32px rgba(9, 47, 100, 0.4);

/* hover lift */
box-shadow: 0 12px 32px rgba(9, 47, 100, 0.2);

/* amber active glow */
box-shadow: 0 0 12px rgba(180, 83, 9, 0.15), 0 4px 12px rgba(9, 47, 100, 0.15);
```

---

## Easing
```css
cubic-bezier(0.4, 0, 0.2, 1)  /* Material standard; ~250ms feels right */
```

---

## Gradients

Always `135deg`.

```css
/* The brand — cobalt depth */
linear-gradient(135deg, #092F64 0%, #1A5799 50%, #468BE6 100%)

/* Verified / valid */
linear-gradient(135deg, #092F64, #0F766E)

/* Restricted / warn */
linear-gradient(135deg, #092F64, #B45309)

/* Soft surface */
linear-gradient(135deg, #E9F5FF, #FFFFFF)

/* Amber accent badges */
linear-gradient(135deg, #92400E, #F59E0B)

/* Sheen overlay (animated gloss) */
linear-gradient(90deg, transparent 30%, rgba(255,255,255,0.05))
```

---

## Z-index scale
- `--z-base` `--z-raised` `--z-sticky` `--z-dropdown` `--z-overlay` `--z-modal` `--z-toast`

---

## Animation patterns
- Card flip (front ↔ back)
- "Gold-glow" pulse on active status
- Pulsing dots for status indicators
- Apple Wallet stack effect (cubic-bezier transforms)
- Hover fan + click expand on stacked cards
- Frosted glass overlays (`backdrop-filter: blur()`)

---

## Translation to workflow diagrams

| Diagram element | Token | Notes |
|---|---|---|
| Primary node label | `Inter`, weight 600, fill `--cobalt` (#092F64) | All node card name text |
| Sublabel (kind/source) | `Inter`, weight 400, fill `--graphite` (#4B5F7A) | "loop_over_recipients", "d1_write", etc. |
| Status badge (REAL/STUB) | `IBM Plex Mono`, 9px, weight 500, letter-spacing 0.06em UPPERCASE, fill `--steel` for STUB, `--success` for REAL | Micro/XXS scale exactly |
| Section header (lane title) | `IBM Plex Mono`, 11px, weight 600, letter-spacing 0.08em UPPERCASE, fill `--slate` | "01 / TRIGGER" etc. — Label/XS scale |
| Node card border | `1px solid --silver` (#D9E1EA) at rest, `2px solid --cobalt` on REAL, `3px solid --tufts` during playback active | Border doctrine |
| Card shadow at rest | `0 4px 12px rgba(9, 47, 100, 0.15), 0 1px 3px rgba(0,0,0,0.08)` | sm shadow |
| Card shadow on hover | `0 12px 32px rgba(9, 47, 100, 0.2)` + `translateY(-1px)` | hover-lift |
| Card border radius | 10-12px (between md and large) | Reads as cards-page-style |
| Lane swimlane bg | `1px dashed --jordy` border, `--alice` (#E9F5FF) tinted fill at 30% opacity | Guide aesthetic |
| Solid arrows (real path) | stroke `--cobalt` (#092F64) | Brand color, not generic black/gray |
| Dashed arrows (STUB) | stroke `--jordy` (#93BFEF) with marching-ants | Guide aesthetic |
| Security arrows (HITL) | stroke `--error` (#DC2626) | Status red |
| Emphasis arrows (verified) | stroke `--success` (#0F766E) | Status teal |
| Play button | `--cobalt` bg, `--white` text, hover → `--navy` bg | Brand primary action |
| ⓘ glyph circle | `--white` bg, `--silver` border at rest; `--tufts` bg + `--white` text on hover | Interactive doctrine |
| Active-node glow (playback) | amber active-glow shadow + 3px `--tufts` border | The cards-page active treatment |
| Popover panel | `--white` bg, `1px solid --silver` border, sm shadow, `--radius-md` radius | Surface treatment |
| Popover section header | `IBM Plex Mono` 11px, weight 600, UPPERCASE 0.08em letter-spacing, fill `--slate` | Label/XS scale |
| Popover key | `Inter` weight 600, fill `--cobalt` | Cobalt for emphasis |
| Popover value | `IBM Plex Mono` 12px, weight 400, fill `--graphite` | Technical value treatment |
| Marching-ants animation | `--jordy` color for dashes, `cubic-bezier(0.4, 0, 0.2, 1)` easing | On guide-style arrows |
| REAL-node pulse | `0 0 8px rgba(70, 139, 230, 0.25)` (Tufts at 25%) | "Alive" indicator using interactive color |

---

## Apply order

When re-skinning workflow diagrams:

1. **Font** — load Inter + IBM Plex Mono from Google Fonts. Update all `<text>` elements to use them.
2. **Type scale** — primary labels at 13-14px Inter 600 cobalt; sublabels at 11-12px Inter 400 graphite; status badges at 9px IBM Plex Mono 500 UPPERCASE 0.06em steel.
3. **Colors** — replace generic c-cloud/c-database fills with cobalt-tinted gradients per node type. Borders use `--silver` default, `--cobalt` for REAL nodes.
4. **Shadows** — cobalt-tinted `rgba(9, 47, 100, ...)` ladder everywhere.
5. **Radius** — bump to 10-12px on cards, 14-16px on swimlanes.
6. **Easing** — single `cubic-bezier(0.4, 0, 0.2, 1)` everywhere.
7. **Arrow colors** — cobalt for solid, jordy for dashed, error/success for status arrows.
8. **Popover** — Inter for keys, IBM Plex Mono for values, cobalt label headers.
9. **Active state** — amber glow + tufts border, NOT generic indigo.