Colours

All colours come from the @theme block in frontend/css/tailwind-theme.css.

Never use arbitrary colour values

bg-[#013d32] and text-[rgb(1,61,50)] are not acceptable. Use the token: bg-deep-green. If a Figma colour has no matching token, ask before proceeding rather than inventing one.

Palette

Primary greens — deep-green (#013D32, also primary), deep-green-tint-1 through -3, core-green (#175E3A, also secondary), leaf, compliant-leaf, leaf-tint-1 through -3

Warm and light — sun, warmth, warmth-tint, fern

Sky — sky, sky-tint-1, sky-tint-2

Accents — lavender, soft-coral, soft-coral-tint-1, creamsicle, darker-sun

Text contrast

Use compliant-leaf rather than leaf for text on light backgrounds. It’s the AA-compliant variant, and plain leaf will fail contrast checks at body sizes.

<!-- Good -->
<p class="text-compliant-leaf">Small print</p>

<!-- Fails AA -->
<p class="text-leaf">Small print</p>

Figma drift

Figma occasionally specs a colour a point or two off a palette token — #507761 where the palette has compliant-leaf at #527f65, for instance. Those are the same colour to the eye.

Use the token. Only add a new one if the difference is genuinely intentional and visible, and flag it before doing so.

Gradients

Section backgrounds use Shopify’s native color_background setting type, which gives merchants a gradient picker with arbitrary colour stops.

{
  "type": "color_background",
  "id": "background_gradient",
  "label": "t:sections.my-section.settings.background_gradient.label"
}

Output it directly — the value is a plain CSS string:

{%- if s.background_gradient != blank %}
background: {{ s.background_gradient }};
{%- endif %}

An empty value means no background, so the section falls through to whatever is behind it. That’s the “solid” case — you don’t need a separate style toggle.

Chaining sections

To flow one section’s background into the next, match the first section’s last colour stop to the next section’s first. Each section owns a self-contained gradient, so nothing needs to measure anything.

Utility gradients also exist as classes: bg-gradient-primary, bg-gradient-horizontal, bg-gradient-radial-warm.

Dark context

Sections that render on a dark background set data-theme="dark" on their wrapper. Components inside then invert through shared CSS rather than each carrying its own dark variant.

<section {% if is_dark %}data-theme="dark"{% endif %}
         class="text-deep-green dark:text-white">

Use the dark: variant for colours, never a hardcoded hex.