# Design Language for underdark.webcam ## Aesthetics and Tone A corporate atrium quietly lit by amber lamps — a centered-column boardroom presentation where the corporate tone is softened to elegance, rounded-sans headlines breathe like an architectural lobby, and circuit motifs trace the marble floor like inlaid brass meridians. The aesthetic merges Foster + Partners' 30 St Mary Axe lobby photography, the warm-amber product pages of Apple's pre-2020 macOS landing pages, the mixed-media collage covers of Eye Magazine, and the precise circuit traces of vintage IBM 1401 motherboard documentation. Elegant-sophisticated in tone: the corporate-host narrator speaks as a quietly confident architect-CEO, walking the visitor through a curated atrium. The voice is quietly authoritative and elegant. "We invite you to walk slowly through the atrium. The brass is real, and so is the circuit pattern under it." Few words, well-placed, never aggressive. ## Layout Motifs and Structure Centered layout: a single 800px-wide content column centered in the viewport, vertically stacked. Each section is full-width but content stays in the centered column, with full-bleed visual elements (mixed-media collages, circuit traces) extending beyond the column to the viewport edges. Section composition: - Section opener: a single rounded-sans headline centered, with a 1px Brass Meridian line beneath that draws on viewport-entry via path-draw. - Below the headline: a mixed-media collage image (photograph + circuit overlay + warm linen texture). - Body copy: 2-3 paragraphs in rounded-sans body, max-width 640px, centered. - Section closer: a small Circuit Trace motif drawn as 0.6px SVG lines, animating into place via bounce-enter. Bounce-enter pattern: as each section enters viewport, the headline scales from 0.92 to 1.00 with a slight overshoot (1.03) before settling, over 720ms cubic-bezier(.34, 1.56, .64, 1) (overshoot bounce). The collage image bounces in from below with a 60ms delay. Between sections: a thin centered Brass Meridian divider with a small circular ornament at its midpoint (a tiny gear-shape SVG). The header is a single rounded-sans wordmark "UNDERDARK · WEBCAM" centered at the top with a thin Brass underline. The footer is a single circular "atrium-stamp" with a delicate circuit-pattern interior. ## Typography and Palette - **Display headlines:** "Nunito" (Google Fonts), weight 600 — rounded-sans for section openers at 56-76px, letter-spacing 0.02em, soft circular terminals. - **Sub-display:** "Nunito" (Google Fonts), weight 400 italic — at 22-28px for section sub-titles and quotes. - **Body:** "Nunito" (Google Fonts), weight 400 — at 17px line-height 1.7 for elegant corporate prose. - **Caption / micro-labels:** "Nunito" (Google Fonts), weight 600 — at 12px ALL CAPS letter-spacing 0.18em for tiny section labels. - **Circuit codes / mono:** "JetBrains Mono" (Google Fonts), weight 400 — at 11px for circuit-trace annotations and tiny corporate codes. Palette — Warm corporate atrium: - `#F5EBD9` Atrium Linen — base background, warm paper-cream with subtle grain. - `#E8D9BC` Pillar Sand — secondary warm tone for collage backgrounds and section seams. - `#7C4017` Walnut Boardroom — primary deep warm for body text and headlines. - `#E8A24A` Brass Meridian — primary metallic accent for dividers, underlines, and circuit traces. - `#3D2914` Office Ink — body text color, never pure black. - `#C8804A` Amber Lamp — secondary warm accent for hover states and "active" indicators. Warm corporate discipline: every element carries warm-paper undertones. No cool grays, no electric saturation. The page reads as if photographed at 4pm with low amber lighting. ## Imagery and Motifs - **Mixed-media imagery**: each section's central image is a mixed-media collage — a photograph (architectural detail, hand on a brass railing, atrium light) overlaid with hand-drawn circuit traces in Brass Meridian, plus a thin Atrium Linen vellum overlay at 0.2 alpha at the bottom edge. - **Circuit motifs**: each section closer features a circuit-trace SVG illustration — geometric, precise, with small circular "pad" markers. Drawn as 0.6px Brass Meridian on a faint Pillar Sand background. - **Atrium-stamp footer**: a single circular footer ornament with a delicate inner circuit pattern (concentric rings + branching traces), drawn in 1px Brass Meridian. - **Section gear-ornament**: a small SVG gear-shape at each section divider's midpoint, drawn as 0.8px Brass Meridian; the gear slowly rotates at 0.2Hz. - **Vellum overlays**: each collage image has a soft Atrium Linen vellum overlay at the bottom edge, giving the image a "mounted onto paper" feel. ## Prompts for Implementation - Centered layout: a single `
` element with `max-width: 800px; margin: 0 auto; padding: 4rem 1.5rem`. Full-bleed elements break out via `margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw)`. - Bounce-enter pattern: each headline and collage uses IntersectionObserver + CSS transition with cubic-bezier(.34, 1.56, .64, 1) (overshoot bounce). Headline: `transform: scale(0.92) → 1.03 → 1.00` and `opacity: 0 → 1`, over 720ms. Collage: 60ms delay, same easing. - Path-draw under headlines: SVG `` with `stroke-dasharray = pathLength`, `stroke-dashoffset = pathLength`; on enter, animate dashoffset to 0 over 1200ms ease-in-out. - Mixed-media collages: built as a stack of 3 layers — base photograph (CSS `background-image`), circuit-trace overlay (SVG with `mix-blend-mode: multiply`), vellum bottom overlay (CSS gradient mask). - Circuit-trace illustrations: inline SVGs (4-12KB each), drawn with precise geometric paths, small `` pad markers, and `stroke-dasharray` animation on entry (0.9s draw). - Gear-ornaments: SVG `` (gear-tooth shape) with a slow `rotate(360deg)` animation over 24s. - Bias toward elegant corporate narrative: each section is a quiet brand-statement, never marketing-aggressive. No CTAs, no pricing, no stat-grids — only sections, collages, and quiet circuit ornaments. - Cursor becomes a Brass Meridian compass pointer; on hover over a mixed-media collage, the circuit-trace overlay's lines pulse in stroke-width (0.6 → 1.0 → 0.6 over 800ms), and the photograph's contrast lifts subtly. - Reduced motion: replace bounce-enter overshoot with simple opacity fade; freeze gear rotation; freeze path-draw lines at 100%. ## Uniqueness Notes - Differentiator 1: centered layout used as an architectural atrium with full-bleed visual breakouts — the centered column is the spine of a quiet brand experience. - Differentiator 2: corporate aesthetic translated into a warm-amber atrium register (Atrium Linen + Brass Meridian + Walnut Boardroom) — softens corporate into elegance. - Differentiator 3: rounded-sans typography (Nunito) used consistently to give the corporate page a soft, breathing rhythm — opposite of the corpus's typical mono dominance. - Differentiator 4: circuit motifs as inlaid brass meridians threading through architecture photography — circuits-as-ornament, not as tech-cliché. - Differentiator 5: bounce-enter pattern with overshoot used on headlines and collages, simulating brass elements settling into place after a soft impact. - Chosen seed: aesthetic: corporate, layout: centered, typography: rounded-sans, palette: warm, patterns: bounce-enter, imagery: mixed-media, motifs: circuit, tone: elegant-sophisticated. - Avoided patterns from frequency analysis: parallax (94% — replaced with bounce-enter), card-grid (90% — replaced with centered column + full-bleed elements), centered (94% used but with full-bleed breakouts rather than rigid centered alignment), photography (90% — used only as one layer of mixed-media collages), mono typography (81% — replaced with rounded-sans), mysterious-moody (71% — replaced with elegant-sophisticated).