# Design Language for layer2.wiki ## Aesthetics and Tone layer2.wiki inhabits the visual territory where neubrutalism meets a 1970s technical manual that was photocopied too many times, annotated in the margins with hand-drawn tropical fish, and then projected onto a CRT monitor displaying a retro-futuristic operating system. The aesthetic is **neubrutalist tech-tutorial** -- raw, unapologetic, structurally exposed, and didactically precise, but threaded through with the unexpected warmth and absurdity of hand-illustrated aquatic life. Think of the Whole Earth Catalog redesigned by a frontend engineer who keeps saltwater aquariums and learned typography from reading Baskerville specimen sheets under fluorescent light. The tone is **tech-tutorial**: instructional, direct, and methodical. Every section of the site reads like a lesson or a protocol. Headings function as chapter titles. Body text explains, demonstrates, and annotates. There is no marketing language, no persuasion, no calls to action -- only structured knowledge delivery. But this clinical instructional voice is constantly disrupted by the visual layer: hand-drawn angelfish swimming through code blocks, discus fish serving as bullet point markers, and coral reef illustrations framing technical diagrams. The juxtaposition is deliberate -- it says "this information is serious, but the world containing it is strange and alive." The mood sits at the intersection of a university lecture hall's overhead projector, a 1982 Atari instruction booklet, and a marine biology field journal. Colors glow with retro-futuristic phosphor warmth against stark neubrutalist backgrounds. Nothing is polished. Borders are visible. Shadows are hard and offset. Everything announces its own construction. ## Layout Motifs and Structure The layout follows a **minimal-navigation** architecture -- there is no persistent header, no hamburger menu, no sidebar, no breadcrumbs in the traditional sense. Instead, navigation is embedded directly into the content itself, appearing as inline references, footnote-style links, and a single fixed-position glyph (a hand-drawn pufferfish icon, 28x28px) in the bottom-left corner that expands on hover into a radial menu of 4-6 section links drawn as fish species silhouettes. **Primary Grid:** The page uses a deliberately visible 12-column grid with 2px solid borders in #2D2D2D on a #FFF8E7 background -- the grid lines themselves are part of the design, not hidden infrastructure. Content occupies columns 2-8 on desktop (asymmetric left-bias), leaving columns 9-12 as a "margin annotation zone" where hand-drawn fish illustrations, supplementary notes, and decorative coral motifs float. On viewports below 768px, the margin zone collapses and annotations stack below their parent content blocks. **Section Rhythm:** Each content section is a "lesson card" -- a rectangular block with a 4px solid black (#1A1A1A) border, a 6px offset shadow in one of the retro-futuristic palette colors, and generous internal padding (clamp(1.5rem, 4vw, 3rem)). Cards do not float or overlap. They stack vertically with 3rem gaps. Each card has a "lesson number" stamped in the top-left corner using a hand-drawn circle (SVG) containing the numeral in Libre Baskerville at 1.4rem. **The Fishbowl Hero:** The opening viewport is not a hero in the conventional sense. It is a full-screen "fishbowl" -- a single large rounded rectangle (border-radius: 2rem) centered on the viewport with a 6px black border and a soft radial gradient interior (#0A1628 center to #1B3A5C edge) simulating deep water. Inside the fishbowl, the site title "layer2.wiki" is rendered in Libre Baskerville Italic at clamp(3rem, 8vw, 6rem) in #FFF8E7. Below it, a subtitle reads as a terminal-style prompt: `> a field guide to the second layer` in Fira Code at 1rem in #7DFFC2. Hand-drawn tropical fish (SVG) drift slowly across the fishbowl using CSS keyframe animations -- a neon tetra, a clownfish, and a seahorse, each taking 15-25 seconds to traverse the viewport. **No Pricing Blocks, No CTAs, No Stat Grids:** The entire layout is informational. There are no conversion elements. The site exists to teach, annotate, and illustrate. ## Typography and Palette **Typography:** - **Headlines / Section Titles:** "Libre Baskerville" (Google Fonts) -- the italic variant at 700 weight for primary headings, regular 400 for sub-headings. This is a refined, high-contrast transitional serif that carries the authority of 18th-century printing while remaining crisp on screens. Used at clamp(2rem, 5vw, 3.5rem) for H1, clamp(1.5rem, 3vw, 2.5rem) for H2. Line-height: 1.15. Letter-spacing: -0.01em. Color: #1A1A1A on light backgrounds, #FFF8E7 on dark. Headlines are always sentence case, never uppercase -- the Baskerville letterforms are too elegant for shouting. - **Body / Instructional Text:** "Source Serif 4" (Google Fonts) at weight 400, 1.05rem base size with line-height 1.72. This generous leading creates breathing room appropriate for tutorial content that requires careful reading. Paragraph max-width: 62ch. Color: #2D2D2D. Links are styled with a 2px solid underline in #E86A33 (Phosphor Orange) with no text-decoration-skip-ink, creating a deliberately chunky neubrutalist underline. - **Code / Technical Labels:** "Fira Code" (Google Fonts) at weight 400, 0.9rem. Background: #1A1A1A. Color: #7DFFC2 (Terminal Mint). Padding: 0.15em 0.4em. Border-radius: 0 (sharp corners -- neubrutalist). Inline code gets a 2px left border in #E86A33. Code blocks get the full black background treatment with 1.5rem padding and a 3px solid top border in #D4A03C (Amber CRT). - **Annotations / Margin Notes:** "Caveat" (Google Fonts) at weight 400, 0.95rem. This handwritten face bridges the gap between the technical body text and the hand-drawn illustrations, making the margin annotations feel like personal notes scribbled by the author. Color: #5B4A3F (Driftwood). Rotated -2deg to +3deg randomly per note for a scattered, pinned-to-corkboard feeling. **Palette:** The palette is **retro-futuristic** -- colors that evoke phosphor monitors, amber terminal screens, and faded space-program documentation, punctuated by the vivid biological hues of tropical reef life. | Role | Name | Hex | Usage | |------|------|-----|-------| | Background (primary) | Parchment Glow | #FFF8E7 | Page canvas, card interiors | | Background (dark) | Deep Reef | #0A1628 | Hero fishbowl, code blocks, dark sections | | Text (primary) | Charcoal Ink | #1A1A1A | Headlines, borders, primary type | | Text (secondary) | Graphite | #2D2D2D | Body text, secondary elements | | Accent 1 | Phosphor Orange | #E86A33 | Links, highlights, card shadows, interactive states | | Accent 2 | Terminal Mint | #7DFFC2 | Code text, success states, fish accent (neon tetra) | | Accent 3 | Amber CRT | #D4A03C | Code block borders, lesson numbers, warning states | | Accent 4 | Coral Reef Pink | #FF6B8A | Decorative fish accents, hover states on annotations | | Accent 5 | Lagoon Teal | #1B8A8A | Secondary fish accents (seahorse), section dividers | | Neutral | Driftwood | #5B4A3F | Margin note text, muted borders, annotation lines | | Dark Accent | Midnight Reef | #1B3A5C | Hero gradient edge, footer background | ## Imagery and Motifs **Hand-Drawn Tropical Fish as Visual System:** The defining visual element of layer2.wiki is a taxonomy of hand-drawn tropical fish rendered as inline SVGs with a deliberate sketch quality -- uneven line weights (stroke-width varies between 1.5px and 3px within a single path), visible anchor points left as small dots, and fills that intentionally bleed slightly past their containing strokes. These are not clip-art fish. They are field-journal illustrations: anatomically suggestive but artistically loose, as if drawn with a Micron pen on graph paper. Each fish species maps to a functional role in the design system: 1. **Neon Tetra** (accent: #7DFFC2 body, #1B8A8A stripe) -- Used as inline bullet markers in tutorial lists. Oriented right-facing, approximately 18x12px. Drawn with 4-5 strokes: body outline, lateral stripe, tail fin, eye dot. 2. **Discus Fish** (accent: #E86A33 body, #D4A03C fin edges) -- Used as section dividers. A large, round, flat-bodied fish rendered at 120x100px, centered between lesson cards. Its circular form echoes the lesson-number circles. 3. **Clownfish** (accent: #FF6B8A body, #FFF8E7 stripes) -- Used in the hero fishbowl animation and as the 404-error illustration. The most detailed of the fish drawings, with 8-10 strokes and three white stripe bands. 4. **Seahorse** (accent: #1B8A8A body, #D4A03C crown) -- Used as the navigation glyph (the pufferfish was a misdirection -- the seahorse is the actual nav icon). Curled-tail posture, approximately 28x40px. On hover, the tail uncurls slightly via a CSS transform on the tail path. 5. **Pufferfish** (accent: #D4A03C body, #1A1A1A spines) -- Used as the "warning" or "note" callout icon. Inflated posture with radiating spine lines. Placed next to cautionary annotations in the margin zone. **Coral and Seaweed Borders:** Section dividers are not horizontal rules. They are hand-drawn coral reef strips -- a horizontal SVG band approximately 40px tall spanning the content width, containing branching coral, anemone tendrils, and small bubble circles in the palette accent colors. Each divider is a unique SVG (3-4 variations cycling), preventing visual repetition. **Graph Paper Texture:** The primary background (#FFF8E7) carries a subtle CSS-generated graph paper grid using repeating-linear-gradient -- light blue-gray lines (#E0DDD4) at 20px intervals, 0.5px width, at 8% opacity. This reinforces the "field journal" aesthetic and provides a structural scaffold that echoes the exposed 12-column grid. **CRT Scanline Overlay:** Dark-background sections (hero, code blocks, footer) receive a repeating-linear-gradient scanline effect -- 1px transparent, 1px rgba(0,0,0,0.08) -- creating the illusion of a cathode-ray tube display. This is the retro-futuristic signal: the technical content is being transmitted through old hardware. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to the fishbowl hero at 100vh. The fishbowl container fades in over 1.2 seconds (opacity 0 to 1, ease-out). After a 0.5-second delay, the title text renders letter-by-letter using a CSS steps() animation at 60ms per character, styled as if being typed on an amber terminal. The subtitle prompt appears 0.3 seconds after the title completes, sliding up 10px with opacity transition. Fish SVGs begin their drift animations staggered: neon tetra at 0s, clownfish at 3s, seahorse at 7s. Each fish uses a cubic-bezier easing that creates a gentle undulating path (achieved by combining translateX with a subtle sine-wave translateY using multiple keyframes). **Scroll-Triggered Lesson Cards:** As the user scrolls past the hero, lesson cards enter the viewport with a neubrutalist entrance: they translate from 30px below and 0 opacity, snapping into position with a spring-like overshoot (translateY goes from 30px to -4px to 0 over 0.5s using cubic-bezier(0.34, 1.56, 0.64, 1)). The offset shadow on each card grows from 0px to its full 6px offset simultaneously, creating the illusion that the card is "popping out" of the page surface. Each successive card delays its entrance by 0.15s, creating a stagger effect within a viewport. **Margin Annotation Reveals:** Margin annotations (in Caveat handwriting font) are initially invisible. When their parent lesson card enters the viewport, the annotations fade in with a 0.8s delay and a slight rotation animation (from -5deg to their resting random rotation), as if being pinned to the page by an invisible hand. On hover, annotations scale to 1.05 and their color shifts from Driftwood (#5B4A3F) to Phosphor Orange (#E86A33). **Fish-as-Progress-Indicator:** A small neon tetra SVG sits fixed in the bottom-right corner of the viewport. As the user scrolls, the fish translates horizontally along a 120px track (a thin line drawn as a coral branch), representing scroll progress. At 100% scroll, the fish reaches the end of the branch and its tail-fin animates a small celebratory wiggle. **Interactive Code Blocks:** Code blocks have a "copy" button styled as a small hand-drawn clipboard icon in #D4A03C. On click, the button transforms into a checkmark with a 0.3s morph animation, and a tiny bubble (circle, 6px, #7DFFC2) floats upward from the button and fades out -- like an air bubble rising in water. **AVOID:** CTA-heavy layouts (there are zero calls to action), pricing blocks (no commercial elements whatsoever), stat-grids (no metrics, no dashboards, no number showcases), persistent navigation bars (navigation is embedded and contextual), stock photography (all imagery is hand-drawn SVG), gradient-heavy hero sections (the only gradient is the fishbowl's deep-water simulation). **Bias Toward:** Full-screen narrative entry (the fishbowl hero IS the story opening). Instructional pacing (each card is a lesson, each lesson builds on the last). Environmental storytelling (the fish, the reef dividers, the graph paper -- they create a world, not just a layout). Animation as pedagogical tool (elements appear as if being drawn or placed, reinforcing the tutorial-as-craft metaphor). ## Uniqueness Notes **Differentiators from other designs:** 1. **Neubrutalism + Baskerville Serif Collision:** No other design in the portfolio pairs neubrutalist structural rawness (exposed grids, hard offset shadows, visible borders) with the refined elegance of Libre Baskerville. This creates a productive tension -- the typography says "18th-century letterpress" while the layout says "this border is 4px solid black and I am not sorry." The collision produces a visual voice that is simultaneously authoritative and anti-precious, which is exactly the register of a good technical tutorial: rigorous content, unpretentious delivery. 2. **Tropical Fish as Functional Design System (0% motif frequency):** Tropical-fish appears at 0% in the current frequency analysis -- completely unused. layer2.wiki does not merely decorate with fish; it builds a systematic visual language where each species maps to a UI function (bullet markers, section dividers, navigation icons, warning callouts, progress indicators). This is motif-as-information-architecture: the fish are not ornamental, they are semantic. 3. **Tech-Tutorial Tone as Aesthetic Commitment (0% tone frequency):** The tech-tutorial tone is at 0% frequency -- entirely absent from all 204 analyzed designs. layer2.wiki commits fully to this voice: every heading reads as a lesson title, every paragraph is instructional, the entire narrative structure follows a pedagogical arc (introduce, explain, demonstrate, annotate). This is not a marketing site wearing a tutorial costume; the tutorial IS the site. 4. **Minimal-Navigation Layout (0% layout frequency):** At 0% frequency, the minimal-navigation layout is completely unrepresented. layer2.wiki replaces conventional navigation with a radial-expanding seahorse glyph and inline contextual links. There is no header bar, no hamburger menu, no footer sitemap. Navigation dissolves into content. 5. **Baskerville-Refined Typography (0% typography frequency):** This typography category has never been used. The pairing of Libre Baskerville (refined transitional serif) with Fira Code (monospace for technical content) and Caveat (handwritten for annotations) creates a three-register typographic voice: formal instruction, technical precision, personal observation -- the three modes of a great field guide. **Seed Documentation:** - Aesthetic: neubrutalism (1% frequency -- near-unused, strongly differentiated) - Layout: minimal-navigation (0% frequency -- completely unused) - Typography: baskerville-refined (0% frequency -- completely unused) - Palette: retro-futuristic (3% frequency -- underused) - Patterns: scroll-triggered (97% frequency -- overused, but recontextualized here as pedagogical pacing rather than generic scroll-reveal; combined with spring-overshoot and fish-progress-indicator to create unique behaviors) - Imagery: hand-drawn (22% frequency -- moderately used, but differentiated here by being specifically hand-drawn SVG fish with functional semantic roles rather than decorative hand-drawn elements) - Motifs: tropical-fish (0% frequency -- completely unused) - Tone: tech-tutorial (0% frequency -- completely unused) **Avoided Overused Patterns:** - Centered layout (99%) -- replaced with asymmetric left-biased column - Warm palette as sole palette identity (100%) -- retro-futuristic palette uses cool deep-reef tones alongside warm ambers - Mono typography (99%) -- Fira Code is used for code only, not as the typographic identity - Friendly tone (98%) -- replaced with tech-tutorial (instructional, direct, methodical) - Parallax (80%) -- zero parallax effects; all animation is spring-based card entrance and fish drift - Minimal imagery (94%) -- replaced with hand-drawn SVG illustration system - Photography (73%) -- zero photography; all imagery is illustrated - Playful aesthetic (96%) -- neubrutalism is structurally playful but tonally serious