# Design Language for rollup.quest ## Aesthetics and Tone rollup.quest is a **submerged arcade cabinet lost in a coral reef** — a seapunk time-capsule where the ocean floor has swallowed the infrastructure of a mid-2000s internet culture and let sea anemones colonize the circuit boards. The dominant feeling is **nostalgic-retro with salt water in its lungs**: the visual language draws from the seapunk aesthetic's core DNA — aquamarine gradients, barnacle-textured surfaces, faded iridescence — but renders it through the lens of someone who actually lived on the early web and is now looking back at it through 10 meters of warm brine. The tone is wistful but not melancholic. There is a quality of **amber light filtered through seawater** — things are slightly blurred at the edges, colors bleed into each other like wet ink, and the overall mood is of stumbling across something beautiful that was never meant to be found. rollup.quest is the homepage you'd find if you followed a hyperlink from 2006 into the ocean. Inspirations: Tumblr seapunk circa 2011–2014, Frutiger Aero UI elements (glossy, organic, alive), early web geocities layouts repurposed as reef habitat, the color of bioluminescent plankton at 2 AM. Anti-inspirations: corporate SaaS, dark mode minimalism, brutalism, anything that smells of conversion optimization. ## Layout Motifs and Structure The structure is a **broken-grid composition** where layout panels refuse to align to a standard 12-column system. Instead, the page is organized as overlapping tectonic plates of content — rectangles that slide past each other at angles, with content bleeding from one plate to the next without clean margins. **The Reef Stratigraphy (top to bottom):** - **Surface Layer (`100svh`):** Full-screen hero. A broken-grid of 5 uneven panels arranged like a coral cross-section viewed from above. The panels do not share baselines. The main wordmark `rollup.quest` sits in the largest central panel at roughly 40% of viewport width. Surrounding panels hold ambient animated water-caustic patterns (SVG-animated, no canvas). The entire composition shifts fractionally on scroll via parallax at different rates per panel — the stratigraphy effect. - **Mid-Water Zone (scroll 100–400vh):** A broken-grid sequence of isometric icon showcases. Each icon floats inside an offset card that is rotated between -3° and +3°, positioned using CSS `grid` with negative margins so cards overlap at their corners. The cards are translucent with a warm teal blur — as if looking at them through a curved glass bowl of seawater. - **The Kelp Forest (scroll 400–700vh):** Narrow, irregular columns of text and decorative botanical motifs (SVG anemones, sea-kelp branching forms, coral polyp clusters). The columns do not align horizontally — each column's top is staggered by 40–120px — giving the section the silhouette of a kelp forest canopy. Floral-botanical sea-plant motifs grow from the bottom edge of each column, blossoming upward as the user scrolls. - **Deep Zone (scroll 700vh+):** A closing section built on a single large asymmetric panel — full-bleed, tilted 2.5° off-axis. Text anchors at the lower-left. A cluster of isometric icons arranged in a loose bloom pattern fills the upper-right void. **Grid philosophy:** No gutters are fixed. Panels use `clamp(8px, 2vw, 32px)` for their breathing room. Column widths are set in `ch` units based on character count of adjacent text blocks, not screen fractions. This makes the layout feel grown, not engineered. ## Typography and Palette **Typography — frutiger-clean system, Google Fonts only:** Three faces across the entire site. All weights are intentionally light to preserve the underwater softness. - **Display / Wordmark:** `Nunito` (Google Fonts, variable font) — used at clamp(4rem, 10vw, 8rem) for `rollup.quest`. Nunito's rounded terminals perfectly evoke the Frutiger Aero era's organic-yet-technological warmth. Variable weight axis animates from 300 on page load to 500 over 1.2 seconds, as if surfacing. Letter-spacing: -0.02em at large sizes. - **Body / Reading:** `DM Sans` (Google Fonts) — all body text, labels, captions. Weight 300 for prose, 500 for callouts. Size: clamp(0.875rem, 1.2vw, 1.125rem). Line-height: 1.7. Soft and legible, with just enough geometric regularity to read as "interface" without losing its warmth. - **Accent / Botanical Labels:** `Playfair Display` (Google Fonts, italic only) — used exclusively for botanical labels beneath floral motifs, for the single hero tagline, and for decorative pull-quotes. Weight 400 italic at clamp(1rem, 1.5vw, 1.25rem). This serif italic creates a tension with the rounded sans-serif body that reads as the contrast between handwritten naturalist notes and a digital interface. **Palette — analogous ocean spectrum:** The palette is strictly analogous, moving around the blue-green-cyan arc of the color wheel, with one warm amber accent that breaks the analogy intentionally to represent bioluminescence. - `#0A3D62` — Deep Trench Blue. The darkest value, used for backgrounds in the hero and deep zone. Nearly black with visible blue. - `#1A7A8A` — Hydrothermal Teal. Primary surface color for cards and panels. - `#2EBFA5` — Bioluminescent Cyan. The main brand color. Used for wordmark, active states, animated water-caustic glows. - `#6FDFD2` — Seafoam Mist. Light tint, used for text on dark backgrounds, icon fills, decorative plant forms. - `#A8F0E8` — Surface Glint. Near-white with cyan saturation. Used for hover states, light catch on isometric icons. - `#F2C94C` — Bioluminescent Amber. The single warm accent. Used sparingly — only for the hero tagline, 1–2 botanical label accents, and subtle glow around the wordmark. Creates the "light in the deep" effect. - `#E8F8F7` — Foam White. Off-white with cyan tint. Used for high-contrast text areas and the botanical label backgrounds. Background is always the deep trench blue or the hydrothermal teal — never white, never black. ## Imagery and Motifs **Isometric Icons — the primary visual vocabulary:** The site uses a custom set of isometric icons drawn at a strict 2:1 perspective (the standard isometric projection), all sharing a consistent 120° angle system. Icons are rendered as inline SVG with three faces (top, left, right) using the three lightest values in the palette for face differentiation (light face: `#A8F0E8`, mid face: `#2EBFA5`, shadow face: `#1A7A8A`). No outline strokes — face color contrast alone defines the form. Icon subjects are all objects that could have fallen into the ocean and become habitat: - **The Scroll** — a rolled document, now barnacled, with a small sea urchin sitting on top - **The Bookmark** — a ribbon bookmark protruding from a book whose pages have bloomed into coral fans - **The Knot** — a sailor's knot rendered in isometric rope, with a small anemone growing from the center - **The Compass** — an isometric compass rose whose north needle is a long-spined sea urchin spine - **The Tide Chart** — an isometric clipboard with a graph of tidal heights, one column replaced by kelp - **The Relay** — an isometric server rack, decommissioned, with bioluminescent polyps in each slot Each icon is 160×160px at 1x, placed in offset cards as described in the layout section. On hover, the icons rotate slowly on their vertical axis (CSS 3D transform, 360° over 4 seconds, ease-in-out). The rotation reveals that the shadow face of each icon has a tiny hand-lettered inscription in italic (the accent font) describing the icon's "ocean age" (e.g., "submerged: 14 years"). **Floral-Botanical Motifs:** All botanical elements are oceanic: sea kelp, brain coral, feather-duster worms, nudibranch chromatic fronds, sea fan coral branching. They are rendered as CSS/SVG — never photography. Palette uses the full analogous spectrum plus the amber accent for the "bioluminescent tips" of each plant. Botanical motifs animate on scroll: using IntersectionObserver, each plant's individual SVG paths receive a CSS animation that grows them from their root — a "bloom" effect where stroke-dashoffset transitions from 1 to 0 over 0.8–1.5 seconds with spring-easing. The elastic patterns manifest here: each plant's growth has a slight overshoot — it grows a little past its target, then settles back — like a living plant responding to a current disturbance. **Water Caustic Animation:** The hero background uses an SVG `feTurbulence` + `feDisplacementMap` filter animation — a tiling caustic pattern that shifts slowly (cycle: 8 seconds) to simulate light refraction on the surface above. Color is deep trench blue base with cyan caustic shimmer. No JavaScript required — pure SVG filter animation. ## Prompts for Implementation Build rollup.quest as a **single immersive scroll through a seapunk archive that sank years ago and is now being rediscovered**. The visitor is an archaeologist of the early web, descending through water to find what remains. There are no calls to action, no pricing, no testimonials. Only objects, atmosphere, and the slow revelation of something beautiful. **Macro structure:** 1. **THE SURFACE — Hero (`100svh`).** Five broken-grid panels, each a different teal-blue value from the palette, no sharp borders between them (use `clip-path: polygon()` with gentle angle cuts). The wordmark `rollup.quest` in Nunito weight 300→500 animated on load, centered in the largest panel. Beneath the wordmark, a single italic line in Playfair Display and amber: *"everything that rolls, eventually settles"*. Caustic filter animation plays at 20% opacity across all panels. The panels drift apart by 8px on scroll (each in a different direction), opening thin gaps that reveal the deep trench blue underneath — the feeling of a coral reef splitting open. 2. **DESCENT INTERSTITIAL (scroll 80–120vh).** A sticky `position: sticky` band that shows a depth counter: `—12m`, `—24m`, `—38m` as the user scrolls down. Displayed in DM Sans 300, amber color. The depth counter resets to `—0m` at the top. This is the one moment of interface language — a diving gauge — that bridges hero and content. 3. **THE ICON REEF (scroll 120–420vh).** Isometric icon showcase in broken-grid. Six cards, each offset by varying amounts using `transform: translate()` and negative margins. Cards use `backdrop-filter: blur(8px) saturate(1.4)` with a semi-transparent teal background (`rgba(26, 122, 138, 0.6)`). Each card contains one isometric icon + a two-line label in DM Sans + a botanical motif (small, SVG, 48px tall) growing from the card's bottom edge. The icons rotate on hover with the elastic overshoot (CSS `cubic-bezier(0.34, 1.56, 0.64, 1)`). On mobile, cards stack in a single column with their rotations zeroed. 4. **THE KELP FOREST (scroll 420–720vh).** Three staggered columns of prose, each set in DM Sans 300 at 55ch max-width. Columns use CSS `writing-mode` normally but each is `transform: translateY()` by a different amount so their tops are staggered. Between and beneath columns, SVG botanical motifs (sea kelp, coral fan, feather-duster worm) grow on IntersectionObserver. The elastic animation on the botanicals: use `animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1)` on stroke-dashoffset so the plant grows, overshoots, and settles. Color: the botanicals cycle through the full analogous palette, with amber tips. 5. **THE DEEP ZONE (scroll 720vh+).** A single large panel, `min-height: 80vh`, tilted 2.5° counterclockwise via `transform: rotate(-2.5deg)` with overflow hidden on its container. Background: deep trench blue. Text anchored lower-left in Nunito weight 400. Upper-right area: six isometric icons arranged in a bloom pattern (CSS grid with `place-items: center`, icons absolutely positioned by hand around a radial center point). The icons in this section do not rotate on hover — they pulse: `box-shadow: 0 0 0 0 rgba(46,191,165, 0.4)` expanding to `0 0 40px 20px rgba(46,191,165,0)` over 2 seconds, infinite, staggered with `animation-delay`. **Elastic pattern implementation:** Every interactive element that "moves" uses the spring cubic-bezier `cubic-bezier(0.34, 1.56, 0.64, 1)` for its transition. This includes: card hover scale transforms, icon rotation, botanical bloom, depth counter digit changes (use CSS counter or JS with this easing), and any hover underline animations. The elastic overshoot is the site's motion signature. **Color rendering:** Use `color-mix(in oklch, ...)` for all intermediate tints. Set the palette as CSS custom properties on `:root` and derive all hover/active/focus states from them mathematically — never hardcode intermediates. Example: ```css :root { --c-trench: #0A3D62; --c-teal: #1A7A8A; --c-cyan: #2EBFA5; --c-seafoam: #6FDFD2; --c-glint: #A8F0E8; --c-amber: #F2C94C; --c-foam: #E8F8F7; } ``` **Never use:** - White backgrounds - Full-black text (always use `#E8F8F7` or `#6FDFD2` on dark, `#0A3D62` on light) - Horizontal rules or visible grid lines - Box borders with sharp corners (always `border-radius: min(16px, 2vw)` minimum) - Any stock photography or raster imagery - CTA buttons, pricing blocks, stat grids, testimonial carousels ## Uniqueness Notes **Differentiators from existing designs in the registry:** 1. **Seapunk as structural metaphor, not decoration.** At 1% frequency in the registry, seapunk has never been used as the *architectural logic* of a site — only as surface dressing elsewhere. rollup.quest makes the underwater metaphor load-bearing: the depth counter is navigation, the broken-grid panels are tectonic plates, the elasticity is water resistance. The ocean is not the skin of the site; it is its skeleton. 2. **Frutiger-clean meets oceanic bioluminescence.** frutiger-clean at 4% in the registry is always applied to tech/aero subjects. Here, Nunito's rounded terminals and DM Sans's warmth are applied to an oceanic-botanical world — the "alive, glossy, organic" quality of Frutiger Aero is mapped to sea life rather than interface chrome. This pairing has no precedent in the registry. 3. **Elastic/spring easing as a water-physics signature.** At 6% frequency, elastic patterns are used in the registry mostly as micro-interaction flourishes. rollup.quest elevates it to the site's single motion law: every moving element obeys the same spring cubic-bezier, evoking the resistance and rebound of objects in water. This makes elasticity a *worldbuilding* choice, not a UX decoration. 4. **Isometric icons that reveal secret text on rotation.** The 3D rotation hover that exposes a hand-lettered inscription on the shadow face is unreported in the registry's isometric-icons usage (2%). Other designs use isometric icons as static decoration; rollup.quest makes them interactive narrative objects. 5. **Floral-botanical motifs drawn from marine biology.** At 4% frequency, floral-botanical in the registry means terrestrial plants (ferns, leaves, blossoms). rollup.quest reinterprets the motif through marine organisms — sea kelp, coral fans, nudibranch fronds — giving the same visual warmth of botanical illustration but in a context that matches the seapunk world and avoids duplication with existing registry entries. **Chosen seed:** `aesthetic: seapunk, layout: broken-grid, typography: frutiger-clean, palette: analogous, patterns: elastic, imagery: isometric-icons, motifs: floral-botanical, tone: nostalgic-retro` **Avoided overused patterns:** Heavy use of dark-mode minimalism (dominant in registry), neon-electric palettes (used in multiple cyberpunk entries), hero-centered CTA layouts (avoided per instructions), monochrome typographic-focus designs (overrepresented in swiss/muji-adjacent entries).