--- version: alpha name: high-score-design description: "A warm near-white canvas (#fffdf7) with deep indigo-black ink (#1a1330), a bright magenta (#ff1f7a) and a canary yellow (#ffcc00) as the two brand accents, both fills labeled in ink rather than white, each paired with a darker text-safe tier. Bungee carries every headline as an arcade-marquee shout, Inter carries anything meant to be read quickly. The homepage's hero is one claw machine, actually grabbing, four prizes lifting out of the pile in sequence as you scroll, each in its own real toy color." --- ## Brand Positioning High Score runs the prize counter at a family arcade, and it exists because most arcade sites either drown a simple, honest redemption counter under flashing GIFs and fake urgency ("LIMITED TIME!"), or play it corporate-safe and lose the actual fun of watching a claw grab something. High Score's bet: show the claw actually grabbing, a real prize, in its real color, and stay plain everywhere else, a real ticket cost, a real prize list, no fake scarcity. If a component performs "jackpot energy" without being tied to a real prize, a real ticket count, or the claw itself, it doesn't belong here. colors: accent: "#ff1f7a" accent-text: "#c2005a" accent-alt: "#ffcc00" accent-alt-text: "#8a6600" ink: "#1a1330" ink-muted: "#5c5470" canvas: "#fffdf7" ## Logo / Wordmark System The mark is a claw grabber, three prongs closed around a single ticket, the exact shape of the moment a claw actually catches something, not the open, hovering, "about to grab" claw every arcade logo already uses. ```svg ``` - **Lockup**: mark, then a `0.5rem` gap, then "High Score" in Bungee, mark always left of the wordmark. - **Minimum size**: mark not smaller than `18px` tall, below that the two claw prongs merge into one shape. - **Clearspace**: empty margin equal to the mark's own height on all four sides. - **Don't**: don't draw the claw open, it's always shown mid-grab, that's the one moment this business sells. Don't recolor the prongs, they're always `--accent`, never `--accent-alt` or a third color. Don't drop the ticket in the center, without it the mark is just an empty claw. ## Color System ### Roles | Role | Token | Value | Used for | |---|---|---|---| | Canvas | `--bg` | `#fffdf7` | Page background | | Surface | `--panel` | `#ffffff` | Nav, prize cards, form fields | | Surface raised | `--raised` | `#fff0f6` | Hover state, input focus fill | | Border | `--border` | `#f6d9e6` | Card edges, dividers, input outlines | | Ink | `--ink` | `#1a1330` | Primary text, headlines | | Ink muted | `--dim` | `#5c5470` | Secondary text, meta lines, placeholders | | Magenta | `--accent` | `#ff1f7a` | Primary button fill (ink label), the mark's claw prongs, "available" status | | Magenta text | `--accent-text` | `#c2005a` | Links, small accent text | | Yellow | `--accent-alt` | `#ffcc00` | Secondary button fill (ink label), the mark's ticket, "almost gone" status | | Yellow text | `--accent-alt-text` | `#8a6600` | Secondary links, small accent text | **The claw machine's four prizes are illustrative, not tokens**, the same exception every other system in this batch already establishes: real plush toys come in real colors, teal, violet, orange, blue, not a two-token gradient wearing a claw shape. `--accent` and `--accent-alt` never appear as prize fills in the hero, they're reserved for the interface. ### Contrast (computed from the hex values above via WCAG relative luminance) | Pairing | Ratio | Passes | |---|---|---| | `--ink` on `--bg` | 17.5:1 | AAA | | `--dim` on `--bg` | 6.98:1 | AA | | `--accent-text` on `--bg` (links) | 6.0:1 | AA | | `--accent-alt-text` on `--bg` (links) | 5.19:1 | AA | | `--ink` label on `--accent` fill | 4.86:1 | AA | | `--ink` label on `--accent-alt` fill | 11.77:1 | AAA | Both raw accents are too bright to carry white text (`white` on `--accent` measures only 3.67:1, below AA), so this palette needed the same three-tier answer Pearl & Pop and Sunsplit's palettes required: a bright illustrative/fill tone plus a separate darker text-safe tone, fills always labeled in `--ink`. Computed fresh for these hex values, this is the third system in the batch to land on this shape of answer, a real convergence given how many light, bright-accent palettes this batch specifically asked for, not a copy-pasted assumption. typography: display: fontFamily: Bungee fontWeight: 400 body: fontFamily: Inter fontWeight: 400 ## Type Scale | Token | Size | Weight | Family | Line-height | Letter-spacing | Used for | |---|---|---|---|---|---|---| | `--text-display` | `clamp(2.1rem, 5vw, 3.4rem)` | 400 | Bungee | 1.1 | 0 | Homepage H1 only | | `--text-h2` | `1.4rem` | 400 | Bungee | 1.2 | 0 | Section headings | | `--text-h3` | `1.05rem` | 400 | Bungee | 1.25 | 0 | Prize names | | `--text-body` | `1rem` | 400 | Inter | 1.65 | 0 | Paragraph copy | | `--text-small` | `0.85rem` | 400 | Inter | 1.5 | 0 | Nav, footer, helper text, meta lines | | `--text-label` | `0.75rem` | 600 | Inter | 1 | 0.06em, uppercase | Kickers, badges, form labels | Bungee is a solid, condensed, arcade-marquee face, one weight, always loud, reserved for the headline, section headings, and prize names. Inter carries anything read as a sentence or clicked as a control, including every ticket price, which needs to be scanned accurately, not shouted. ## Spacing Scale Base unit `8px`. Tokens in use: `--space-2: 0.5rem`, `--space-3: 1rem`, `--space-4: 1.5rem`, `--space-6: 2rem`, `--space-8: 3rem`, `--space-12: 4rem`. ## Shape `--radius: 16px` on cards, panels, and inputs. `--radius-pill: 999px` on buttons and badges. The claw machine's glass window is a single hard-edged rectangle, deliberately not rounded, the one shape in the system exempt from the soft-radius scale, because a real claw machine's window is a flat pane of glass, not a rounded screen. ## Iconography No icon library. The only non-text graphics are the logo mark and the hero's own claw machine (hand-built SVG shapes). Ticket costs and stock notes are plain text, not a ticket or star icon next to unrelated words. ## Motion Principles Scroll drives one claw machine: the claw descends into a pile of four prizes and grabs one at a time in sequence, lifting it out and over into the win chute, each in its own real toy color. The moment a prize lands in the chute, the redemption card it represents slides in below. One-shot reveal, nothing loops, every prize is written out in plain markup at all times regardless of scroll or script state. Scroll trigger bounds checked to verify `0` progress at scroll position `0`, using a fixed pixel-distance trigger rather than a viewport-percentage trigger after Sunsplit's pre-elapsed-trigger bug proved percentage triggers are unsafe for hero elements that sit close to the viewport top at load. `prefers-reduced-motion: reduce` renders all four prizes already in the chute and every card already visible. ## Voice & Tone Straightforward, a little competitive, no fake urgency. In practice: - **Button label**: "See the prize wall", not "WIN BIG NOW!!!" - **Prize description**: "3-foot teal shark plush, 2,480 tickets, most people save up two visits for this one.", not "The ULTIMATE prize, don't miss out!" - **Ticket note**: "Tickets don't expire, we track your count by phone number, not a paper card you can lose.", not "Redeem before it's too late!" - **Empty state**: "That prize is out until next week's restock.", not "SOLD OUT, act fast on what's left!" ## Accessibility Baseline - Focus ring: `2px solid var(--accent-alt-text)`, `2px` offset, applied via `:focus-visible` on every interactive element. - Reduced motion: the claw-grab sequence and every card reveal check `prefers-reduced-motion: reduce` and render the finished state immediately. - Minimum tap target: `44px` in the smallest dimension for every button and input. - Color is never the only signal: a prize's badge pairs "Available" or "Almost gone" with the word, never color alone. - Every prize the claw can grab is also written out in plain markup at all times, see Motion Principles. ## Components ### Navigation Single-line bar, `64px` tall, `--panel` background with a `--border` bottom hairline, sticky to the top. Left: the mark + wordmark lockup. Right: a "Prizes" link plus one primary button ("See the prize wall"). ### Buttons Three variants, one radius (`--radius-pill`): - **Primary**: `--accent` fill, `--ink` label, used once per view for the real action. - **Secondary**: transparent fill, `1px solid --border`, `--ink` label. - **Ghost**: text-only, `--dim` label, `--ink` on hover. All variants define `:hover`, `:active` (`transform: scale(0.97)`), `:disabled` (`opacity: .45`), and `:focus-visible`. ### The claw machine (signature interaction) Documented in full under Motion Principles. Structurally: a static glass-window rectangle and claw arm, four prize shapes positioned in a pile, each scroll-driven from its pile position to the chute position in sequence via direct coordinate updates, real toy colors. ### Prize card A flat `.panel`: `--panel` background, `1px solid --border`, `--radius`, no shadow. Holds the prize name (Bungee), a real size/description note, the ticket cost, and an availability badge. Revealed by its prize landing in the chute above, present in the DOM at all times. ### Badge `--radius-pill`, `1px solid` the semantic color, semantic-color text on transparent fill: `--accent-text` for "Available," `--accent-alt-text` for "Almost gone." Never filled solid. ### Footer One row: arcade name/tagline on the left, real page links on the right (Prizes, back to gallery). ## Do's and Don'ts ### Do - Let the four prizes be real plush-toy colors, not a two-token gradient wearing a claw shape. - Show the claw mid-grab, never open and idle, that's the moment worth showing. - Label any accent-filled surface in `--ink`, both accents are too bright to carry white here. - Write every prize the claw can grab into plain markup at all times. - Say the real ticket cost, not a vague "affordable" or "great value" claim. ### Don't - Don't use flashing GIFs, a jackpot bell sound cue, or a slot-machine spin anywhere. - Don't perform "WIN BIG" or fake-urgency copy, name the actual prize and ticket cost instead. - Don't replay the claw grab on every scroll pass, it plays once, like a real machine. - Don't invent a third accent for a prize state, "available" and "almost gone" are the only two. ## Known Constraints - Two routes exist (homepage, prizes). There is no checkout and no authenticated state, "See the prize wall" and the ticket lookup are not wired to anything real, this is a concept demo. - The claw machine holds exactly four prizes because that's the current featured lineup. A fifth prize rotates one out, it doesn't add a fifth grab. - No responsive breakpoint table beyond a single-column mobile collapse of the claw stage and prize cards. ## Process Built through the impeccable-audited anti-slop workflow: never-list written before any HTML, page structure derived from the signature interaction (one real claw, actually grabbing) rather than a template, mechanical detector run clean, and the scroll trigger's start/end bounds checked to verify `0` progress at scroll position `0` before this system was considered done, using a fixed-pixel-distance trigger from the outset given the pre-elapsed-trigger lesson from Sunsplit earlier in this batch.