System

Style guide

Every colour, text style, component and motion token used in Slate. They live as tokens in the :root of css/slate.css; change them once and the whole site follows.

Colour

Colour/Ink#0d0d0bPage background, film base

Colour/Ink raised#171714Cards and fields on ink

Colour/Paper#ece8e0Light sections

Colour/Paper raised#e1dcd2Cards on paper

Colour/Text#ede9e1Text on ink (17.4:1)

Colour/Muted#a39e94Secondary text on ink (7.3:1)

Colour/Muted dark#5b5750Secondary text on paper (6.1:1)

Colour/Tally#ff4a1cThe REC light: buttons, playhead, marks

Colour/Tally text#b8300cTally as text on paper (4.9:1)

Type

Two families: Anton for headlines, always uppercase and never italic; Hanken Grotesk for everything else, with tabular figures for timecode.

Text/Mega
Anton · 84–400 px · 0.86

NORTHCUT

Text/Display
Anton · 64–184 px · 0.86

Page titles

Text/H2
Anton · 48–128 px · 0.86

Section titles

Text/H3
Hanken Grotesk 600 · 24–34 px

Card and step titles

Text/Lead
Hanken Grotesk 400 · 19–23 px · 1.45

A lead paragraph that introduces a section in one or two sentences.

Text/Body
Hanken Grotesk 400 · 17 px · 1.6

Body copy for project stories, journal posts and legal pages.

Text/Small
Hanken Grotesk 400 · 14 px

Captions, meta and notes

Text/Label
Hanken Grotesk 600 · 12 px · +12% · caps

Slate label

Timecode
Hanken Grotesk 600 · tabular figures

01:23:45:12

Components

Buttons

Primary Light Ghost Small

Label, filters and toggle

Slate label

Availability

Accordion

Open state

Answers use Text/Body in the muted colour.

Closed state

Hidden until opened.

CMS cards

Work card (Default, Wide, Five, Seven; Idle and Hover with video), post card (Default, Featured), testimonial, crew card, service row, award row. Each sits inside a Collection List.

Motion

One curve, one direction and three durations across the whole site.

Token	Value	How
Motion/Ease	`cubic-bezier(.2,.7,.1,1)`	CustomEase via GSAP; cubic-bezier fallback in CSS
Hover	`0.4s`	CSS :hover, button fill from below
Appear	`0.7s · y 24 · blur 6→0 · stagger 60 ms`	ScrollTrigger reveal, once (data-appear)
Lines	`0.9s · stagger 70 ms · mask`	Line split + ScrollTrigger (data-lines)
Image reveal	`0.9s · clip bottom→top · scale 1.08→1`	CSS clip-path + scale on reveal
Sticky	`Process cards stack at top + 14 px × n`	CSS position: sticky
Page	`Dip to black 0.38s with slate`	CSS black overlay fade on navigation
Marquee	`42 s per loop, pauses on hover`	CSS marquee animation
Reduced motion	`All of the above off`	prefers-reduced-motion

Space & grid

Gutter	`16 → 48 px`
Section	`88 → 176 px`
Max width	`1720 px`
Radius	`14 → 22 px (cards), 10 px (small), pill (buttons)`
Breakpoints	`1200 · 810 · 390 — tested at 360, 390, 768, 1024, 1440, 1920`