The system map

The system behind this site, mapped to Depot.

This portfolio runs on a six-layer design system: a neutral token contract, one client pack that binds the brand, and components that only ever speak semantic names. Trainline runs Depot. Depot is internal, so the right-hand column below comes from what Trainline has published: a blog post, a job listing, a brand portal case study, the public brand guidelines. Every claim carries its source. Where I had to guess, I say so.

01How this site is built
LAYER 1

Brand primitives

tokens.css §1

The brand's facts, and nothing else. A palette, one self-hosted face, a 4px spacing scale, a clamp() type ramp, soft radii by rule. This site shipped in my own brand first; the pack it wears now is built from Trainline's published colours — the re-skin was this one file.

inkTrainline mintnavymistFigtree4px scaleradius 6/8/12
the contract names what a brand must supply
LAYER 2

The semantic contract

tokens.contract.css

The interface. Every name a component is allowed to use, declared once with neutral defaults. No brand lives here; with no pack loaded, the base still renders coherent.

--color-fg--color-bg--color-accentinverse set--font-display--spacing-*
loaded after the contract, the pack overrides the neutral defaults
LAYER 3

The client pack

tokens.css §2

The binding. Primitives mapped onto the contract's slots, so a full re-skin is one swapped file and the structure never changes.

components read the names; the pack decides what they mean
LAYER 4

The component library

components.css

Brand-agnostic atoms, chrome and patterns. They reference semantic tokens only: never a primitive, never a literal. site.js builds the header and footer from config, so even the chrome re-skins as data.

type rampbuttonscardsformsheader + footerherooffer bandcase blocksfeature bandclosing CTA
every surface composes from the same catalogue
LAYER 5

The surfaces

This site, four case studies, five working prototypes. Each prototype app carries its own tokens inside the shell: the shell frames the exhibit; the work keeps its own voice.

portfoliocase studiesone tripanywheretogetheronboardsafetynet
and the rules that hold it together ride in the files
LAYER 6

The governance

# the rules, as the files state them
components use semantic tokens only · never a primitive, never a literal
a new token is declared in the contract first
load order: contract → pack → components → page css
mirrors are read-only · the starter repo is the source of truth
reused on a second page → promoted up
02The match

The same shape, at two scales.

This site
Trainline's Depot, from public sources
Brand primitives

Palette, faces, scales, radius 0: the brand's facts in one file.

brand facts in one place
Brand foundations

A Frontify brand portal, the single source of truth since 2020: guidelines, photography, messaging, asset library.1 Public logo rules: the mint mark, clear space of half the logo's height.2

The semantic contract

The names everything builds against, with neutral defaults.

a shared language
Conventions and tokens

Naming conventions and filing structures, standardised and fed into Depot.3 Design tokens: not published, so that one is my inference.

The client pack

One swapped file re-skins the whole base. The structure never changes.

the white-label mechanic
Multi-brand delivery

Co-branding rules (shared clear space, a dividing bar2) and Partner Solutions, which retails white-label under partner brands.

The component library

Brand-agnostic, discoverable, semantic names only.

one catalogue, many hands
Depot itself

Figma libraries and coded, discoverable components, built so work is reused rather than discarded.3 A dedicated senior role champions and evolves it.4

The surfaces

This site, the case studies, five working prototypes.

many surfaces, one system
The products

The Trainline app on iOS and Android, the web, and the partner surfaces the platform retails through.

Governance in the files

Read-only mirrors, a fixed load order, a promotion rule.

reads as one hand
Governance and DesignOps

A Depot team with a strategy to evolve it,4 a crew for planning, tooling and systematising,3 and a principle I'd sign: design for the v2.3

Sources
  1. Trainline, built with Frontify: the brand portal as single source of truth, since 2020.
  2. Our brand, thetrainline.com: logo, clear space and co-branding rules.
  3. How Trainline is reducing waste in the design process: The Trainline blog, 2023. It names Depot and describes the Design Waste Crew, naming conventions, templates, and "coded, discoverable" systems.
  4. Senior Product Designer, Design System (DEPOT): a Trainline job listing. The role champions Depot across divisions, evolves it, and partners with engineering.
03Why row three matters

One base, many brands.

Enterprise Solutions sells exactly this mechanic at scale: one retailing platform, re-branded for every carrier and business that runs on it. My version is portfolio-sized, but it is the same discipline: a contract the components trust, and a brand that arrives as data. Swap the pack, keep the system.

The practice page shows how I run it day to day: agents read the rules, gates hold the craft.