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 | Blush #fdf5f3 |
Alternating bands |
| 3 | Red #ff1616 |
Accent bands |
| 4 | Deep navy #232f55 |
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 navy titles can sit over neutral 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 navy 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 | Playfair Display, 700 |
| Body font | Roboto, 400 |
| Heading case | Sentence case |
| 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 | 6px |
| Media radius | 4px |
| 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.