Colours

Core Colours

primary
primary-intense
secondary
secondary-intense

Text Colours

Heading

Paragraph

muted
Heading

Paragraph

accent
Heading

Paragraph

primary
Heading

Paragraph

secondary

Neutrals

neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900
neutral-950

Buttons

Size variants

Colour variants

Default variants

background
muted
accent
primary
secondary

Outline variants

background
muted
accent
primary
secondary

Other bits

Simple Link

Basic Tag

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph with bold text, italic text, and a link. It demonstrates how body copy flows with inline elements. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Another paragraph to show spacing between blocks of text. This helps you see line-height and margin relationships.

This is a blockquote. It's used for quoted text and should have distinct styling to set it apart from body copy.

  • Unordered list item one
  • Unordered list item two
    • Nested item
    • Another nested item
  • Unordered list item three
  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three
// Code block
function example() {
  return "monospace text";
}

Inline code snippet within text.

Small text for fine print or captions

Highlighted text and deleted text and inserted text.