/* ============================================================ COLOUR Two layers. Primitives are raw values and are NEVER applied directly in a design. Semantic roles are what you use. Names mirror Figma: color/text/primary -> --color-text-primary ============================================================ */ :root { /* ---- PRIMITIVES ------------------------------------------ Steps are open-ended on purpose: 450 can be inserted between 400 and 500 later without renaming anything. */ /* Navy - Nile Blue. The brand ground. */ --color-base-navy-700: #162D54; --color-base-navy-900: #0F2244; /* Orange - Princeton Orange. Icons, illustration, badges, nav active. */ --color-base-orange-500: #FF9A24; --color-base-orange-600: #E8891A; /* Flamingo - the action colour. Buttons, solid and outline. */ --color-base-flamingo-500: #F15C30; --color-base-flamingo-600: #D94A23; /* Neutral - mono scale. The guidelines express mono as percentages of black - 100 / 80 / 10 / 5 - plus White. Two steps are system additions to that ramp, and both are stated as black tints on purpose: 50 is ~3% black, 500 is Black 60%. CS-14: 50 is NOT the panel grey, despite its former comment here. Production declares it twice and both are a comment-form field fill. It carries no semantic role until WEB-2 rules the input fill. That is safe because primitives are never applied directly - an unreferenced rung is a recorded gap, not a live hazard. */ --color-base-neutral-0: #FFFFFF; --color-base-neutral-50: #F8F8F8; /* form-field fill. No role. CS-14. */ --color-base-neutral-100: #F2F2F2; /* the one light grey. CS-14. */ --color-base-neutral-200: #E6E6E6; --color-base-neutral-400: #9C9C9C; /* RULED. WEB-9, CS-14. Sampled pixel-by-pixel off the production footer lockup in 06-evidence/production-site/: #9C9C9C, fully desaturated (max-min channel = 0) across 2693 sampled pixels. The panel behind it samples #F2F2F2, which re-confirms CS-14 at a third viewport. WHY THIS RUNG AND NO OTHERS. The scale was #FFFFFF / #F8F8F8 / #F2F2F2 / #E6E6E6 / #666666 / #333333 / #000000 - three values inside 13 points at the light end, then a 128-POINT HOLE from #E6E6E6 to #666666. The scale is not too crowded; it is crowded in one place and empty in the middle. This lands in the empty middle, so it does not make the light-end problem worse. A neutral-300 around #CCCCCC would make the ramp perceptually even. NOT ADDED - nothing evidences it, and rule 6 is that nothing gets pre-built. Recorded as a known gap in 05-tasks/website-ui.md so the next rung is a decision rather than a discovery. NO SEMANTIC ROLE. Nothing in the kit reads this yet. The production footer lockup's grey ink is artwork, not a colour applied at runtime - the kit puts logo ink in the FILENAME, so the correct artefact is 01-logos/solaris/solaris-finance-horizontal-mono-grey.svg. A screenshot of a logo is not a logo file and cannot be promoted from a capture. WEB-9 owns it. */ --color-base-neutral-500: #666666; --color-base-neutral-800: #333333; --color-base-neutral-1000: #000000; /* Alpha - transparency is used sparingly. These are the only ones. */ --color-base-orange-a16: rgba(255, 154, 36, .16); --color-base-flamingo-a14: rgba(241, 92, 48, .14); --color-base-navy-a08: rgba(22, 45, 84, .08); --color-base-navy-a14: rgba(22, 45, 84, .14); /* The scrim behind a dialog. No blur. Added as the fifth alpha by the build - consistency audit CA-5.8, 2026-09-27; "these are the only ones" is amended to include it. */ --color-base-navy-a62: rgba(22, 45, 84, .62); /* Alpha white - the dark-surface ink and fill steps. CS-26. THE RULE THAT CAPS THIS SET: a new alpha white needs a light-side role to mirror. No mirror, no token - use the nearest existing step. Four is the right number because these are two CLOSED sets, each mirroring a structure the kit already has: a86 + a66 + the existing solid --color-on-invert = a three-step ink ladder, mirroring text-primary / text-secondary / text-muted on the light side. Three there, three here. a12 + a22 = default + hover, mirroring --color-surface-invert and --color-surface-invert-hover. Two there, two here. If a fourth light ink is ever added, the dark side gets one too and the pair stays legible. Without that constraint this is the start of a slide into twenty near-identical whites. A future non-navy dark brand ground costs ZERO new tokens: the alphas are on white, so only the ground beneath them changes. Contrast is checked, not assumed. a66 composites to roughly #AFB8C5 over navy-700, about 6.7:1 - the 12px utility-strip tagline passes AA. */ --color-base-neutral-0-a86: rgba(255, 255, 255, .86); --color-base-neutral-0-a66: rgba(255, 255, 255, .66); --color-base-neutral-0-a22: rgba(255, 255, 255, .22); --color-base-neutral-0-a12: rgba(255, 255, 255, .12); /* Orange type on light surfaces - orange itself fails contrast. */ --color-base-amber-ink: #9A5A00; /* ---- SEMANTIC ROLES -------------------------------------- What you actually apply. Role names are identical across both brand themes; only the values behind them may differ. Today they are identical, which is expected. Heading ink is black, Title Case. Navy's jobs are dark surfaces, strong borders, and brand-coloured type. */ /* Text */ --color-text-primary: var(--color-base-neutral-1000); /* headings */ --color-text-secondary: var(--color-base-neutral-800); /* body copy */ --color-text-muted: var(--color-base-neutral-500); /* captions, meta */ --color-text-inverse: var(--color-base-neutral-0); /* on dark surfaces */ --color-text-brand: var(--color-base-navy-700); /* outline labels */ --color-text-link: var(--color-base-flamingo-500); /* inline editorial links */ --color-text-accent-ink: var(--color-base-amber-ink); /* orange type that must pass contrast */ /* Surface sunken and offset deliberately share neutral-100. Production has one light grey and paints both devices with it (.bg-gray). Two roles are kept because they name different devices and a theme may diverge them later - the same reason default and raised both sit on white. CS-14. */ --color-surface-default: var(--color-base-neutral-0); --color-surface-raised: var(--color-base-neutral-0); /* cards */ --color-surface-sunken: var(--color-base-neutral-100); /* alternating sections */ --color-surface-offset: var(--color-base-neutral-100); /* the offset panel device */ --color-surface-invert: var(--color-base-navy-700); /* dark hero, footer, ad blocks */ --color-surface-invert-hover: var(--color-base-navy-900); /* A fill sitting ON a dark surface - translucent, so the ground reads through it. The header's Login pill. Ruled from the mega menu. CS-26. */ --color-surface-on-invert: var(--color-base-neutral-0-a12); --color-surface-on-invert-hover: var(--color-base-neutral-0-a22); /* Scrim - the ground drawn behind a modal. CA-5.8. */ --color-scrim: var(--color-base-navy-a62); /* Illustration - navy ink in drawings (doodles, mockup bars), beside Princeton Orange's illustration role. Ruled by the build - consistency audit CA-5.7, 2026-09-27. */ --color-illustration-navy: var(--color-base-navy-700); /* Border */ --color-border-default: var(--color-base-neutral-200); /* hairlines, 1px */ --color-border-subtle: var(--color-base-navy-a08); --color-border-strong: var(--color-base-navy-700); /* The resting outline of a form control. #666 so the box reaches 3:1; --color-border-default stays the divider hairline. CA-10.4. */ --color-border-control: var(--color-text-muted); /* Feedback - error text and the invalid outline. Amber Ink; there is no red. Ruled by the build - consistency audit CA-10.5, 2026-09-27. */ --color-feedback-error: var(--color-text-accent-ink); /* Accent */ --color-accent-default: var(--color-base-flamingo-500); /* buttons, solid and outline */ --color-accent-hover: var(--color-base-flamingo-600); /* hover darkens, never lightens */ --color-accent-subtle: var(--color-base-flamingo-a14); --color-accent-highlight: var(--color-base-orange-500); /* icons, doodles, badges, nav active pill. NOT ink on a light surface: a stat numeral there is --color-text-accent-ink. 2.06:1. */ --color-accent-highlight-subtle: var(--color-base-orange-a16); /* On-colour The three-step ink ladder for dark surfaces. Mirrors text-primary / secondary / muted one for one. Ruled from the mega menu's navy utility strip, which carries all three loudnesses at once. CS-26. */ --color-on-accent: var(--color-base-neutral-0); /* Ink on Princeton Orange. Black, never white (2.1:1). --color-on-accent is Flamingo's, so orange had no ink role of its own until the Commercial Finance handoff's File.PDF chip needed one. WEB-12. */ --color-on-accent-highlight: var(--color-base-neutral-1000); --color-on-invert: var(--color-base-neutral-0); /* headings, strong labels */ --color-on-invert-secondary: var(--color-base-neutral-0-a86); /* links, body */ --color-on-invert-muted: var(--color-base-neutral-0-a66); /* taglines, meta */ /* Focus */ --color-focus-ring: var(--color-base-navy-a14); }