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

Button

Actions that communicate intent and hierarchy

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

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

Accordion

Expandable sections with single or multi-open modes

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