# Design Language for domain ## Aesthetics and Tone `domain` is a **tech-tutorial warmth engine** — imagine a master leather craftsperson's workshop where the workbench is also a circuit board. The walls are draped in burnished sienna hides, the smell of tooled cowhide mingles with solder flux, and the overhead fluorescent light is replaced with warm Edison pendants glowing #D4622A. Every surface teaches. Every stitch is a lesson. The aesthetic is **ethereal-industrial**: soft, glowing warmth floated over hard substrate geometry. The tone is **tech-tutorial**: patient, methodical, precise — but the precision is delivered through a visual language of craft. Steps feel like tooled leather impressions: each stamped firmly, each occupying its own block of territory, each revealing depth only when you press into it (progressive-disclosure). Nothing is decorative for its own sake; every ornament encodes information. The mood is **amber afternoon light through dusty glass** — warm, tactile, analogue-feeling despite being digital. This is not warm-cozy; it is warm-competent. The site knows things. It wants to teach them. **Three emotional beats:** 1. Entry: the visitor feels the texture before they read the words — the leather grain SVG substrate hums behind the modular blocks like a workshop floor. 2. Discovery: each block peels open to reveal circuit-trace detail — the warm terracotta exterior hides a cool-copper interior. 3. Mastery: completing a tutorial sequence activates a faint copper trace animation that runs from the final block to the site's masthead, closing the circuit. --- ## Layout Motifs and Structure The layout is **modular-blocks** — not a card grid (too generic), not a bento box (too trendy), but a **craftsperson's cutting board**: rectangular modules of varying height and width, each with a consistent 24 px internal gutter, arranged in a strict 12-column CSS Grid with no column bleeding. The grid breathes. There is deliberate asymmetric weighting: the primary content block always occupies 7 columns; supporting blocks occupy 5, then 3+2, then solo spans of variable width. **Grid system:** - 12-column, 24 px gutters, 1440 px max-width container - Row rhythm in multiples of 80 px - Modules snap to row boundaries — no organic overflow, no bleed - Corner radius: 6 px on all modules (not pill, not sharp — **stitched corner**) **Block taxonomy:** - **Anchor Block** (7-col, 2-row): the primary lesson or concept — full leather-grain background, large Nunito heading, circuit-trace rule below title - **Sidebar Block** (5-col, 1-row): prerequisite or context — lighter terracotta wash, smaller text - **Step Block** (3-col, 1-row): a single numbered step in a tutorial — copper badge numbering in JetBrains Mono, progressive-disclosure trigger - **Reveal Panel** (full-width, collapsed by default): hidden beneath each Step Block, expands on click to show code, diagram, or explanation — leather-flap metaphor (slides down like a folded hide) - **Trace Connector**: a 1.5 px copper SVG line that runs between related blocks at the block boundary layer, visible only on hover — the circuit motif at a layout scale **Spatial relationships:** - Blocks are separated by 24 px gap uniformly - No hero. The page opens directly into the first Anchor Block — full width, 100svh, centered vertically within the block. The viewport-height constraint is released on mobile. - Progressive disclosure is structural: by default, only Anchor Blocks and Sidebar Blocks are fully visible. Step Blocks are collapsed to 56 px stub height; Reveal Panels are 0-height. The page is shorter than its content — depth is earned by interaction. **Navigation:** - A fixed left rail (48 px wide on desktop, hidden on mobile) carries only a vertical progress trace — a copper line that fills from top as the user scrolls, with pads at each Anchor Block position. Clicking a pad jumps to that block. This is the only navigation element. - No hamburger. No top bar. No footer nav. The progress rail is the map. --- ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display & Anchor headings — `Nunito`** (weight 800, variable). Nunito's rounded terminals are the playful-rounded core of this system. Set at 56 px / 1.1 line-height for Anchor Block titles. The roundness of Nunito contrasts the hard-edged grid in a way that feels handmade — as if the headings were cut from leather with a rounded swivel knife. Use `font-variation-settings: 'wght' 800` for headings; animate to `'wght' 600` on hover over the parent block (a subtle softening, 200 ms ease). - **Body & Tutorial text — `DM Sans`** (weight 400/500). DM Sans is clean, slightly humanist, and pairs with Nunito without competing. Set at 17 px / 1.75 line-height for tutorial body. Weight 500 for inline technical terms. Never italic in body. - **Code & Step numbers — `JetBrains Mono`** (weight 400/600). All code samples, command lines, and step-badge numbers use JetBrains Mono. Step badges: 14 px, weight 600, copper `#B5651D` on dark-terracotta `#2D1B0E` background. Code blocks: 14 px, weight 400, `#E8C99A` on `#1A0F07`. **Palette — terracotta-warm, copper-circuit:** | Role | Name | Hex | |------|------|-----| | Page background | Sienna dark | `#1A0F07` | | Anchor block bg | Terracotta deep | `#2D1B0E` | | Sidebar block bg | Terracotta mid | `#3D2410` | | Step block bg | Tan warm | `#4A2E14` | | Reveal panel bg | Leather interior | `#5C3A1E` | | Primary text | Parchment | `#E8C99A` | | Secondary text | Pale sienna | `#C49A6C` | | Heading accent | Warm white | `#F5ECD7` | | Circuit trace / copper | Copper bright | `#B5651D` | | Circuit trace glow | Copper glow | `#D4622A` | | Step badge bg | Dark espresso | `#0F0804` | | Border / divider | Leather crease | `#4A3020` | | Interactive hover | Ember orange | `#E8702A` | | Code text | Pale amber | `#F0D9B5` | **No white. No black.** The darkest value is `#0F0804` (near-black espresso). The lightest is `#F5ECD7` (warm parchment). The system has no pure neutrals — every color is tinted toward sienna. --- ## Imagery and Motifs **No photographs.** The frequency report shows photography at 85% across the registry — domain opts out entirely. All imagery is **tactile-synthetic**: SVG-rendered leather grain, circuit-board traces, and copper pad geometry. **Leather grain substrate:** A large-format SVG texture fills the page background as a `position: fixed` layer behind all blocks. The texture is generated via feTurbulence (baseFrequency 0.65, numOctaves 4) filtered through a feColorMatrix that maps to the `#1A0F07`–`#2D1B0E` range. The grain is subtle — visible at 10% opacity — enough to feel tactile without reading as "image." On dark monitors it disappears; on calibrated displays it gives the page body. **Circuit motifs — copper traces at block edges:** Between adjacent blocks on the same row, a 1.5 px SVG path runs along the shared edge — a horizontal trace with right-angle bends, ending in a 4 px copper pad (filled circle) at each terminus. These traces are invisible by default; they reveal on hover of either adjacent block, animated from left-to-right over 300 ms. The trace color is `#B5651D` with a `drop-shadow(0 0 4px #D4622A)` glow filter. **Via holes:** At the intersection of every 4 blocks in the grid (conceptually the column/row crossing points), a 6 px circle with a 1.5 px ring in `#B5651D` appears as a decorative via. These are always visible, very small, and serve as spatial rhythm markers. **Step badge numerals:** Each Step Block carries a circular badge: 36 px diameter, `#0F0804` background, `#B5651D` border (1.5 px), JetBrains Mono numeral in `#D4622A`. On the reveal of the step's Reveal Panel, the badge border pulses once (scale 1.0 → 1.15 → 1.0, 400 ms, ease-in-out). **Reveal Panel leather-flap animation:** Each Reveal Panel, when opened, animates with `transform-origin: top` — it scales from `scaleY(0)` to `scaleY(1)` over 320 ms with a cubic-bezier(0.34, 1.56, 0.64, 1) spring curve. A thin leather-crease rule (`#4A3020`, 1 px) appears at the fold point. **Progress trace (left rail):** A vertical SVG path, 2 px, `#B5651D`, fills from top as scroll position increases. Pads (8 px circles) mark each Anchor Block position on the trace. The active pad glows: `drop-shadow(0 0 6px #D4622A)`. This is the only persistent animation on the page. --- ## Prompts for Implementation Build `domain` as a **modular-block tutorial shell** — a page whose structure IS its pedagogy. The visitor scrolls a leather-grain surface, finds a glowing Anchor Block, presses into it, and a circuit unfolds. No hero. No CTA. No pricing. Teach. Only teach. **Macro structure (top to bottom):** 1. **Masthead strip (64 px fixed top):** Logo (`domain` in Nunito 800, `#F5ECD7`) left-aligned, a single horizontal copper trace rule at bottom. Right side: a 32 px copper circuit-pad icon (the site's sole brand mark). This strip never scrolls away but does not cast shadow — it blends into the page background. 2. **First Anchor Block (100svh):** Full viewport-height on load. Centered vertical/horizontal. Large Nunito 800 heading (max 56 px), DM Sans 500 subheading (20 px), and a single Step Block stub row beneath. This is the table of contents disguised as an entry. The leather-grain SVG is most visible here — the background is `#1A0F07` with the feTurbulence layer at full 10% opacity. 3. **Modular Block Grid:** Below the first Anchor Block, the CSS Grid begins. Alternate row patterns: - Row A: [Anchor 7col] [Sidebar 5col] - Row B: [Step 3col] [Step 3col] [Step 3col] [Sidebar 3col] - Row C: [Anchor 12col] (full-width, used for milestone concepts) - Rows repeat in sequence with variation. Never two consecutive Row A patterns. 4. **Reveal Panels:** Each Step Block has a paired Reveal Panel that lives in the DOM directly after it (not in the grid flow — absolutely positioned with `top: 100%`, `left: 0`, `width: 100%`, `z-index: 10`). The panel contains: a code block (JetBrains Mono, `#E8C99A` on `#1A0F07`), a brief DM Sans explanation paragraph, and a circuit-trace diagram SVG illustrating the concept. 5. **Trace Connector layer:** An `` overlay, `position: absolute`, `pointer-events: none`, covers the entire grid. JavaScript computes the bounding boxes of all adjacent blocks and draws connecting traces dynamically. On hover, the relevant trace SVG path is animated via `stroke-dasharray` / `stroke-dashoffset` (drawing effect, left-to-right, 300 ms). 6. **Progress Rail (left, fixed):** `position: fixed`, `left: 24px`, `top: 64px` (below masthead), `height: calc(100vh - 64px)`. Contains only the vertical trace SVG and pad circles. `mix-blend-mode: screen` to blend with the background. 7. **Footer (120 px):** Minimal. Domain name in Nunito 400 14 px (`#C49A6C`). A horizontal copper trace rule. Nothing else. **Animation principles:** - No looping animations except the progress trail fill (which is scroll-driven, not time-driven) - All reveal/hover animations are one-shot and reversible - `prefers-reduced-motion: reduce` disables all transform/opacity transitions, keeping only the scroll-driven progress fill - No background video, no particle systems, no WebGL **CSS architecture notes:** - Use CSS custom properties for all palette values (`--color-bg`, `--color-copper`, etc.) - The grid is a single `display: grid` with `grid-template-columns: repeat(12, 1fr)` and `gap: 24px` - Block span assignments use `grid-column: span N` — no fixed column placement (allows reflow) - The leather-grain SVG is inlined as a `` filter in the page `` element, applied to a `` via `filter="url(#grain)"` --- ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **ethereal**, layout = **modular-blocks**, typography = **playful-rounded**, palette = **terracotta-warm**, patterns = **progressive-disclosure**, imagery = **leather-texture**, motifs = **circuit**, tone = **tech-tutorial**. **Differentiators from every other design in the registry:** 1. **Modular-blocks as pedagogy, not decoration.** The block grid is not a layout pattern — it IS the tutorial structure. Block taxonomy (Anchor, Sidebar, Step, Reveal) maps directly to tutorial components. The page's visual hierarchy teaches you how to learn from it before you read a word. No other design in the registry uses layout as instructional scaffolding. 2. **Leather-meets-circuit material fusion.** The registry has circuit motifs (a6c.dev) and leather textures appear rarely; none combine them. Here, leather is the substrate and circuit is the nervous system — warm organic material housing cold conductive logic. The copper trace reveals beneath a terracotta surface create a tactile depth effect unique in the corpus. 3. **Progressive disclosure as architectural law.** The page's default state shows 30% of its content — the rest is collapsed behind Step Block stubs and Reveal Panels. This is not a UX pattern applied to a designed page; it is the page's fundamental structure. The visitor builds the page by interacting with it. No other registry design uses disclosure as the primary rendering model. 4. **No white/black palette.** The entire tonal range lives between near-black espresso (`#0F0804`) and warm parchment (`#F5ECD7`). Every pixel is tinted toward sienna. This creates a monochromatic warmth that is distinct from the registry's warm-gradient trend (87%) because it uses no gradient — only flat terracotta steps with texture overlay. 5. **Left-rail progress trace as sole navigation.** No top nav, no hamburger, no footer links. The only navigation is a 2 px copper line on the left edge that shows scroll position and offers jump links via pad clicks. This is the circuit motif applied to the navigation layer — the page is a circuit and the left rail is the main bus. **Avoided patterns (from frequency analysis):** - `centered` layout (93% in registry) — avoided entirely; grid is left-weighted - `full-bleed` (80%) — avoided; all content lives within 1440 px max-width container - `gradient` palette (87%) — avoided; flat stepped tones only - `hand-drawn` aesthetic (76%) — avoided; all lines are geometric / circuit-rule precise - `editorial` aesthetic (50%) — avoided; this is tutorial, not editorial