Foundations
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
Code
Inline code, code blocks, and keyboard shortcuts
Mark, Abbr & Figure
Highlighted text, abbreviations, and media captions
Drop Cap
Decorative opening letters for editorial content
Divider
Visual breaks between content sections
Image
Aspect ratios and responsive image patterns
Components
About Components
Component specification and build rules
Button
Actions that communicate intent and hierarchy
Copy Button
One-click clipboard copy with feedback
Form
Inputs, controls, and data collection patterns
Number Input
Precise numeric entry with step controls
Radio Group
Choose one option from a set
Slider
Select a value within a range
Password Toggle
Show/hide control for password input fields
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
Card
Contained content surfaces
Breadcrumb
Show where you are in the hierarchy
Tabs
Switch between related content without leaving the page
Accordion
Expandable sections with single or multi-open modes
Dropdown
Contextual menus and action lists
Dialog
Focused interactions that require a response
Drawer
Panels that slide in from an edge
Disclosure
Reveal content on demand
Table
Structured data in rows and columns
Book
Shelf, cover, and contents — the surfaces you navigate a documentation space through
Page Navigation
Prev and next across an ordered sequence of pages
Nav
A flat set of navigation links
Site Header
Identity, navigation and controls at the top of a page
Footer
Identity, links and legal at the bottom of a page
Bar
One strip at the top of a content region
App Navigation
The app's primary navigation — tab bar and icon rail in one component
Avatar
A person or organisation as a small circle
Page Header
The opening block of a page — what it is, and what to do next
Section Header
Open a region of content with a title and an optional action
Login
Authentication forms: sign in, sign up, reset, one-time code
Cell Input
Fixed-shape entry, one cell per character
Skeleton
Hold the layout while the content loads