/* ========================================================================== Flipsterz brand tokens — FLIP-165 -------------------------------------------------------------------------- ONE definition of the palette, loadable from any layout via asset(). It lives in public/ rather than resources/ because three of the four layouts (marketing, help, app chrome) already load their CSS that way and do not go through Vite. A token file only some layouts can reach is not a token file. PROVENANCE — these are not a preference. They are the brand mark's own inks. Measured from Flipsterz logo.jpg by ink mass (2026-09-07): wordmark 62% of ink #293544 -> navy "i" arrow 19% #6F6ECB -> indigo "Z" arrow 19% #35A686 -> mint The sampled values differ slightly from the ones below and the ones below win: the sample is a lossy JPEG render with anti-aliasing pulling every centroid toward the white ground. Do not "correct" these to match a sample. If a vector source arrives, re-derive from that instead. ========================================================================== */ /* -------------------------------------------------------------------------- ASSET NAMING — public/img/brand/ logo-on-light.webp 850x211, plus -480 and -200 hero.webp 1408x768, plus -800 Named for the GROUND they are legible on, not as "the" logo. There is deliberately no logo.webp. A knockout variant for dark grounds has been requested, and if the current file held the default name, anyone reaching for "the logo" in a dark section would get the one that measures 1.22:1 against #0F172A — invisible, and invisible in a way that looks like a missing image rather than a wrong choice. With no default there is no wrong default. The dark variant lands as logo-on-dark.webp beside this one. These sync to the CDN at cutover (existing-plus-new), so the names are permanent rather than staging. FlipAPI owns the write path; nothing is uploaded by hand, because a hand-placed object skips webp conversion and looks fine until it does not. -------------------------------------------------------------------------- */ :root { /* ── Brand ─────────────────────────────────────────────────────────── */ --fz-navy: #1E293B; --fz-indigo: #4F46E5; --fz-mint: #10B981; /* ── Grounds ───────────────────────────────────────────────────────── */ --fz-ground: #F8FAFC; /* light pages */ --fz-ground-dark: #0F172A; /* dark sections, and the hero's own ground */ /* ── Derived, so components do not invent their own greys ──────────── */ --fz-ink: var(--fz-navy); --fz-ink-muted: #64748B; --fz-rule: #E2E8F0; --fz-surface: #FFFFFF; /* ── Semantic. Separate from brand: a colour's JOB is not its hue. ─── AND SEPARATE PER GROUND, because two of the three brand inks fail WCAG on one ground each. Measured 2026-09-07, contrast against the grounds above: ink on #0F172A on #F8FAFC navy #1E293B 1.22:1 FAIL 13.98:1 ok indigo #4F46E5 2.84:1 FAIL 6.01:1 ok mint #10B981 7.04:1 ok 2.42:1 FAIL Mint INVERTS — it is the one ink that works on dark and fails on light. So there is no single assignment that serves both grounds, and aliasing a semantic role straight to a brand ink ships a contrast failure on one of them. Each role therefore has a ground-specific value; the brand inks above stay untouched for the mark itself. */ --fz-accent: #4F46E5; /* primary action, light ground — 6.01:1 */ --fz-accent-on-dark: #7E70FF; /* same role on #0F172A — 4.80:1 */ --fz-success: #0B815A; /* earned/verified, light ground — 4.67:1 */ --fz-success-on-dark: #10B981; /* brand mint is already fine — 7.04:1 */ /* ── Pro / locked ─────────────────────────────────────────────────── A FILL, NOT AN INK. LOCKED_CONTROLS.md and the shipped FLIP-112 control both use amber as a badge BACKGROUND with dark text on it (bg-amber-400 / text-amber-950), never as a foreground colour. That distinction decides the contrast question, and getting it wrong produces a much worse answer. Measured 2026-09-07: badge LABEL on the amber fill 8.97:1 ok, AA text amber fill against #0F172A 10.95:1 ok amber fill against #F8FAFC 1.56:1 below 3:1 The 1.56:1 is real but it is the badge's EDGE against a light page, not its legibility — the label is unaffected by the page ground because it sits on the amber. So amber does NOT stop working when help is restyled onto the light ground; the badge needs a border or a container edge there, which is a component decision rather than a palette one. Still Matthew's to confirm, since amber is outside the three brand inks. But the question is narrower than "does amber survive". */ /* ── Status system ────────────────────────────────────────────────── CAPTURED, NOT DESIGNED. This is already shipping, as a match() in components/property-tasks.blade.php:92-100 and tasks/show.blade.php:76. Seven rows, each an accent / tint / ink triple, each ink a deliberate darkening of its accent so it stays legible on the tint. Somebody built this properly and it was never written down anywhere a designer would look. Measured 2026-09-07 against --fz-ground, ink on its own tint and bare: complete #146c43 5.43 / 6.16 AA review #b02a37 5.38 / 6.21 AA rework #c55a0e 3.80 / 4.14 FAILS <- corrected below approval #856404 4.99 / 5.25 AA progress #0a58ca 5.61 / 6.15 AA bidding #59359a 7.24 / 8.36 AA default #495057 7.10 / 7.81 AA Six of seven pass. ONLY rework fails, and the token below carries the corrected value #b34d0c (4.62 / 5.04) rather than the shipped one. THE VIEWS STILL HARDCODE #c55a0e — adopting this token is therefore also the fix, and until they are migrated the two differ on purpose. One shade darker, still visibly orange, minimum change to clear AA. */ --fz-status-complete-accent: #198754; --fz-status-complete-tint: rgba(25, 135, 84, 0.10); --fz-status-complete-ink: #146C43; --fz-status-review-accent: #DC3545; --fz-status-review-tint: rgba(220, 53, 69, 0.10); --fz-status-review-ink: #B02A37; --fz-status-rework-accent: #FD7E14; --fz-status-rework-tint: rgba(253, 126, 20, 0.10); --fz-status-rework-ink: #B34D0C; /* corrected; views ship #c55a0e at 4.14 */ --fz-status-approval-accent: #FFC107; --fz-status-approval-tint: rgba(255, 193, 7, 0.10); --fz-status-approval-ink: #856404; --fz-status-progress-accent: #0D6EFD; --fz-status-progress-tint: rgba(13, 110, 253, 0.07); --fz-status-progress-ink: #0A58CA; --fz-status-bidding-accent: #6F42C1; --fz-status-bidding-tint: rgba(111, 66, 193, 0.10); --fz-status-bidding-ink: #59359A; --fz-status-default-accent: #6C757D; --fz-status-default-tint: rgba(108, 117, 125, 0.08); --fz-status-default-ink: #495057; /* ── General warning ──────────────────────────────────────────────── The replacement for .text-warning, which is #FFC107 as an ink and measures 1.56:1 on --fz-ground — a live failure in 23 files. Same value as the approval row today, DELIBERATELY NOT an alias to it. "Awaiting owner approval" and "warning" are different roles that currently agree on a colour; aliasing would make a future change to one silently move the other. */ --fz-warn-accent: #FFC107; --fz-warn-tint: rgba(255, 193, 7, 0.10); --fz-warn-ink: #856404; /* 5.25:1 on --fz-ground */ --fz-locked-fill: #FFC107; --fz-locked-ink: var(--fz-navy); /* 8.97:1 on the fill */ }