/* ============================================================================ ArchitectNow Brand Tokens — canonical source of truth for Proposal Hub ============================================================================ AUTHORITY: the ArchitectNow Brand & Design System, vendored at brand/ and pinned in brand/UPSTREAM.md. Where this file and the published system disagree, the published system wins and this file is the bug. Conformance is checked against brand/ on every build — see BrandConformanceTests and verify-brand.sh. docs/rebrand/ArchitectNow-Brand-System.md is DERIVED from it, not a peer. ORIGIN TAGS. Every token below carries one, so the conformance check can tell an upstream value from a local one without a second file drifting out of step: [shipping] declared in brand/architectnow-tokens.css — the canonical stylesheet. Value must match it exactly. [ratified] specified by the style guide and tagged `ratified` in brand/architectnow-tokens.json, pending addition to the canonical stylesheet. Upstream's instruction is "adopt it". Value must match. [local:keep|propose|retire] this application only, with its disposition and a one-line rationale. `keep` is a documented extension; `propose` is a candidate to raise upstream; `retire` is on its way out. A token with no tag is unclassified and FAILS the conformance check — that is the point, so a value added in haste cannot quietly become permanent. Brand delivery is per-repo copy — there is no shared package. When any brand value changes, ALL of the following change together: 1. the published system at brand/ (refresh the pin; it is upstream) 2. both copies of ArchitectNow-Brand-System.md (this repo + an-client-hub) 3. this file, Components/Layout/AnTheme.cs, and Core/Branding/BrandColors.cs FOUR sanctioned sources may hold a literal brand value; everything else references. This file (the browser), Core/Branding/BrandColors.cs (PDF and pre-boot HTML), the MCP server's token-manager.ts BRAND block (a standalone Node process that can reach neither), and the email templates (email clients strip custom properties, so literals are mechanically forced). Enforced by scripts/verify-brand.sh and tests/ProposalHub.UnitTests/Branding/BrandColorsParityTests.cs. Contract: specs/009-style-guide-rebrand/contracts/brand-token-contract.md ============================================================================ */ :root { /* --- Reds (primary brand) ------------------------------------------- */ --an-red: #A7252C; /* [shipping] Primary. Buttons, links, headings, active states, dialog headers. Doubles as error. Supersedes the in-app 8E1F26 — which the guide assigns to --an-red-card-end, a gradient terminal stop rather than a brand colour. (Hash omitted above: the brand gate text-scans for it.) */ --an-red-text: var(--an-red); /* [local:keep] Foreground red for text/icons — an intention- revealing alias of --an-red. Currently unreferenced; kept so a future text/icon usage names its intent rather than reaching for the raw brand token. */ --an-red-light: #C44950; /* [shipping] Accents on DARK surfaces (brand red is unreadable on ink) */ --an-red-deep: #7C1B21; /* [shipping] Darkest red — header/hero gradient, hover */ --an-red-wash: #F4E4E5; /* [shipping] Validation-summary background */ --an-red-tint: #F3C6C9; /* [shipping] Spinner track, faint fills */ --an-red-tint-2: #F7E2E3; /* [shipping] Second tint step */ --an-red-card-end: #8E1F25; /* [shipping] Card-gradient terminal stop. ONE DIGIT from the retired primary 8E1F26 — read it twice before editing. */ /* --- Darks / ink ---------------------------------------------------- */ /* The published system never uses pure #000000 as a surface or a text colour; the darks sit between #0D0D0D and #1A1B19 — one family, distinct enough to separate stacked surfaces. */ --an-ink: #1A1A1A; /* [shipping] App-bar and viewer-header background; primary text */ --an-dark: #141414; /* [shipping] Deepest section backgrounds */ --an-dark-2: #1A1B19; /* [shipping] Second dark step — adopted from the published system */ --an-dark-3: #0D0D0D; /* [shipping] Deepest ground — adopted from the published system */ --an-dropdown: #1F1F1F; /* [shipping] Menu panels on dark chrome */ --an-terminal: #0F0F0F; /* [shipping] Terminal/code-block ground */ --an-preload: #0d0d10; /* [shipping] Pre-boot interstitial ground. Lowercase upstream; kept verbatim so the vendored copy diffs cleanly. */ --an-approach-border: #2E2F2D; /* [shipping] Hairline on the dark approach band */ /* --- Neutral ramp --------------------------------------------------- */ --an-gray-1: #2D2E2C; /* [shipping] Dark neutral — the legacy "Dark". NOT the ink. */ --an-gray-2: #3A3B39; /* [shipping] */ --an-gray-3: #5C5D5A; /* [shipping] Secondary text */ --an-gray-4: #6B6C6A; /* [shipping] Neutral action-icon color */ --an-gray-5: #8A8B88; /* [shipping] */ --an-gray-6: #A8A9A6; /* [shipping] */ --an-gray-7: #C8C8C4; /* [shipping] Borders on hover */ /* --- Surfaces ------------------------------------------------------- */ --an-white: #FFFFFF; /* [shipping] Page / surface background */ --an-paper: #FAFAF7; /* [shipping] Warm off-white card background */ --an-border: #EDEDED; /* [shipping] Dividers */ --an-border-2: #E4E4E3; /* [shipping] Input borders */ /* --- Channel tokens ------------------------------------------------- */ /* CSS cannot build rgba() from a hex custom property, so any brand colour that needs an alpha would otherwise have to be written as a literal — which is how rgba(204,0,0,…) survived the hex-only scan for months. These let alpha usages reference the token: rgba(var(--an-red-rgb), .1). Keep in step with the hex values above; BrandColorsParityTests asserts the pairing. */ --an-red-rgb: 167, 37, 44; /* [local:keep] derived from --an-red #A7252C */ --an-ink-rgb: 26, 26, 26; /* [local:keep] derived from --an-ink #1A1A1A. Unreferenced today; kept as the companion of --an-red-rgb so the ink channel exists the moment an ink alpha is needed. */ --an-success-rgb: 22, 163, 74; /* [local:keep] derived from --an-success #16A34A */ /* --- On-dark alpha ladder ------------------------------------------- */ /* For surfaces that are ALREADY dark — app bar, viewer header, dialog headers. There is no dark colour scheme; these do not create one. The full ladder is ratified upstream; values are the published ones. */ --an-on-dark-heading: rgba(255,255,255,1); /* [ratified] Headings on dark — 18.42:1 on --an-dark */ --an-on-dark-body: rgba(255,255,255,.55); /* [ratified] Body on dark — 6.15:1, passes AA */ --an-on-dark-muted: rgba(255,255,255,.4); /* [ratified] Muted/secondary on dark. NEVER body text: composites to #727272 on --an-dark, which measures 3.83:1 — below the 4.5:1 AA threshold for body copy, above the 3:1 threshold for large text and non-text UI. The value is the published one and is NOT locally adjusted; the restriction lives on its use. BrandContrastTests enforces it. */ --an-on-dark-hairline: rgba(255,255,255,.10);/* [ratified] Hairline dividers on dark */ --an-on-dark-border: rgba(255,255,255,.12); /* [ratified] Border on dark */ --an-on-dark-fill: rgba(255,255,255,.03); /* [ratified] Faint fill on dark */ /* --- Semantics ------------------------------------------------------ */ --an-error: var(--an-red); /* [shipping] Brand red doubles as error (tracks --an-red) */ --an-success: #16A34A; /* [local:keep] Green ONLY for explicit success / accept. Never a primary. The published system defines NO success colour — this is a genuine gap in it, not an oversight here. Kept local rather than proposed upstream (feature 010, clarification Q4); if the brand owner ever ratifies one, this becomes a conflict to resolve. */ --an-success-hover: #15803D; /* [local:keep] Darker state of the semantic green. Promoted out of app.css, where it was a raw literal outside every sanctioned source. */ --an-info: #6B6C6A; /* [local:keep] No blue, ever — info renders neutral grey, tracking --an-gray-4. Unreferenced today; kept so that the first component needing an info tone finds a grey here instead of reaching for a blue. Its whole value is being present before it is needed. */ /* --- Radius --------------------------------------------------------- */ /* Six ratified steps. The split that matters: every BUTTON and FORM CONTROL is -md; every CARD and MEDIA FRAME is -lg. The guide calls this the cheapest single lever for making four applications look like one product. MudBlazor cannot express it — .mud-paper backs cards, dialogs, menus and popovers off one variable — so app.css carries the split. See research R1. */ --an-radius-xs: 4px; /* [ratified] Mono technology tags */ --an-radius-sm: 8px; /* [ratified] Status badges, chips, small controls, menu items */ --an-radius-md: 12px; /* [ratified] EVERY button and form control */ --an-radius-lg: 16px; /* [ratified] EVERY card, media frame, and dialog */ --an-radius-xl: 24px; /* [ratified] Large panels */ --an-radius-pill: 999px; /* [ratified] Dots, avatars, spinners ONLY — never on words */ /* --- Spacing -------------------------------------------------------- */ --an-space-1: 4px; /* [ratified] */ --an-space-2: 8px; /* [ratified] */ --an-space-3: 12px; /* [ratified] */ --an-space-4: 16px; /* [ratified] */ --an-space-5: 20px; /* [ratified] */ --an-space-6: 24px; /* [ratified] */ --an-space-8: 32px; /* [ratified] */ --an-space-10: 40px; /* [ratified] */ --an-space-12: 48px; /* [ratified] */ --an-space-16: 64px; /* [ratified] */ --an-space-gutter: 24px; /* [ratified] Standard page gutter */ --an-space-gutter-lg: 48px; /* [ratified] Wide gutter */ --an-space-section-y: 96px; /* [ratified] Vertical rhythm between sections */ --an-space-section-y-sm: 64px; /* [ratified] Compact section rhythm */ /* --- Layout sizing ---------------------------------------------------- */ /* 44px is one of the five accessibility gates (style guide p.47) and the only one the product already passed cleanly. Named here so it survives refactors rather than living as a literal in app.css. */ --an-tap-target: 44px; /* [ratified] Minimum interactive target (was --an-touch-min) */ --an-shell: 1300px; /* [ratified] Outer shell max width */ --an-nav-height: 64px; /* [ratified] Navigation bar height */ --an-font-body: 15px; /* [local:keep] Body SIZE — not a font stack, despite the name. The published system carries no body-size token; this one is referenced by AnTheme, which states the same value. */ /* --- Reading measure ------------------------------------------------ */ --an-measure: 760px; /* [ratified] Prose line-length cap */ --an-measure-tight: 640px; /* [ratified] Lead paragraphs (was --an-measure-lead) */ /* --- Elevation ------------------------------------------------------ */ /* A card at rest on a light band casts nothing at all — the guide forbids it. These are NOT one ladder with one rule; the guide's elevation table gives each surface its own behaviour, and the negative spread belongs to only one of them: light card, hover -> "lift translateY(-4px) and add a wide NEGATIVE-SPREAD shadow" -> -26px, tinted to the object, not to black primary button -> "a red GLOW tinted to the button's own colour" -> no negative spread; haloing is the entire point dropdown/overlay -> "no lift, a DEEP FLAT shadow" -> .5 alpha, no spread So --an-shadow-red and --an-shadow-panel deliberately halo. A previous comment here claimed every ArchitectNow shadow is negative-spread and never halos — that over-generalised the card rule onto the glow and the overlay, and the local values had been bent to match the claim. Values below are the published ones; do not "correct" them back into a uniform ladder. */ --an-shadow-card: 0 10px 30px -22px rgba(0,0,0,.25); /* [ratified] card at rest */ --an-shadow-card-hover: 0 18px 44px -26px rgba(26,27,25,0.3); /* [ratified] card hover — tinted, negative spread */ --an-shadow-red: 0 12px 32px rgba(167,37,44,0.35); /* [ratified] primary-button glow — halos by design */ --an-shadow-panel: 0 20px 40px rgba(0,0,0,0.5); /* [ratified] overlay — deep and flat, no lift */ /* --- Motion --------------------------------------------------------- */ /* One curve, used everywhere — the published system calls it "the brand's feel". */ --an-ease: cubic-bezier(0.16, 1, 0.3, 1); /* [shipping] */ --an-duration-fast: .2s; /* [ratified] (was --an-dur-fast) */ --an-duration-base: .3s; /* [ratified] The default (was --an-dur) */ --an-duration-slow: .4s; /* [ratified] (was --an-dur-slow) */ /* --- Typography ----------------------------------------------------- */ /* "DM Sans Fallback" is a metric-compatible local face: it occupies the same advance widths as DM Sans, so text does not reflow when the webfont loads. Inert if the face is not installed — which costs nothing. */ --an-font-sans: "DM Sans", "DM Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* [shipping] (was --an-font) */ /* Mono register — technology tags only, 11px. System stack, no webfont. Constitution principle 27 carries a carve-out for exactly this use. */ --an-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* [shipping] */ /* --- Brand gradient ------------------------------------------------- */ /* ONE restrained near-black→dark-red fade for EVERY branded surface (dialog headers, dashboard hero, chat/modal headers) so they read identically. Ink dominates; a muted deep-red haze pools toward the right. Height-agnostic. */ --an-header-gradient: radial-gradient(120% 135% at 94% 22%, var(--an-red-deep) 0%, var(--an-ink) 46%, var(--an-dark) 100%); /* [local:keep] derived entirely from published colours */ --an-hero-gradient: var(--an-header-gradient); /* [local:keep] alias — the same gradient everywhere */ }