Colours & type
The token system
Everything the stylesheet draws comes from CSS custom properties, generated from
theme settings in snippets/theme-styles.liquid. Nothing is hard-coded, so the
whole theme restyles from the editor.
That is also why the HTML edition
can look identical: its stylesheet is this theme's base.css with a static copy
of those tokens on top.
Colour schemes
Four schemes, applied per section:
| Scheme | Ships as | Used for |
|---|---|---|
| 1 | White | Most sections |
| 2 | Pale grey #fbfbfc |
Alternating bands |
| 3 | Crimson #d10024 |
Accent bands |
| 4 | Near-black #15161d |
Header announcement, footer |
Each scheme carries eight colours — background, text, heading, button, button label, outline button, accent, border. Changing a scheme changes every section using it, which is the point: you set the palette once, not per section.
The heading colour
Headings have their own colour, separate from body text, so a near-black title can sit over grey copy. It falls back to the text colour when unset.
One thing to know: inside an unboxed banner — a hero whose content sits directly on a photograph — headings and outline buttons ignore the scheme's heading and outline colours and follow the banner's own text colour instead. A dark heading on a dark hero would otherwise be unreadable, and the scheme's colours are chosen to sit on the scheme's background, not on your photograph.
Typography
| Setting | Ships as |
|---|---|
| Heading font | Montserrat, 700 |
| Body font | Montserrat, 400 |
| Heading case | Uppercase |
| Heading tracking | +0.01em |
| Heading scale | 100% |
| Body scale | 100% |
Both are Shopify font pickers, so anything in Shopify's library is available and the files are served from Shopify rather than a third party.
The two scale settings multiply every size in the type ramp, so you can make the whole theme a little larger or smaller without touching individual headings.
Radii and spacing
| Token | Ships as |
|---|---|
| Corner radius | 2px |
| Media radius | 2px |
| Page width | 1300px |
| Section spacing | 0px |
Section padding is fluid — clamp(2.5rem, 6vw, 5rem) — so sections breathe on a
desktop without swallowing a phone screen.
Editing the CSS directly
assets/base.css is a single, unminified file of about 1,900 lines with no build
step. Edit it in Shopify's code editor or locally with the CLI; what you write is
what ships.
If you are changing colours or type, change the settings rather than the stylesheet — the stylesheet reads the tokens, so a settings change survives an update and a stylesheet change does not.