/* ========================================================================== Purple Party — design tokens 2026-09 visual direction -------------------------------------------------------------------------- Every value in this file is a decision. Every value in components.css and in the artboards references one of these and nothing else. Reading order: 1. Ground and ink — the warm neutral the whole product sits on 2. The two poles — viewpoint clusters, deliberately non-partisan 3. Convergence — purple, and the rules that keep it earned 4. Apparatus — the AI surface, which must not read as a person 5. Earned — honours; the only other warm accent 6. Distribution — the signature graphic element 7. Type, space, motion — the quiet infrastructure Contrast: every text pair below is measured, not estimated. Figures in the comments are WCAG ratios against the surface named. AAA (7.0) for long-form body text, AA (4.5) for everything else, 3.0 for graphical elements. ========================================================================== */ :root { color-scheme: light dark; /* == 1. GROUND AND INK ================================================= */ /* A warm paper neutral. Not white — white reads as a form to fill in, and this product asks people to read and to write, not to submit. */ --pp-ground: #F7F4EE; --pp-surface: #FFFDF9; /* raised: cards, popovers, composer */ --pp-sunken: #F2EEE6; /* recessed: quoted matter, inactive rails */ --pp-ink: #1C1A17; /* 15.8 on ground — AAA */ --pp-ink-2: #4A453E; /* 8.7 on ground — AAA, secondary prose */ --pp-ink-3: #5C564E; /* 6.6 on ground — AA, metadata */ --pp-ink-4: #6B6357; /* 5.4 on ground — AA, faintest label only */ --pp-rule: #E4DDD0; /* hairline separators */ --pp-rule-strong: #DCD4C6; /* borders on interactive things */ --pp-rule-dashed: #D3CABA; /* the "nobody checked this" border */ /* == 2. THE TWO POLES ================================================== */ /* Two viewpoint clusters. Chosen at IDENTICAL OKLCH lightness (0.585) and chroma (0.050) so neither can read as stronger or more correct, and at hues that bracket the convergence purple (258° and 352° around 305°) so that the mixing metaphor is literally true in hue space. Measured luminance: 0.2006 and 0.1942 — a 3% difference, below the threshold at which one reads as dominant. They are NOT red and blue. They are NOT used as a background for anybody's content, ever. See components.css → .pp-pole for the only sanctioned uses, and RATIONALE.md §2 for the reasoning and the review test. */ --pp-pole-a: #6A7D9A; /* 3.8 on ground — graphical use only */ --pp-pole-a-ink: #4A5F7D; /* 5.9 on ground — AA text */ --pp-pole-a-wash: #EDEFF3; --pp-pole-a-line: #C4CCD8; --pp-pole-b: #94707F; /* 3.9 on ground — graphical use only */ --pp-pole-b-ink: #765161; /* 6.1 on ground — AA text */ --pp-pole-b-wash: #F3EDEF; --pp-pole-b-line: #D7C6CC; /* Non-colour encoding. Colour alone never distinguishes the poles: A is always solid, B is always hatched. These carry the meaning when colour cannot — greyscale, colour-blindness, print, a bad projector. */ --pp-pole-a-texture: none; --pp-pole-b-texture: repeating-linear-gradient( -45deg, transparent 0 2px, rgba(255,255,255,.55) 2px 4px); /* == 3. CONVERGENCE — purple, and the rules ============================ */ /* Purple is the ONLY high-chroma colour in the system. Everything else sits between chroma 0 and 0.06; purple sits at 0.11. That is what makes it earned by construction rather than by policy — nothing else can compete with it for attention, so it never has to shout. PERMITTED USES, exhaustively: · cross-cluster agreement on a post, position or claim · a common-ground statement ratified across the divide · an adversarial collaboration byline · a claim ratified by members on both sides · the overlap region of the distribution marker · the current page in navigation, and focus rings (wayfinding, not praise) FORBIDDEN: buttons in general, links in general, headings, brand decoration, hover states on ordinary content, any "primary action" colour. If purple appears on a screen where the community has not converged, the palette is lying. See RATIONALE.md §3. */ --pp-converge: #6C4FA3; /* 5.8 on ground — AA text, AA graphics */ --pp-converge-ink: #5B3F92; /* 7.4 on ground — AAA, for body-size text */ --pp-converge-deep: #4C3670; /* 9.3 on ground — emphasis */ --pp-converge-line: #C9BBE0; --pp-converge-wash: #F4F0FA; --pp-converge-wash-2: #EDE6F6; /* stronger overlap fill in the marker */ /* == 4. APPARATUS — the AI surface ===================================== */ /* AI output is an instrument readout. It is set apart by TEMPERATURE, not by brightness: a cool grey-blue paper against the product's warm one. At a glance the eye reads "different material" before it reads any text — which is exactly the requirement. No avatar, no glow, no shimmer, no first person. Monospace header carrying the panel composition. See RATIONALE.md §4. */ --pp-apparatus: #ECEEF0; /* 1.06 vs ground — a material change */ --pp-apparatus-ink: #33383F; /* 10.2 on apparatus — AAA */ --pp-apparatus-ink-2: #5A626C; /* 4.9 on apparatus — AA */ --pp-apparatus-rule: #D5D9DE; --pp-apparatus-tick: #8A939E; /* panel-composition marks */ /* == 5. EARNED — honours ============================================== */ /* The second warm accent, and the only one. Turing-test passes, correction records, steelman ratings, calibration. Warm because these are the things the product is proud of. Distinct from purple: purple is what the COMMUNITY did together, amber is what a PERSON did. */ --pp-earned-ink: #7A5F30; /* 5.2 on earned wash — AA. Corrected from */ /* the product's current #8A6D3B, which */ /* measures 4.23 and fails AA. See MANIFEST.*/ --pp-earned-ink-2: #6E5731; --pp-earned-wash: #F5EFE2; --pp-earned-line: #E6D9BF; --pp-earned-rule: #EADFC9; /* == 6. DISTRIBUTION MARKER =========================================== */ /* The signature graphic. Neutral by default — the community spread is not an opinion. Purple enters only where the two poles' distributions overlap. */ --pp-dist-bar: #DFD8CA; /* the spread itself */ --pp-dist-iqr: #CFC6B4; /* middle half */ --pp-dist-median: #6B6357; /* hairline + caret */ --pp-dist-you: #1C1A17; /* filled dot — always you */ --pp-dist-them: #1C1A17; /* hollow ring — always someone else */ --pp-dist-track: #EFE9DD; --pp-dist-overlap: var(--pp-converge); /* == 7. TYPE ========================================================== */ /* Serif for substance, sans for interface, mono for apparatus. The mono is new to the product — it exists so AI output cannot be mistaken for prose. See MANIFEST.md → Fonts. */ --pp-serif: Literata, 'Iowan Old Style', Georgia, serif; --pp-sans: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif; --pp-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Scale. Serif sizes run larger than the sans at the same rank: substance should physically outweigh chrome. */ --pp-text-2xs: 11px; --pp-lh-2xs: 1.55; --pp-text-xs: 12.5px; --pp-lh-xs: 1.6; --pp-text-sm: 13.5px; --pp-lh-sm: 1.68; --pp-text-md: 15px; --pp-lh-md: 1.7; --pp-text-lg: 18.5px; --pp-lh-lg: 1.64; /* serif body — the default */ --pp-text-xl: 22px; --pp-lh-xl: 1.5; --pp-text-2xl: 27px; --pp-lh-2xl: 1.32; --pp-text-3xl: 34px; --pp-lh-3xl: 1.22; --pp-text-4xl: 46px; --pp-lh-4xl: 1.14; --pp-track-label: .12em; /* uppercase micro-labels */ --pp-track-mark: .08em; /* the wordmark */ --pp-track-tight: -.012em;/* large serif display */ --pp-measure-prose: 66ch; /* long-form */ --pp-measure-note: 58ch; /* asides, notes, apparatus */ --pp-measure-lede: 44ch; /* headlines */ /* == 8. SPACE, LINE, RADIUS =========================================== */ --pp-s1: 4px; --pp-s2: 8px; --pp-s3: 12px; --pp-s4: 16px; --pp-s5: 22px; --pp-s6: 30px; --pp-s7: 40px; --pp-s8: 56px; --pp-s9: 76px; --pp-hair: 1px; --pp-mark: 2px; /* the left-edge accent that carries meaning */ --pp-r-hair: 2px; /* chips, buttons — almost square */ --pp-r-soft: 3px; /* cards, panels */ --pp-r-pill: 999px; /* only for round markers, never for buttons */ /* Elevation is nearly absent by design: hierarchy comes from type, not from stacking. Exactly two shadows exist, both for things that float over the page and must be dismissible. */ --pp-lift-1: 0 6px 20px rgba(28,26,23,.10); --pp-lift-2: 0 16px 44px rgba(28,26,23,.18); /* == 9. MOTION ======================================================== */ /* Slow and few. Transitions confirm that a state changed and do nothing else. Nothing loops, nothing pulses, nothing implies that speed is a virtue here. */ --pp-dur-1: 120ms; /* colour and border only */ --pp-dur-2: 220ms; /* disclosure, entrance */ --pp-dur-3: 340ms; /* page arrival — the longest thing in the system */ --pp-ease: cubic-bezier(.2,.7,.3,1); --pp-focus: 2px solid var(--pp-converge); --pp-focus-offset: 2px; } /* ========================================================================== DARK — first-class, planned with the purple rather than retrofitted to it. The poles are lifted to OKLCH L 0.72 (from 0.585) at the same chroma, which keeps them equal to each other and keeps the purple visibly more saturated than either. The ground stays warm; a cold dark would lose the paper. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pp-ground: #191713; --pp-surface: #201E1A; --pp-sunken: #131210; --pp-ink: #F2EEE6; /* 15.5 on ground — AAA */ --pp-ink-2: #D8D2C7; /* 11.9 on ground — AAA */ --pp-ink-3: #B4AD9F; /* 8.0 on ground — AAA */ --pp-ink-4: #A9A296; /* 7.1 on ground — AAA */ --pp-rule: #322E28; --pp-rule-strong: #403B33; --pp-rule-dashed: #4A443A; --pp-pole-a: #92A6C4; /* 7.2 on ground */ --pp-pole-a-ink: #A9BAD4; --pp-pole-a-wash: #1E2229; --pp-pole-a-line: #3A424F; --pp-pole-b: #BE98A8; /* 7.0 on ground */ --pp-pole-b-ink: #CFAEBC; --pp-pole-b-wash: #251E21; --pp-pole-b-line: #4B3B42; --pp-pole-b-texture: repeating-linear-gradient( -45deg, transparent 0 2px, rgba(0,0,0,.45) 2px 4px); --pp-converge: #B593DC; /* 7.0 on ground — AAA */ --pp-converge-ink: #C4A8E5; --pp-converge-deep: #D3BDEE; --pp-converge-line: #4A3A63; --pp-converge-wash: #241D33; --pp-converge-wash-2: #2E2442; --pp-apparatus: #1A1D21; /* still a cool material against warm */ --pp-apparatus-ink: #D2D7DD; /* 11.7 on apparatus — AAA */ --pp-apparatus-ink-2: #949CA6; --pp-apparatus-rule: #2E3339; --pp-apparatus-tick: #6F7883; --pp-earned-ink: #E0BC7A; /* 8.5 on the dark earned wash */ --pp-earned-ink-2: #CBA968; --pp-earned-wash: #221D14; --pp-earned-line: #453820; --pp-earned-rule: #392E1B; --pp-dist-bar: #383229; --pp-dist-iqr: #4A4237; --pp-dist-median: #B4AD9F; --pp-dist-you: #F2EEE6; --pp-dist-them: #F2EEE6; --pp-dist-track: #221F1A; --pp-lift-1: 0 6px 20px rgba(0,0,0,.5); --pp-lift-2: 0 16px 44px rgba(0,0,0,.62); } } /* Explicit override wins in both directions, so a theme toggle works. */ :root[data-theme="dark"] { --pp-ground:#191713; --pp-surface:#201E1A; --pp-sunken:#131210; --pp-ink:#F2EEE6; --pp-ink-2:#D8D2C7; --pp-ink-3:#B4AD9F; --pp-ink-4:#A9A296; --pp-rule:#322E28; --pp-rule-strong:#403B33; --pp-rule-dashed:#4A443A; --pp-pole-a:#92A6C4; --pp-pole-a-ink:#A9BAD4; --pp-pole-a-wash:#1E2229; --pp-pole-a-line:#3A424F; --pp-pole-b:#BE98A8; --pp-pole-b-ink:#CFAEBC; --pp-pole-b-wash:#251E21; --pp-pole-b-line:#4B3B42; --pp-pole-b-texture: repeating-linear-gradient(-45deg,transparent 0 2px,rgba(0,0,0,.45) 2px 4px); --pp-converge:#B593DC; --pp-converge-ink:#C4A8E5; --pp-converge-deep:#D3BDEE; --pp-converge-line:#4A3A63; --pp-converge-wash:#241D33; --pp-converge-wash-2:#2E2442; --pp-apparatus:#1A1D21; --pp-apparatus-ink:#D2D7DD; --pp-apparatus-ink-2:#949CA6; --pp-apparatus-rule:#2E3339; --pp-apparatus-tick:#6F7883; --pp-earned-ink:#E0BC7A; --pp-earned-ink-2:#CBA968; --pp-earned-wash:#221D14; --pp-earned-line:#453820; --pp-earned-rule:#392E1B; --pp-dist-bar:#383229; --pp-dist-iqr:#4A4237; --pp-dist-median:#B4AD9F; --pp-dist-you:#F2EEE6; --pp-dist-them:#F2EEE6; --pp-dist-track:#221F1A; --pp-lift-1: 0 6px 20px rgba(0,0,0,.5); --pp-lift-2: 0 16px 44px rgba(0,0,0,.62); } @media (prefers-reduced-motion: reduce) { :root { --pp-dur-1: 0ms; --pp-dur-2: 0ms; --pp-dur-3: 0ms; } }