DesignDev

Kinto joins the design system, in preview

August 12, 2026 – By Dieter Luypaert

The design system has carried two brands since the beginning: Toyota and Lexus. Kinto is now a third. Its tokens are generated from Figma through the same pipeline, published through the same packages, and selected the same way at runtime — so from a consumer’s point of view there is nothing new to learn.

There is, however, something important to know: Kinto is a preview, not a certified peer. Use it to look, to prototype, and to give feedback — not to ship.

See it now

The quickest way to try Kinto is the brand switcher in the site header. Pick Kinto and this entire Playbook re-tints — every component, every token table, every example page. The switcher marks Kinto preview so you always know which footing you’re on.

Every component on the page below reads its colours from the active brand. Flip the switcher and watch them move:

Tag

Nothing in that markup names a brand. That is the whole design of the system — components are brand-agnostic, and the brand resolves underneath them.

Switching to Kinto

At runtime, the active brand is a single attribute on the <html> element:

<html data-brand="kinto">
  ...
</html>

In the packages, Kinto is a peer of the other two — the same entry points, with kinto in place of toyota or lexus:

import '@tmedxp/styleguide/kinto/styles.css'; // full styleguide + Kinto tokens

The raw token set ships from @tmedxp/figma-tokens as well, if you consume tokens directly rather than through the styleguide:

import '@tmedxp/figma-tokens/kinto.css';

What “preview” means

Two concrete limitations, and they are worth reading before you plan work around Kinto:

No component has been design-reviewed in Kinto. The token values are wired straight through from Figma; nothing has been signed off against a Kinto design. A component may render in Kinto colours and still be wrong — the pipeline guarantees the plumbing, not the result.

Kinto has no brand icon artwork of its own. It renders the shared icon set: the UI icons (icon-ui-*), plus the social, character and Kinto-services icons. The brand icons that Toyota and Lexus each redraw are simply not available in Kinto yet, so a layout that leans on them will have gaps.

Everything else — layout, spacing, typography, component structure, accessibility behaviour — is brand-independent and behaves exactly as it does on Toyota and Lexus.

Telling us what’s wrong

Preview is the stage where feedback is cheapest to act on. If a component looks wrong in Kinto, that is a useful report, not a known issue — the whole point of shipping it early is to find the places where straight-through token values don’t land.

The full picture — how data-brand resolves, how brands map to Figma modes, and the complete preview caveat — lives on the Brands documentation page.