Design System
What is a Design System?
A shared toolkit for consistent, high-quality digital products
Tokens
Every visual decision in one place
Classes
Every utility class in one place
Color
Palette, scales, and semantic colour mappings
Typography
Type scale, weights, and reading rhythm
Spacing
The spacing scale that governs every gap and margin
Border
Composable borders — position, width, style, colour
Icon
Brand icon standards and the full registry
Motion
The motion tokens that govern every transition, animation, and micro-interaction
Layout
How content is structured, spaced, and contained
Data Entry
Feedback
Callout
Draw attention to what matters
Badge
Status labels and category indicators
Tag
Dismissible labels and filter chips
Progress
Show how far along something is
Rating
Interactive and read-only star ratings
Toast
Temporary feedback that confirms an action
Tooltip
Additional context on hover — no JavaScript required
Content
Card
Contained content surfaces
Breadcrumb
Show where you are in the hierarchy
Tabs
Switch between related content without leaving the page
Dropdown
Contextual menus and action lists
Dialog
Focused interactions that require a response
Disclosure
Reveal content on demand
Divider
Visual breaks between content sections
Table
Structured data in rows and columns
Code
Inline code, code blocks, and keyboard shortcuts
Mark, Abbr & Figure
Highlighted text, abbreviations, and media captions
Image
Aspect ratios and responsive image patterns
Drop Cap
Decorative opening letters for editorial content