# Design Language for lupin.day ## Aesthetics and Tone `lupin.day` is a **graffiti-writer's aurora dashboard** — imagine a midnight rooftop in a northern city where someone has just finished a throw-up in chrome and ice-blue, and now they're standing back watching the lights dance overhead. The wall still smells of fresh paint. The sky is doing something impossible. The site lives exactly in that moment: raw, physical mark-making coexisting with atmospheric light that has no fixed form. The aesthetic is **urban-celestial graffiti** — not decorative street-art-as-branding, but actual graffiti sensibility: drips, weight-shifts in letterforms, the pressure of a spray can at different distances. Every heading carries the fingerprint of gesture. But the gesture is cool, not hot. The palette is entirely cool-grays — #1c1c24 (near-black with a violet undertone), #2e2e3a (deep slate), #3f3f52 (mid-gray with blue-violet cast), #5c5c78 (atmospheric mid-tone), #8a8aa8 (cool lilac-gray), #b8b8d0 (near-silver), #dcdce8 (ice-white), #f0f0f6 (off-white) — and then three aurora accent shots that exist only as light, not as fills: #4fc3e8 (arctic cyan), #7b5ea7 (deep aurora purple), #a8e6cf (phosphor green). These accents appear only in glow effects, SVG filter halos, and kinetic letter trails — never as solid blocks of color. The tone is **bold-confident** in the way that a writer who has spent years refining their tag is bold-confident: no apology, no explanation, maximum presence in minimum gesture. The site does not pitch, does not enumerate features, does not have a pricing section. It is a declaration. ## Layout Motifs and Structure The layout is **centered with gravitational pull** — a single spine running down the vertical center of the viewport, but unlike the registry's dominant 87% centered usage, this is **centered-as-graffiti-wall**, not centered-as-blog-column. The spine is 680px wide at desktop. On either side of it, the background field stretches to full viewport width and is alive: slowly shifting aurora-lights rendered as WebGL or CSS canvas aurora, always in motion, always at low opacity (12–18% max) so it reads as atmosphere, not content. The page is divided into three major compositional zones: 1. **The Tag Zone** — top 100vh: the wordmark `lupin.day` rendered as a kinetic graffiti letterform. No navigation. No subheading. Just the tag and the aurora. 2. **The Piece Zone** — the main content area: each section of content is treated like a wall panel in a production piece. Panels are separated by 120px vertical breathing space and a single hairline rule (0.5px, #3f3f52). Content within panels is left-aligned against the center spine, creating a controlled asymmetry. 3. **The Cap Zone** — the footer: a spray-cap footer that renders the domain again at small scale, with a single horizontal aurora-glow line above it. No sidebar. No cards. No feature grids. The page is a single long vertical scroll through three zones. ## Typography and Palette **Type system (Google Fonts only):** - **Display wordmark — `Boogaloo`** at `clamp(96px, 16vw, 180px)`. This is the tag. It has a loose, hand-lettered weight that reads as graffiti-adjacent without being a costume. Set in #dcdce8 (ice-white) with a CSS `text-shadow` stack: `0 0 40px rgba(79, 195, 232, 0.6), 0 0 80px rgba(79, 195, 232, 0.2)` — the glow of a chrome throw-up under aurora light. On page load, each letter of `lupin.day` animates in using a kinetic-animated technique: each letter starts at `opacity: 0`, `translateY: 20px`, `scale: 1.4`, `filter: blur(8px)` and transitions to final state with a 60ms stagger per character. The final resting state has a subtle continuous breathing animation: `scale` oscillates between 1.0 and 1.004 on a 6-second ease-in-out loop. - **Section headings — `Bebas Neue`** at `48px`, tracking `0.04em`, in #b8b8d0 (cool silver). Headings use a kinetic entrance: they slide in from `translateX(-32px)` to `translateX(0)` over 400ms when they enter the viewport, with a brief `skewX(-2deg)` that settles to `skewX(0)` as if the spray can made a slight angle correction. No bold, no italic — Bebas Neue has one voice and it is used at full strength. - **Body text — `Space Grotesk`** at `17px`, line-height `1.72`, in #8a8aa8 (atmospheric mid-tone). Body text is purposefully quiet — the graffiti elements carry the visual weight. Paragraphs are 52ch max-width within the centered spine. - **Accent labels and captions — `JetBrains Mono`** at `12px`, tracking `0.12em`, all-caps, in #5c5c78 with an aurora hover-glow: on hover, color transitions to #4fc3e8 over 200ms and a `text-shadow: 0 0 12px rgba(79, 195, 232, 0.5)` blooms. **Palette summary:** - Background field: `#1c1c24` - Deep panel: `#2e2e3a` - Mid-gray: `#3f3f52` - Atmospheric: `#5c5c78` - Cool silver: `#8a8aa8` / `#b8b8d0` - Ice-white: `#dcdce8` / `#f0f0f6` - Aurora cyan: `#4fc3e8` (light only) - Aurora purple: `#7b5ea7` (light only) - Aurora green: `#a8e6cf` (light only) ## Imagery and Motifs **No photography. No stock imagery. No UI screenshots.** All visual elements are drawn from two families: **kinetic graffiti letterforms** and **aurora-lights SVG/canvas rendering**. **Aurora field (background layer):** A full-viewport `position: fixed` SVG with four large radial gradient blobs animated by CSS `@keyframes`. Each blob is an ellipse (`rx: 40vw`, `ry: 20vh`) filled with a radial gradient from one aurora color at 15% opacity to transparent. The four blobs drift independently on 18s, 24s, 31s, and 14s loops with `transform: translateX() translateY()` sinusoidal motion. Their composite creates an aurora that shifts without being garish. The SVG sits at `z-index: 0`, `opacity: 0.14`, behind all content. **Graffiti stroke decoration:** Three decorative SVG elements placed at fixed positions in the layout: 1. A **drip path** at the top-right of the Tag Zone: a bezier curve with variable stroke-width (8px at top, tapering to 1.5px) in #4fc3e8 at 35% opacity, simulating a spray-can drip frozen mid-run. On scroll, it grows via `stroke-dashoffset` from its tip downward, revealing 200px over the first 20% of page scroll. 2. A **wide throw-up outline** behind the Section 1 heading: a single SVG path tracing large bubble-letter shapes at `stroke: #3f3f52`, `stroke-width: 1px`, `fill: none`, 25% opacity. It is the ghost of an older piece on the wall. 3. A **cap-press scatter** in the Cap Zone: 12 tiny SVG circles (3–7px radius), randomly placed within a 200px band, each filled with one of the three aurora accents at 40–70% opacity, representing spray-cap mist. **Data-visualization element:** In the Piece Zone, one section contains an inline SVG **aurora frequency chart** — a 640×200px visualization showing a simulated spectral analysis of aurora light emission, styled as a bar chart with bars of varying heights (drawn as thin rectangles, 4px wide, 2px gap) colored across a gradient from #7b5ea7 through #4fc3e8 to #a8e6cf. The bars have a continuous animation: each bar's height oscillates on a unique random period (2.4s–6.1s) giving the chart a living, breathing quality. Axis labels are in JetBrains Mono at 10px, in #5c5c78. This is not a chart of real data — it is a data-viz motif that gives the graffiti world a second visual language. ## Prompts for Implementation Build `lupin.day` as a **single vertical scroll through three cinematic zones** — Tag, Piece, Cap — with no navigation chrome, no sticky header, and no sidebar. The user descends through the wall. **Zone 1 — The Tag (100vh):** On load, the aurora field fades in over 1.8s. Then each letter of `lupin.day` animates into position with 60ms stagger, blur-to-sharp, scale-down, translate-up sequence. No other content loads in Zone 1. The tag is the entire message of Zone 1. A single thin horizontal hairline (#3f3f52, 0.5px) at the base of Zone 1 separates it from Zone 2 — the line draws itself left-to-right over 600ms when the tag animation completes. **Zone 2 — The Piece (main content):** Each content section is a panel separated by 120px vertical space. The hover-lift pattern is applied to every panel: `transform: translateY(0)` at rest, `transform: translateY(-6px)` on hover, with `transition: transform 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94)` — a clean, weightless hover-lift that reads like the panel is responding to attention. No box-shadow changes. No border changes. Only the lift. The aurora frequency data-viz SVG lives in the second panel. It is introduced by a Bebas Neue heading that slides in at viewport entry. The chart bars begin their oscillation only after the panel has been in view for 800ms, giving a sense that the visualization "activates" when observed. Bebas Neue headings use IntersectionObserver: when entering viewport, add class `.visible` which triggers `translateX(-32px → 0) + skewX(-2deg → 0)` over 400ms. Body text in Space Grotesk is set in paragraphs of no more than 4 sentences. Paragraphs are separated by 2em. There is one `
` between major sections — styled as a hairline in #3f3f52. **Zone 3 — The Cap:** A 200px footer containing: the domain `lupin.day` in Boogaloo at 24px, #5c5c78; the cap-press scatter SVG; a single aurora-glow line (CSS `box-shadow: 0 -1px 0 rgba(79, 195, 232, 0.3), 0 -1px 20px rgba(79, 195, 232, 0.08)`) above the footer. No links. No copyright. No social icons. **Hover-lift implementation note:** Apply hover-lift to the aurora frequency chart container as well — the entire chart lifts by 6px on hover, and the bar oscillation speeds up by 1.3× (achieved by animating `animation-duration` to a shorter value via CSS custom properties). **AVOID:** CTA buttons, pricing tables, feature grids, testimonial carousels, hamburger menus, sticky navbars, toast notifications, cookie banners, progress bars. ## Uniqueness Notes **Chosen seed:** aesthetic: graffiti, layout: centered, typography: kinetic-animated, palette: cool-grays, patterns: hover-lift, imagery: data-viz, motifs: aurora-lights, tone: bold-confident. **Differentiators from the 251-design registry corpus:** 1. **Graffiti-aurora synthesis is new.** Street-style aesthetic sits at 2% in the registry and no design combines it with aurora-lights motifs (3%) and cool-grays palette (1%). The corpus has cyberpunk dark-mode, it has neubrutalism, it has generative art — but none treats graffiti as a craft tradition (variable stroke weight, controlled drips, bubble-letter ghosts) layered over atmospheric northern-lights phenomena. `lupin.day` is the only site on the wall where the paint and the sky are in conversation. 2. **Kinetic-animated typography at 2% is deeply underused.** The dominant typography modes are mono (82%) and humanist (35%). kinetic-animated at 2% is nearly absent. The letter-by-letter blur-to-sharp entrance of the Boogaloo wordmark is not a scroll-triggered stagger (which is at 55%) — it is a load-triggered character-level animation that treats the wordmark as a sequence of physical marks arriving one at a time, each carrying its own momentum. The Bebas Neue heading skew-correction on viewport entry is a second, different kinetic mode in the same page. 3. **The aurora field as fixed atmospheric layer, not hero image.** The registry has 79% parallax and 10% layered-depth, but the aurora approach here is distinct: `position: fixed`, extremely low opacity (14%), four independently-animated radial blobs with different periods. It is not a hero background or a scroll effect — it is the ambient light condition of the whole site, always present and always shifting. Looking at any section of the page, the aurora is behind it, changing. 4. **Data-viz as decorative motif, not as statistics.** The aurora frequency chart is not a "stats block" (which the registry over-uses). It is a visualization that has no claim to convey real numbers — it exists because oscillating spectral bars are beautiful and because they extend the graffiti-writer's interest in mark-making into the domain of data form. The hover-lift acceleration of the bar animation (1.3× speed on hover) makes it interactive without being a product demo. 5. **Cool-grays palette at 1% is the rarest color family in the corpus.** The registry loves warm-vintage, warm-earthy, neon-high-contrast, and dark-mode-blue. An entirely cool-gray palette — no warm browns, no neon green-yellows, no warm blacks — with aurora light applied only as additive glow (never as fill color) is a genuinely uncommon visual territory. The slight violet undertone in the near-blacks (#1c1c24) and near-whites (#f0f0f6) keeps the palette from reading as sterile corporate gray.