Palette
Slugs from theme.json; a brand child theme changes the colours only. The names after each swatch say where the old site uses it.
brand
Brand: footer, primary button, header button
ink
Ink: headings and large text
accent
Accent: eyebrows ("Our Partners"), "AirSmart" in "Shop AirSmart"
tertiary
Tertiary: not used on the old site
grey-dark
Dark grey: body text (16 px), small text, prices
grey
Grey: text in the grey-tone sections
grey-light
Light grey: rules, partner circles
grey-faint
Faint: background of the faint-tone bands
paper
Paper: page background, text on dark bands
success
Success (device indicator colour)
warning
Warning (and the catalogue bars)
risky
Risky (device indicator colour)
Type
BDO Grotesk (the one agreed change from the old site’s Rubik). Sizes are the old site’s, measured at 1670 px and 485 px, fluid between 485 and 1000 px.
Heading 1: The quick brown fox jumps over the lazy dog
h1: 67.84 px / 48.4 px on phones, weight 500, line 1.056
Heading 2: The quick brown fox jumps over the lazy dog
h2: 47.1 / 35.44, weight 500, line 1.114, colour heading (#1d1d1d) or ink in bold bands
Heading 3: The quick brown fox jumps over the lazy dog
h3: 36.74 / 28.96, weight 500, line 1.142, ink
Heading 4: The quick brown fox jumps over the lazy dog
h4: 26.37 / 22.48, weight 500, line 1.171, ink
Large text: The quick brown fox jumps over the lazy dog
p class="mk-large": 22.91 / 20.32, weight 400, line 1.5, ink
Body text: The quick brown fox jumps over the lazy dog
p: 16 / 16, line 1.5, dark grey
Small text: The quick brown fox jumps over the lazy dog
p class="mk-small": 14 / 14.92, line 1.5
Large text with a grey span, an accent span, a link and bold.
List item one
List item two
A blockquote heading
Blockquotes are indented 40 px with no bar.
Buttons
Primary (brand), outline (1 px, current colour), tertiary (text on paper, square). 16 px uppercase, 12.8 px by 16 px padding, 6.4 px radius; the add-to-cart button is wider and 53 px tall.
The grid
The content column is the window minus 4vw each side, capped at 1440 px (6vw gutters on phones). Inside it, 24 columns with 11 px gaps; one grid row is 1.853vw + 11 px (41.95 px at 1670, 35 px on phones). Components place their parts on these lines; the numbers in a page data file are grid lines 1 to 25 and rows.
Logos
From the active brand child theme’s assets folder; the Figma Brand file is the master.
logo.svg: Header logo, 64 px tall in the ribbon
logo-white.svg: Footer and app-band logo
icon.svg: Mark alone: the ribbon under 800 px
icon-white.svg: Mark alone, white
Section tones
This band is the grey tone (the old site’s “white” theme): text is grey unless a span says ink. The bands above alternate paper and faint. Dark and brand tones put paper text on a photo or on the brand colour: see the app band on the home page and the footer below.