# Design Language for ggoomimi.com ## Aesthetics and Tone - Style: An "organic-futures" aesthetic that treats hand-drawn line work not as nostalgia but as an emergent output of a generative intelligence — as if a machine that has learned to feel draws its inner states in real time using a burnt-umber nib on warm vellum. The visual register sits at the intersection of Saul Bass title sequences, Reas & Fry's Processing sketches, and a Japanese wabi-sabi calligraphy manual published in 2089. Every stroke is imperfect by design: variable line weight, slight tremor, ink-bleed halos — yet the underlying geometry is rigorous (golden-ratio proportions, harmonic grid, precise viewport math). Think "parametric calligraphy." The palette is warm earthy — burnt sienna, raw umber, pale bone — but pushed toward the ultraviolet edge: each earthy hue has a 4px glow halo in its desaturated complement, making terracotta feel bioluminescent. Inspirations: Anni Albers' woven graphs, Ryoji Ikeda's data-barcode installations, Morisawa's variable-font specimens, Refik Anadol's data-sculpture exhibitions, and a hypothetical Leica camera manual re-typeset by a rogue design AI. - Tone: Futuristic-cutting-edge, but with warmth instead of cold chrome. The site does not feel like Silicon Valley hardware — it feels like a living organism that has learned graphic design. Copy is minimal, declarative, unhurried. Silence between lines is as important as the lines themselves. The site is proud of its own materiality the way a ceramic pot is proud of its thumbprint marks. - Differentiators: (1) Hand-drawn strokes as generative output — SVG paths with subtle randomised jitter per load, giving the site a slightly different "handwriting" on every visit; (2) Cursor-follow implemented as an ink-drop that trails behind the pointer with surface-tension physics (lag, oscillation, dampening) rather than a generic spotlight glow; (3) Gradient-mesh imagery built from earthy hues that bloom into near-infrared spectrum on hover — warm to cool without leaving the organic register; (4) Parallax structured as a scroll-activated scroll: each section is a sheet of vellum laid over the one below it, revealing the lower layer through semi-transparent ink washes as you advance. ## Layout Motifs and Structure - Master structure: a single tall scroll divided into six full-viewport parallax sections, each 100vh (desktop) or 140vh (mobile). Sections are not separated by dividers; they bleed into each other via translucent ink-wash layers (SVG feBlend multiply/overlay). At full desktop width the layout uses a 9-column grid with two deliberately dead columns at right (col 8-9 always empty except for a floating annotation glyph). - Section 1 — Threshold: full-screen. A hand-drawn circle (SVG, jitter on load) expands from center over 1.8s on first paint. Inside it: the domain logotype in variable-weight Grotesk, drawn as if written with a broad nib. Behind the circle: a gradient-mesh canvas (WebGL or CSS mesh-gradient), warm bone (#F2EAD8) fading to raw umber (#8B5E3C) at edges. The cursor-follow ink drop appears here for the first time. - Section 2 — Manifesto: left-aligned large type occupies columns 1-6. Columns 7-9 hold an animated hand-drawn botanical-style diagram (no real plants — abstract branching strokes). The text scrolls at 1x while the diagram scrolls at 0.6x (parallax differential). A single hand-drawn underline animates under the key phrase as it enters viewport. - Section 3 — Mesh: full-bleed gradient-mesh field generated in real-time via canvas. A grid of 16 anchor points, each slowly drifting. Floating over the mesh: three hand-drawn geometric shapes (rhombus, arc-segment, loose spiral) that move independently on scroll at 0.4x, 0.7x, 0.9x parallax rates. Each shape has a label in small Grotesk caps. - Section 4 — Gallery / Work strip: horizontal scroll inside a vertical scroll container. Each "card" is a hand-drawn frame (SVG border, imperfect corners) containing a gradient-mesh thumbnail. Cards are staggered vertically by ±40px, never perfectly aligned. On hover a card's mesh blooms from warm to cool-neon spectrum. - Section 5 — System: a dense typographic block — a "specification scroll" — listing the site's own design decisions as numbered items in the style of a technical manual, typeset in a monospace-adjacent Grotesk. Floating elements drift across this section: three torn-paper-shaped SVG fragments at 0.3x parallax, each carrying a single digit in large display type. - Section 6 — Contact / Close: minimal. A hand-drawn envelope outline (SVG). An email address in oversized display type. The gradient-mesh background bleeds through from behind, completing the vellum-stack visual. - Navigation: no visible top nav on load. A thin hand-drawn vertical rule at far left (col 0.5) becomes the only navigation — dots appear at 10%, 30%, 50%, 70%, 90% scroll height, each a smudged circle connected by the rule. Active dot fills with burnt sienna. On hover, a small Grotesk label floats right of the dot. No hamburger menu, no sticky header, no footer nav strip. - Floating elements motif: throughout all six sections, seven SVG "floaters" drift at different parallax rates (0.15x–0.95x), tethered loosely to their origin points with spring physics. They are: a pair of parentheses drawn as arcs, a single em-dash stroke, a hand-drawn asterisk, a loose triangle, a small filled circle, a wavering sine-line, and a dotted ellipsis. These are not decorative — they are punctuation from the copy, escaped into the layout space. ## Typography and Palette - Primary display (headings, logotype): **DM Sans** (Google Fonts, variable, wght 100-700). Variable weight axis driven by scroll position: headings enter at weight 300 and snap to 600 as they settle into viewport. Tracking at -0.03em on display, -0.01em on subheadings. Used at 10vw for hero, 5.5vw for section titles. - Secondary / body: **Nunito Sans** (Google Fonts, variable, wght 200-800). Body at 17px/28px. Used for manifesto copy, card labels, spec list. The slightly rounded terminals echo hand-drawn warmth without tipping into playful-rounded territory. - Annotation / detail: **Caveat** (Google Fonts) — hand-drawn script, used only for three floating annotation labels (Section 2 diagram, Section 3 shape labels, nav dot labels). Max 6 instances total on the page. - Monospace accent: **Space Mono** (Google Fonts) at 12px for the Section 5 specification list only. Tracking +0.05em. - Type scale: 10vw / 5.5vw / 2.4rem / 1.5rem / 1.0625rem / 0.75rem. Never set body smaller than 16px. - Palette (earthy-to-bioluminescent): - `#F2EAD8` — pale bone / vellum (primary background) - `#C49A6C` — warm ochre (mid-surface, card backgrounds) - `#8B5E3C` — raw umber (primary text, SVG strokes) - `#3B2A1A` — deep espresso (display type at full weight) - `#D4956A` — burnt sienna (accent, active states, cursor ink-drop fill) - `#A87C52` — antique tan (secondary accent, underline strokes) - `#6B4F2E` — walnut (hover states, secondary text) - `#F7C59F` — peach glow (glow halo tint, mesh gradient edge color used in hover bloom) - Earthy-to-neon bloom: on hover interactions, `#D4956A` transitions through `#F7C59F` to a momentary `#FFD580` (warm amber-gold) — staying within the earthy register but gaining luminosity. No cold blues or cyans, ever. ## Imagery and Motifs - Gradient-mesh imagery: all imagery is generated via CSS mesh gradients or a lightweight WebGL mesh (plain canvas fallback). No photographs, no stock. Each mesh has 12-16 anchor points with warm palette colors. On hover, a secondary mesh layer cross-fades in with slightly shifted anchor positions, creating a bloom effect. Meshes are lazy-generated from a seeded random function so they are reproducible across sessions but differ per section. - Hand-drawn SVG system: all structural drawing (circles, borders, underlines, annotation arrows, the envelope outline, the parentheses floaters) is SVG with `stroke-linecap: round`, `stroke-linejoin: round`, and a custom SVG filter (`feTurbulence` + `feDisplacementMap`) that adds a 1.2px organic tremor to every path. Jitter seed changes on each page load. Stroke widths: 1.5px (thin detail), 2.5px (structural), 4px (emphasis). Fill: never solid — always either none or a low-opacity warm wash. - Cursor-follow ink drop: an SVG circle (24px diameter) filled with `#D4956A`, opacity 0.7, trails the cursor with a spring-physics lag (stiffness: 120, damping: 14). When stationary for 800ms, it blooms to 40px and fades to 0.2 opacity. On click, it splatters: six small arcs radiate outward 30px then shrink in 400ms cubic-bezier(0.22,1,0.36,1). The drop is the only element that fully escapes the document flow. - Floating elements detail: the seven escaped-punctuation floaters (Section 2 above) are implemented as `position: fixed`, transformed by scroll offset and a tiny requestAnimationFrame spring loop. Each floater has: a unique drift amplitude (8px–28px), a unique parallax coefficient, a 0.5-second phase offset in its drift cycle, and a very low opacity (0.18–0.35). They are `aria-hidden` and `pointer-events: none`. - Texture: a single ``-drawn grain layer (monochrome noise, opacity 0.04) sits at `position: fixed, z-index: 1` over the entire page to simulate vellum grain. It re-draws on resize. Adds materiality without competing with the palette. - SVG stroke animation: on section entry (IntersectionObserver), each hand-drawn SVG path animates via `stroke-dasharray` / `stroke-dashoffset` draw-on sequence. Duration: 600ms–1200ms, staggered by 80ms per path, with `cubic-bezier(0.4, 0, 0.2, 1)` easing. ## Prompts for Implementation - Build as a single HTML file with inline critical CSS and deferred non-critical styles. No framework. No build step. Vanilla JS + SVG + CSS custom properties. - Treat the scroll as a physical act of lifting vellum sheets: each parallax section should feel lighter (faster) than the one it covers, giving a genuine sense of depth through transparency differentials not just blur. - Cursor-follow ink drop must feel like real ink — heavy, slightly reluctant, with memory of its last position. Avoid "spotlight follow" (opacity mask) entirely; the drop is a physical object. - Gradient-mesh sections: implement using a grid of radial gradients composited with `mix-blend-mode: multiply` on a warm background. Each radial point drifts 8px on a 12-second sine loop, creating very slow breathing motion. - Floating elements / escaped punctuation: introduce them gradually — first floater appears at 15% scroll, last at 70%. On mobile, reduce to three floaters and halve amplitude. - Section 5 spec list: every line in the specification scroll types itself in via a character-by-character reveal (no typewriter cursor blinking — just characters appearing at 28ms intervals on viewport entry). The effect should feel like a machine writing its own documentation. - Section 4 horizontal gallery: implement with CSS `scroll-snap` on a horizontal scroll container pinned via `position: sticky` while the parent scrolls. Cards should resist snapping slightly — use `scroll-snap-type: x mandatory` but set large padding-snap-start so the non-snapped intermediate states are visible. - AVOID: hero video backgrounds, isometric illustrations, dark-mode toggle, CTA buttons with gradients, pricing tables, testimonial carousels, hamburger menus, cookie banners, "trusted by" logo rows, stat-grid trios (three-column KPI blocks), glassmorphism panels, neon-on-dark color schemes, cold palettes. - Parallax implementation: use CSS custom property `--scroll-y` updated in a passive `scroll` event listener via `requestAnimationFrame` throttle, then apply it through `calc()` in `transform: translateY()` on each parallax layer. No GSAP, no ScrollTrigger dependency. ## Uniqueness Notes - Overused patterns avoided: parallax-sections is 90% saturated in the corpus — differentiated here by the vellum-stack metaphor (translucency + parallax differential) rather than the standard hero-image/section-image split parallax that dominates. Hand-drawn is 67% — differentiated by treating it as generative/algorithmic (jitter filter, per-load seed) rather than static SVG scribbles. Warm palette is 93% — differentiated by the bioluminescent bloom mechanic that temporarily transforms earthy hues into near-golden luminosity on interaction without leaving the warm register. Gradient is 85% — here used as the only "imagery" medium, not as a background treatment behind photographs. - Underused patterns prioritized: warm-earthy (2%) as primary palette driver; floating-elements (4%) implemented as escaped typographic punctuation with spring physics; gradient-mesh (8%) as the sole imagery system; futuristic-cutting-edge tone (5%) expressed through parametric hand-drawing and variable-font kinetics, not through cold chrome or dark UIs. - Similarity reference: no close neighbor found in the reviewed corpus — closest analogs are hand-drawn editorial sites (warm, static) and futuristic parametric sites (cold, animated), but the combination of algorithmic tremor + earthy palette + spring-physics cursor ink + escaped-punctuation floaters has no prior instance in the indexed designs. The site occupies a unique position: organic-futurism with material warmth. - Chosen seed/style: aesthetic: hand-drawn, layout: parallax-sections, typography: sans-grotesk, palette: warm-earthy, patterns: cursor-follow, imagery: gradient-mesh, motifs: floating-elements, tone: futuristic-cutting-edge.