# Design Language for underdark.xyz ## Aesthetics and Tone A blobitecture future-tutorial honey-pavilion — soft amorphous architecture rendered in honeyed-neutral gradients, with elegant-serif headlines reading like museum wall-texts, and duotone-photo specimens tilted 3D inside curving blob frames. The aesthetic merges Zaha Hadid's curvilinear pavilions (Heydar Aliyev Center, Galaxy SOHO), the warm honey-cream palette of mid-century Knoll office spaces, the museum wall-text register of MoMA's permanent collection labels, and the duotone honey/charcoal photography of late-1960s Eames exhibitions. Tech-tutorial in tone: a patient teacher walks the visitor through curving exhibits, naming each blob-form's principle. The voice is patient and explanatory — but elegant. "Notice this curve. It is what we call a 'one-degree contour.' Hover, and you will see how it rotates. The principle is simple, and the implementation is in the next section." Short instructional paragraphs paired with elegant-serif headers. ## Layout Motifs and Structure F-pattern layout: content follows the F-shape reading flow — a horizontal heavy top bar across the full viewport width, a long vertical anchor down the left, and 3-4 mid-page horizontal arms. This pattern is deliberately reinforced to match how a tutorial-page is actually read. Composition: - Top horizontal bar: a full-width hero with a curving blob-pavilion SVG illustration and a single elegant-serif headline. The blob's curve forms a soft horizontal arc spanning the full width. - Left vertical anchor: a 240px-wide column on the left, carrying a chapter index in elegant-serif with small honeyed-neutral indicator dots. Sticky-positioned so it travels with the visitor. - Horizontal arms: 4 instructional sections positioned at top, middle-upper, middle-lower, and middle. Each arm is a horizontal flow of: blob-frame photograph (left) + elegant headline + body copy (right). Tilt-3D pattern: every duotone-photo specimen sits inside a curving blob-frame with a CSS `transform: perspective(1200px) rotateX(...) rotateY(...)`. On scroll, the tilt angle is driven by viewport position — photos lean toward the visitor's reading direction. On hover, they tilt further (10deg) with a slight spring overshoot. The header is a oversized hand-drawn pavilion-floorplan SVG with elegant labels in serif. The footer is a single curving blob signature with the site name in 14px elegant serif. ## Typography and Palette - **Display headlines:** "Cormorant Garamond" (Google Fonts), weight 500 — elegant-serif for chapter titles at 72-104px, italic accents, letter-spacing -0.01em. - **Sub-display:** "Cormorant Garamond" (Google Fonts), weight 400 italic — at 24-32px for section sub-titles and quote pull-outs. - **Body:** "Source Serif 4" (Google Fonts), weight 400 — at 17px line-height 1.7 for instructional prose. - **Caption / chapter index:** "Cormorant Garamond" (Google Fonts), weight 500 — at 14px small-caps letter-spacing 0.14em for chapter-index entries. - **Tutorial codes / mono callouts:** "JetBrains Mono" (Google Fonts), weight 400 — at 12px for tutorial step codes ("STEP 03.A"). Palette — Honeyed-neutral pavilion: - `#F4ECD8` Honey Linen — base background, warm cream with subtle grain. - `#E8D9BC` Pavilion Pearl — secondary tone for blob-frame backings. - `#7C4017` Walnut Edge — primary deep warm for headlines and instructional body. - `#E8A24A` Honey Gold — primary metallic accent for blob-frame edges and chapter-index dots. - `#3D2914` Pavilion Ink — body text color, never pure black. - `#2A2F3A` Charcoal Specimen — duotone secondary hue (paired with Honey Gold). Honeyed-neutral discipline: every element carries honey-cream undertones. Duotone-photos use Honey Gold + Charcoal Specimen for warmth; futuristic motifs appear in Honey Gold with a slight chromatic shimmer. ## Imagery and Motifs - **Duotone-photo specimens**: each instructional arm features a duotone-treated photograph (architectural detail, curving wall, soft fabric, light through a curved window). Duotone uses Honey Gold + Charcoal Specimen; photos are placed inside curving blob-frames (SVG clip-path with bezier curves). - **Futuristic motifs**: each section closer features a futuristic SVG motif — a curving wireframe of a future pavilion, a soft amorphous diagram, a particle-cloud rendered as small circles, or a procedural blob shape. Drawn in 0.8px Honey Gold with subtle chromatic-aberration offset (1px Charcoal shift). - **Blob-frames**: curving SVG clip-paths around each photograph, with 4-6 anchor points and smooth bezier curves; each blob-frame has a 2px Honey Gold border with a subtle inner glow at 0.3 alpha. - **Chapter-index dots**: small SVG circles in the left vertical anchor; the current chapter's dot is filled Honey Gold; passed chapters are half-filled; coming chapters are outlined only. - **Pavilion-floorplan header**: a single oversized hand-drawn SVG floorplan illustration of an imaginary curved pavilion, with elegant serif labels indicating zones (Atrium, Hall, Corridor). ## Prompts for Implementation - F-pattern layout: CSS Grid with `grid-template-columns: 240px 1fr` and `grid-template-rows: auto auto auto auto auto`. Top bar spans both columns; left anchor is sticky in column 1; instructional arms occupy column 2 at staggered rows. - Tilt-3D pattern: each photograph's `transform` is driven by JS reading scroll position. Apply `transform: perspective(1200px) rotateX(var(--rx)) rotateY(var(--ry))` with custom properties updated on scroll. On hover, transition `--ry` to 10deg over 480ms with a slight spring overshoot. - Blob-frames: SVG `` with `` containing curved beziers; assigned to photographs via `clip-path: url(#blob-frame-N)`. Library of 5-7 blob shapes randomly assigned. - Duotone-photo: photographs pre-processed as duotone PNGs with Honey Gold + Charcoal mapping; loaded with `image-set()` for responsive crispness. - Futuristic motifs: inline SVGs with `stroke: Honey Gold; stroke-width: 0.8px`; chromatic-aberration applied as a duplicated `` element offset by 1px and tinted Charcoal at 0.4 alpha, with `mix-blend-mode: multiply`. - Chapter-index dots: pre-built SVG `` per chapter, with state driven by scroll position. Active dot has a subtle 1Hz pulse via `box-shadow` animation. - Bias toward tech-tutorial narrative — but in elegant register: each instructional arm is a short museum-text-style explanation of a blob-form principle. Avoid CTAs and pricing tables, but include diegetic "STEP 03.A" mono-codes that read like exhibit numbers. - Cursor becomes a Honey Gold curved pointer with a tiny perspective indicator; on hover over a duotone specimen, the photograph's tilt deepens to 10deg and the blob-frame's inner glow brightens by 0.3 alpha. - Reduced motion: disable tilt-3D scroll-driven tilt (lock at 0); disable hover spring overshoot; freeze chapter-index dot pulse. ## Uniqueness Notes - Differentiator 1: f-pattern layout used as a literal museum-tutorial reading flow with top bar + left anchor + horizontal instructional arms — uncommon in the corpus, where f-pattern usually means an SEO-style content layout. - Differentiator 2: blobitecture aesthetic + honeyed-neutral palette + elegant-serif typography — three rare ingredients combined. - Differentiator 3: tilt-3D pattern used as a scroll-driven photographic tilt, with photographs leaning toward the visitor's reading direction — kinetic depth. - Differentiator 4: duotone-photo specimens framed in curving blob-frames with bezier clip-paths — soft amorphous mounting rather than rectangular crops. - Differentiator 5: futuristic motifs rendered with chromatic-aberration offset, giving a tutorial-page a subtle future-shimmer. - Chosen seed: aesthetic: blobitecture, layout: f-pattern, typography: elegant-serif, palette: honeyed-neutral, patterns: tilt-3d, imagery: duotone-photo, motifs: futuristic, tone: tech-tutorial. - Avoided patterns from frequency analysis: parallax (94% — replaced with tilt-3D scroll-driven tilt), card-grid (90% — replaced with f-pattern arms), centered (94% — f-pattern reading flow), photography (90% — used only as duotone specimens in blob-frames), mono typography (81% — used only for tutorial step codes), mysterious-moody (71% — replaced with tech-tutorial in elegant register).