Milestone 1 · test page
Kitchen sink
Every colour theme as one block: a headline with a Tomboy accent word, body text, both buttons, a link, and a card and a badge in the theme's partner colour. Contrast is measured on this page and listed at the end.
theme-light
Neutral 50 and Blue
Body text in Inter 16 on Neutral 50, set in Academy Navy. The accent word is Tomboy Bold; shapes and keylines use Discovery Blue.
Muted text (text-2) in Inter 14, as used in the nav and footer.
Card title
Season Mix SemiBold 20 title, body in Inter 16.
theme-dark
Academy Navy and Sky
Body text in Inter 16 on Academy Navy, set in white. The accent word is Tomboy Bold; shapes and keylines use Sky.
Muted text (text-2) in Inter 14, as used in the nav and footer.
Card title
Season Mix SemiBold 20 title, body in Inter 16.
theme-brand
Discovery Blue and Cyan
Body text in Inter 16 on Discovery Blue, set in white. The accent word is Tomboy Bold; shapes and keylines use Cyan.
Muted text (text-2) in Inter 14, as used in the nav and footer.
Card title
Season Mix SemiBold 20 title, body in Inter 16.
theme-cream
Cream and Navy
Body text in Inter 16 on Cream, set in Academy Navy. The accent word is Tomboy Bold; shapes and keylines use Amber.
Muted text (text-2) in Inter 14, as used in the nav and footer.
Card title
Season Mix SemiBold 20 title, body in Inter 16.
theme-green
Wilderness Green and Lime
Body text in Inter 16 on Wilderness Green, set in white. The accent word is Tomboy Bold; shapes and keylines use Meadow Lime.
Muted text (text-2) in Inter 14, as used in the nav and footer.
Card title
Season Mix SemiBold 20 title, body in Inter 16.
theme-lime
Meadow Lime and Green
Body text in Inter 16 on Meadow Lime, set in Academy Navy. The accent word is Tomboy Bold; shapes and keylines use Wilderness Green.
Muted text (text-2) in Inter 14, as used in the nav and footer.
Card title
Season Mix SemiBold 20 title, body in Inter 16.
theme-berry
Encore Berry and Pink
Body text in Inter 16 on Encore Berry, set in white. The accent word is Tomboy Bold; shapes and keylines use Blossom Pink.
Muted text (text-2) in Inter 14, as used in the nav and footer.
Card title
Season Mix SemiBold 20 title, body in Inter 16.
theme-pink
Blossom Pink and Berry
Body text in Inter 16 on Blossom Pink, set in Academy Navy. The accent word is Tomboy Bold; shapes and keylines use Encore Berry.
Muted text (text-2) in Inter 14, as used in the nav and footer.
Card title
Season Mix SemiBold 20 title, body in Inter 16.
theme-cyan
Cyan and Blue
Body text in Inter 16 on Cyan, set in Academy Navy. The accent word is Tomboy Bold; shapes and keylines use Discovery Blue.
Muted text (text-2) in Inter 14, as used in the nav and footer.
Card title
Season Mix SemiBold 20 title, body in Inter 16.
theme-sky
Sky and Navy
Body text in Inter 16 on Sky, set in Academy Navy. The accent word is Tomboy Bold; shapes and keylines use Academy Navy.
Muted text (text-2) in Inter 14, as used in the nav and footer.
Card title
Season Mix SemiBold 20 title, body in Inter 16.
theme-yellow
Curiosity Yellow and Brown
Body text in Inter 16 on Curiosity Yellow, set in Academy Navy. The accent word is Tomboy Bold; shapes and keylines use Brown.
Muted text (text-2) in Inter 14, as used in the nav and footer.
Card title
Season Mix SemiBold 20 title, body in Inter 16.
theme-orange
Spark Orange and Peach
Body text in Inter 16 on Spark Orange, set in white. The accent word is Tomboy Bold; shapes and keylines use Sunset Peach.
Muted text (text-2) in Inter 14, as used in the nav and footer.
Card title
Season Mix SemiBold 20 title, body in Inter 16.
theme-peach
Sunset Peach and Navy
Body text in Inter 16 on Sunset Peach, set in Academy Navy. The accent word is Tomboy Bold; shapes and keylines use Spark Orange.
Muted text (text-2) in Inter 14, as used in the nav and footer.
Card title
Season Mix SemiBold 20 title, body in Inter 16.
Contrast, measured
WCAG ratios read from the colours this page renders. Text under 24px needs 4.5; headlines and the Tomboy word are display sizes and need 3. Hover a number to see the two colours measured.
| Theme | Body textmin 4.5 | Muted textmin 4.5 | Headlinemin 3 | Tomboy wordmin 3 | Primary buttonmin 4.5 | Secondary buttonmin 4.5 | Primary hovermin 4.5 | Secondary hovermin 4.5 | Linkmin 4.5 | Card textmin 4.5 | Badge capsmin 4.5 | Badge numbermin 3 |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Measuring… | ||||||||||||