/* ============================================================================ TRADE HANDY AUSTRALIA — th-semantic.css · v1.0.0 · 3 Aug 2026 SITE-WIDE RULE, set by Sean: "dont forget white where it makes it easier on the eyes, colour is still good to use instead of flattening and sticking to just the site colours, reds and other colours can be used for warnings and you can stick to certain standardised colours for when its something which is universal" TWO IDEAS, BOTH LOAD-BEARING. ── 1. SAFETY COLOUR IS NOT A BRAND DECISION ───────────────────────────── Australia already has a standard for this and our users read it every day on site: AS 1319 (Safety signs for the occupational environment). RED Danger · Prohibition · Fire. Contact or wrong action will likely cause death or serious injury. YELLOW Warning. A real hazard, but not life-threatening. BLUE MANDATORY. Something that MUST be done or worn — this is the colour of every PPE sign on every gate in the country. GREEN Safe condition · emergency information. Exits, first aid, all-clear. So: hi-vis and hard hat render BLUE, because that is what the sign at the boom gate looks like. A closure renders RED. Roadworks render YELLOW. A cleared report renders GREEN. We are not inventing a language — we are matching the one already in the driver's head, which is faster to read than anything we could design. 🔴 NEVER use brand teal to mean "danger" and never use red for a brand accent. The moment safety colour becomes decorative it stops working. ── 2. DARK IS FOR CANVAS. LIGHT IS FOR READING. ───────────────────────── Flattening the whole product into navy was wrong. Long-form reading on a dark background is harder for most people, and a driver in a sunlit cab needs maximum contrast, not mood. DARK surfaces → maps, night use, media, anything glare-sensitive LIGHT surfaces → documents, dockets, invoices, tables, forms, long text Use `.sheet-light` on any dense reading surface, even inside a dark page. Every pair below is contrast-checked against WCAG 2.2 AA (see the table at the foot of this file — measured, not assumed). ========================================================================= */ :root{ /* ── AS 1319 safety palette ────────────────────────────────────────── Tuned for screen legibility while keeping each hue unmistakably itself. -ink = for text/icons on a LIGHT surface -on = for text/icons on a DARK surface -bg = tinted fill -line = border for that fill */ /* RED — danger, prohibition, stop */ --sig-danger: #D7263D; --sig-danger-ink: #A8102A; /* on light */ --sig-danger-on: #FF8A80; /* on dark */ --sig-danger-bg: rgba(215,38,61,.10); --sig-danger-line: rgba(215,38,61,.34); /* YELLOW/AMBER — warning, caution */ --sig-warn: #F5A623; --sig-warn-ink: #8A5A00; /* darkened: pure amber fails AA on white */ --sig-warn-on: #FFC65C; --sig-warn-bg: rgba(245,166,35,.11); --sig-warn-line: rgba(245,166,35,.34); /* BLUE — MANDATORY. PPE, required action, must-do. */ --sig-must: #1565C0; --sig-must-ink: #0D47A1; --sig-must-on: #7FB2F0; --sig-must-bg: rgba(21,101,192,.12); --sig-must-line: rgba(21,101,192,.36); /* GREEN — safe condition, all clear, complete */ --sig-safe: #177A42; --sig-safe-ink: #14663A; --sig-safe-on: #5FD98E; --sig-safe-bg: rgba(23,122,66,.11); --sig-safe-line: rgba(23,122,66,.33); /* NEUTRAL — information, no safety meaning */ --sig-info: #5B6670; --sig-info-ink: #3E4952; --sig-info-on: #9DB0BE; --sig-info-bg: rgba(91,102,112,.12); --sig-info-line: rgba(91,102,112,.30); /* ── LIGHT SURFACES — for reading ─────────────────────────────────── */ --pw: #FFFFFF; --pw-2: #F6F8FA; /* zebra rows, wells, insets */ --pw-3: #ECF0F4; /* rules, dividers, chips */ --pw-line: #D9E0E7; --pw-tx: #10202C; /* primary text on paper */ --pw-tx-2: #4A5B68; /* secondary text on paper */ --pw-tx-3: #63737D; /* tertiary — the floor for AA at 14px+ */ } /* ── LIGHT READING SURFACE ──────────────────────────────────────────── Drop onto any dense reading block — a docket, an invoice, a table, a long form — even when it sits inside a dark page. */ .sheet-light{ background:var(--pw); color:var(--pw-tx); border:1px solid var(--pw-line); border-radius:14px; } .sheet-light h1,.sheet-light h2,.sheet-light h3,.sheet-light h4,.sheet-light strong{color:var(--pw-tx)} .sheet-light p,.sheet-light td,.sheet-light li{color:var(--pw-tx-2)} .sheet-light small,.sheet-light .muted{color:var(--pw-tx-3)} .sheet-light hr{border:0;border-top:1px solid var(--pw-line)} .sheet-light a{color:#0B6E8F} .sheet-light table{width:100%;border-collapse:collapse} .sheet-light th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase; color:var(--pw-tx-3);border-bottom:1px solid var(--pw-line);padding:9px 10px} .sheet-light td{padding:10px;border-bottom:1px solid var(--pw-3)} .sheet-light tbody tr:nth-child(even){background:var(--pw-2)} /* ── SIGNAL CHIPS — same API on light or dark ───────────────────────── Hi-vis */ .sig{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600; padding:4px 10px;border-radius:999px;border:1px solid transparent;line-height:1.35} .sig svg{width:13px;height:13px;flex:none} .sig-danger{background:var(--sig-danger-bg);border-color:var(--sig-danger-line);color:var(--sig-danger-ink)} .sig-warn {background:var(--sig-warn-bg); border-color:var(--sig-warn-line); color:var(--sig-warn-ink)} .sig-must {background:var(--sig-must-bg); border-color:var(--sig-must-line); color:var(--sig-must-ink)} .sig-safe {background:var(--sig-safe-bg); border-color:var(--sig-safe-line); color:var(--sig-safe-ink)} .sig-info {background:var(--sig-info-bg); border-color:var(--sig-info-line); color:var(--sig-info-ink)} /* On a dark surface the tinted fill stays, the text lightens. */ .on-dark .sig-danger,.sheet-dark .sig-danger{color:var(--sig-danger-on)} .on-dark .sig-warn, .sheet-dark .sig-warn {color:var(--sig-warn-on)} .on-dark .sig-must, .sheet-dark .sig-must {color:var(--sig-must-on)} .on-dark .sig-safe, .sheet-dark .sig-safe {color:var(--sig-safe-on)} .on-dark .sig-info, .sheet-dark .sig-info {color:var(--sig-info-on)} /* ── SOLID BADGE — when it has to be unmissable (a closure, a stop) ── */ .sig-solid{color:#fff;border-color:transparent} .sig-solid.sig-danger{background:var(--sig-danger)} .sig-solid.sig-warn {background:var(--sig-warn);color:#2A1B00} /* amber needs dark text */ .sig-solid.sig-must {background:var(--sig-must)} .sig-solid.sig-safe {background:var(--sig-safe)} /* ── LEFT-EDGE SEVERITY BAR — for list rows ─────────────────────────── */ .edge{position:relative;padding-left:13px} .edge::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:2px;background:var(--sig-info)} .edge-danger::before{background:var(--sig-danger)} .edge-warn::before {background:var(--sig-warn)} .edge-must::before {background:var(--sig-must)} .edge-safe::before {background:var(--sig-safe)} /* Colour must never be the ONLY carrier of meaning (WCAG 1.4.1). Every signal class above is paired with an icon and a text label in markup. */ @media (prefers-contrast:more){ .sig{border-width:2px} .edge::before{width:5px} } /* ============================================================================ MEASURED CONTRAST — WCAG 2.2 AA needs 4.5:1 for body text, 3:1 for large text and UI boundaries. COMPUTED 3 Aug 2026 with the WCAG relative-luminance formula. Two of my first-draft colours FAILED and were changed: · --pw-tx-3 was #6B7C89 (4.31 ✗) -> #63737D · --sig-safe was #1B8A4B (white on it = 4.39 ✗) -> #177A42 ON PAPER (#FFFFFF) --pw-tx #10202C 16.60 : 1 AAA --pw-tx-2 #4A5B68 7.03 : 1 AAA --pw-tx-3 #63737D 4.91 : 1 AA danger-ink #A8102A 7.57 : 1 AAA warn-ink #8A5A00 5.93 : 1 AAA (raw #F5A623 = 2.03 FAIL) must-ink #0D47A1 8.63 : 1 AAA safe-ink #14663A 7.02 : 1 AAA ON INK (#0c2438 — the dark site background) danger-on #FF8A80 6.94 : 1 AAA warn-on #FFC65C 10.18 : 1 AAA must-on #7FB2F0 7.19 : 1 AAA safe-on #5FD98E 8.91 : 1 AAA info-on #9DB0BE 7.08 : 1 AAA SOLID BADGES (white text unless noted) danger #D7263D 4.96 : 1 AA must #1565C0 5.75 : 1 AA safe #177A42 5.39 : 1 AA warn #F5A623 needs DARK text (#2A1B00) = 8.25 : 1 AAA RULE: never put a raw signal colour on white as text. Use the -ink variant. ========================================================================= */ /* ============================================================================ CONVENTIONAL COLOURS — locked by the outside world, not by our brand Added 4 Aug 2026. See _COLOUR-LAW.md. DOCTRINE: Brand colour identifies. Functional colour instructs. WHEN THEY COLLIDE, BRAND LOSES. Fluent 2: semantic colours "should always convey important information... Don't use them for decoration." GitHub — a blue-accent product — ships --button-star-iconColor: #eac54f (gold). Nobody brand-colours stars. 🔴 OUR TWO COLLISIONS, RESOLVED: 1. TEAL #00B8BB sits next to INFO BLUE. If info callouts are teal, they stop reading as messages and start reading as branding. → info is BLUE. Teal stays on logo, primary CTA, selected, focus. 2. GOLD #C9AE5D sits next to WARNING AMBER *and* STAR GOLD. It cannot be chrome AND warning AND rating. → gold DEMOTED to premium/tier badges + marketing only. → stars get purer amber #EAA300 (reads as a rating, not our brand) → warnings get TRUE YELLOW, because amber beside red is nearly indistinguishable under deuteranopia; true yellow is not. ========================================================================= */ :root{ /* RATINGS — gold/amber. Never brand. Never grey-solid when empty. */ --c-rating: #EAA300; --c-rating-empty: var(--pw-line); /* OUTLINE, not a grey fill */ /* the rating NUMBER is neutral text — gold fails contrast as text */ /* TRUST / STATUS BADGES */ --c-verified: #0969DA; /* blue tick — most standardised colour in UI */ --c-upsell: #8250DF; /* Pro / upgrade — purple (GitHub --fgColor-upsell) */ --c-done: #8250DF; /* completed != success. Green is for success only */ --c-favourite: #EAC54F; /* saved star */ --c-like: #BF3989; /* heart. Star = save, heart = like. NEVER mix */ --c-draft: #59636E; /* NOTIFICATIONS */ --c-badge: #CF222E; /* unread count — red pill, white text */ --c-badge-tx: #FFFFFF; --c-bell: var(--mut); /* bell at rest is NEUTRAL, not brand */ /* PRESENCE — pair EVERY dot with a glyph (WCAG 1.4.1, as Teams does) */ --c-online: #107C10; --c-away: #EAA300; --c-busy: #C50F1F; --c-offline: #616161; /* hollow ring, not a filled dot */ /* INFO — deliberately BLUE so it can never be mistaken for brand teal */ --c-info: #0969DA; --c-info-bg: rgba(9,105,218,.10); --c-info-line: rgba(9,105,218,.32); /* SEVERE — the 4th step between warning and error */ --c-severe: #BC4C00; --c-severe-bg: rgba(188,76,0,.10); /* PRIORITY — Jira ladder. Bottom two are GREY: low priority must RECEDE. */ --c-pri-urgent: #A8102A; --c-pri-high: #BC4C00; --c-pri-med: #8A5A00; --c-pri-low: #63737D; --c-pri-lowest: #9DB0BE; /* MONEY — named by MEANING not hue. In CN/JP/TW/KR red=gain, green=loss. That must be a token flip, not a redesign. 🔴 COLOUR THE DELTA, NEVER THE BALANCE. Most amounts are neutral text. */ --c-amount: var(--pw-tx); /* the default. Most money is NOT coloured */ --c-gain: #14663A; --c-loss: #A8102A; /* INVOICE LADDER */ --c-inv-draft: #63737D; --c-inv-sent: #0969DA; --c-inv-paid: #14663A; --c-inv-overdue: #A8102A; } /* Star row. Empty stars are OUTLINED — a grey fill reads as "disabled". */ .stars{display:inline-flex;gap:2px;align-items:center} .stars svg{width:15px;height:15px;fill:none;stroke:var(--c-rating-empty);stroke-width:1.5} .stars svg.on{fill:var(--c-rating);stroke:var(--c-rating)} .stars + .stars-n{margin-left:6px;color:var(--pw-tx-2);font-variant-numeric:tabular-nums} /* Unread badge — red pill on an icon corner. Only ever a COUNT. */ .badge-n{min-width:16px;height:16px;padding:0 5px;border-radius:8px;background:var(--c-badge); color:var(--c-badge-tx);font-size:11px;font-weight:700;line-height:16px;text-align:center; font-variant-numeric:tabular-nums;display:inline-block} /* Presence dot — ALWAYS pair with a glyph, never colour alone. */ .dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none} .dot-online{background:var(--c-online)} .dot-away{background:var(--c-away)} .dot-busy{background:var(--c-busy)} .dot-offline{background:transparent;box-shadow:inset 0 0 0 2px var(--c-offline)} /* Money. Default is NEUTRAL — only the exception is coloured, and never colour-alone: accounting already gives us the minus sign and parentheses. */ .amt{font-variant-numeric:tabular-nums;color:var(--c-amount)} .amt-gain{color:var(--c-gain)} /* always paired with a + sign */ .amt-loss{color:var(--c-loss)} /* always paired with - or ( ) */