# Design Language for lottery.day ## Aesthetics and Tone lottery.day is a **secular oracle cabinet** — a device that once lived in a smoke-yellowed municipal hall, now running as a browser artifact. The aesthetic is **avant-garde tension between hand-torn fortune and machine precision**: aged paper forms the surface layer while a sparse, cold HUD grid is laser-etched over it, as if an engineer bolted a readout panel onto a 1940s sweepstakes broadsheet and never bothered to sand the seams. The mood is **conversational-fatalistic** — the site speaks the way a croupier does: level voice, no exclamation marks, frank about odds, weirdly intimate. Every label is a direct address: "Your draw is in 06:22:14." Not "Check the countdown!" Just the fact. The design earns trust by withholding hype. Visually: imagine a *Constructivist lottery poster* (Rodchenko angles, 1920s agitprop geometry) left folded in a municipal archive for eighty years, then unfolded and pinned to a monitor running a monochrome telemetry feed. The tension between the organic decay of the paper and the exacting precision of the HUD is the entire aesthetic statement. No gradients, no photography, no stock-image warmth — only the raw grain of the page, the crispness of a registration mark, and the cold authority of a countdown clock. **Tone:** Conversational, frank, oddly warm. Lottery is a daily ritual; the site honors that rituality without cynicism or evangelism. It speaks to someone who plays every day not because they expect to win, but because checking the ticket is a small ceremony. The copy is quiet and direct: "Today's numbers." "Your ticket." "Draw closes." No superlatives, no urgency theater. ## Layout Motifs and Structure **HUD-overlay composition on a paper field.** The page is not a webpage — it is a *dashboard instrument panel* silk-screened onto a broadsheet. The metaphor governs every layout decision. **Structural grammar:** - The background is a single warm off-white paper field (`#F5EFE2`) occupying 100vw × 100svh, fixed — it never scrolls. Subtle noise grain rendered as an SVG `feTurbulence` filter gives it tooth. - Over that paper, a **sparse grid of thin hairline rules** (`#C4A882`, 0.5px) forms the HUD armature. These are not decorative borders — they are the grid *revealed*, as if the underlying layout grid itself became visible. Lines extend from edge to edge; content is positioned where they intersect. - The **primary instrument cluster** occupies the upper-left quadrant: a large countdown clock (today's draw close), a ball-display row (last draw numbers), and the domain wordmark. All text here is set in the display variable font with high `wdth` and low `wght`, giving a stretched, cool telemetry feel. - The **right-side panel** (on desktop: 340px fixed-width sidebar pinned to the right edge) holds the ticket entry / quick-pick interaction. It is separated from the main field by a single vertical hairline rule only — no box, no card shadow, no fill. The separation is purely typographic and linear. - A **registration-mark motif** appears at three corners of the viewport (not all four — the bottom-left is intentionally absent, asymmetric). Each is a classic printer's registration cross (⊕) in `#9B7E58` at 14px, serving as both decoration and spatial anchor. - **Content zones are labeled with HUD-style telemetry tags** — small-caps mono labels (`DRAW #`, `POOL`, `LAST NUMBERS`) floated at the grid intersection just above each content cluster, as if annotating an instrument readout. - On mobile, the layout collapses to a single-column stacked arrangement but retains the hairline grid, corner registration marks, and HUD label system. The paper field fills the screen; the sidebar becomes a bottom drawer. **Spacing doctrine:** All margins and gutters are multiples of 8px. Major spatial breaks use 40px or 80px. The page breathes — there is conspicuous negative space between clusters; content never crowds. The emptiness of the paper field is part of the composition. **No sticky nav, no hamburger menu, no footer blocks** — the HUD has a minimal top-bar: logo left, a single `archive` link right, set in small mono caps at 11px. Everything else is instrument. ## Typography and Palette **Typography (Google Fonts, variable-first):** - **Primary display (wordmark, countdown, draw numbers):** `Bebas Neue` — used at clamp(3.6rem, 9vw, 8rem) for the wordmark `lottery.day` and at clamp(2.4rem, 6vw, 5.2rem) for the countdown clock. Uppercase only, tracked at 0.06em. The mechanical rigidity of Bebas against the warm paper ground creates the primary aesthetic collision. - **Expressive variable display (draw numbers, live results):** `Roboto Flex` (Google Fonts variable: wght 100→1000, wdth 25→151, opsz, GRAD). Used exclusively for the draw number balls — each ball digit is rendered in Roboto Flex with `font-variation-settings: 'wdth' 62, 'wght' 800` at rest, animating on draw reveal to `'wdth' 130, 'wght' 300` over 600ms with a custom ease, then snapping back to final display weight `'wght' 700, 'wdth' 100`. This is the expressive-variable behavior: the numbers themselves visually *stretch and settle* when a draw lands. - **Body and UI labels:** `IBM Plex Mono` (Google Fonts) — weight 400 for all body copy, 500 for HUD labels. Set at 13–14px for labels, 15–16px for body. Mono enforces the telemetry-instrument metaphor; columns align, ticket numbers tabulate naturally. - **Accent (secondary labels, legal small-print):** `Cormorant Garamond` (Google Fonts) — weight 300, italic, used *only* for the one or two lines of narrative copy ("The draw for Thursday, 8 May 2026 closes at midnight."). The contrast between mono utility and Garamond intimacy creates the "official broadsheet" register. **Palette (triadic, paper-grounded):** | Role | Hex | Description | |------|-----|-------------| | Paper ground | `#F5EFE2` | Warm off-white, the base field — slightly ivory, like newsprint left in daylight | | Grid ink / rules | `#C4A882` | Mid-warm tan — the hairline grid color, also registration marks | | HUD steel | `#2A2D35` | Near-black with slight blue — all primary text, countdown clock, number display | | Triadic accent 1 | `#C84B31` | Brick red — used for the active draw indicator dot, error states, the "LIVE" badge | | Triadic accent 2 | `#31788C` | Deep teal — used for confirmed/matched number highlights, secondary info | | Triadic accent 3 | `#D4A017` | Amber-gold — used for the jackpot amount figure, prize tier labels, hover-lift highlights | | Aged crease shadow | `#9B7E58` | Dark warm tan — used for registration marks, fine decorative rule accents | The triadic system (brick red / deep teal / amber-gold) reads on the warm paper as three distinct signal types: **alert**, **confirm**, **reward** — which maps cleanly onto the lottery interaction model (draw alert, match confirmation, prize display). ## Imagery and Motifs **Paper-aged imagery is the exclusive visual material.** No photography. No 3D renders. No gradients. **Surface texture:** - The paper field itself is procedurally grained using an SVG `feTurbulence` noise filter (baseFrequency 0.85, numOctaves 4, type fractalNoise) blended at 7% opacity over the base color. This creates the subtle tooth of aged newsprint without requiring a raster image. - Occasional horizontal `creases` — thin lines at `#C4A882` with 15% opacity, running fully across the field at irregular vertical intervals (roughly 180px, 340px, 520px from top) — simulate the folds of a stored broadsheet. Pure CSS `::before` pseudo-elements, `border-top: 1px solid`. **Motif system — grid-lines as the structural decorative vocabulary:** - The HUD hairline grid (described under Layout) is also the primary decorative element. Where content is sparse, the grid is exposed — the empty quadrant of the page becomes a visible field of intersecting lines, which is both architectural and aesthetic. - **Registration cross motif** (⊕) appears at viewport corners and inline as section breaks. SVG, rendered at 14px, in `#9B7E58`. Used three times on the page (not four — asymmetry is intentional). - **Number ball glyphs** — the draw numbers are displayed not as plain text but inside a minimal SVG circle (stroke: `#2A2D35`, 1.5px, no fill) that sits on the paper field. When a number is matched, the stroke color transitions to `#31788C` (teal) over 400ms and the circle fills to 8% teal. The ball itself is the motif — a simple geometric form that connects to the physical lottery ball while remaining flat and graphic. - **Angle/diagonal accent** — a single 45° hairline rule, 120px long, `#C4A882`, appears in the wordmark lockup, running from the baseline of the `y` in `lottery.day` at roughly 135° — a Constructivist design mark, as if the designer made a pencil mark on the original broadsheet. **No stock photography. No illustration. No icons.** The entire visual vocabulary is: paper grain, hairline rules, registration marks, number ball circles, and variable type. This discipline is the avant-garde statement — austere, purposeful, refusing decoration for its own sake. ## Prompts for Implementation Build lottery.day as a **single fixed-viewport instrument panel** — it does not scroll. The full experience lives within 100svh. The sensation is of loading a dashboard, not visiting a webpage. **Page structure (single viewport, no scroll):** 1. **PAPER FIELD + HUD GRID LAYER** — `position: fixed; inset: 0; z-index: 0`. The base is a `div` with background `#F5EFE2` and the SVG noise filter applied as a CSS filter. The hairline grid is drawn as an absolutely-positioned SVG (full viewport) with `` elements at 40px column intervals (vertical) and 80px row intervals (horizontal) in `#C4A882` at 30% opacity. This SVG is `pointer-events: none`. 2. **TOP BAR** — `position: fixed; top: 24px; left: 40px; right: 40px; z-index: 10`. Contains: `lottery.day` wordmark in Bebas Neue at 22px left; `ARCHIVE` label in IBM Plex Mono small-caps at 11px right. No background, no box. Just type floating on paper. 3. **MAIN INSTRUMENT CLUSTER** (upper-left quadrant, `position: absolute; top: 80px; left: 40px; width: calc(60vw - 80px)`) — contains: - HUD label `DRAW #4217` in IBM Plex Mono 500, 10px, `#C4A882`, letter-spacing 0.15em - Countdown clock in Bebas Neue, clamp(3.6rem, 6vw, 5.2rem), `#2A2D35`, live updating via JS - A sub-label `CLOSES MIDNIGHT UTC` in IBM Plex Mono, 11px, `#9B7E58` - The diagonal Constructivist accent line below the wordmark area 4. **LAST DRAW NUMBERS ROW** (below countdown, same left column) — a horizontal row of 6 number ball SVG circles (50px diameter each, 12px gap) showing the previous draw. Numbers in Roboto Flex `wght 700, wdth 100` inside each circle. One bonus ball at right, separated by a 24px gap and a short vertical hairline rule, rendered in amber-gold `#D4A017` border stroke. 5. **JACKPOT DISPLAY** (below ball row) — HUD label `JACKPOT POOL` and then the amount in Bebas Neue at clamp(2rem, 4vw, 3.2rem) in `#D4A017` (amber). Sub-label `ESTIMATED NEXT DRAW` in IBM Plex Mono 300 at 11px. 6. **RIGHT PANEL** (sidebar: `position: fixed; right: 0; top: 0; bottom: 0; width: 320px; border-left: 0.5px solid #C4A882; padding: 80px 32px 32px`) — the interaction zone: - HUD label `YOUR TICKET` at top - 6 number input cells (36px × 36px each, `border: 1px solid #C4A882`, `background: transparent`, IBM Plex Mono font) in a row — the user types their numbers - A `QUICK PICK` button (all-caps IBM Plex Mono, 12px, `#2A2D35` text, `border: 1px solid #2A2D35`, no fill, hover: fill `#2A2D35` / text `#F5EFE2` — this is the hover-lift pattern: background fill slides up from bottom via `clip-path: inset(100% 0 0 0)` transitioning to `inset(0% 0 0 0)` over 220ms) - `CHECK NUMBERS` action below — same hover-lift button pattern but accent brick-red `#C84B31` on hover - Results appear inline in the sidebar below buttons: matched numbers highlighted in teal `#31788C`, the result phrase ("3 of 6 — Standard Prize") in Cormorant Garamond italic 18px 7. **CORNER REGISTRATION MARKS** — three SVG ⊕ marks (14px) pinned `position: fixed` at: `top: 16px; left: 16px`, `top: 16px; right: 16px`, `bottom: 16px; right: 16px`. No fourth mark (bottom-left intentionally absent). 8. **DRAW REVEAL ANIMATION** — when a new draw is loaded, each ball number triggers the Roboto Flex variable font animation: start `wdth: 25, wght: 200, opacity: 0`, keyframe to `wdth: 150, wght: 900` at 50%, settle to `wdth: 100, wght: 700, opacity: 1` at 100%. Each ball staggers by 80ms. Duration: 600ms per ball. CSS `@keyframes` only, no JS animation library. 9. **HOVER-LIFT on number balls** — on `mouseenter` a number ball from the last draw, the ball lifts: `transform: translateY(-3px)`, `box-shadow: 0 6px 16px rgba(42,45,53,0.12)` over 200ms ease-out. The stroke transitions to the triadic color matching its draw position (first three in teal, next two in amber, last in red). On `mouseleave`, reverses smoothly. 10. **Crease lines** — three `::after` pseudo-elements on the paper field div, rendered as full-width `border-top: 1px solid rgba(196,168,130,0.18)` at `top: 180px`, `top: 360px`, `top: 540px`. Simulates paper fold creases. **JavaScript requirements (minimal):** - Live countdown to draw close (pure JS, no library) - Quick pick random number generator (6 unique numbers 1–49, 1 bonus 1–10) - Number check comparison logic - Roboto Flex variable font animation via CSS class toggle **AVOID:** hero sections with CTA buttons, gradient backgrounds, card grids, photography placeholders, loading spinners, scroll-triggered animations, any sticky navigation beyond the minimal top bar. **EMPHASIZE:** the paper-and-precision collision, the silence of the layout, the way the HUD grid and the aged ground feel like two eras of technology occupying the same physical space. ## Uniqueness Notes 1. **Fixed-viewport dashboard, no scroll (registry first for a lottery/chance domain).** Lottery sites are almost universally vertical scroll marketplaces with hero sections and feature lists. lottery.day is a *single-screen instrument* — the entire product lives at once within 100svh. No lottery site in the registry uses this constraint. 2. **Constructivist / avant-garde visual language on a domain associated with mass-market consumer culture.** The registry shows no design using Constructivist geometry (diagonal accent marks, axial registration marks, rigorous grid-line exposure) as the primary decorative vocabulary. Most lottery/chance/game domains would default to bright consumer gradients. lottery.day refuses this and lands in completely different aesthetic territory. 3. **Variable font as draw-reveal animation (novel use pattern).** Using Roboto Flex's `wdth` and `wght` axes to animate number reveal — the type *physically contorts* as the number appears — is not a pattern in any existing design in the registry. The variable font is not used for responsive text sizing but as a narrative animation device. 4. **Triadic palette on a paper-aged ground.** The frequency report shows `triadic` at 2% and `paper-aged` at 5%. Combining them — with the three triadic colors mapped semantically to alert/confirm/reward — is a novel pairing not seen in the registry. It gives the page legible signal-color logic without any of the typical neon-on-dark or gradient-on-white patterns. 5. **Chosen seed:** `aesthetic: avant-garde, layout: hud-overlay, typography: expressive-variable, palette: triadic, patterns: hover-lift, imagery: paper-aged, motifs: grid-lines, tone: conversational` 6. **Avoided from frequency analysis:** `photography` (89% — completely absent), `minimal` (38% — rejected in favor of deliberate complexity of the paper-HUD collision), `gradient-mesh` (10% — no gradients anywhere), `hover-lift` is used but constrained to the two action buttons and ball motifs only (not a blanket page interaction).