---
title: "What is a Design System?"
subtitle: "A shared toolkit for consistent, high-quality digital products"
description: "What a design system is, why it matters, and what's inside it."
author: "Studio"
section: "Design System"
layer: "foundation"
subsection: ""
order: 0
status: "published"
access: "team"
client: "internal"
dropcap: true
---

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](https://llmstxt.org). Share them with tools like Claude, Cursor, Copilot, or ChatGPT — the code they generate will automatically follow our design system.

| File | Purpose |
| --- | --- |
| [`llms.txt`](https://bydefault.design/llms.txt) | Lightweight index with section links |
| [`llms-full.txt`](https://bydefault.design/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](../docs/llms.html).