# Design Language for desca.dev ## Aesthetics and Tone desca.dev embraces a hand-drawn aesthetic -- the charming imperfection of sketches, doodles, and notebook illustrations applied to a developer portfolio or tool. "Desca" is an evocative short word (suggestive of "descarga" (download), "descarte" (discard), or simply a unique brand name), and the ".dev" suffix places it firmly in developer territory. Imagine a developer's physical notebook -- graph paper filled with architecture diagrams, UML sketches, margin doodles, and code snippets written in careful handwriting, all scanned and animated into a living digital experience. The visual language draws from the sketchnote movement, Dan Roam's visual thinking methodology, and the whimsical technical illustrations of XKCD. The palette is muted and understated -- pencil grey, eraser smudges, and the occasional splash of highlighter. The tone is playful, making technical content feel approachable and human through the warmth of hand-made marks. ## Layout Motifs and Structure The layout uses a **single-column** composition that mimics a notebook page -- content flows vertically in a focused stream, just as it would in a physical journal. **Primary structure:** - **Notebook cover (100vh):** A full-viewport section styled as the front page of a composition notebook. The title "desca.dev" is rendered in a hand-drawn style (Baskerville-refined font with SVG filter for slight wobble). Below, a small hand-drawn illustration (CSS border shapes creating a simple computer/terminal icon with imperfect lines). The background has a faint ruled-line pattern (repeating-linear-gradient, 1px lines every 28px in light blue). - **Sketch sections (5 sections, ~80vh each):** Each section is a "notebook page" containing one topic. Content is arranged in a single column (max-width: 640px, centered) on a ruled-paper background. Each section features a hand-drawn divider (an SVG wavy line with feTurbulence displacement) and an icon-heavy illustration system where concepts are represented by small, imperfect-circle icons with hand-drawn labels. - **Mountain landscape panorama (100vh):** A section featuring a hand-drawn mountain landscape (SVG path with feTurbulence for hand-drawn edge quality) spanning the full viewport width. The mountains are rendered as overlapping curves in muted greens and greys, with small label annotations pointing to peaks (naming features or concepts). This is the portfolio's "big picture" view. - **Code notebook section (80vh):** Styled as the code-focused pages of the notebook -- monospaced text on a grid-paper background (both horizontal and vertical rules). Code snippets appear in handwriting-style monospace with syntax highlighting in muted highlighter colors. - **Back cover (50vh):** A minimal closing section styled as the notebook's back page -- contact info, social links as hand-drawn icons, and a small doodle. **Spacing philosophy:** Notebook-page rhythm. Content lines align to the 28px ruled-line grid. Margins are 8vw on each side, creating a comfortable "page margin" effect. Between sections, a visible torn-edge divider (SVG clipPath) suggests turning to a new page. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Libre Baskerville" (Google Fonts) -- a refined serif that, when combined with SVG wobble filters, creates the impression of carefully hand-lettered headlines. Weight 700. Size clamp(28px, 4vw, 48px). Letter-spacing: 0.01em. The refinement of Baskerville adds elegance that elevates the hand-drawn aesthetic above mere casualness. - **Body text:** "Patrick Hand" (Google Fonts) -- a natural handwriting font that maintains readability at body sizes. Weight 400. Size clamp(16px, 1.1vw, 19px). Line-height: 1.7 (aligned to the 28px ruled grid at 18px base). - **Code:** "Fira Code" (Google Fonts) -- a monospaced font with programming ligatures, styled at reduced contrast to feel like handwritten code. Weight 400, size 14px, letter-spacing: 0.02em. **Palette:** - **Notebook White** `#FAFAF5` -- primary background, a slightly warm white like composition paper - **Pencil Grey** `#3A3A3A` -- primary text, the color of a sharp HB pencil - **Rule Blue** `#C5D5E8` -- the blue ruling lines of a composition notebook - **Highlighter Yellow** `#FFE066` -- accent for important words, interactive highlights, like a real highlighter - **Eraser Pink** `#F0B8B8` -- secondary accent for errors, corrections, and warm emphasis - **Margin Red** `#D04040` -- the vertical margin line on the left side of the notebook, also used for critical annotations ## Imagery and Motifs **Core visual motifs:** - **Icon-heavy concept illustrations:** Each concept in the sketch sections is represented by a small hand-drawn icon (20-32px) -- circles with imperfect borders (SVG path with small random variations), simple line drawings of common objects (computer, lightbulb, gear, envelope). These icons use only Pencil Grey strokes (2px, no fills) and are scattered organically among text. - **Mountain landscape hand-drawing:** A panoramic SVG landscape where mountains, valleys, and a sky are rendered as hand-drawn curves with visible "sketchiness" (feTurbulence displacement on all paths). The rendering style deliberately shows construction lines and slight corrections, as if the artist made multiple attempts. - **Ruled-line backgrounds:** A persistent visual texture. The composition-notebook lines (horizontal rules every 28px in Rule Blue) appear on every section, with a single vertical Margin Red line at 8vw from the left edge. These lines anchor all content to a physical-notebook metaphor. - **Torn-page section dividers:** Between sections, the visual transition is a torn-paper edge (SVG clipPath with jagged polygon coordinates) that creates the impression of pages torn from the notebook and displayed sequentially. - **Stagger-reveal entry:** Content enters the viewport with a stagger pattern -- lines of text appear one by one with a 50ms delay between them, as if being written in real time. Icons pop in with a scale-from-zero bounce (scale 0 to 1 with overshoot). ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like flipping through a developer's personal notebook -- each section a new page with sketches, notes, and illustrations. The experience is intimate and personal, the antithesis of polished corporate design. **Opening animation sequence:** - Frame 0-300ms: Notebook White background with ruled lines already visible. - Frame 300-1000ms: "desca" appears as if being hand-written -- each letter draws itself via SVG path animation (stroke-dashoffset from full length to 0, 100ms per letter). The letters have a slight hand-drawn wobble. - Frame 1000-1400ms: ".dev" appears in the same style but in Highlighter Yellow, as if the developer highlighted it. - Frame 1400-2000ms: The small computer icon illustration draws itself below the title (SVG stroke animation, 3 elements appearing sequentially). - Frame 2000-2600ms: A hand-drawn underline wiggles across beneath the icon (SVG path with wave pattern, stroke-dashoffset animation). **Scroll behavior:** Content lines in sketch sections stagger in as the user scrolls (each line fading from opacity 0 to 1 with translateY(8px) to 0, staggered 50ms). Icons bounce in (scale animation with overshoot). Torn-page dividers between sections are static -- they don't animate but provide a clear visual break. The mountain landscape draws itself progressively as the section scrolls into view (left-to-right path animation). **Interaction details:** - Hovering over highlighted text (Highlighter Yellow background) deepens the yellow (opacity from 0.5 to 0.8). - Icons respond to hover with a slight wiggle (rotateZ oscillating +-3deg for 300ms). - Code blocks in the code notebook section respond to hover with a subtle Highlighter Yellow left-border (4px, transitioning from 0 opacity to full). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Composition-notebook as design system:** The ruled-line background, margin line, torn-page dividers, and handwriting font create a comprehensive physical-notebook simulation that goes beyond simple "hand-drawn" aesthetics. The entire design system is anchored to the metaphor of an actual composition book. 2. **SVG hand-drawn letter animation:** The opening title draws itself letter by letter using SVG path animation with hand-drawn wobble, creating the experience of watching someone write the site name in real time. This specific combination of path animation and wobble filter is unique. 3. **Mountain panorama as portfolio overview:** Using a hand-drawn mountain landscape as a "big picture" section -- where peaks represent projects or concepts, labeled with annotation arrows -- is a creative visualization that transforms landscape illustration into information architecture. 4. **Grid-paper code section:** Presenting code snippets on a grid-paper background (both horizontal and vertical rules) with a handwriting-influenced monospace font bridges the gap between coding and sketching, suggesting that code is a form of drawing. **Chosen seed/style:** aesthetic: hand-drawn, layout: single-column, typography: baskerville-refined, palette: muted, patterns: stagger, imagery: icon-heavy, motifs: mountain-landscape, tone: playful **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow (65%) patterns as primary. Avoided centered (94%) and card-grid (85%) layouts. Avoided photography (82%) imagery. Avoided gradient (92%) and warm (87%) palettes. Avoided mono (92%) typography (used handwriting + Baskerville instead). Avoided mysterious-moody (74%) tone. Used baskerville-refined (1%) typography and icon-heavy (5%) imagery -- both underused.