Style Guide
Every token and shared component the theme ships. Resize the window: the type scale and the page gutter are fluid, and the carousels only overflow once the viewport is narrow enough.
Colour
Brand
-
white
-
black
-
cosmos
-
midnight
-
blue
-
turquoise
-
perot-red
-
fossil
-
quartz
-
clay
-
yellow
-
green
Hover
-
perot-red-shade
-
perot-red-deep
Semantic
-
surface-dark
-
surface-darkest
-
surface-light
-
surface-muted
-
ink
-
ink-inverse
-
rule
-
accent
-
accent-cool
-
accent-warm
-
interactive
-
interactive-contrast
Type
text-h1 — H1 — 65px to 130px, weight 700
Curiosity Unbound
text-h2 — H2 — 40px to 60px
Curiosity Unbound
text-h3 — H3 — 48px, no mobile style in the design
Curiosity Unbound
text-h4 — H4 — 28px to 36px
Curiosity Unbound
text-h5 — H5 — 24px to 30px
Curiosity Unbound
text-body-l — Body L — 18px to 24px
Curiosity Unbound
text-body — Body — 16px, line height changes at 48rem
Curiosity Unbound
text-body-s — Body S — 14px
Curiosity Unbound
type-button — Button — 14px, uppercase
Button
Hover the two variants: primary darkens and draws a frame in from the corners, outline inverts to a black fill. Tab through them for the focus ring.
Variants
Behaviour
Carousel
A has eight narrow items and auto-advances every two seconds; B has three wide ones and does not. Narrow the window until the tracks overflow, then check the controls disable at each end. With Reduce Motion on, A stops advancing.