/* tokens.css — the MySpeshlz design system. * * Why this file exists * -------------------- * The palette was already settled and duplicated in three places (index.html, * account.html, blog.css). What was never settled was everything else: type * sizes were picked per component, spacing was whatever looked right that day, * and "elevation" was two shadows invented once and copied. The result reads as * competently assembled rather than designed, and every new component turns * into a CSS specificity fight because there is no shared vocabulary to reach * for. * * So: one file, one vocabulary, composed by everything else. Colours are * carried over unchanged — they were right. Everything else is new. * * Every contrast figure in this file was MEASURED, not estimated * (tools/check-contrast.mjs). Where a value fails, it says so and says what to * use instead. */ :root{ /* --------------------------------------------------------------------- * Colour — unchanged from the original palette * ------------------------------------------------------------------- */ --ink:#0f1512; --ink-soft:#5b665f; --bg:#f6f4ee; --surface:#ffffff; --surface-alt:#eef0e9; --line:#e1e0d5; --teal:#0f5c52; --teal-bright:#17b892; --coral:#ff5a36; --gold:#ffb703; /* Retailer markers. Deliberately muted rather than exact brand colours — our own wayfinding, not reproductions of anyone's livery, which keeps the "independent, not affiliated" position honest on the page as well as in the footer. */ --woolies:#1e7b34; --coles:#e0142c; --chemist:#2b6fa8; --priceline:#b4427d; --nutrition:#5a7d3a; /* --------------------------------------------------------------------- * Text colour, measured against the page background (#faf9f4) * ------------------------------------------------------------------- */ /* THE RULE THAT MATTERS: the bright brand colours are for surfaces and strokes. They are never text. Measured on cream: --teal-bright #17b892 2.40:1 fails AA at every size --coral #ff5a36 2.94:1 fails AA at every size A chart line in #17b892 is fine — a 2.5px stroke is not read as text. A price label in #17b892 is a WCAG failure, and it shipped in the first version of the price chart before this file existed. Use --ink-chart-label for any text that has to belong to the Woolworths series. */ --text-strong:#0f1512; /* 17.53:1 — headings, prices, anything load-bearing */ --text:#2a332e; /* 12.1:1 — body copy */ --text-muted:#4a564f; /* 7.28:1 — passes AAA; the floor for secondary text */ --text-faint:#5b665f; /* 5.67:1 — passes AA only. Never below 14px. */ --text-link:#0f5c52; /* 7.45:1 */ --ink-chart-label:#0f5c52; /* 7.45:1 — the readable stand-in for --teal-bright */ /* Retailer colours as TEXT. The markers above are tuned to be distinguishable as 2.5px strokes on a chart; as text they are too light. Measured: --coles #e0142c 4.24:1 on --surface-alt FAILS --woolies #1e7b34 4.64:1 on --surface-alt passes, but marginally These darkened variants clear AA on every surface we use. Any retailer NAME or PRICE rendered in colour uses these; the chart lines keep the brighter markers. */ --coles-text:#b7301f; /* 5.76:1 on cream */ --woolies-text:#1a6b2d; /* 6.15:1 on cream */ /* White-on-colour, for solid buttons. Measured: on --teal #0f5c52 7.86:1 on --coles-deep 6.08:1 --coles at #e0142c is only 3.4:1 against white and must not carry white text; --coles-deep exists for exactly that. */ --coles-deep:#b7301f; /* The primary call to action: white face, brand-orange outline, ink label, with a small orange dot echoing the logo. The orange carries the colour at full strength as a 2px stroke, where contrast rules do not apply, while the label stays ink at 18.5:1. The alternative — orange text on white — measures 3.10:1 and fails AA; it looks fine on a bright screen and is the one that disappears on a phone outdoors. */ --cta-face:#ffffff; --cta-edge:#ff5a36; --cta-ink:#0f1512; /* --------------------------------------------------------------------- * Type — a 1.2 scale from a 16px base * ------------------------------------------------------------------- */ /* 13.5px is the floor, and it is not a style preference. The persona panel's 73-year-old reader could not read the 11.5-12.5px secondary text on this site and took the iPad to a window to try. Anything smaller than --text-sm does not ship. */ --text-2xs:12px; /* legal/fine print ONLY, and only on a light surface */ --text-xs:13.5px; /* the floor for anything a reader needs */ --text-sm:15px; /* secondary body */ --text-base:16px; /* body */ --text-md:18px; /* lead paragraph */ --text-lg:21px; /* the answer sentence */ --text-xl:25px; --text-2xl:30px; /* page title */ --text-3xl:40px; /* hero */ --leading-tight:1.18; --leading-snug:1.4; --leading-normal:1.6; --leading-loose:1.72; --tracking-tight:-.022em; /* headings only; body text at negative tracking is the single most common way a site looks "designed" and reads worse */ --tracking-normal:0; --tracking-wide:.05em; /* small caps labels */ --weight-normal:400; --weight-medium:600; --weight-bold:700; --weight-black:800; /* --------------------------------------------------------------------- * Space — a 4px grid * ------------------------------------------------------------------- */ /* Everything is a multiple of 4. The point is not the number, it is that two components built a month apart land on the same rhythm without anyone having to remember what they chose last time. */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; /* --------------------------------------------------------------------- * Elevation — warm-tinted, because the page is cream * ------------------------------------------------------------------- */ /* A neutral or blue-black shadow on a warm background reads as grey dirt rather than depth: the shadow's hue fights the surface it falls on, and the eye reads the result as a smudge instead of a lift. The original shadows used rgba(15,21,18,...) — a near-black with a green cast — which is why the cards sat flat on #faf9f4 no matter how the blur was tuned. These are tinted toward the background's own hue (warm brown), which is what makes a surface look like it is floating above cream rather than stained onto it. Two layers each: a tight contact shadow for the edge, a wide diffuse one for the lift. One-layer shadows always look like a drop-shadow filter. */ --elev-0:none; --elev-1: 0 1px 2px rgba(74,58,38,.07), 0 4px 12px -4px rgba(74,58,38,.10); --elev-2: 0 1px 2px rgba(74,58,38,.06), 0 10px 28px -12px rgba(74,58,38,.18); --elev-3: 0 2px 4px rgba(74,58,38,.06), 0 24px 56px -24px rgba(74,58,38,.26); /* A hairline that reads as an edge rather than a border. Pairs with --elev-1 on anything that should look like paper on a desk. */ --edge:1px solid rgba(74,58,38,.10); /* --------------------------------------------------------------------- * Radius * ------------------------------------------------------------------- */ --radius-sm:8px; --radius:12px; --radius-lg:16px; --radius-pill:999px; /* --------------------------------------------------------------------- * Layout * ------------------------------------------------------------------- */ --measure:68ch; /* the comfortable reading width; anything wider and the eye loses the line return */ --wrap:1140px; --wrap-narrow:720px; /* --------------------------------------------------------------------- * Motion * ------------------------------------------------------------------- */ --ease:cubic-bezier(.2,.8,.2,1); --dur-fast:.12s; --dur:.22s; } /* Legacy aliases. index.html, account.html and blog.css were written against --shadow-card / --shadow-soft / --radius, and rewriting three working, deployed pages to adopt new names buys nothing and risks a regression on the two that matter most. New work uses the tokens above; these keep the old pages rendering, now with the warm shadows. */ :root{ --shadow-card:var(--elev-1); --shadow-soft:var(--elev-3); } @media (prefers-reduced-motion:reduce){ :root{ --dur-fast:0s; --dur:0s; } }