# Design Language for lottery.day ## Aesthetics and Tone lottery.day is not a site that sells tickets. It is a meditation on the shape of chance — a single-page essay that asks what it actually feels like to be one number among millions, and why we keep doing it anyway. The visual identity is built around a **single recurring object: an inflated, gel-like sphere**, the way a lottery ball would look if it were rendered today by a 3D toy designer rather than printed on cardstock. Imagine a bouncy, glossy orb the size of a planet, lit from inside, drifting in front of an aurora. That orb is the protagonist of every screen. The aesthetic seed is **inflated-3d** — pillowy, over-rounded forms with thick soft shadows, puffed-up buttons, and surfaces that look pressurized rather than drawn. Nothing here is flat or thin. Borders are absent; edges are rounded into near-circles; every element looks like it would squish if you poked it. This puffy, generous physicality is paired with a **jewel-tones palette** — deep amethyst, garnet, emerald, sapphire — so the orbs read as precious stones suspended in a velvet dark, not as plastic toys. The combination is the whole point: the warmth and goofiness of an inflatable, dressed in the colors of treasure. The tone of voice is **conversational** — second-person, plainspoken, a little wry. Headlines read like a friend talking you down or talking you into it: *"Okay. Let's say you win."* / *"Forty-five million people drew breath at 8:01pm. Here's what happened next."* The copy never lectures and never hard-sells. It wonders out loud. Behind everything, **aurora-lights** ripple slowly across the dark — vast, soft curtains of teal and violet that make the page feel like a night sky you are lying under, idly doing the math. ## Layout Motifs and Structure **Primary layout: split-screen** — the viewport is divided into two persistent halves for most of the journey, and the *relationship* between the halves carries the narrative. - **Left half — "the world":** populous, plural, in motion. This side holds counters, swarms of tiny orbs, crowds rendered as dot-fields, the statistical reality. It is where the millions live. - **Right half — "you":** singular, still, intimate. This side holds one large orb, one short paragraph, one question. It is the held breath. The divider between halves is never a straight line — it is a **soft vertical seam that bulges and breathes**, as if the two panels were pressed against each other like two balloons. On scroll, the ratio shifts: in the opening section the split is 50/50; by the climax ("the draw"), the right "you" panel has swollen to fill nearly the whole screen and the "world" has been squeezed to a sliver — the moment of being singled out. After the draw, the panels rebalance. Vertical structure is **five acts, each one viewport tall, scroll-snapped** (`scroll-snap-type: y proximity`): 1. **The Ritual** — buying in. One orb forming in the right panel; on the left, the queue of everyone else forming theirs. 2. **The Wait** — the days between. A slow drift section; orbs orbit lazily; copy about the specific texture of anticipation. 3. **The Draw** — the climax. Split ratio dramatically shifts; orbs cascade and one is selected with a magnetic snap. 4. **The Aftermath** — split-screen forks into "you won" / "you didn't," shown as two stacked half-height bands you can hover between. 5. **The Return** — the seam relaxes; a quiet closing line; a single small orb settles at rest. There is **no top navigation bar**. Progress is shown only by a column of five small puffy orbs pinned to the right edge — the current act's orb is inflated and lit; the others are deflated and dim. No hero CTA blocks, no pricing tiers, no stat-grids. Numbers, when they appear, are spoken inside sentences, not stacked in cards. ## Typography and Palette **Typography** — a **humanist** pairing, warm and talky to match the conversational voice: - **Display / Act Titles / The Domain Name:** "Fraunces" (Google Fonts) — a soft, slightly wobbly "old style" serif with optical-size flair and a gentle wonkiness that reads as friendly, not formal. Used at `clamp(2.4rem, 6vw, 5rem)`, weight 600, with the "SOFT" and "WONK" axes pushed toward their playful extremes where supported. Tracking slightly tight. Often set in sentence case ending in a period, like dialogue. - **Body / Prose:** "Newsreader" (Google Fonts), weight 400, occasionally 400 italic for asides — a humanist text serif designed for screen reading, with an open, conversational rhythm. Set at `clamp(1.05rem, 1.3vw, 1.35rem)`, line-height 1.65, measure capped at ~58ch. - **Numerals / Counters / Captions:** "Atkinson Hyperlegible" (Google Fonts), weight 700 — used only for the big animated numbers and tiny labels; its disambiguated, sturdy glyphs make the odds feel matter-of-fact and trustworthy amid all the dreaminess. **Palette** — jewel-tones suspended in a near-black velvet, lit by aurora: - `#0c0a14` — **Velvet Void** — the base background, an almost-black violet. Everything floats on this. - `#1a1330` — **Deep Plum** — secondary panel fill / the "world" half's base tint. - `#7b2d6b` — **Amethyst** — primary jewel accent; the headline orb's core. - `#9b1c3d` — **Garnet** — the "you won" band; warmest highlight. - `#0f6b5c` — **Emerald** — the "you didn't" band; cooler, calmer counterweight. - `#2b4cc7` — **Sapphire** — secondary orb tint and link color. - `#3fd9c0` → `#8a6cff` — **Aurora Teal → Aurora Violet** — the gradient used only for the rippling aurora-light curtains and for the magnetic selection glow. - `#f4ecdd` — **Warm Bone** — primary text on dark; never pure white. - `#c9a84c` — **Old Gold** — used sparingly: the rim-light on the winning orb, the period at the end of the title. Contrast is high (bone on velvet void), but the dark is warm and the lights are soft — gloom that feels like a planetarium, not a basement. ## Imagery and Motifs 1. **The Gel Orb (signature object):** A single CSS/SVG-rendered sphere built from layered radial gradients — a bright off-center specular highlight at upper-left, a deep saturated jewel core, a soft "subsurface" glow leaking around the edges, and a fat blurred drop-shadow far below. It must look *inflatable*: slightly squashed at rest, wobbling on hover. This orb is the favicon, the bullet point, the loader, the cursor companion, the protagonist. Different acts tint it differently (amethyst → sapphire → garnet/emerald). 2. **Aurora Curtains:** Full-width, low-opacity bands of the teal→violet gradient with heavy blur, drifting horizontally at different speeds behind everything. Implemented as 3–4 overlapping `radial-gradient`/`conic-gradient` layers animated via slow `transform` and `filter: hue-rotate` cycles (40–80s loops). They are the "sky" of the whole site. 3. **Noise Texture (imagery seed):** A fine film grain overlaid on the entire page at ~6–9% opacity via a tiling SVG `feTurbulence` PNG or a CSS pseudo-element — and, crucially, a *grainier* noise applied just inside the orbs' subsurface glow, so the gel looks like it has tiny suspended particles. The grain keeps the deep jewel gradients from banding and gives the velvet dark a tactile, dust-in-a-spotlight quality. 4. **The Dot-Crowd:** On the "world" half, populations are drawn as fields of hundreds of tiny 2–4px orbs (just dots with a single highlight pixel) — they drift, cluster, and during "the draw" all but one fade, the survivor inflating into a full gel orb. No literal people, no photography. 5. **The Squish:** A reusable interaction language — anything pressable or hoverable briefly compresses on the y-axis and rebounds (`scaleY(0.92)` → overshoot `scaleY(1.04)` → settle), like pressing a stress ball. Cards, the progress orbs, the answer bands all do this. 6. **The Seam:** The breathing vertical divider — an SVG path whose control points animate with a slow sine wave, with a faint aurora-tinted glow along its length. It is the only "line" in the design, and even it is soft and curved. ## Prompts for Implementation **Build it as a five-act scroll-narrative, not a marketing page.** Each `
` is `min-height: 100vh`, `display: grid; grid-template-columns: var(--split-left) var(--split-right)` where the two custom properties are driven by scroll position via a small IntersectionObserver + `requestAnimationFrame` loop. The opening section is `1fr 1fr`; "The Draw" pushes toward `0.12fr 1fr`; "The Return" eases back to `1fr 1fr`. Animate the change with a spring-ish easing, never a linear tween. **The orb is a component, render it well.** Make one `.orb` element whose appearance is entirely CSS: nested `radial-gradient` backgrounds for core + highlight + subsurface glow, a `box-shadow` for the floor shadow, `filter: blur()` on a `::after` for atmospheric bloom, and a subtle perpetual idle animation (`transform: translateY` bob + `scaleX`/`scaleY` jelly wobble, ~3s ease-in-out infinite). On hover/focus apply "the squish." Scale this component up to "planet" size for hero moments and down to "bullet" size in prose. **Aurora layer first, content above.** A fixed full-viewport `.aurora` div sits at `z-index: 0` with 3–4 absolutely-positioned gradient blobs, each on its own slow keyframe animation drifting + rotating + hue-shifting. Above it, a fixed `.grain` pseudo-element at `z-index: 1` with `mix-blend-mode: overlay` or `soft-light` and `pointer-events: none`. All content sits at `z-index: 2+`. **Magnetic interactions (the chosen pattern seed):** The "Begin" affordance in Act 1 and the "Reveal" affordance in Act 4 are *magnetic* — track the pointer within ~120px and ease the puffy button toward the cursor with a damped follow, snapping back with overshoot when the pointer leaves. In "The Draw," the selection itself is magnetic: as the camera/scroll reaches the climax, one orb in the dot-crowd is visibly *pulled* across the screen toward the "you" panel and locks in with a brief gold rim-flash and a soft particle puff (CSS, not a library). **Typography as dialogue.** Set act titles in Fraunces, sentence case, ending in a period, animated in with a gentle blurred-bone fade + slight upward drift + tiny scale settle (no typewriter, no character-stagger gimmicks). Body prose in Newsreader fades up paragraph-by-paragraph on scroll. Big numerals in Atkinson Hyperlegible count up once on entry then stop — calm, not frantic. **The fork in Act 4:** Two stacked half-height bands, "You won." (garnet) and "You didn't." (emerald). Hovering one inflates it to ~70% height and deflates the other; the un-hovered one stays legible and dignified — no winners-and-losers melodrama, just two honest outcomes breathing against each other. Each band holds one short conversational paragraph, not a stat block. **AVOID:** hero CTA stacks, pricing/tier blocks, three-up stat grids, testimonial carousels, feature-icon rows, any flat thin-stroke iconography, pure-white text, hard rectangular edges, real photography, jackpot-amount fireworks. If a number matters, say it in a sentence. **Closing:** Act 5 — the seam relaxes to straight-ish and dim, the aurora slows, one small amethyst orb drifts down and settles at rest, and a single Fraunces line sits beneath it: something quiet and conversational like *"See you tomorrow."* The page should end on stillness, not a sign-up form. ## Uniqueness Notes **Differentiators from other designs in this portfolio:** 1. **A single inflatable hero-object carries the entire site.** Where most designs in the portfolio lean on photography (65%) or generic minimal imagery (69%), lottery.day has zero photos and zero conventional illustration — instead it commits, totally, to one recurring puffy gel orb rendered purely in CSS/SVG, used at every scale from favicon to planet. The `inflated-3d` aesthetic registers at literally **0%** across 251 designs; this is the first. 2. **Split-screen used as narrative argument, not just layout.** The 50/50 split isn't decoration — the *ratio between the halves animates* to dramatize "the many vs. the one," collapsing toward the "you" panel at the climax and rebalancing after. The breathing, bulging seam (the design's only "line") makes the two panels feel physically pressed together. 3. **Jewel-tones + aurora-lights + heavy grain, a near-empty combination.** `jewel-tones` palette is at 3%, `aurora-lights` motif at 1%, `noise-texture` imagery at 7% — and almost nothing uses all three together. The result is a warm planetarium-dark very unlike the cool dark-neon or sepia-nostalgic looks common in the portfolio. 4. **Conversational, second-person voice instead of authoritative copy.** `conversational` tone sits at 2% against a portfolio that is 94% "mysterious-moody" and 23% "authoritative." This site talks *to* you like a friend doing the math beside you — headlines end in periods and read like dialogue, never like product copy. 5. **Magnetic interaction as the core mechanic, deliberately picked from the underused column.** `magnetic` patterns are at 9%; here magnetism isn't a hover gimmick on a button — it's the literal mechanism of "the draw," visibly pulling one orb out of a crowd of hundreds and snapping it to "you." **Chosen seed/style:** aesthetic: inflated-3d, layout: split-screen, typography: humanist, palette: jewel-tones, patterns: magnetic, imagery: noise-texture, motifs: aurora-lights, tone: conversational **Avoided per frequency analysis:** corporate aesthetic (92%), centered layout (92%), gradient/warm palettes as the default move (96%/91%), mono typography (94%), counter-animate as the only trick (92%), parallax-as-crutch (70%), mysterious-moody tone (94%), photography (65%) and generic "minimal" imagery (69%). No CTA-heavy hero, no pricing blocks, no stat-grids.