Skip to content

Connected Design System

Connected Design System

From a Figma variable to a rendered component.

One source of truth. Two brands. Every screen — kept in sync by a pipeline that turns design decisions into shippable CSS.

The architecture

Where it lives, what flows

  1. Figma
  2. GitHub
  3. Playbook
  1. Figma variablesFoundations · Figma
  2. Raw tokensW3C / DTCG Design Tokens Format
  3. CSS custom properties@tmedxp/figma-tokens · npm
  4. Styleguide CSS@tmedxp/styleguide · npm
  5. Rendered UIPlaybook · dx-playbook.toyota-europe.com
React component librarydownstream consumer
  • Designers own the values; the pipeline owns the transform.
  • Two npm packages: tokens, then the styleguide that consumes them.
  • The same CSS feeds this site and the React library.

The token model

Three names, one value

Primitive

--tng-color-red-500a raw literal

Semantic

--tng-color-fill-primary-defaultaliases the primitive

Component

--tng-buttons-main-button-primary-neutral-active-fill-coloraliases the semantic

One value carried through three tiers. Toyota's primitive isred-500; on Lexus the same semantic token resolves toindigo-500 — switch the brand and every swatch above follows.

The brand model

One name, two values

TokenToyotaLexus
--tng-color-fill-primary-default#d40605#00244d
--tng-color-fill-primary-emphasis#d40605#001a38
--tng-color-fill-secondary-default#d40605#c57046
--tng-color-foreground-primary-on-neutral-subtle#ff0022#8899ac
--tng-cards-active-border-color#ff0022#e5e9ed
  • Names stay identical across brands; the primitive each token resolves to is what changes.
  • Component aliases semantic aliases primitive — a brand swap re-resolves the whole chain, no rebuild.

Built from CDS

The same form, but different

As it appears on your driving licence.
Enter a valid phone number.
  • Field, input, select and validation states — all shipped CDS classes.
  • Not a line of brand code; the tokens carry the theme.

Design owns values · the pipeline transforms · the styleguide renders