# Design Language for quirk.one ## Aesthetics and Tone **quirk.one** is a naturalist's field journal that has been repurposed as a spacecraft control panel. The premise: an eccentric scientist living at the edge of a forest has wired her hand-sketched nature journals directly into a HUD system — the result is a living interface where ink-drawn ferns and stone textures pulse with telemetry data, parallax depth reveals geological strata, and chrome bezels frame pressed-leaf specimens like instruments on a mission console. The aesthetic occupies a precise tension between **grounded-earthy** and **sci-fi-hud**: nothing is chrome for chrome's sake, and nothing is hand-drawn as nostalgia. The hand-drawn elements are the *data* — each sketch is a sensor reading, each smudge is a gradient output. The chrome frames are not decoration; they are the measuring instruments around organic specimens. Tone: quiet authority. The site does not shout. It hums with low-frequency intelligence — like a forest at 5am, which is both silent and overwhelmingly full of signal. Visitors feel they have discovered a private research terminal, not a public marketing page. Color temperature leans toward **cool stone with warm ochre accents** — the palette of flint, lichen, and late-afternoon sun on granite. Chrome elements reflect this cooled warmth rather than pure silver. ## Layout Motifs and Structure The layout is a **bento-box composition** — but organized as a naturalist's specimen tray, not a SaaS feature grid. Each cell is a specimen chamber: some hold living sketches (animated SVGs), some hold instrument data (HUD readouts), some hold geological cross-sections (parallax depth panels). The tray itself is visible — dark chrome dividers with subtle engraved hash marks at 4px intervals. **Macro grid:** - Outer frame: 6px chrome-metallic border all around viewport. The border has a subtle inset shadow (2px inner, `rgba(200,210,220,0.15)`) and a faint engraved-line pattern (`repeating-linear-gradient` at 0.5px intervals, 2% opacity). - Inner tray: 16px gap between all cells. Gap channels are dark graphite (`#1c1e1f`) with a 1px hairline highlight at `#3a3d40`. - Cell sizes are asymmetric by row: Row 1 splits 2:1:1, Row 2 splits 1:2, Row 3 splits 1:1:1. Total: 7 specimen cells. **Parallax depth system:** Each cell operates as a micro-parallax stage. On scroll, cell contents move at differentiated rates — background ink-sketch layer moves at 0.3× scroll velocity, midground specimen object at 0.65×, foreground chrome bezel and HUD overlays at 1.0× (fixed). This creates a sense of looking *into* the cell rather than *at* it. **Cell anatomy:** - Top-left corner: engraved cell ID in monospace (`C-01`, `C-02`, etc.) at 9px, `#4a5056`, as if stamped into the tray surface - Bottom-right corner: micro HUD readout showing a numeric value (animated counter) in the accent typeface - Interior: primarily full-bleed sketch or nature element, with HUD overlay grid at 4% opacity **Navigation:** No traditional nav bar. A slim 40px chrome rail runs along the left edge, containing 5 circular instrument dials (radio-button style navigation). The active dial has a faint amber LED ring (`#c8a84b`). On hover, dials expand to reveal section labels in a tooltip-style plate. This chrome rail disappears at mobile breakpoints, replaced by a bottom-edge instrument strip. ## Typography and Palette **Display / Hero:** `Libre Baskerville` (Google Fonts, serif). Weight 400 and 700. Used for the wordmark, section labels, and specimen titles at large scale. Letter-spacing: -0.01em at display sizes, +0.04em at small label sizes. This is the naturalist's handwriting turned formal — Baskerville reads as both scientific notation and literary inscription. **HUD Readouts / Data Annotations:** `Space Mono` (Google Fonts, monospace). Weight 400 and 700. All numeric counters, cell IDs, coordinate readouts, and instrument labels. Renders at 10px–13px in the HUD layer. Letter-spacing: 0.08em. The mechanical even-width forms contrast with Baskerville's calligraphic variation. **Body / Supporting text:** `Lora` (Google Fonts, serif). Weight 400. Used for specimen descriptions and narrative text blocks within cells. Line-height 1.72. Size 15px. Lora's calligraphic curves reinforce the hand-drawn quality without competing with Baskerville's authority. **Palette:** | Role | Name | Hex | |------|------|-----| | Base ground | Graphite-black | `#141618` | | Tray dividers | Dark graphite | `#1c1e1f` | | Chrome frame | Cool chrome | `#9aa5b0` | | Chrome highlight | Bright chrome | `#c8d4dc` | | Chrome shadow | Chrome shadow | `#4a5258` | | Sketch ink | Aged ink | `#2e3028` | | Primary text | Stone-white | `#e8eae4` | | Secondary text | Lichen-gray | `#8a9088` | | Accent warm | Amber-ochre | `#c8a84b` | | Accent cool | Verdigris | `#5a8a7c` | | Nature highlight | Moss | `#6b7a54` | | HUD grid | Ghost-blue | `#1e2e3a` | ## Imagery and Motifs **Hand-drawn nature elements (SVG):** Each bento cell contains at least one hand-drawn SVG illustration: ferns, stone cross-sections, bark texture profiles, leaf venation maps, lichen colony diagrams, root system sketches. These are *not* stock illustrations — they are rendered as if sketched in pencil (`stroke-dasharray` animation on path draw-in), then inked (stroke weight increases from 0.5px to 1.5px over 400ms), then lightly washed (fill opacity rises from 0 to 0.15 over 600ms). This mimics the naturalist's illustration process. Specific SVG motifs per cell type: - **C-01 (hero cell):** Full fern frond, spanning 80% of cell height, parallax layered with 3 depth planes - **C-02 (instrument cell):** Geological cross-section showing 4 strata layers; each layer labeled with `Space Mono` coordinates - **C-03 (data cell):** Root network branching diagram, procedurally grown via JavaScript (L-system, 3 iterations, branch angle 22.5°) - **C-04 (specimen cell):** Single pressed leaf, full bleed, drawn in stroke-only style with venation detail - **C-05 (readout cell):** Stone texture rubbing pattern — horizontal lines at varying intervals, suggesting surface impression - **C-06 (map cell):** Topographic contour lines for a fictional forest hill, rendered in `#5a8a7c` at 30% opacity - **C-07 (signal cell):** Lichen colony bloom viewed from above — circular organic territory maps **Sci-fi HUD overlays:** On top of each sketch layer, a HUD overlay grid renders at 4% opacity: fine orthogonal lines (`#1e2e3a`), corner reticle marks (4px × 12px L-brackets in `#9aa5b0`), and blinking telemetry dots (2px circles, `#c8a84b`, opacity oscillates 0.4–1.0 at 2s intervals with random phase offset per cell). **Chrome bezels:** Each cell is physically framed by a 3px chrome border. The top and left edges use `#c8d4dc` (highlight), the bottom and right edges use `#4a5258` (shadow), creating a beveled instrument-panel appearance. At the midpoint of each edge, a tiny screw-head detail renders as a 6px circle with a 1px cross — `#7a8590` fill, `#4a5258` stroke. **Parallax depth reveal:** On vertical scroll across the page, a global parallax effect reveals that the entire bento tray is suspended above a deep nature photograph (heavily desaturated, 15% opacity) — forest canopy or granite cliff face, visible through the tray gaps as the user scrolls. ## Prompts for Implementation **Core narrative:** The visitor has found a research station embedded in a cliff face overlooking a boreal forest. The station's instruments are running, recording. The hand-drawn specimens in each cell are the station's active observations — not decorations, but live sensor inputs. The HUD overlays are the station's interpretation layer. The visitor is reading the station's current state, not a brochure. **Opening sequence:** 1. Page loads: all cells are dark (`#141618`), only the chrome tray frame is visible (0→1 opacity, 300ms ease-out) 2. 300ms pause — the frame settles 3. Chrome rail appears on left edge (slides in from left, 200ms) 4. Cells boot one by one in L-shaped reading order (C-01, C-02, C-03... each 150ms apart): each cell's HUD grid flickers on first (2 rapid blinks at 16ms intervals), then the sketch draw-in animation begins 5. Total boot sequence: ~1.5s 6. After boot: all HUD telemetry dots begin their independent oscillation cycles **Parallax implementation:** Use `IntersectionObserver` + `requestAnimationFrame` for the per-cell parallax. Each cell registers its scroll offset from viewport center and applies `transform: translateY(${offset * parallaxRate}px)` to its inner layers independently. Never use CSS `background-attachment: fixed` — it causes jank. **Sketch draw-in animation:** Each SVG path uses `stroke-dasharray` equal to its `getTotalLength()`. On cell boot, `stroke-dashoffset` animates from `getTotalLength()` to `0` over 800ms with `cubic-bezier(0.4, 0, 0.2, 1)`. Fill opacity follows 300ms after stroke completes. **Cell hover state:** On hover, the chrome bezel of a cell brightens (`#c8d4dc` highlight expands by 1px via `box-shadow: inset 0 0 0 1px #c8d4dc`), the HUD grid opacity rises from 4% to 12%, and one new telemetry dot spawns at the cursor position and fades out over 1.2s. This makes each cell feel alive and sensor-active. **Bento responsiveness:** At viewport < 768px: the 3-column grid collapses to a single column. Cells stack in order. The chrome left rail becomes a bottom instrument strip (40px tall, full width, dials arrange horizontally). At < 480px: tray gap reduces to 8px, chrome border to 2px. **Color interaction — chrome against nature ink:** Never place `#9aa5b0` chrome directly against `#e8eae4` stone-white text — it blurs. Always use `#2e3028` aged-ink as the text background substrate within cells, with stone-white text on top. Chrome elements live at the frame layer, never within text-content areas. **Avoid:** - CTA buttons with gradient fills - Pricing table layouts - Testimonial grids - Stat counters styled as marketing numbers (they exist here only as telemetry readouts) - Any sans-serif font in body text — the entire body is serif/mono only ## Uniqueness Notes 1. **Bento-box as specimen tray, not feature grid.** Nearly all bento implementations in the registry treat cells as marketing feature blocks (icon + title + tagline). This design treats each cell as a physical specimen chamber with distinct internal anatomy (cell ID stamp, HUD readout corner, parallax depth), making the grid feel like a scientific instrument rather than a landing page. 2. **Chrome-metallic palette grounded in geological warmth, not tech cool.** Chrome-metallic appears at only 3% in the registry, and existing implementations trend toward pure silver/tech-blue. This design anchors chrome in `#9aa5b0` (stone-cool) with `#c8a84b` amber accents and `#5a8a7c` verdigris — chrome as geological metal rather than manufactured aluminum. 3. **Hand-drawn + sci-fi-hud as layered reality, not aesthetic collision.** Most designs pick one register (organic *or* technical). Here, the hand-drawn sketches are explicitly the data layer, and the sci-fi HUD is the interpretation layer — they are causally linked, not juxtaposed. The fern sketch generates the telemetry numbers in the corner readout. 4. **SVG sketch draw-in as page loading metaphor.** The boot sequence treats each cell's sketch draw-in as instrument calibration — the naturalist's illustration process made synonymous with sensor initialization. This gives the loading state meaning rather than hiding it. 5. **Left-edge chrome instrument rail as navigation.** No header nav, no hamburger menu. Navigation is diegetic — the instrument dials are part of the research station fiction, and navigating the site means turning a dial on the control panel. 6. **Chosen seed:** aesthetic: hand-drawn, layout: bento-box, typography: baskerville-refined, palette: chrome-metallic, patterns: parallax, imagery: nature-elements, motifs: sci-fi-hud, tone: grounded-earthy 7. **Avoided overused patterns from frequency analysis:** `parallax` (75% — avoided generic full-page parallax in favor of per-cell micro-parallax at differentiated rates), `hand-drawn` (57% — used hand-drawn as semantic data layer, not decorative illustration style), `nature` (13% — nature elements are instrument readings, not ambient decoration).