Introducing the Connected Design System
The Connected Design System (CDS) is the design system that powers our customer-facing products across brands. It replaces the patchwork of per-product styles, ad-hoc components, and unspoken conventions that built up over the years with one coherent source of truth — covering visual language, components, and the documentation you are reading right now.
This article is meant for the teams who will consume CDS: front-end developers, designers, and anyone who builds customer-facing experiences and needs to know what to use, when, and how.
What CDS ships
CDS is delivered as three things you can pick up and use today.
A pure CSS package, @tmedxp/styleguide, that you drop into a project to get the foundations (tokens, typography, layouts, utilities) and the components (buttons, cards, forms, navigation, feedback). The CSS is brand-aware — Toyota and Lexus variants live side by side and follow the same class conventions.
A set of React components, @tmedxp/react-components, that wrap the styleguide for projects that want a component-first authoring experience. The React layer carries the same visual language; if a styleguide class exists, there’s a React component (or there’s a deliberate reason there isn’t one yet).
A documentation site — this site — that explains how every piece fits together. Component pages document Design, Develop, and Accessibility side by side, so the design intent and the implementation never drift apart.
How the documentation is organised
The site has four top-level areas. Design System is where component, layout, utility, and pattern documentation live, organised by tabbed pages so you can jump between the design intent, the CSS/React code, and the accessibility guidance for a given component without leaving the page. Fundamentals covers the cross-cutting concerns — colour, typography, spacing, motion, voice and tone. What’s New is the article stream you are reading right now; it’s where we publish design system news, migration guides, and meaningful changes. Resources collects the assets and references you might need outside the codebase — Figma libraries, brand assets, and so on.
The sidebar inside Design System is auto-generated from the file structure. New components show up automatically once their pages land in the repo.
How to consume CDS
If you’re starting a new project, add the styleguide CSS to your build (and the React package if you’re using React) and follow the component pages from there. The Develop tab on each component page shows the canonical HTML structure and class names, the React component API, and any recipes that combine the component with others.
If you’re updating an existing product, the migration is component by component. The Design tab tells you when to use a component (and when not to); the Develop tab is your implementation reference; the Accessibility tab is the contract you sign when shipping the component to customers.
When you encounter components marked draft, treat them as production-ready code with documentation that’s still landing — the CSS itself ships in @tmedxp/styleguide. Drafts only affect the docs preview surface.
What’s coming next
The articles below this one announce the components that have landed in CDS over recent months — Tabs, Slider, Checkbox/Radio, Simple Card, Stepper, Date Picker, Carousel, and Chip. Going forward, What’s New is where we’ll publish design system news, recommended migration paths, breaking changes, and anything else that didn’t fit elsewhere. Subscribe to the repo or check back regularly — new articles appear here without ceremony.
If you have feedback, a request, or a component you’d like to see standardised, the team is reachable through the usual channels. CDS is the design system for the teams who consume it; your usage shapes what it becomes.