Where these values come from

The one-minute version (no code needed). Every colour and font on toshi.com.au comes from one control panel — Theme settings — like a thermostat for the whole house. A button isn't painted gold; it points at the central "button colour" dial. Turn the dial once and every button everywhere changes.

"Drift" is painting instead of pointing. A colour code (say #CFB091) typed into one section looks identical today — that's the trap. The copy is disconnected: when the dial turns, everything connected updates and the painted copy silently stays behind. No error — the site just stops matching itself.

See it on this page: the button gold changed centrally on 2026-07-05 and every connected button followed — but the hand-painted copies (option-tile hover, sale chips, popup accents) stayed on the old colours until each file was hunted down and repointed that evening. The Custom-setting snapshots below preserve exactly what the mismatch looked like; the hunt they required is the lesson. The final tally of that hunt (2026-07-05/06): roughly 65–70 hardcoded items harmonised to theme tokens across ~18 files — every one a value someone once typed by hand instead of pointing at the dial.

The rule: change colours and fonts in Theme settings — never by typing values into a section, stylesheet, or app dashboard. No dial for what you need? That's a conversation, not a workaround.

For the detail-inclined: values on this page carry one of three tags, and only one of them is live. This page exists to drive everything toward the first one:

Theme setting — rendered live via var(--...), never hand-typed, so these panels can't drift. The source of truth, and the destination everything below is harmonised toward.

Custom setting — a value hand-typed into one section or snippet, quoted verbatim from where the 2026-07-05 audit found it. Deliberate snapshots: they stay as written after the source is cleaned up, so the lesson outlives the fix.

Proposed — a hand-typed candidate that doesn't exist in the theme yet, mostly fixing contrast fails. A pending decision: once approved it's applied as a theme setting and the tag flips to Updated.

Updated — a Proposed that was approved and applied centrally, with the date. The Theme setting panel beside it renders the new value live; the before/after working lives in Key decisions.

Repointed — a Custom setting whose source files now read the token instead of a typed value, with the date. The Custom panel stays as a hardcoded snapshot of what the drift looked like.

Where: Shopify Admin → Online Store → Themes → Customize → Theme settings → Colors / Typography (…/admin/themes/<theme-id>/editor; current IDs in .claude/project-details.md).

Respect it: if a value looks wrong here, fix it in Theme settings (or add a real token in snippets/doc-head-styles.liquid) — never hardcode a workaround. A hardcoded value is a second source of truth the next person won't know to update.

App widgets (Fera reviews): styled inside the app. Colours and fonts go in Fera → Customization → Widget Customization → Advanced → Custom CSS, written against the same var(--...) tokens (they resolve on the storefront). The Basic Customization pickers store disconnected hex/px — sizes, star shape and layout only. Git mirror: agents/reference/fera-reviews-custom.css; keep both in sync.

Key decisions

Deliberate Theme settings changes — what moved, when, why. Before = hardcoded snapshot (keeps the history); after = live token.

2026-07-07 — Footer logo resolution: soft on retina → sharp (hi-res source + 2× srcset)

Before — the soft one

toshi_logo_b6c72085…png The old footer source was only 141×61 px — a hard ceiling. Shopify's CDN can't serve more pixels than the file has, so on a 2× (retina) screen it upscaled to fill a 160px box and went fuzzy. Shown here magnified to ~200px so the softness is obvious.

→

After — live, sharp

toshi_Logo_taupe.png (2000×863) Repointed the footer to the existing hi-res wordmark (same mark, already 2000px in the store — no new asset). sections/footer.liquid now emits an explicit 2× src + 1x/2x srcset, capped at the source width so it never upscales. Crisp on retina.

⚠ Warning — don't repeat this: check the source is ≥2× the display size

A logo (or any image) that looks fine on a normal monitor can be soft on retina / high-DPR screens, because those pack ~2× the physical pixels into the same CSS space. An image needs roughly double its on-screen width in real pixels to stay sharp. The footer logo was a 141px file shown in a 160px box — it needed ~320px of data and only had 141.

No CSS, srcset, or theme setting can fix a low-res source — the file is the ceiling. Requesting a bigger ?width= from the CDN just returns the same few pixels. The only remedy is re-uploading a higher-res image (ideally an SVG for a wordmark).

Before uploading a logo: make its longest side at least ~2× the largest box it will ever display in (e.g. a 160px footer slot → 320px+ file; 400px+ is safer). Gotcha: the shared snippets/image.liquid only builds a srcset when Theme setting image_quality ≠ "1" — this store has it at "1", so that snippet emits a bare 1× src. Logos that need retina crispness must hand-roll the 2× <img> (as the header and now the footer do).

Why: the footer wordmark read fuzzy against the crisp header. Root cause confirmed by probing the CDN (read the PNG's real dimensions): header source is 2000px and already sharp; the footer source was genuinely 141px. Changed: sections/footer-group.json image repointed to toshi_Logo_taupe.png; sections/footer.liquid text-block image now renders a direct 2× <img> instead of render 'image' (commit e334160). Dev theme only — LIVE untouched.

Borders & radius

Colour tokens

What the Pass / Fail pills mean (no code needed). Each pill scores how strongly text stands out from its background, from 1:1 (invisible) to 21:1 (black on white). The accessibility standard WCAG sets 4.5:1 as the bar for normal text — readable for ordinary ageing eyesight, not just perfect vision.

Who it's for: one in twelve men can't distinguish certain colours, contrast sensitivity declines from about age 40, and every customer is "low vision" on a phone in direct sunlight — exactly where someone buying a baby sun hat is standing. The old gold scored 1.9:1: real shoppers couldn't read "Add to cart" on the button that takes their money. Contrast is a conversion issue before it's a compliance issue.

And it's the law: Australian websites fall under the Disability Discrimination Act, measured against WCAG. 4.5:1 is the minimum, not gold-plating.

Rows read Theme setting → Proposed fix; where the 2026-07-05 audit found a hand-typed copy in the code, a Custom card leads. Pills are WCAG 2.1 ratios (AA: 4.5:1 text, 3:1 large text/UI), snapshotted — re-check after any colour edit.

"Exempt" = fails the ratio without violating WCAG: the rating star (snippets/rating.liquid) is aria-hidden decoration; the visible "4.8 / 5" text carries the rating. Holds only while that number stays visible.

Changing a colour is fine — what matters is where. A hex typed into one section changes only that section. A theme setting changes once, in Theme settings → Colors, and flows into every var(--...) everywhere.

Typography

Real examples from this theme's code (2026-07-05 audit). Rows stay after the source is fixed — the distinction is the point. Custom samples render the literal typed value, so the comparison is genuine.

Before typing a colour, font-family, or size, check it against this page. If it's not here, that's a conversation, not a guess.

Buttons & option tiles

Reused as-is from toshi-custom.css / main.css — this is the pattern the age-band size chips and colour tiles should match, not a new bespoke tile system.

Custom setting (2026-07-05 audit): the tile's hover/checked borders are hardcoded twice — toshi-custom.css:16-23 and main-product-toshi.liquid:45-63. When the gold changed on 2026-07-05 both copies were silently missed and still show #CFB091 — compare the tiles below. The hover border also fails contrast.

Price & rating

Rendered via the real snippets/price.liquid and rating partial, against the product picked in the section settings below — real components, real data, not a mockup.

Sample product: Organic Beanie Mystical Jasmine Oak