What's New
Playground
Type CDS markup, watch it render in any brand, scheme, direction and width, and share the exact result as a link.
DesignDev
One base card
Cards are no longer a stylesheet each. One base card, composed with layouts and utilities, builds every card in Figma.
Dev
Sizing now scales with the reader's font size
Icons, control heights and layout spacing were fixed px and are now rem, so they grow with a reader's browser font-size preference. The styleguide also ships the 62.5% root the tokens are sized against.
Dev
Every brand now renders the full icon set
Every brand now renders all 270 icon names. Toyota's set is the base, and each brand's icons resolve at build time — so Kinto goes from 39 icons to 270 and Lexus gains the 13 it lacked.
DesignDev
Tag, rewired onto its own tokens
Tag now draws from the token family that was published for it — seven colours instead of four, surfaces that follow the scheme around them, and brand-owned typography. Every existing tag changes appearance.
DesignDev
Kinto joins the design system, in preview
A third brand joins Toyota and Lexus. Kinto builds, ships and renders like any other brand — but it is a preview, not a certified peer. Here's what works and what doesn't.
DesignDev
Introducing the Grid
A 12-column grid that draws the page rhythm — pair it with the container for full page layouts, or use it on its own inside a component.
DesignDev
Introducing the Connected Design System
A short tour of the Connected Design System for the teams who will consume it.
DesignDev
Chip
A compact selectable button for filters, tags, and group selections.
DesignDev
Carousel
A Swiper-based carousel with a custom progress indicator for navigating between slides.
DesignDev
Date Picker
A combined text-input and calendar component for collecting specific dates.
DesignDev
Form Stepper
A sticky form header that communicates progress through a multi-step process.
DesignDev
Checkbox and Radio
Two foundational form controls for multi-select and single-select choices.
DesignDev
Simple Card
A lightweight container for grouping related content with consistent surface styling.
DesignDev
Slider
A new range-input component for selecting numeric values inside a known range.
DesignDev
Tabs
A composable Tabs component for switching between related views in the same context.
DesignDev