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
padding: 2 × spacing (0.5rem)
tw:p-4
padding: 4 × spacing (1rem)
tw:p-6
padding: 6 × spacing (1.5rem)
tw:p-8
padding: 8 × spacing (2rem)
tw:m-4
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
| Name | Min width |
|---|---|
| sm | 750px |
| md | 990px |
| lg | 1200px |
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.
- Ordered list item one with longer text that wraps so we can see how numbered lists handle multi-line content.
- Ordered list item two continues the pattern with adequate length for testing typography.
- 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 A | Column 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