Getting started

The Executive Support design system is token-led. Every colour, size, motion, and state ships as a W3C DTCG token, drawn from the magazine and exposed as plain CSS variables. No build step, no JavaScript runtime, no framework lock-in.

Most people landing here need three things in their first session – install, a token, and a button. This page covers all three, then points to where the rest lives.

Install in three lines

Drop these into your <head> in this order. Order matters – colour resolves first, typography references colour, spacing stands alone but ships last by convention.

<link rel="stylesheet" href="/styleguide/tokens/color.css" />
<link rel="stylesheet" href="/styleguide/tokens/typography.css" />
<link rel="stylesheet" href="/styleguide/tokens/spacing.css" />

That gives you every primitive and semantic CSS variable. Roughly 280 in total. Add motion.css, states.css, and icons.css as you reach for them – they’re independent and can land in any order after the first three.

If you use Tokens Studio in Figma, point it at the matching *.tokens.json files in the same folder. Mark the primitive set as Source, the semantic set as Enabled, then push to Figma Variables.

The full file map

Everything sits under /styleguide/tokens/. The *.tokens.json files are the W3C DTCG source of truth – a token editor or build pipeline reads these. The *.css files are generated from the JSON and are what you ship to the browser.

File	What it is	When you’d need it
`color.css`	Generated CSS variables for every primitive ramp and semantic role	Always. First link in the head.
`color.tokens.json`	DTCG source for the colour layer	Editing tokens, syncing Figma, building a custom theme.
`typography.css`	Type scale, line-heights, tracking, and the four semantic styles (display, editorial, body, UI)	Always. Second link in the head.
`typography.tokens.json`	DTCG source for the type system	Adjusting the scale, adding a weight, syncing Figma styles.
`spacing.css`	The 4-px scale plus inline / stack / inset / section slots, radii, borders, elevation	Always. Third link in the head.
`spacing.tokens.json`	DTCG source for spacing, radii, borders, shadows	Tuning the rhythm of a layout, adjusting a radius globally.
`motion.css`	Durations, easings, and named transitions (`fade`, `pop`, `slide`)	When something needs to move – hover, modal, accordion.
`motion.tokens.json`	DTCG source for the motion layer	Editing the easing curve or timing scale.
`states.css`	Hover, focus-visible, active, disabled, selected	Building any interactive component.
`states.tokens.json`	DTCG source for the state layer	Adjusting focus-ring colour or disabled opacity globally.
`icons.css`	Sizing tokens and a CSS-mask helper for the sprite	When you reference the SVG sprite from CSS.
`icons.svg`	The 49-glyph sprite, one consistent line weight	Inline `<use href="…#name"/>` references in markup.
`icons.tokens.json`	DTCG source mapping glyph names to viewBoxes	Generating typed bindings or syncing Figma component variants.
`fonts.css`	`@font-face` declarations for Inter and Freight	Whenever you want self-hosted fonts (skip if loading from Google Fonts).
`_ramps.json`	Internal: raw colour ramps before semantic mapping	Rarely. Inspecting the maths behind a swatch.

The underscore on _ramps.json is deliberate – treat it as internal. It exists so the colour build can reason about ramps without re-walking the semantic tree.

First 30 minutes

A checklist for a designer or engineer landing here cold. If you finish all six in order, you’ll have wired the system into a real component, replaced the values that mattered, and met the voice rules before writing any UI copy.

Time	Task
0–5 min	Link the three CSS files in your `<head>`. Confirm `var(--es-color-text-primary)` resolves in DevTools.
5–10 min	Replace your colours with semantic tokens – `var(--es-color-text-primary)` for body copy, `var(--es-color-surface-canvas)` for the page background.
10–15 min	Replace your spacing with `var(--es-space-*)` primitives, or better, the semantic stack / inset slots from spacing.
15–25 min	Run a button through the contract – every state, every size, focus ring included. The full spec is on the buttons page.
25–30 min	Read Voice & Tone before writing any UI copy. Most regressions in the system come from copy, not code.

If something on the list takes more than its budget, that’s a signal to open an issue rather than to push through. The system should make the easy thing easy.

The asset kit

Everything below is downloadable. Paths under /styleguide/assets/ are stubbed pending the asset pipeline – the routes are reserved, the binaries land in v1.3. Until then, the brand page has the working previews.

Brand mark – SVG

The lockup in light and dark, plus a wordmark-only variant. Stubbed pending final mark.

Lockup (light) Lockup (dark) Wordmark

Favicon set

ICO, PNG (16, 32, 180, 512), and a maskable SVG for PWA installs.

Download .zip

Brand colour swatches

The four anchors plus extended ramps. Adobe ASE, Sketch palette, and a link to the Figma library.

Adobe (.ase) Sketch palette Figma library

Type – Inter

Free on Google Fonts and Adobe Fonts. Weights 400 / 500 / 600 / 700.

Google Fonts

Type – Freight

Licensed family from Phil's Fonts. Required for editorial display and reading. Self-hosted via fonts.css.

Phil's Fonts

Icon sprite

49 glyphs, single SVG, one consistent line weight. Reference by id with <use href='…#name'/>.

icons.svg

Inter ships free under the OFL. Freight needs a per-seat licence from Phil’s Fonts – pick that up before deploying any production page that uses the editorial scale. Until your licence lands, the typography fall-back chain resolves to a system serif and the page still reads.

Where to ask questions

Tagged comments in Figma for design queries, GitHub issues against the repo for bugs and token requests, email design@executivesupport.com for anything brand-shaped. The maintainer values plain bug reports over polite ones – open the issue with what broke, what you expected, and the smallest reproduction you can manage.

Versioning at a glance

The system follows semver. Breaking changes – a renamed token, a removed primitive, a shifted scale – land on a major. Additive work lands on a minor. Fixes and documentation land on a patch.


Current	v1.2.1 · May 2026
Channel	Stable
Next	v1.3 – forms in progress, asset pipeline lands
History	Changelog

Stability matrix

Honest snapshot. Foundations are locked – the API won’t change inside v1. Components are mid-build; expect signature shifts on anything marked in progress.

Layer	Status	Notes
Colour	Shipped · v1.0	Nine ramps, five semantic tiers, AA-verified across every text/surface pair.
Typography	Shipped · v1.0	Inter and Freight, fifteen sizes, semantic styles for UI and editorial.
Spacing & layout	Shipped · v1.0	Seventeen-stop scale, four spacing slots, radii, borders, five-step elevation.
Motion	Shipped · v1.1	Durations, easings, named transitions. Reduced-motion handled at source.
States	Shipped · v1.1	Hover, focus-visible, active, disabled, selected. WCAG focus indicator.
Iconography	Shipped · v1.2	49 glyphs, single weight, sprite plus Figma component set.
Modes	In progress	Light is shipped. Dark drafts behind a flag; ship target v1.4.
Buttons	Shipped · v1.2	Primary, secondary, tertiary, destructive. Five sizes. Loading and icon variants.
Forms	In progress	Inputs and selects in review; checkboxes and radios drafted. Target v1.3.
Cards	Planned	Specced, not built. Target v1.3.
Tabs	Planned	Specced, not built. Target v1.4.
Modal	Planned	Awaiting motion review. Target v1.4.

If a layer you need is “planned”, the foundations underneath are stable enough to compose your own. Open an issue describing the use case – that’s how the roadmap moves.