Skip to main content
Skip to main content

Design System

Reference-grade component and style guide designed to stress-test tokens, accessibility, and responsive behaviour.

Jump to Forms Accessibility Checks

Typography

Display

text-5xl font-bold

Heading 1

text-4xl font-bold

Heading 2

text-3xl font-bold

Heading 3

text-2xl font-bold

Lead

text-xl font-semibold

Body

text-base

Rich text

This is a paragraph with strong text, emphasis, a link, highlighted text, and inline code.

A blockquote should have clear hierarchy and sufficient contrast in both light and dark modes.

Description term
Description details with wrap and spacing.
Another term
A longer description to test line height, wrapping, and layout density.

Code & pre 

/* Code block */
:root {
  --color-primary: #1d4ed8;
  --spacing-md: 1rem;
}

Keyboard keys: ⌘ K

Test: zoom to 200% and verify text reflows without horizontal scroll (except code blocks).

Colour

Swatches validate palette consistency, text contrast, and dark-mode token overrides.

Blue (Primary)

blue-50

bg-blue-50

blue-100

bg-blue-100

blue-200

bg-blue-200

blue-300

bg-blue-300

blue-400

bg-blue-400

blue-500

bg-blue-500

blue-600

bg-blue-600

blue-700

bg-blue-700

blue-800

bg-blue-800

blue-900

bg-blue-900

blue-950

bg-blue-950

Zinc (Neutral)

zinc-50

bg-zinc-50

zinc-100

bg-zinc-100

zinc-200

bg-zinc-200

zinc-300

bg-zinc-300

zinc-400

bg-zinc-400

zinc-500

bg-zinc-500

zinc-600

bg-zinc-600

zinc-700

bg-zinc-700

zinc-800

bg-zinc-800

zinc-900

bg-zinc-900

zinc-950

bg-zinc-950

Green (Success)

green-50

bg-green-50

green-100

bg-green-100

green-200

bg-green-200

green-300

bg-green-300

green-400

bg-green-400

green-500

bg-green-500

green-600

bg-green-600

green-700

bg-green-700

green-800

bg-green-800

green-900

bg-green-900

green-950

bg-green-950

Red (Error)

red-50

bg-red-50

red-100

bg-red-100

red-200

bg-red-200

red-300

bg-red-300

red-400

bg-red-400

red-500

bg-red-500

red-600

bg-red-600

red-700

bg-red-700

red-800

bg-red-800

red-900

bg-red-900

red-950

bg-red-950

Yellow (Warning)

yellow-50

bg-yellow-50

yellow-100

bg-yellow-100

yellow-200

bg-yellow-200

yellow-300

bg-yellow-300

yellow-400

bg-yellow-400

yellow-500

bg-yellow-500

yellow-600

bg-yellow-600

yellow-700

bg-yellow-700

yellow-800

bg-yellow-800

yellow-900

bg-yellow-900

yellow-950

bg-yellow-950

Gray

gray-50

bg-gray-50

gray-100

bg-gray-100

gray-200

bg-gray-200

gray-300

bg-gray-300

gray-400

bg-gray-400

gray-500

bg-gray-500

gray-600

bg-gray-600

gray-700

bg-gray-700

gray-800

bg-gray-800

gray-900

bg-gray-900

gray-950

bg-gray-950

Text contrast samples

Primary text (zinc-900)

Secondary text (zinc-700)

Muted text (zinc-500)

Link text (blue-700)

Semantic backgrounds

Success background
Warning background
Error background
Info background

Theme sanity checks

  • Check visited link colour and contrast.
  • Verify focus rings remain visible on every background.
  • Check hover styles don’t rely on colour alone (underline, weight, etc.).

Buttons

Primary

Secondary

Danger

As links

Link button External link

Test: focus styles must be visible on both buttons and anchor-buttons.

Button group (segmented)

Test: focus ring does not clip inside overflow container.

Badges & Tags

Status badges

Active Pending Blocked Draft

Removable tags (demo)

Finance Operations Policy

Test: remove buttons are keyboard reachable and labelled.

Pills + counters

Inbox 24 Alerts 3

Cards

Standard card

