A Design System is your team's shared toolkit for creating consistent, high-quality digital products and brand experiences.
Think of it as a well-organised box of Lego bricks, but instead of plastic pieces, you get reusable components, brand assets, design rules, and clear guidelines.
It serves as a single source of truth for both product teams and brand guardians, so no one wastes time reinventing elements or guessing which visual style to use.
Whether you're designing an app screen, a marketing campaign, or a customer touchpoint, the Design System ensures everything looks, feels, and behaves like it comes from the same brand.
What's Inside a Design System?
- Design tokens — Core values like colour palettes, spacing, typography scales, and animations that power both design and code.
- Typography — Rules for fonts, sizes, and spacing to ensure readability and brand voice.
- Components — Reusable interface elements like buttons, forms, and menus.
- Brand assets — Logos, imagery, and iconography for consistent marketing and product use.
- Layout principles — Guidelines for arranging content in a clear, intuitive way.
By following a Design System, teams can move faster, collaborate better, and maintain consistency across every brand interaction, whether it's in-app, on the web, or in the real world.
Using This Design System with AI
This design system publishes AI-readable reference files following the llms.txt standard. Share them with tools like Claude, Cursor, Copilot, or ChatGPT — the code they generate will automatically follow our design system.
| File | Purpose |
|---|---|
llms.txt |
Lightweight index with section links |
llms-full.txt |
Complete reference — all tokens, components, and rules |
Both files are auto-generated on every deploy, so they stay up-to-date. For tool-specific setup instructions, see the LLM documentation page.