# Design Language for prototype.st ## Aesthetics and Tone prototype.st inhabits the seapunk aesthetic at its most cultivated — the moment when deep-sea bioluminescence meets the obsessive restraint of a luxury atelier. The mood is **oceanic-baroque luxurious**: think of a couturier who only works in materials dredged from the Mariana Trench, who press-molds jellyfish forms into silk. The visual register is neither playful-aquatic nor clinical-tech; it lives in the uncanny gap between a specimen jar and a jewel box. The tone is **cool, self-assured, luxurious** — a brand that does not need to explain itself. Silence is the primary voice. When content appears, it arrives with the deliberateness of a rare bloom: a single headline held in a haze of deep burgundy, a paragraph that fades in as if surfacing from dark water. Everything earns its place by being worth waiting for. Primary mood references: a Jacques-Henri Lartigue photograph shot through dark water; the smell of old velvet in a natural-history museum; a deep-sea coral garden seen only by submersible light. Color philosophy: **burgundy-cream tension**. The palette pits the warmth of aged parchment against the cool authority of deep burgundy-maroon, with moments of blurred gradient where the two dissolve into each other — as if heat haze or depth-of-field is making the edges uncertain. ## Layout Motifs and Structure The layout is a **broken-grid** architecture — but the breaks are deliberate, structural, and elegant rather than chaotic. The grid asserts itself briefly (a crisp column edge, a precise horizontal rule) then fractures: a text block slides 40% off-screen right, a vector illustration bleeds through the gutter, a headline fragment appears at 160% of its column width, clipped by an overflow mask. **Compositional grammar:** - **Full-bleed hero zone:** A single viewport-height opening panel with the wordmark centered in a 4px horizontal rule of cream `#F5EDDB`, set against a deep burgundy field `#4A0E20`. The wordmark itself is set in a geometric-sans at ~14vw, weight 300, letter-spacing 0.12em. Behind it, a blurred vector-art mandala of leaf-organic forms pulses very slowly (scale 1.00→1.03, 12s ease-in-out loop) — the blur is 18px and the motion is so subtle it reads as atmospheric rather than animated. - **Broken-grid narrative panels:** Below the hero, five content panels arranged on a 12-column CSS grid. Panels 1, 3, 5 occupy columns 1–8; panels 2, 4 occupy columns 5–12 — creating a syncopated overlap at the midpoint. Each panel has a deliberate 2-column text frame and a 4-column image/illustration zone, but these zones bleed into each other by 1 column on purpose. - **Blur-focus choreography:** As each panel enters the viewport (IntersectionObserver at 0.15 threshold), its text transitions from `filter: blur(6px)` → `blur(0)` and `opacity: 0` → `1` over 900ms cubic-bezier(0.22, 1, 0.36, 1). Images arrive 200ms later with the reverse: sharp → soft → sharp, giving a depth-of-field pulse. This is the primary motion language of the site. - **Horizontal rule system:** Cream hairlines (`#F5EDDB`, 0.5px) divide the vertical rhythm at exact multiples of 8px. No rules are placed decoratively — each is load-bearing for the spatial rhythm. - **No persistent navigation:** The only navigation is a fixed 20px-wide burgundy strip on the far left edge of the viewport containing three geometric-sans glyphs rotated 90°. Hovering the strip reveals a full-height overlay panel (320px wide, `background: #2E0A16`, `backdrop-filter: blur(32px)`). The overlay slides in from the left over 280ms. ## Typography and Palette **Typefaces (Google Fonts only):** - **Display / Wordmark:** [Josefin Sans](https://fonts.google.com/specimen/Josefin+Sans) — weight 300, all-caps, letter-spacing 0.15em. The geometry is precise and cool without coldness; the thin weight at large sizes reads as incised rather than printed. Used exclusively for the wordmark and section numerals. - **Body / Reading voice:** [Cormorant](https://fonts.google.com/specimen/Cormorant) — weight 400 regular and 400 italic. At 18px / 30px line-height, the slightly archaic long descenders and delicate serifs evoke manuscript culture without pastiche. Italic used for emphasis, for specimen-label captions, for quotations. - **Accent / Labels:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) — weight 400, size 11px, letter-spacing 0.08em, all-caps. Used only for micro-labels: category tags, dates, metadata. Creates a quiet technical undertone beneath the organic-baroque main voice. **Palette — hex values:** | Role | Hex | Notes | |---|---|---| | Background / deep field | `#1A0510` | Near-black with burgundy undertone; the deep ocean | | Burgundy primary | `#4A0E20` | Strong, saturated dark red; the structural color | | Burgundy mid | `#7D2040` | Used for hover states, ruled lines, nav strip | | Cream primary | `#F5EDDB` | Aged parchment; all display text and hairlines | | Cream muted | `#C8B8A2` | Body text; quieter, softer than the primary cream | | Blur-haze accent | `#2B1428` | A deep violet-burgundy used in gradient transitions | | Organic highlight | `#8C3D55` | The one moment of warmth; leaf-motif fill color | **Gradient usage:** A vertical linear-gradient from `#1A0510` → `#2B1428` → `#1A0510` serves as the page-length background — subtle, almost imperceptible, giving the page a slow breath. ## Imagery and Motifs All visual elements are **vector art** — no photographs, no raster imagery, no 3D renders. The vector idiom is precise but organic: paths with deliberate imperfection, anchor points placed as if by a careful hand rather than automated. The visual references are scientific illustration — the kind found in 18th-century botanical atlases or deep-sea specimen notebooks. **Leaf-organic motifs as primary vocabulary:** The dominant decorative system is an interlocking family of leaf and frond forms — not tropical-lush, but structural-botanical: the cross-section geometry of a cactus pad, the radial symmetry of a fern fiddle-head, the elongated ellipse of a deep-sea kelp frond. These forms appear in three registers: 1. **Background mandalas:** Large (600–900px), very low opacity (4–8%), cream on burgundy-black. They rotate infinitesimally (0.02rpm) and are heavily blurred (24px). They establish spatial depth without competing with content. 2. **Section ornaments:** Medium-scale (80–160px) vector SVGs placed at the intersection of grid breaks. These are rendered sharp and precise — the one moment of clarity against the general soft-focus atmosphere. Stroke weight 1px, color `#8C3D55`. 3. **Inline glyphs:** Tiny (16–20px) leaf-glyph icons substituted for standard bullet points and list markers. Drawn as a minimal two-stroke SVG: a central vein line and a single elliptical outline. `#7D2040`. **Blur-focus as conceptual motif:** The imagery system explicitly uses blur as meaning. The background layer is always soft; the content layer arrives in focus; the decorative layer oscillates between the two. This encodes the brand concept of *prototype* — something between ideation (blur) and realization (focus). Every viewport transition re-enacts this movement from uncertain to resolved. **No stock photography.** No gradient blobs. No abstract geometric shapes unrelated to the leaf vocabulary. ## Prompts for Implementation Implement as a **single long HTML page** structured as five sequential full-bleed sections, each one a movement in a slow visual composition. There is no above-the-fold CTA, no pricing block, no stat grid, no testimonial carousel, no newsletter capture. The page is experienced as an unfolding — the way a scroll of velum is unrolled one hand-span at a time. **Section 1 — Opening / Specimen Label** Full-viewport panel. Background: `#1A0510`. The wordmark "prototype.st" in Josefin Sans 300 at 10vw, all-caps, cream `#F5EDDB`, letter-spacing 0.18em, centered both axes. A 0.5px horizontal cream rule crosses the full viewport width 8px above and below the wordmark. Behind and beneath: a single large leaf-organic mandala SVG, `opacity: 0.05`, `filter: blur(22px)`, `animation: slowpulse 14s ease-in-out infinite`. On page load, the wordmark fades in over 1.2s; the rules draw in from center outward over 0.8s using `stroke-dasharray` + `stroke-dashoffset` animation. **Section 2 — Concept / Blur-to-Focus Narrative** A broken-grid panel: text occupies columns 1–7 of a 12-column grid; an SVG leaf illustration (200px, sharp, `#8C3D55`) sits at columns 8–10, vertically centered. The text block uses Cormorant 18px / 30px, color `#C8B8A2`. As the section enters viewport: text arrives blur→sharp (900ms); illustration arrives sharp→blur→sharp (700ms + 200ms delay) — this is the blur-focus pattern that repeats throughout. Section background shifts to `#2E0A16` via a smooth linear-gradient bleed with the adjacent sections. **Section 3 — Depth / The Broken Grid** Three content columns, 12-col grid: col 1–4 (label in Space Grotesk 11px caps `#7D2040`), col 3–9 (main body text Cormorant), col 10–12 (a thin vertical rule `#4A0E20` with a small leaf ornament centered on it at 50% height). The content block for col 3–9 is intentionally offset: `margin-top: -2.5rem` relative to its grid row, creating a deliberate vertical misalignment — the broken-grid signature move. **Section 4 — The Specimen** Full-bleed dark panel (`#1A0510`). A single large vector SVG occupies 60vw centered: a complex leaf-radial form, 12 fronds in radial symmetry, stroke `#8C3D55`, fill none, stroke-width 0.8px. This SVG animates on scroll: `stroke-dashoffset` decreases as scroll progress increases, so the fronds appear to draw themselves as the user scrolls. Below it, three metadata lines in Space Grotesk: category, date, a single phrase — each line fades in with a 150ms stagger. **Section 5 — Close / Fade to Depth** The final panel fades the background from `#1A0510` back toward `#1A0510` via `#2B1428` — a complete breath. The only content: the wordmark repeated at 5vw, `opacity: 0.2`, and a single Cormorant italic line: *"every form begins as uncertainty."* No links, no CTAs, no footer navigation. The page ends as it began — in near-silence. **Animation principles:** - All transitions use `cubic-bezier(0.22, 1, 0.36, 1)` (ease-out-quart) or `cubic-bezier(0.76, 0, 0.24, 1)` (ease-in-out-quart) - No bounce, no spring, no elastic easing — all motion is deliberate and slow - IntersectionObserver threshold 0.12 for text reveals; 0.08 for background shifts - `prefers-reduced-motion` respected: blur transitions disabled, opacity transitions halved in duration **Do not implement:** hero CTAs, pricing tables, testimonial blocks, stat counters, scroll-jacking (no `overflow: hidden` on body), sticky headers, modal overlays, tooltip systems, social proof elements, or any interactive widget that is not the left-edge navigation strip. ## Uniqueness Notes **Differentiators:** 1. **Seapunk aesthetic at luxury register.** The frequency report shows `seapunk` at 1% usage across the registry — and all prior uses are in playful/digital-native contexts. This design takes the seapunk palette (deep ocean, burgundy, bioluminescent warmth) and applies it at luxury-premium tempo and restraint. The combination — seapunk + luxurious + geometric-sans — is not present in any other design in the registry. 2. **Blur as primary conceptual motif, not decoration.** Blur-focus is used at 4% frequency, typically as a decorative glass effect. Here, blur-to-focus is the entire narrative arc of the page: every section re-enacts the movement from uncertain (prototype, concept) to resolved (form, specimen). The animation system is structurally motivated, not atmospheric. 3. **Broken-grid with syncopated column offsets.** Broken-grid layouts appear at 7% frequency, but the specific technique used here — columns that overlap by exactly 1 unit with a deliberate `margin-top` vertical misalignment — creates a typographic collision that other broken-grid implementations avoid. The misalignment is the signature, not the deviation. 4. **Vector-art leaf-organic vocabulary as a closed iconographic system.** Rather than scattered decorative motifs, this design treats leaf-organic forms as a rigorous system: three scales, three opacity registers, one stroke weight, one accent color. The system is internally consistent enough to function as a brand language, not merely decoration. Vector-art appears at 3% frequency; pairing it with the specimen-illustration visual idiom is rare. 5. **No photography, no stock, no blobs.** The decision to exclude every imagery category except SVG vector art in a luxury context is unusual — most luxury designs rely on hero photography. The all-vector restriction forces the leaf-organic motif system to carry the full visual weight, which it does through scale variation and the blur-focus choreography. **Chosen seed:** aesthetic: seapunk, layout: broken-grid, typography: geometric-sans, palette: burgundy-cream, patterns: blur-focus, imagery: vector-art, motifs: leaf-organic, tone: luxurious **Patterns avoided from frequency analysis:** parallax (75% — overused), warm palette (88% — overused), editorial layout (53% — overused), asymmetric layout (40% — overused), scroll-triggered animations as generic reveal (34% — overused). Instead: blur-focus (4%), seapunk (1%), broken-grid with column-collision technique, vector-only imagery, luxury tone with non-photographic execution.