Blackstone — Design SystemLegacy format

• Editorial & institutional — confident, restrained, financial-grade. Whitespace does the heavy lifting.

• Serif headlines, sans body — Sanomat (serif) set light for large display copy reads like a quality

newspaper; Guardian Sans handles everything functional.

• One loud accent — a near-neon yellow (#fdf147) is the only saturated brand color. It appears almost

exclusively as a highlight / focus / interaction signal against an otherwise monochrome canvas.

• Sharp, not soft — no border radius anywhere. Edges are crisp; the look is architectural.

---

### Core neutrals

| Token | Value | Use |

|---|---|---|

| --c-black | #000000 | Primary text, default backgrounds (dark theme), borders |

| --c-white | #ffffff | Page background, inverted text |

| --c-variant-black | #202020 | Near-black surface variant |

### Brand accent

| Token | Value | Use |

|---|---|---|

| --c-yellow | #fdf147 | Signature accent — focus rings, text highlight, CTA fills, interaction states |

> The yellow is used ~300× across the stylesheet, overwhelmingly for focus-visible states and highlights —

> treat it as an interaction/attention color, not a fill-everything brand color.

### Slate (cool neutrals)

| Token | Value |

|---|---|

| --c-slate-1 | #515256 |

| --c-slate-2 | #d5d8df |

| --c-slate-3 | #f4f5f7 |

### Grey

| Token | Value |

|---|---|

| --c-grey-100 | #f8f8f8 |

| --c-grey-200 | #dcdbdc |

| --c-grey-300 | #a3aaae |

| --c-gray-1 | #949494 |

| --c-gray | #dcdfe5 |

| --c-dark-gray | #353a46 |

### Highlight surfaces (light / dark theming)

| Token | Value |

|---|---|

| --c-highlight-light | #f4f5f7 |

| --c-highlight-light-active | #e7eaee |

| --c-highlight-dark | #121317 |

| --c-highlight-dark-active | #24262d |

### Secondary palette (3-step ramps for charts / categorization)

| Family | -1 (dark) | -2 (mid) | -3 (light) |

|---|---|---|---|

| Avocado | #2e5f53 | #3d7f6f | #b7d9d1 |

| Emerald | #164b4a | #1b5e5c | #a4bfbe |

| Cobalt | #005075 | #006492 | #99c1d3 |

| Chartreuse | #42520e | #637b16 | #dbeba7 |

| Copper | #a95228 | #a95228 | — |

| Taupe | #4e3f30 | #9c7e60 | #e7d8c9 |

### Semantic

| Token | Value | Meaning |

|---|---|---|

| --c-red | #b80000 | Error / negative |

| --c-light-green | #069e08 | Success / positive |

| --c-copper-400 | #a95228 | Table pagination / sort-active accent |

### Semantic role tokens (themeable)

These remap to the neutrals above per light/dark context — author components against the roles, not raw hex:

```

--c-copy / body text → black (light) / white (dark) /

--c-background / surface → white / black / slate-3 / transparent /

--c-border / dividers, outlines → black / slate-2 / slate-3 /

--c-link / link color → black / white /

--c-underline / link underline → black / cobalt-2 /

--c-button-background/ CTA fill → black / white / yellow /

--c-button-copy / CTA label → white / black /

--c-footnote / footnotes → grey-300 /

--c-graphics / --c-svg / icon fills → black / white /

```

---

• Grid: 16-column system. Columns driven by --columns (1–16):

grid-template-columns: repeat(var(--columns), minmax(0, 1fr)).

• Column gaps: token-driven — --spacing-88 / --spacing-96 / --spacing-136, or 2em.

• Container widths (`--container-width`): 20.5rem, 23rem, 43rem, 71rem, 79rem, 103rem, plus 98%.

103rem (~1648px) is the widest content shell.

### Breakpoints (em-based, root 16px)

| Label | em | ~px |

|---|---|---|

| sm | 26em | 416 |

| md | 48em | 768 |

| lg | 64em | 1024 |

| xl | 80em | 1280 |

| 2xl | 90em | 1440 |

| 3xl | 120em | 1920 |

---

| Property | Values |

|---|---|

| Durations | .1s .2s .25s .3s (UI) · .4s .5s .6s 1s 1.3s (reveals) |

| Easing | ease-out, ease-in-out, ease-in |

| Signature easing | cubic-bezier(.19, 1, .22, 1) (expo-out) · also cubic-bezier(.16, 1, .3, 1) |

Default interactive transition: ~.25s–.3s ease-out.

---

White canvas, black text in Guardian Sans Light. Lead with large Sanomat serif headlines set light

for an editorial tone. Keep generous whitespace on a 16-column grid with an 8px spacing rhythm. Square every

corner — no radius. Use color sparingly: monochrome neutrals plus the secondary 3-step ramps only for data;

reserve the electric yellow `#fdf147` for highlights, CTAs, and an emphatic focus state. Animate links with

a left-to-right underline sweep and ease interactions out at ~250–300ms.