| 1 | # Docket - Brand & Design System |
| 2 | |
| 3 | Adapted from the TreeTrace "evidence/record" pattern, with a deliberate divergence: **the accent is brass, not cobalt** - because the brand color itself must be politically neutral (blue reads Democrat, red reads Republican; brass reads "official record / seal / ledger" and belongs to neither side). |
| 4 | |
| 5 | > **Philosophy:** *Record the action, not the argument - every entry sealed to its source.* |
| 6 | |
| 7 | Dark-first. Forensic-calm. Monospace data. Rationed accent. The UI should feel like an **official register being kept in real time**, not an op-ed and not a news app. |
| 8 | |
| 9 | --- |
| 10 | |
| 11 | ## 1. Color tokens |
| 12 | |
| 13 | Define as CSS custom properties on `:root` and mirror into the Tailwind theme. |
| 14 | |
| 15 | ```css |
| 16 | :root { |
| 17 | /* base - dark-first */ |
| 18 | --dk-ink: #0B0C0E; /* page background, near-black */ |
| 19 | --dk-surface: #121316; /* cards, register chrome */ |
| 20 | --dk-graphite: #23262B; /* raised / hover */ |
| 21 | --dk-paper: #F2EFE9; /* primary text, warm bone (NOT pure white) */ |
| 22 | --dk-ash: #9BA0A6; /* secondary / mono labels */ |
| 23 | --dk-ash-2: #6E7480; /* tertiary text */ |
| 24 | --dk-line: rgba(155,160,166,.18); /* hairline borders */ |
| 25 | |
| 26 | /* signal - brass, RATIONED (one per view) */ |
| 27 | --dk-signal: #E0A53B; /* primary accent */ |
| 28 | --dk-signal-dim: #B07F25; /* hover / pressed */ |
| 29 | --dk-signal-tint: rgba(224,165,59,.08); /* faint active-row wash */ |
| 30 | |
| 31 | /* semantic - MUTED, never vivid (neutrality) */ |
| 32 | --dk-yea: #7FA88C; /* yea / passed / funded - muted sage, NOT vivid green */ |
| 33 | --dk-nay: #B98A8A; /* nay / failed / cut - muted clay, NOT vivid red */ |
| 34 | --dk-hold: #C9A66B; /* stalled / pending / in-committee */ |
| 35 | |
| 36 | /* party tones - desaturated, EQUAL visual weight, only when party is the datum */ |
| 37 | --dk-party-d: #6E86A8; /* muted slate-blue */ |
| 38 | --dk-party-r: #A87E6E; /* muted clay-brown */ |
| 39 | --dk-party-i: #8A8F96; /* muted grey */ |
| 40 | } |
| 41 | ``` |
| 42 | |
| 43 | **Light mode** (reads like an official document): `--dk-light-bg: #F6F4EF` (parchment), `--dk-light-text: #0B0C0E`, brass darkens to `#B07F25` for contrast. |
| 44 | |
| 45 | ### Color rules (hard) |
| 46 | - **On solid brass, text/glyphs are INK `#0B0C0E`** (brass is light - dark text reads cleanly). *(Inverse of TreeTrace, where cobalt is dark and text is white.)* |
| 47 | - Brass is **rationed**: one signal per view (a live dot, the active filter pill, a "just happened" flag). **Never** large brass fills or brass body text. |
| 48 | - **Never** use saturated red vs saturated blue for vote/party viz. Use the muted party/semantic tokens at equal weight. The eye must not read "teams." |
| 49 | - No gradients on logo/marks. Flat strokes and fills only. |
| 50 | |
| 51 | --- |
| 52 | |
| 53 | ## 2. Typography |
| 54 | |
| 55 | - **Display:** `Archivo` 800-900, uppercase, tracking −0.02 to −0.04em, line-height 0.85-0.92. Headlines, big numbers, vote tallies. |
| 56 | - **Data / labels / nav:** `JetBrains Mono`, uppercase, tracked. Bill numbers, dollar figures, timestamps, status pills, nav. This is the workhorse - it sells "this is a record." |
| 57 | - **Prose:** `Fraunces` (+ italic) for the rare plain-English lead sentence / summary. One per surface, max. |
| 58 | - **Wordmark:** "Docket" - Archivo 800, sentence case. |
| 59 | |
| 60 | --- |
| 61 | |
| 62 | ## 3. Visual signature |
| 63 | |
| 64 | - **Mark / logo:** a **custody-stamp seal** - a registration frame (outer rule + inner offset rule) around a `[D]` monogram with a small brass record-tick, reading as an *official stamp on the record*. Flat. **No eagle, no flag, no dome, no scales** - those cliches carry political valence or legal-tool connotations. Favicon: solid brass tile, ink "D" monogram (drop the inner rule below 24px). |
| 65 | - **Hero - the live Register:** the signature element. A real-time stamped ledger of official actions materializing line by line, e.g.: |
| 66 | ``` |
| 67 | 14:02 ET US HOUSE H.R. 22 FAILED 209-214 · |
| 68 | 13:47 ET US SENATE S. 1582 CLOTURE OK 62-38 · |
| 69 | 13:31 ET USASPENDING DoD AWARD $2.1B · |
| 70 | ``` |
| 71 | Mono, hairline-separated rows, one brass live-dot pulsing at the top. Same "real thing happening live" energy as TreeTrace's CLI hero, civic skin. |
| 72 | - **Cards:** `--dk-surface` on `--dk-ink`, hairline border, raised 1 stop on hover (`--dk-graphite`). Status as a mono pill. Dollar figures right-aligned in mono. |
| 73 | - **Liquid-glass accent:** faint brass radial wash on hero / OG cards only. Rationed. |
| 74 | |
| 75 | --- |
| 76 | |
| 77 | ## 4. Layout |
| 78 | - **Multi-page functional site** (each nav item is a real page, not a scroll-monolith): The Register (feed) · Bill · Spending · States · How We Pick · Who Pays. |
| 79 | - Mobile-first PWA (push without app-store friction). |
| 80 | - Generous whitespace, hairline dividers, left-aligned data tables. Calm, not busy. Authoritative, not loud. |
| 81 | |
| 82 | --- |
| 83 | |
| 84 | ## 5. Voice (copy) |
| 85 | - Declarative, factual, no adjectives. "The House failed to pass H.R. 22, 209-214." Never "narrowly failed," "controversial," "key." |
| 86 | - Push copy: "The Senate voted on S. 1582 - cloture passed 62-38." Never "Politicians just voted to…" |
| 87 | - See `docs/NEUTRALITY.md` §Copy for the banned-words list - it is enforced by a lint rule. |