With header, body, actions.

Cards test spacing, typography, and interactive focus behaviour inside containers.

Media card

Includes a decorative media header. Ensure contrast in dark mode.

Card link

Clickable row pattern (a11y-safe)

  • Record A

    Supporting text and metadata.

    View

  • Record B

    Longer description to test wrapping.

    View

Test: avoid making the entire row clickable unless you implement robust focus/activation patterns.

Tables

Standard table

Name Role Status Last updated
Alice Smith Administrator Active 12 Aug 2025
Bob Jones Editor Pending 3 Jul 2025
Charlie Brown Viewer Draft 21 Jun 2025

Dense table + actions

Reference Amount Date Actions
#INV-1042 £1,240.00 28 Dec 2025 View Download
#INV-1041 £320.00 11 Dec 2025 View Download
#INV-1040 £98.50 1 Dec 2025 View Download

Test: horizontal scroll works on small screens without breaking layout.

Lists & Content

Unordered list

  • First item
  • Second item
    • Nested item A
    • Nested item B
  • Third item

Ordered list

  1. Step one
  2. Step two
  3. Step three

Content states

Empty

No results found.

Loading

Fetching records…

Error

Something went wrong. Try again.

Inline callout

Use callouts sparingly. Ensure they are not the only way to convey critical information.

Forms & Validation

We'll only use this to contact you about your application.

Contact preference
Options

Maximum 200 characters.

200 characters remaining

Test: labels, hints, error text, and error summary links must be accessible and focus the field.

Progress & Status

Progress element

45%

Meter element

70%

Signal quality

Inline spinner (CSS-only)

Loading records…

Test: respect prefers-reduced-motion if your global CSS disables animations.

Mini data viz (SVG)

Quarterly totals

Test: SVG fills can inherit currentColor for theme friendliness.

Overlays & Dialogs

Dialog (native)

Progressive enhancement: uses <dialog> when supported.

Confirm action

This is a native dialog. ESC closes by default.

Tooltip (simple)

Use sparingly; ensure it is not the only way to access content.

Test: tooltips must not trap focus; content should be available elsewhere.

Alerts & Notifications

Success

Your changes have been saved successfully.

Warning

This action may have unintended consequences.

Information

New updates are available.

Toast (demo)

Test: toast does not steal focus; announcement is via aria-live.

Spacing Scale

2 (0.5rem)

4 (1rem)

6 (1.5rem)

8 (2rem)

12 (3rem)

16 (4rem)

Borders & Radius

Border widths

border (1px)

border-2 (2px)

border-4 (4px)

Radius

rounded-sm

rounded-md

rounded-lg

rounded-xl

Focus ring clipping test

Test: focus ring remains visible even when parent containers use overflow.

Shadows & Elevation

shadow-sm

Low elevation

shadow

Default elevation

shadow-lg

High elevation

Layout & Responsiveness

Grid

Item 1

Responsive column count

Item 2

Responsive column count

Item 3

Responsive column count

Item 4

Responsive column count

Item 5

Responsive column count

Item 6

Responsive column count

Item 7

Responsive column count

Item 8

Responsive column count

Stack → row

Column A

Column B

Column C

Responsive media

Aspect ratio container for images/video.

Long word wrapping

Test: superlongunbrokenstring_superlongunbrokenstring_superlongunbrokenstring_superlongunbrokenstring

Test: ensure it wraps (break-words) and doesn’t overflow containers.

Accessibility

Focus visibility

Tab through these controls.

Focusable link

Screen reader only

The next sentence includes visually hidden content.

Order total: £123.45 (including VAT)

Reduced motion

Enable “Reduce motion” in your OS settings and verify transitions/animations reduce appropriately.

Test: spinner animation should stop/reduce if your global CSS disables it under prefers-reduced-motion.

Landmarks

  • Header uses role="banner" (component).
  • Main uses <main> landmark.
  • Footer uses role="contentinfo" (component).

Print

Print test content: verify heading hierarchy, link rendering, and that navigation/TOC is either useful or suppressed.

Example print block

Reference number: REF-2025-12-28
Date:

Test: print output removes unnecessary UI and preserves readability.