# Design Language for lunchbox.dev ## Aesthetics and Tone lunchbox.dev is a **pressurized dopamine chamber** — a digital artifact that feels like it was vacuum-sealed inside a novelty lunchbox from an alternate 1998 where the internet smelled like synthetic grape and the UI had the density of a stress ball. The aesthetic is **inflated-3d neoplastic rebellion**: every interactive element appears to be made of thick, slightly-too-firm silicone rubber — surfaces bulge with internal pressure, catching light the way a rubber duck catches bathroom light. Nothing is flat. Nothing is calm. The tone is deliberately **edgy-rebellious** — this is not a portfolio coded by someone seeking approval. It is a provocation. The lunchbox metaphor is weaponized: the page *contains* things, the way a kid's lunchbox contains curios, contraband, and the particular smell of a Tuesday afternoon. Visitors don't scroll — they *rummage*. Content surfaces as if packed carelessly with intent. Mood references: inflatable furniture at a rave, neon acrylic keycaps, that feeling of pressing a button that has too much travel and too satisfying a click, a highlighter left uncapped that bleeds through the page below. Color and light behavior is the primary differentiator: objects have **specular highlights baked into their geometry**, not added as CSS box-shadows. The inflated-3d quality comes from precise radial gradient construction — each element reads as a self-lit, pressurized bubble. ## Layout Motifs and Structure The layout is a **single-column vertical rummage** — one unbroken axis, but structured as a series of **pressure zones**: distinct viewport-height sections where gravity feels different. Not parallax (overused at 79%). Not stagger (overused at 56%). Something rawer: each zone loads with a **pop** — an instantaneous inflate-from-flat animation that treats the section as a freshly-pressurized bubble arriving in the viewport. **The Pressure Zone System:** - Zones are 100svh or 75svh — never arbitrary pixel heights - Each zone has a defined "atmosphere": one dominant neon color that radiates from a central particle attractor - Zones are separated by **thin membrane seams** — a 2px neon-lit horizontal divider that shimmers with a traveling glow - Content within zones floats on **inflated card substrates**: rounded rectangles with 32–64px border-radius, glossy top surfaces, and a soft matte underside implied by a subtle gradient **Column discipline:** - Single content column: max-width 640px, centered - Column is NOT a container — it is a tube. Content enters from the top of each zone and exits through the bottom - No card grids, no stat blocks, no bento layouts - Occasional **breakout elements**: single words or numbers that inflate past the column edges at 140vw scale, text rendered as a pressurized 3d inflatable letterform **Navigation:** - No conventional navbar - A single **lunchbox lid** fixed element at the top: a pill-shaped, inflated toggle (48px tall, 180px wide) that acts as both home identity and menu trigger - On click, the lid "opens" — a satisfying squish animation reveals a small floating menu of 4–5 items that drifts in like items falling out of an upended lunchbox ## Typography and Palette **Typography — humanist, all from Google Fonts:** The type system pairs physical-world warmth with digital immediacy — humanist letterforms that look like they were drawn by someone who genuinely enjoys drawing letters, not optimized by committee. - **Display / Headlines:** [`Nunito`](https://fonts.google.com/specimen/Nunito) — weight 900 (Black), used for all hero text, section titles, and inflatable breakout words. The soft rounded terminals of Nunito reinforce the inflated-3d vocabulary; letters feel like they have internal air pressure. Size range: 72px–200px - **Body / Running text:** [`Nunito Sans`](https://fonts.google.com/specimen/Nunito+Sans) — weight 400 for body, weight 700 for emphasis. Maintains the rounded humanist quality at reading sizes without Nunito's display-weight heaviness. Size: 16–18px, line-height 1.7 - **Accent / Labels / UI micro-text:** [`DM Mono`](https://fonts.google.com/specimen/DM+Mono) — weight 400, used exclusively for code-adjacent labels, coordinates, particle counters, and the lunchbox lid identity mark. A humanized monospace that doesn't read as developer-technical but as deliberately chosen **Palette — dopamine-neon:** All colors operate as self-luminous — they are light sources, not surface colors. Dark void background lets every color read as pure emission. - **Void Black** `#0A0A0F` — background of the universe; not pure black, has a micro-blue undertone that makes neon colors vibrate against it - **Grape Press** `#C84BFF` — primary accent, inflated element surfaces, particle emitter glow - **Toxic Citrus** `#C8FF00` — secondary accent, hover states, micro-interaction feedback, the "wrong" color that makes everything feel more right - **Aqua Shock** `#00FFD4` — tertiary accent, membrane seam glows, water-bubble particle coloration - **Flame Burst** `#FF4D00` — danger/emphasis accent, used for breakout text and destructive interaction hints - **Bubble White** `#F0F0FF` — text on dark; not pure white, has a blue-cool cast that makes it feel like something inside the void is being illuminated **Gradient logic:** - Inflated surface gradient (applied to every 3d card element): `radial-gradient(ellipse at 30% 25%, #FFFFFF44, transparent 50%)` — specular highlight, baked in - Zone atmosphere gradients: `radial-gradient(ellipse at 50% 40%, 33, #0A0A0F 65%)` — each zone has its own dominant color pooling at center ## Imagery and Motifs **Primary imagery system: water-bubbles as particle field** The entire page exists inside a slow particle ecology. Bubbles — rendered as SVG `` elements with `stroke: `, `fill: transparent`, `stroke-opacity: 0.4` — drift upward through every zone. They are not decoration; they are the atmosphere. Each bubble has: - Diameter: 4px–120px (random, weighted toward small) - Rise velocity: 0.2–2px per frame (slow drift, not animation-frenzy) - A single specular highlight dot (``) offset at 30% upper-left, `fill: white`, `opacity: 0.8` - On hover proximity (within 40px of cursor): bubble gently distorts toward cursor using CSS `perspective` and `translateZ`, as if attracted **Particle effects system: attractor field** Each pressure zone hosts a **central particle attractor**: an invisible point that pulls bubble particles toward it on scroll-entry, then releases them as the user lingers. The attractor pulses — the particle field contracts and expands on a 3.2s cycle using `scale` transforms on individual bubble positions. This is implemented in vanilla JS with `requestAnimationFrame`, no libraries. Maximum 60 particles per zone, managed in a typed Float32Array for position/velocity. **Inflated 3D element construction:** All interactive cards, buttons, and UI elements are inflated using this CSS pattern: - `border-radius: 32px–64px` - `background: linear-gradient(145deg, 0%, 40%, 100%)` - `box-shadow: inset 0 2px 8px rgba(255,255,255,0.35), 0 8px 32px ` - On press: `transform: scale(0.96) translateY(2px)` + box-shadow compresses — simulates physical depression **The lunchbox motif:** The page identity is a minimalist lunchbox icon: a rounded rectangle (the box) with a slightly smaller rounded rectangle (the lid) in `Bubble White` stroke only, 2px. This mark appears in the navigation lid, as a favicon, and as a watermark at 4% opacity tiled in the void-black background — so subtle it only reads under close inspection, but once seen, gives the background a packed texture. **Section motifs:** - Zone 1 (Hero): Grape Press atmosphere, giant inflated `lunchbox.dev` wordmark in Nunito 900 at 180px, letter-spacing -0.02em, letters rendered as inflated 3d SVG text with extruded depth via multiple `text-shadow` layers stepping in 1px increments - Zone 2 (Content/Feature): Toxic Citrus atmosphere, single-column body content, breakout Nunito numbers at 200px running behind the column - Zone 3 (Work/Items): Aqua Shock atmosphere, items presented as inflated cards that stack vertically with 40px gap, each card pops in with the inflate-from-flat animation - Zone 4 (Contact/Foot): Flame Burst atmosphere, single centered contact form built from inflated input fields, the submit button is the most satisfying pressable element on the page ## Prompts for Implementation Build lunchbox.dev as a **single pressurized tube of content** — one column, one scroll axis, four atmospheric zones. No routing. No React. Pure HTML, CSS custom properties, and vanilla JS. The page should feel like it loads in a single pressurized burst: everything arrives at once, then the bubble particles begin their slow drift. **Technical implementation priorities:** 1. **Bubble particle system (canvas-free).** Implement 200 SVG bubble elements total, distributed across zones using `data-zone` attributes. Each bubble is an absolutely-positioned `` inside its zone's `` overlay (100% width/height, `pointer-events: none`, `position: absolute`, `inset: 0`). JS manages position via CSS custom properties: `style.setProperty('--x', x + 'px')` and `style.setProperty('--y', y + 'px')`. Update loop runs at 60fps with `requestAnimationFrame`. Bubbles that drift above zone top wrap to zone bottom. 2. **Inflate-from-flat animation.** Each zone section gets `data-inflate` attribute. An `IntersectionObserver` at 20% threshold triggers the inflate: `animation: inflate 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards`. The `inflate` keyframe goes from `transform: scale(0.92) translateY(16px); opacity: 0` to `transform: scale(1) translateY(0); opacity: 1`. The spring overshoot (1.56 in cubic-bezier) gives the pressurized pop. 3. **Inflated 3D cards.** Every card-type element uses a CSS class `.inflated` with the radial highlight gradient and inset shadow. The `.inflated:active` state uses `transition: transform 80ms, box-shadow 80ms` for the physical press feel. Cards never use `border: 1px solid` — shape is defined entirely by shadows and gradient. 4. **Zone atmosphere.** Each `.zone` element has a CSS custom property `--zone-color`. The `background` of the zone is `radial-gradient(ellipse 60% 50% at 50% 40%, color-mix(in srgb, var(--zone-color) 15%, transparent), #0A0A0F 70%)`. This creates the pooled light effect without heavy blur layers. 5. **Micro-interactions inventory:** - Hover on inflated cards: `transform: translateY(-4px) scale(1.02)` + `box-shadow` expands — card floats up - Hover proximity on bubbles: nearest 5 bubbles to cursor drift toward cursor position at 8% of distance per frame - Lunchbox lid toggle: `clip-path` wipe reveals menu items from top-to-bottom over 200ms, items stagger at 40ms intervals - Input focus: border-color transitions to `--zone-color` with a `0 0 0 3px color-mix(in srgb, var(--zone-color) 30%, transparent)` glow ring - Link hover: underline draws from left via `background-size` animation on `linear-gradient`, in `Toxic Citrus` 6. **Typography — inflated wordmark.** The hero wordmark `lunchbox.dev` in Nunito 900 uses layered `text-shadow` to simulate 3D extrusion: ```css text-shadow: 1px 1px 0 #8B2FBB, 2px 2px 0 #7A28A8, 3px 3px 0 #6A2296, 4px 4px 0 #5A1C83, 5px 5px 0 #4A1671, 6px 6px 20px rgba(200, 75, 255, 0.6); ``` The final shadow is a bloom glow, not a hard step. 7. **Membrane seams.** Between zones: a `
` that is `height: 2px`, `background: linear-gradient(90deg, transparent, var(--zone-color), transparent)`, with a `::after` pseudo-element that runs a traveling glow: a 20% wide bright spot that moves from left to right on a 2.4s linear loop using `background-position` animation. 8. **Avoid:** stat grids, pricing tables, testimonial carousels, hero CTAs with large buttons, any section titled "Features" or "How it works", photography, icon-font usage (use inline SVG only), any animation that loops faster than 1.5s (except micro-interactions), CSS `overflow: hidden` on the `` (kills scroll). **Narrative sequence (top to bottom):** 1. Void arrives. Particles begin. The lunchbox lid fades in at top. 2. Hero zone inflates: the wordmark pops in with the inflate keyframe. Under it, a single line of Nunito Sans 400 in Bubble White — one sentence, no headline hierarchy game. 3. Scroll triggers zone transition: membrane seam shimmers, Toxic Citrus atmosphere bleeds in. Content appears in inflated card stack — each card 80ms after the previous. 4. Third zone: Aqua Shock. Work/items. Each item is a card with an inflated thumbnail area (SVG placeholder with the lunchbox watermark), title in Nunito 700, and a short descriptor in DM Mono. 5. Final zone: Flame Burst. Contact. The form is the only interactive density on the page — everything else is viewing, here the user acts. The submit button is the most inflated element on the page: 80px tall, 100% column width, Nunito 900 label. ## Uniqueness Notes 1. **Inflated-3D aesthetic at 0% prevalence in corpus.** No prior design uses the inflated-silicone-rubber surface language. The corpus relies heavily on flat gradients, glassmorphism (translucent-frost), and neomorphism — inflated-3D is a physically distinct aesthetic where objects appear to have internal pressure rather than material depth. The specular highlight is baked via radial gradient, not applied as a universal box-shadow. 2. **Water-bubble particle system as atmosphere, not decoration.** Particle effects appear at 2% in the corpus — and where they appear, they are typically star-fields or abstract dot grids (sci-fi-hud motif). lunchbox.dev's bubbles are upward-drifting, zone-colored, SVG-native (not canvas), with proximity-attraction micro-interaction that makes the atmosphere responsive to human presence. The bubble is also thematically tied to the lunchbox/food metaphor. 3. **Dopamine-neon palette against void-black with self-luminous color logic.** Palette frequency: warm (90%), gradient (78%) dominate the corpus. lunchbox.dev inverts: no warm tones, no decorative gradients. Every color is a light source. The four zone-specific neons (Grape Press, Toxic Citrus, Aqua Shock, Flame Burst) read as distinct atmospheric weather systems rather than brand colors — they define zones, not elements. 4. **Edgy-rebellious tone expressed through physical metaphor, not visual aggression.** Edgy-rebellious at 3% in corpus — and where it appears, it likely uses aggressive typography or grunge textures. lunchbox.dev's rebellion is structural: the lunchbox is the last object you'd build a serious dev tool site around; the inflate-pop physics make every interaction feel slightly wrong in a right way; the Flame Burst contact zone is the angriest color, reserved for the most intimate human action (reaching out). Tone is embedded in metaphor, not decoration. 5. **Single-column layout used as a literal tube, not a reading column.** Single-column at 20% in corpus — but conventionally used as a centered reading layout. lunchbox.dev treats the column as a pressurized tube: content enters zones through the column, zone atmosphere leaks past the column edges, breakout elements burst through at 140vw. The column constrains without confining. 6. **Chosen seed:** `aesthetic: inflated-3d, layout: single-column, typography: humanist, palette: dopamine-neon, patterns: micro-interactions, imagery: water-bubbles, motifs: particle-effects, tone: edgy-rebellious` 7. **Avoided patterns from frequency analysis:** warm palette (90% — avoided entirely), centered layout (88% — uses single-column tube instead), parallax (79% — avoided, uses inflate-pop instead), stagger (56% — avoided, uses zone-based inflate sequence), mono typography (82% — humanist Nunito system instead), vintage motifs (43% — avoided, uses food/pressure motifs), gradient palette (78% — avoided, uses self-luminous colors against void).