# Design Language for lungless.dev ## Aesthetics and Tone **Muji meets the frontier.** The aesthetic is warm, uncluttered functional minimalism — Muji's philosophy of "no design" as a form of restraint — but tensioned against quietly futuristic motifs that feel like organic evolution rather than chrome-plated sci-fi. Think a studio where hand-thrown ceramics sit on a desk beside a sleek haptic display. No noise, no clutter, just calm confidence. The tone is **conversational and unhurried** — a practitioner talking to peers, not a brand shouting at prospects. Copy is direct, personal, and occasionally dry. No buzzwords, no metrics-as-personality. The site says: "Here is the work. Here is how I think. Draw your own conclusions." Mood references: a warm reading lamp at 4pm, a grid notebook opened to a half-finished diagram, the tactile silence of a well-made object. The site breathes. Background: `#F4EFE8` (warm oat parchment) Surface: `#EDE7DC` (linen shadow) Text primary: `#2C2520` (deep walnut) Text secondary: `#7A6C60` (warm ash) Accent primary: `#C9753A` (terracotta ember) Accent soft: `#E8C4A0` (sand glow) Futuristic highlight: `#3D4F5C` (slate horizon — the one cool note, grounding the warmth) ## Layout Motifs and Structure **Portfolio grid with asymmetric breathing room.** The grid is a 12-column CSS grid but projects are placed with deliberate asymmetry — a large card spanning 7 columns beside a narrow 5-column card, then two equal 6-column cards below, then a full-width 12-column feature. No two rows are identical in rhythm. - **Hero:** Full-viewport fade-in with name, one-line discipline label, and a slow-scroll parallax organic blob drifting in the lower-right corner at 0.3× scroll speed. No hero image, no video. Just type and texture. - **Grid section:** Project cards use a raised card surface (`#EDE7DC`) with 2px warm border (`rgba(201,117,58,0.18)`), generous padding (48px). On hover, the card shifts 4px up with a soft shadow, and a terracotta left-border accent slides in via `scaleY` from 0 to 1. - **About strip:** Single horizontal band, full-width, with large counters (animated on scroll entry) for years active, projects shipped, and one playful stat. Counters use the futuristic `slate-horizon` color against the oat background. - **Contact:** Minimal footer band. No form — just an email link styled as an underlined serif, and two icon-only social links. - **Spacing system:** 8px base unit. Section gaps: 120px. Card internal padding: 48px. Type line-height: 1.65 for body, 1.1 for display. Navigation is a single sticky top bar: logo-initial left, three text links right. No hamburger on desktop. On mobile, the links collapse to a bottom bar (iOS dock style) with icon + label. ## Typography and Palette **Primary:** Cormorant Garamond (Google Fonts) — elegant, high-contrast serif for all display headings (h1, h2, project titles). Used at large sizes: 72px hero, 48px section heads, 32px card titles. Letter-spacing -0.02em on display sizes. **Secondary:** DM Sans (Google Fonts) — geometric humanist sans for body text, labels, navigation, and metadata. 16px body, 14px UI labels. Weight 300 for body, 500 for labels. **Accent / counter numbers:** Cormorant Garamond Italic at 96px for the animated counters — the contrast with DM Sans beneath creates a typographic composition rather than a data display. **Palette:** - `#F4EFE8` — warm oat parchment (page background) - `#EDE7DC` — linen shadow (card surface, section bands) - `#2C2520` — deep walnut (primary text, headings) - `#7A6C60` — warm ash (secondary text, metadata) - `#C9753A` — terracotta ember (primary accent, hover states, active nav) - `#E8C4A0` — sand glow (soft accent, tag backgrounds) - `#3D4F5C` — slate horizon (counter numbers, futuristic detail lines, code snippets) **Texture layer:** A very subtle grain overlay (`noise.svg` at 3% opacity, multiply blend) on the body — gives the parchment background tactile depth without being visible at arm's length. ## Imagery and Motifs **Organic blobs as spatial anchors.** Three SVG blobs are placed across the page as purely decorative, non-semantic elements — they do not frame content, they exist in the z-layer beneath it. Each is a closed `path` with 6–8 bezier control points, filled with either `#E8C4A0` at 40% opacity or `#C9753A` at 12% opacity. - **Hero blob:** Large (600×500px), positioned lower-right quadrant, with a slow CSS `rotate` animation (360deg over 60s, ease-in-out alternate, infinite) and a `filter: blur(2px)` to soften edges. Parallax at 0.3× on scroll. - **Grid blob:** Medium (340×280px), tucked behind the third project card row, partially clipped by the section edge. Static, no animation. Acts as a warm temperature reference, preventing the grid from feeling cold. - **Contact blob:** Small (200×160px), bottom-left, with a very slow opacity pulse (0.4 → 0.6, 8s ease-in-out infinite) — the only hint of life in the otherwise still footer. **Futuristic detail motifs (slate horizon lines):** - A `1px` horizontal rule in `#3D4F5C` with `opacity: 0.25` appears above section headings, extending full-width from the left edge of the heading to 40px right of the last letter. It draws in via `scaleX` from 0 to 1 (origin: left) on scroll entry — 0.6s ease-out. - Project card metadata (year, role, stack tags) uses a monospaced subset of the futuristic feel: tags styled as `font-family: 'DM Mono', monospace` (Google Fonts) at 11px, uppercase, letter-spacing 0.12em, in `#3D4F5C` on `#E8C4A0` background — tiny chips that read like firmware version numbers. - The sticky nav bar has a `1px` bottom border in `#3D4F5C` at 15% opacity — barely visible but reinforcing the horizontal line motif. **No photography, no illustration.** All visual interest comes from type scale, blob placement, and the warm palette itself. Project thumbnails are pure color swatches or CSS-drawn geometric compositions using palette colors only. ## Prompts for Implementation **HTML/CSS/JS specifics:** 1. **Counter animation:** Use `IntersectionObserver` to trigger when `.stats-strip` enters viewport. Each counter increments from 0 to its target value using `requestAnimationFrame` with an ease-out curve (`Math.ceil(target * (1 - Math.pow(1 - progress, 3)))`). Duration: 1800ms. Numbers display in Cormorant Garamond Italic 96px, color `#3D4F5C`, with a DM Sans 13px label below in `#7A6C60`. 2. **Card hover:** `transform: translateY(-4px)` + `box-shadow: 0 16px 40px rgba(44,37,32,0.10)` on `.project-card:hover`. The left accent bar is a `::before` pseudo-element: `width: 3px; background: #C9753A; transform: scaleY(0); transform-origin: top; transition: transform 0.3s ease`. On hover: `transform: scaleY(1)`. 3. **Blob placement:** Each blob is an inline SVG in a `position: absolute` wrapper with `pointer-events: none; z-index: 0`. The hero blob has `animation: blobRotate 60s ease-in-out infinite alternate` with `@keyframes blobRotate { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }`. 4. **Section line motif:** `.section-rule` is a `` absolutely positioned to the left of each `h2`. On scroll entry via IntersectionObserver: add class `.is-visible` which transitions `transform: scaleX(1)` from `scaleX(0)` over 600ms. 5. **Grain overlay:** A `
` fixed, full-viewport, `pointer-events: none; z-index: 100; background-image: url('noise.svg'); opacity: 0.03; mix-blend-mode: multiply`. The SVG noise is a 200×200 turbulence filter output, base64-inlined. 6. **Font loading:** Google Fonts import for Cormorant Garamond (weights 300, 400, 500, 600 italic), DM Sans (weights 300, 400, 500), DM Mono (weight 400). Use `display=swap`. 7. **Mobile:** Below 768px, the grid becomes a single column. Cards full-width. Counter strip stacks vertically, each counter centered. Bottom nav bar: `position: fixed; bottom: 0; left: 0; right: 0; background: #F4EFE8; border-top: 1px solid rgba(61,79,92,0.15)`. 8. **Storytelling scroll:** The hero section does not immediately show all text. The discipline label fades in 400ms after the name, followed by the nav links sliding in from above after 700ms. This small sequencing creates a sense of reveal rather than page-load dump. **AVOID:** Pricing blocks, CTA-heavy sections, stat grids with icons, full-bleed hero photography, dark mode toggle, modal overlays, infinite scroll. ## Uniqueness Notes **3 differentiators from other designs in this repository:** 1. **Warm-earthy × futuristic tension is rare here.** Most designs are either fully warm/organic or fully cold/techy. This design holds both: the oat parchment and terracotta are unmistakably warm, but the slate-horizon lines and DM Mono firmware-chip tags introduce futurism as a disciplined secondary language — not a palette takeover. No other current design in this repo uses this specific thermal tension. 2. **Cormorant Garamond for counters, not for body.** Elegant-serif typography is underused (2% frequency), and no existing design uses a high-contrast old-style serif as the *numeric* typeface for animated counters. The visual of large Cormorant Garamond Italic numerals incrementing is distinctly different from the grotesque-sans counters seen in most portfolio sites here. 3. **Blob motifs as pure atmospheric elements, not content frames.** Most organic-blob usage in design systems uses blobs to frame or contain content (as backgrounds for cards, hero shapes, etc.). Here the blobs exist purely in the sub-content z-layer — they are ambient temperature, not structure. Combined with the grain overlay, the page has a physical warmth that is independent of the content grid. **Seed:** aesthetic: muji, layout: portfolio-grid, typography: elegant-serif, palette: warm-earthy, patterns: counter-animate, imagery: organic-blobs, motifs: futuristic, tone: conversational **Avoided patterns (frequency analysis):** high-contrast (19% — actively avoided, palette is low-contrast warm), hand-drawn (60% — not used), editorial (51% — replaced by conversational directness)