/* ═══════════════════════════════════════════════════════════════════════════ AIMockDraft — THE RULEBOOK (amd-rules.css) Draft 1 · Sept 16, 2026 · for Justin's approval One file. Every v2 page links it, and no page defines its own sizes, colors, spacing, corners, shadows or animation timing. That is the whole idea: a Sleeper-level product is not a pile of good decisions, it is a small number of decisions that every screen obeys. Where these values came from: the v2 landing page, which was already cut down to eight sizes and two weights and fixed for contrast (Sept 12–14). The landing was the only page following them — the Big Board was running 24 font sizes, 5 weights, 68 hex colors, 22 corner radii and 21 shadows. This file lifts the landing's rules into a shared place, and adds the few things an app needs that a marketing page does not (inputs, data tables, touch targets, states, motion timing). If something seems to need a value that is not here, the answer is to redesign that thing — not to add a value. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* ── 1. TYPE SIZES — eight, plus one for phone inputs ──────────────────── --t-micro is for SHORT UPPERCASE CODES only (QB, RD 1, 1ST). Never a sentence, never a label a person has to read to use the page. It was 9px on the landing; the Big Board showed that 8.5–9px codes are unreadable on a phone, so the floor is 10. */ --t-micro:10px; --t-tiny:11px; /* captions, meta, eyebrows */ --t-small:13px; /* secondary copy, rows, buttons */ --t-base:15px; /* body copy, primary rows */ --t-input:16px; /* every text input on a phone — below 16 iPhones zoom in */ --t-lead:18px; /* card headings, the lede */ --t-h3:20px; /* panel titles */ --t-stat:27px; /* the one big number */ --t-h2:clamp(24px,5.4vw,36px); --t-h1:clamp(40px,9.6vw,72px); /* ── 2. WEIGHTS — two ───────────────────────────────────────────────────── Hierarchy comes from size, width and color, not from bolding. */ --w-normal:400; --w-bold:700; /* ── 3. THE WIDTH AXIS (Hubot Sans + Mona Sans, see amd-fonts.css) — the Sleeper trick ───────────────────── Contrast lives in how WIDE the letters are, not how heavy. */ --wd-wide:118; /* eyebrows, kickers — small, wide, tracked */ --wd-normal:100; /* anything read as a sentence */ --wd-tight:88; /* section headings */ --wd-data:75; /* numbers, codes, ranks — always tabular */ --wd-display:68; /* the one big line on a screen (Hubot/Mona stop at 75) */ --track-display:-0.022em; --track-caps:0.06em; /* uppercase labels only */ /* ── 4. SPACING — ten steps, nothing in between ────────────────────────── Padding, gaps and margins use only these. 2px is allowed for hairline nudges inside tiny tags and nowhere else. */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:80px; --s10:96px; /* ── 5. CORNERS — sized by the thing, five total ─────────────────────── */ --r-xs:4px; /* tiny tags (position codes) */ --r-sm:8px; /* chips, buttons, small controls */ --r-md:12px; /* rows, inputs, inner blocks */ --r-lg:16px; /* cards, panels, sheets */ --r-pill:999px; /* ── 6. COLOR ───────────────────────────────────────────────────────────── Mostly gray. Orange appears only where the user acts or where something is theirs. Every text color clears WCAG AA (4.5:1) on every surface it sits on — the values are the landing's contrast-fixed ones. Orange #ff6600 NEVER carries text. Buttons use --accent-cta (white text 4.94:1); orange words use --accent-ink. */ --accent:#ff6600; /* lines, rings, fills, icons — no text */ --accent-cta:#c44700; /* primary button fill */ --accent-ink:#b0490f; /* orange text */ --accent-wash:rgba(255,102,0,.08); /* The focus ring is a third orange, and it has to be, because WCAG 1.4.11 asks a focus indicator for 3:1 against what is behind it and #ff6600 measured 2.69–2.94:1 on every light surface this file defines: --tint 2.69 --bg 2.76 --panel2 2.86 --panel 2.94 Three near-misses and one dead-on 2.94, which is the worst kind of failure — it looks fine on a white page to anyone who already knows where the focus is. On dark the same orange is 5.65–6.29, so the answer is not one colour but the right one per theme: --accent-cta on light (4.53–4.94), --accent on dark (5.65–6.29). Both clear 3:1 on every surface with room to spare. Every focus outline on every page points here, so the ring is one decision. scripts/contrast-test.js measures it against each page's own surfaces in both themes. */ --ring-focus:var(--accent-cta); --bg:#f5f6f9; /* the page */ --panel:#ffffff; /* cards */ --panel2:#fafbfd; /* recessed wells inside cards */ --tint:#f1f3f7; /* inputs at rest, hover fills */ --ink:#121722; /* primary text */ --soft:#4c5563; /* secondary text 7.5:1 */ --muted:#636d80; /* tertiary text 5.2:1 (4.6 on --tint) — the lightest text allowed */ --faint:#98a1b0; /* NOT text. placeholders' dashes, disabled icons */ --ghost:#c1c8d4; /* NOT text. drag handles, empty tracks */ --line:#e6e9ef; /* borders */ --line2:#eef0f5; /* dividers inside a card */ --hair:#f3f5f9; /* the faintest row tint */ --ring:#dde1ea; /* input borders */ /* The ground inside a field. A control a reader is meant to type in needs its own surface, or it reads as one more number on the page — which is exactly what happened to the career forecast. */ --field:#fbfcfe; /* The disc behind a school crest. Light in BOTH themes on purpose: every one of these marks is drawn to sit on white, and a dark-ink crest on a dark card loses its edges. See schoolLogo() in position-colors.js. */ --logo-disc:#f2f4f8; /* ── TIER TINTS ─────────────────────────────────────────────────────────── Six hues a person can put on a tier of their own board, and nothing else. THIS IS NOT THE POSITION COLOUR-CODING THE RULEBOOK BANS, and the difference is not a technicality. Position colour is the site deciding that every corner is purple, which puts a legend between a reader and a list and makes the board harder to read the longer it gets. A tier tint is the USER saying "these eight are my blue chips" on a board they built. The colour means what they decided it means, on their own page, and it can be turned off. WHY THESE ARE HUES AND NOT A SCALE. A ladder from green to red would be the site grading their tiers, which is the same overreach in a different costume. Six unranked hues let a person group by whatever they are actually thinking — need, scheme fit, conviction — rather than by better and worse. HOW FAINT. --tier-N is the row wash and --tier-N-edge is the rule down its left side. The wash is mixed from the surface, so it is 7% of a hue over whatever the page's panel is and moves text contrast by hundredths; the edge carries the actual identification, which is why it is the saturated value. npm run contrast reads the computed colour and would fail on a wash dark enough to matter. SIX, NOT EIGHT. Justin asked for about six. More than that and a person is choosing between two blues, which is a decision with no answer. */ --tier-1:color-mix(in srgb,#2563eb 7%,var(--panel)); --tier-2:color-mix(in srgb,#0891b2 7%,var(--panel)); --tier-3:color-mix(in srgb,#059669 7%,var(--panel)); --tier-4:color-mix(in srgb,#b45309 7%,var(--panel)); --tier-5:color-mix(in srgb,#be123c 7%,var(--panel)); --tier-6:color-mix(in srgb,#6d28d9 7%,var(--panel)); --tier-1-edge:#2563eb; --tier-2-edge:#0891b2; --tier-3-edge:#059669; --tier-4-edge:#b45309; --tier-5-edge:#be123c; --tier-6-edge:#6d28d9; --borderHover:#cdd3de; /* ── WHAT EACH SURFACE MEANS ──────────────────────────────────────────── Three grounds and two accents, each with a job. Written down because the Compare room proved what happens without it: a dark overlay mixing its own thirteen whites and four greys, which reads as a clash however well the hues get on. --panel you can act here — a prediction, a note, a comp --panel2 the record being shown to you — production, tape, tracking --navy the record you have already made permanent: the receipt, Scout Mode, Compare. Text on it is --on-dk / --on-dk-soft. --accent-cta the one action on the screen. Never more than one. --gold-lt structure on navy: rules, marks, the line beside a statement. It is what "this is on the record" looks like, and it is never an action. Gold and orange are not two accents competing for the same job. Gold is structural and orange is the alarm, which is why both can sit on one screen without arguing. */ --navy:#0f1a2a; /* dark identity surfaces: hero, receipt, Scout Mode */ --dk:#0e1c30; --dk2:#152a46; /* The floor of a full-screen dark room — Scout Mode and Compare both fade to it. Darker than --navy on purpose: an overlay that covers the whole viewport needs to sit UNDER the panels it contains, or the room and its contents are the same surface and nothing in it has an edge. */ --dk0:#0a1119; --on-dk:#eaf0f7; --on-dk-soft:#a9b8ca; /* text on navy */ --gold:#8a6516; /* gold TEXT on light */ --gold-lt:#c99a3f; /* gold on navy, and gold lines */ --good:#e8f6ee; --good-ink:#0a7a48; /* backgrounds / text */ --mid:#fff2e2; --mid-ink:#9c5406; --bad:#fdecec; --bad-ink:#b42318; --low:#f1f3f7; --low-ink:#4c5563; --warn-ink:#9c5406; --glow-a:rgba(255,102,0,.06); --glow-b:rgba(37,99,235,.04); /* ── 7. SHADOWS — five, used to mean "this is raised" ─────────────────── */ --shadow-sm:0 1px 2px rgba(16,24,40,.05); --shadow:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04); --shadow-md:0 6px 14px -6px rgba(16,24,40,.12),0 2px 5px -2px rgba(16,24,40,.06); --shadow-lg:0 14px 30px -12px rgba(16,24,40,.16),0 4px 10px -6px rgba(16,24,40,.08); --shadow-xl:0 30px 56px -20px rgba(16,24,40,.22),0 10px 20px -10px rgba(16,24,40,.10); --focus:0 0 0 3px rgba(255,102,0,.18); /* ── THE LIFT UNDER A PRIMARY BUTTON — two values, not five ──────────── The filled orange CTA carried a different coloured shadow everywhere it appeared. On the landing page alone, measured 2026-09-29: .btn.accent 0 6px 16px -6px rgba(196,71,0,.50) .btn.accent:hover 0 10px 22px -8px rgba(196,71,0,.55) .hero .cta .primary 0 10px 24px -8px rgba(196,71,0,.45) .hero .cta .primary:h 0 14px 30px -10px rgba(196,71,0,.50) .close .cta .primary 0 10px 24px -8px rgba(196,71,0,.45) — the same component, styled twice, at nearly the same size (44px and 47px tall), so nothing about the difference was proportional to anything. Core Lists had a sixth. A reader never sees any one of them as wrong; what they see is a page where the light comes from a slightly different place each time, which is most of what "assembled rather than designed" actually is. Two values now: at rest, and lifted on hover. The share-card renderers (card.html, share.html) keep their own — they draw artwork on dark team colours and are not site chrome. */ --lift-cta:0 8px 20px -8px rgba(196,71,0,.45); --lift-cta-hover:0 12px 26px -8px rgba(196,71,0,.52); /* ── 8. MOTION — three speeds, two curves ──────────────────────────────── fast = a press or hover acknowledging the finger base = something on the page changing state slow = a sheet, card or panel arriving No shimmer sweeps, no pulsing glows, no fade-in on every scroll. */ --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; --ease:cubic-bezier(.2,.8,.2,1); --ease-sheet:cubic-bezier(.32,.72,0,1); /* ── 9. TOUCH ─────────────────────────────────────────────────────────── */ --tap:44px; /* nothing tappable on a phone is smaller than this */ } /* Dark theme — re-thought, not inverted. */ body.dark, html.amd-dark body{ --bg:#0c1420; --panel:#141f2e; --panel2:#111a26; --tint:#0e1825; --ink:#eef2f7; --soft:#b9c3d1; --muted:#8d98a9; --faint:#5d6879; --ghost:rgba(255,255,255,.22); --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.06); --hair:rgba(255,255,255,.03); --ring:rgba(255,255,255,.12); --borderHover:rgba(255,255,255,.18); --field:rgba(255,255,255,.04); /* Slightly brighter than the light theme's, because it is carrying the whole legibility of the crest against a dark card. */ --logo-disc:#e9edf3; /* The same six, brightened for a dark panel: the light theme's values go muddy on navy, and a 7% mix of a dark hue into a dark surface is invisible rather than faint. The wash is lifted to 12% because a dark surface has less headroom above it than white has below it. */ --tier-1:color-mix(in srgb,#5182ef 12%,var(--panel)); --tier-2:color-mix(in srgb,#22b8d6 12%,var(--panel)); --tier-3:color-mix(in srgb,#34d399 12%,var(--panel)); --tier-4:color-mix(in srgb,#f0a14a 12%,var(--panel)); --tier-5:color-mix(in srgb,#fb7185 12%,var(--panel)); --tier-6:color-mix(in srgb,#a78bfa 12%,var(--panel)); --tier-1-edge:#5182ef; --tier-2-edge:#22b8d6; --tier-3-edge:#34d399; --tier-4-edge:#f0a14a; --tier-5-edge:#fb7185; --tier-6-edge:#a78bfa; --accent-ink:#ff9a57; --gold:#e0bd73; --ring-focus:var(--accent); /* #ff6600 is 5.65–6.29:1 on every dark surface */ --good:rgba(5,150,105,.16); --good-ink:#7ee6bd; --mid:rgba(212,168,83,.16); --mid-ink:#f2d18a; --bad:rgba(220,38,38,.16); --bad-ink:#ff9b91; --low:rgba(255,255,255,.06); --low-ink:#b9c3d1; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6); --shadow-md:0 8px 20px -8px rgba(0,0,0,.55); --shadow-lg:0 2px 6px rgba(0,0,0,.4),0 30px 70px -30px rgba(0,0,0,.8); --shadow-xl:0 34px 60px -22px rgba(0,0,0,.75); } /* ── BASE — the things every page gets for free ─────────────────────────── */ ::selection{background:rgba(255,102,0,.2)} :focus-visible{outline:2px solid var(--ring-focus);outline-offset:2px} .num,.tnum{font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important} } /* ═══════════════════════════════════════════════════════════════════════════ THE RULES THAT AREN'T NUMBERS ───────────────────────────── 1. Phone first. Design at 390px wide, then let it grow. 2. One primary action per screen, in --accent-cta. Everything else is quiet. 3. Say it once. A label, a hint and a subtitle that repeat each other → keep one. 4. Dark navy = "yours / permanent" (hero, receipt, Scout Mode). Light = data. 5. Nothing floats over content it can cover. Floating controls reserve space. 6. Design every state: empty, loading (the shape of what's coming, not a spinner), error (say the fix), one item, 300 items, a very long name. 7. No emoji, no dashed borders, no gradient text, no position color-coding, no shimmer, no pulsing. 8. Numbers are tabular and set in Mona Sans (--font-text) at --wd-data. 10. Two fonts, set in amd-fonts.css: --font-display (Hubot Sans) for the one big line, section headings and titles; --font-text (Mona Sans) for everything else. Never name a font family directly. 9. Check it on screen at 390px and 1440px before calling it done. 11. Cards side by side end together. Use .amd-stack on the card and .amd-stack-foot on its last row — see the block above. 12. Credit every source, and put it last. A data credit goes at the foot of the thing it describes, at --t-tiny in --muted — never under the heading, where it takes the line the reader wanted. A CAVEAT is not a credit: "partial archive", "2025 season only" and the like change how the reader should read what follows, so those stay on top. 13. An optional label in a table header takes a reserved line in EVERY column, not only the columns that use it. A sub-label rendered just where it applies makes one column taller than its neighbour, and a ragged header over an even table is the thing that reads as unpolished even when every border lines up. Reserve it in the markup — an always- rendered empty element — rather than by a CSS rule someone has to remember. Two notes on one column share the reserved line; they never stack into a third. ═══════════════════════════════════════════════════════════════════════════ */ /* ── SCHOOL CRESTS ───────────────────────────────────────────────────────── One light disc in both themes, and object-fit:contain rather than cover so a wide wordmark is not cropped into an unreadable square. The padding keeps the mark off the rim. */ .amd-crest{background:var(--logo-disc); box-shadow:0 0 0 1.5px rgba(0,0,0,.10),0 1px 3px rgba(0,0,0,.25)} /* ── CARDS SIDE BY SIDE END TOGETHER ─────────────────────────────────────── A grid stretches cards to the same height, but their contents still start at the top, so one extra line of description pushes that card's input and button below its neighbour's. Groups had exactly this: "You become the commissioner: you set the scoring and hold the invite code" wrapped to two lines, "Someone will have sent you an eight-character code" to one, and the two Create and Join rows sat at different heights. Shortening the copy fixes it until the next edit, a longer word, a bigger font or a narrower phone — the alignment would depend on a sentence nobody knew was load-bearing. So it is structural: the card becomes a column and its last row takes the slack, which holds at any length in any language. .amd-stack on the card .amd-stack-foot on the row that must sit at the bottom ───────────────────────────────────────────────────────────────────────── */ .amd-stack{display:flex;flex-direction:column} .amd-stack > .amd-stack-foot{margin-top:auto}