Styleguide

Design tokens from the built Tailwind config (app.css). Regenerate with npm run generate:styleguide after config changes.

Colors

white

#ffffff

tw:text-white

black

#000000

tw:text-black

brand-yellow

#F3C64D

tw:text-brand-yellow

exclusive-grey

#898A8D

tw:text-exclusive-grey

warm-black

#372F2B

tw:text-warm-black

dark-grey

#4D4D4D

tw:text-dark-grey

medium-grey

#D5D7D7

tw:text-medium-grey

light-grey

#F5F5F5

tw:text-light-grey

sale-red

#F1500C

tw:text-sale-red

flash-green

#00C90D

tw:text-flash-green

brand-yellow-dark

#E5B83E

tw:text-brand-yellow-dark

secondary

tw:text-secondary

Font sizes

Sample text at 3xs (0.5rem)

tw:text-3xs

Sample text at 2xs (0.75rem)

tw:text-2xs

Sample text at xs (0.875rem)

tw:text-xs

Sample text at sm (1rem)

tw:text-sm

Sample text at lg (1.125rem)

tw:text-lg

Sample text at md (1.125rem)

tw:text-md

Sample text at base (1.25rem)

tw:text-base

Sample text at xl (1.25rem)

tw:text-xl

Sample text at 2xl (1.5rem)

tw:text-2xl

Sample text at 3xl (2rem)

tw:text-3xl

Sample text at 4xl (2.5rem)

tw:text-4xl

Sample text at 6xl (3.75rem)

tw:text-6xl

Sample text at 7xl (5rem)

tw:text-7xl

Sample text at 9xl (7.5rem)

tw:text-9xl

Sample text at 16xl (11.25rem)

tw:text-16xl

Line height

Sample text with this line height. Multiple lines help show how the spacing between lines looks in practice. Add enough content to wrap.

tw:leading-none (1)

Sample text with this line height. Multiple lines help show how the spacing between lines looks in practice. Add enough content to wrap.

tw:leading-tight (1.25)

Sample text with this line height. Multiple lines help show how the spacing between lines looks in practice. Add enough content to wrap.

tw:leading-normal (1.5)

Sample text with this line height. Multiple lines help show how the spacing between lines looks in practice. Add enough content to wrap.

tw:leading-loose (2)

Spacing

Scale based on --tw-spacing (base: 0.25rem)

tw:p-2

Box

padding: 2 × spacing (0.5rem)

tw:p-4

Box

padding: 4 × spacing (1rem)

tw:p-6

Box

padding: 6 × spacing (1.5rem)

tw:p-8

Box

padding: 8 × spacing (2rem)

tw:m-4

Box with margin

margin: 4 × spacing (1rem)

tw:gap-2

gap: 2 × spacing (0.5rem)

tw:gap-4

gap: 4 × spacing (1rem)

tw:gap-8

gap: 8 × spacing (2rem)

Breakpoints

NameMin width
sm750px
md990px
lg1200px

Fonts

The quick brown fox jumps over the lazy dog

tw:font-gellix

'Gellix', sans-serif

Prose

Typography styles from tw:prose (@tailwindcss/typography)

Heading 1

A lead paragraph with slightly larger text for introductions or summaries. This paragraph runs across multiple lines so you can see how line height and spacing look in practice. The typography plugin ensures comfortable reading with appropriate margins and text flow.

Heading 2

Regular paragraph with bold text and a link. Inline code is also styled. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Heading 3

A blockquote for highlighting important quotes or callouts. This extended quote demonstrates how longer blockquote text wraps and flows. The left border and italic styling help it stand out from the main content.

Heading 4

  • Unordered list item one with enough text to wrap onto multiple lines and show how list styling behaves.
  • Unordered list item two: another sentence to demonstrate spacing between list items and line height.
  • Unordered list item three completes the set with similar length for consistency.
  1. Ordered list item one with longer text that wraps so we can see how numbered lists handle multi-line content.
  2. Ordered list item two continues the pattern with adequate length for testing typography.
  3. Ordered list item three wraps up the ordered list example.

Inline kbd for keyboard shortcuts. This paragraph adds more body text to show how regular prose flows with sufficient length to wrap across several lines on typical screen widths.

// Code block
function example() {
  return "pre + code styling";
}
Column AColumn B
First cell with longer content to show how table cells wrap.Second cell with similar length for balance.
Another row to demonstrate table row spacing.And how borders separate the content.

Usage: class="tw:prose"

Border radius

sm

0.25rem

lg

0.5rem

xl

0.75rem

2xl

1rem

3xl

1.25rem

full

9999px (pill/circle)

Containers

xl: 39.38rem

2xl: 41rem

4xl: 56rem

page: 83.75rem

Font weights

Sample text at font-weight light (300)

tw:font-light

Sample text at font-weight normal (500)

tw:font-normal

Sample text at font-weight medium (500)

tw:font-medium

Sample text at font-weight semibold (600)

tw:font-semibold

Sample text at font-weight bold (700)

tw:font-bold