# Design Language for koomimi.com
## Aesthetics and Tone
koomimi.com channels the atmosphere of a forgotten listening booth in a 1970s Akihabara record shop -- the kind of narrow, wood-paneled alcove where you pressed oversized padded headphones against your ears and the outside world dissolved into the warm crackle of vinyl. The name itself, "koomimi" (a playful derivation evoking "good ears" in Japanese), demands a design that is fundamentally about the intimate act of listening, of leaning in, of catching something faint and precious before it fades.
The retro aesthetic here is not the polished mid-century revival of Scandinavian furniture catalogs, nor the ironic neon-and-chrome nostalgia of vaporwave. This is the retro of yellowed instruction manuals, of hand-lettered tape labels, of the particular shade of brown that cassette tape ribbon turns after decades in a shoebox. It is the retro of analog warmth -- the visual equivalent of tape hiss, of a signal that has been copied and recopied until it carries the ghost of every previous generation in its grain.
The tone is nostalgic-retro in the truest sense: not a performance of nostalgia for an audience, but a genuine, private remembrance. The kind of nostalgia that catches you off guard when you smell old paper or hear a half-remembered melody through a wall. There is melancholy here, but also tenderness. The site should feel like holding a photograph you forgot you had -- slightly creased, slightly faded, but more real for its imperfections. There is no salesmanship, no urgency, no modern call-to-action energy. Just the quiet authority of something that has endured.
## Layout Motifs and Structure
The layout employs a **modular-blocks** architecture inspired by the physical arrangement of audio equipment on a hobbyist's wooden shelf -- components of varying sizes placed with deliberate but not obsessive care, each block a self-contained unit that relates to its neighbors through proximity and shared material rather than rigid alignment.
**Block System:**
The viewport is divided into a loose 12-column grid with generous 24px gutters, but content blocks deliberately break this grid. Blocks come in three physical metaphors:
1. **Cassette Blocks** (roughly 3:2 ratio, 4-6 columns wide): The primary content containers. These have visible borders rendered as double-line strokes (2px outer, 1px inner with 2px gap) in faded brown (#8B7355), mimicking the embossed edges of plastic cassette cases. Content sits inside with 32px padding. The background is a slightly lighter shade than the page (#F5ECD7 on #EDE0C8), creating a subtle lifted appearance without shadows.
2. **Sleeve Blocks** (tall and narrow, 3-4 columns wide, aspect ratio approximately 5:3): These contain longer-form text or vertical imagery. They reference vinyl record sleeves stood upright on a shelf. A thin 1px border on three sides (left, top, right) with an open bottom edge suggests something you could slide content out of.
3. **Label Blocks** (small, 2-3 columns wide, squat rectangles): Used for metadata, dates, categories, or short annotations. These have rounded corners (8px) and a background of #D4C4A0 with text in #4A3C2A, mimicking the adhesive labels stuck onto tape cases. A subtle CSS rotation of 0.3-0.8 degrees (randomized per instance via a CSS custom property) makes each label feel hand-placed.
**Spatial Relationships:**
Blocks are arranged in staggered rows with intentional vertical offsets -- the second block in a row sits 16-40px lower than the first, the third might align with the first or sit higher. This stagger creates the visual rhythm of objects placed on a shelf by hand rather than machine. Vertical spacing between block rows is generous (80-120px), allowing the aged-paper background to breathe and establishing a pace that discourages skimming.
**No Global Navigation Bar.** Instead, a small "label block" in the upper-left corner contains the site name in Playfair Display, and navigation (if any) is embedded within the content blocks themselves as inline text links styled to look like handwritten margin notes. The entire experience is a single continuous vertical scroll.
## Typography and Palette
**Typography:**
- **Display / Headlines:** "Playfair Display" (Google Fonts) -- the regular weight (400) at sizes 2.8rem to 5rem. Playfair's transitional serif design, with its high stroke contrast and slightly old-style proportions, evokes the typographic sensibility of mid-20th century book jackets and record sleeve credits. All headlines are set in **sentence case** with `letter-spacing: 0.02em` and `line-height: 1.15`. The italic variant is reserved exclusively for proper nouns and titles within body text, creating a distinction that mirrors how album titles were traditionally italicized on liner notes.
- **Body / Reading Text:** "Source Serif 4" (Google Fonts) -- weight 300 (Light) at 1.05rem with `line-height: 1.72` and `letter-spacing: 0.01em`. This generous line-height and the light weight create an airy, unhurried reading rhythm. Source Serif 4's design draws from the Transitional tradition (Baskerville lineage) but with optical adjustments for screen rendering that prevent the hairline strokes from disappearing at small sizes. Paragraph spacing is 1.5em, reinforcing the leisurely pace.
- **Annotations / Labels / Metadata:** "Caveat" (Google Fonts) -- weight 400 at 0.9rem. Caveat is a genuine handwriting typeface (not a formal script) that carries the casual imprecision of someone jotting notes on a tape insert with a ballpoint pen. Used sparingly: only for labels, dates, marginalia, and navigational hints. Never for body text. Its organic baseline wobble contrasts beautifully with the structured precision of Playfair and Source Serif.
**Palette:**
The palette is built entirely from the sepia-nostalgic family, derived from the actual color science of aged paper, oxidized magnetic tape, and faded dye-sublimation prints.
| Role | Color | Hex | Reference |
|------|-------|-----|-----------|
| Page Background | Aged Vellum | `#EDE0C8` | Color of 1960s paperback pages exposed to 50 years of UV |
| Block Background | Warm Parchment | `#F5ECD7` | Inside of a well-kept cassette case |
| Primary Text | Ink Oxide | `#3B2F20` | Deeply oxidized sepia ink, warmer than black |
| Secondary Text | Faded Print | `#6B5A42` | Text on a sun-exposed album sleeve |
| Accent (warm) | Ferric Oxide | `#A0522D` | The actual color of iron oxide on magnetic tape |
| Accent (cool) | Tarnished Brass | `#8B7355` | Patinated brass hardware on vintage equipment |
| Highlight | Amber Varnish | `#C9A84C` | Aged shellac varnish on wood surfaces |
| Deep Ground | Walnut Shadow | `#2C2118` | The dark interior of a wooden speaker cabinet |
No pure whites or pure blacks exist anywhere in the design. The darkest value is Walnut Shadow (#2C2118); the lightest is Warm Parchment (#F5ECD7). This compressed dynamic range is essential to the nostalgic-retro tone -- it replicates the way aged materials lose their extremes, converging toward a warm middle.
## Imagery and Motifs
**Paper-Aged Texture as Living Surface:**
The defining visual element is a paper-aged texture treatment applied not as a static background image but as a dynamic, layered system that gives the entire site the materiality of a physical artifact.
Implementation layers (bottom to top):
1. **Base Grain:** A CSS-generated noise pattern using `background-image: url("data:image/svg+xml,...")` with a fine-grain SVG noise at 3% opacity in #8B7355, tiled at 200x200px. This provides the fundamental paper tooth.
2. **Foxing Spots:** Scattered circular radial gradients (15-40px diameter) in `rgba(139, 115, 85, 0.06)` positioned via CSS custom properties at seemingly random coordinates across the page. These simulate the foxing (age spots) that appear on old paper from fungal oxidation. Approximately 8-12 per viewport height, varying in size and opacity.
3. **Edge Darkening:** A full-viewport `box-shadow: inset 0 0 150px rgba(44, 33, 24, 0.15)` on the body element, creating a vignette effect that simulates the darkened edges of aged paper where handling and light exposure were greatest.
4. **Fold Lines:** Thin (1px) horizontal lines at irregular intervals using `linear-gradient` backgrounds in `rgba(107, 90, 66, 0.08)`, suggesting creases where the paper was folded. These appear every 600-900px of vertical scroll distance and extend across 60-80% of the viewport width, slightly off-center.
**Vintage Audio Motifs:**
Rather than generic "vintage" decoration, the motifs are specifically drawn from the visual vocabulary of analog audio equipment from the 1965-1985 era:
- **Reel Spindles:** Decorative SVG elements resembling the hub of a tape reel, rendered as concentric circles with alternating strokes in #8B7355 and #C9A84C. These appear as section dividers between major content blocks, spinning slowly (one rotation per 30 seconds) via CSS animation.
- **VU Meter Arcs:** Semi-circular arc indicators used as decorative headers above content blocks, drawn as SVG paths with graduated tick marks. The needle rests at different positions per block (set via `--vu-level` custom property), suggesting different "volumes" or intensities of content. Rendered in Ferric Oxide (#A0522D) with Amber Varnish (#C9A84C) for the "hot" zone.
- **Tape Ribbon Borders:** Certain blocks feature a top or bottom border that mimics the appearance of exposed magnetic tape -- a 4px stripe in a linear gradient from #3B2F20 through #5C4033 to #3B2F20, with a subtle 1px highlight line of #8B7355 along the top edge.
- **Waveform Dividers:** Horizontal section dividers rendered as SVG sine waves with irregular amplitude modulation, drawn in a single 1px stroke of #A0522D at 40% opacity. These suggest the visual representation of audio waveforms and replace conventional `
` elements throughout the site.
## Prompts for Implementation
**Full-Screen Narrative Entry:**
The site opens to a full-viewport composition in Aged Vellum (#EDE0C8) with the paper texture system fully active. The domain name "koomimi.com" appears at 4rem in Playfair Display Regular, positioned at 40% from the top and left-aligned at a 10% left margin. Below it, a subtitle in Caveat at 1.1rem reads something evocative (e.g., "listening, carefully" or "sounds you almost forgot") in Faded Print (#6B5A42). A single reel spindle SVG, 120px diameter, sits at 70% from the left and 50% from the top, rotating at one revolution per 30 seconds. Nothing else. No scroll indicator, no navigation, no CTA. The emptiness is the invitation.
**Scroll-Driven Pulse Reveals:**
As the user scrolls past the opening viewport, content blocks emerge using **pulse-attention** animations rather than the ubiquitous fade-in or slide-in. Each block begins at `opacity: 0` and `scale: 0.97`. When triggered (at 15% viewport intersection), the block executes a two-phase animation:
- Phase 1 (0-200ms): Scale snaps to 1.02 and opacity jumps to 0.85 (the "pulse")
- Phase 2 (200-600ms): Scale eases back to 1.0 and opacity settles to 1.0 with a `cubic-bezier(0.25, 0.46, 0.45, 0.94)` easing
This pulse creates a physical "thump" feeling, like the bass note when a needle drops onto a record. Each successive block in a row is delayed by 120ms, creating a stagger effect that reads as a rhythmic sequence.
**Label Block Micro-Interactions:**
The Caveat-styled Label Blocks respond to hover with a subtle pulse animation: a 150ms scale to 1.03 followed by a 300ms return to 1.0, paired with a color shift of the background from #D4C4A0 to #C9A84C (Amber Varnish). This mimics the satisfying tactile feedback of pressing a button on vintage equipment.
**VU Meter Scroll Response:**
The VU meter arc decorations at the top of content blocks are not static. Their needle position (the `--vu-level` custom property) is updated via a lightweight JavaScript Intersection Observer: as a block enters the viewport from below, the needle animates from the leftmost position to its designated resting point over 800ms with a spring easing (`cubic-bezier(0.175, 0.885, 0.32, 1.275)`), complete with a 2-3 overshoot oscillation that mimics the physical inertia of a real VU meter needle.
**Waveform Generation:**
The audio waveform dividers are generated dynamically in JavaScript. Each `
` element is replaced on load with an inline SVG whose path data is computed from a seeded PRNG (the seed derived from the element's position in the DOM), producing a unique but deterministic waveform for each divider. The waveform amplitude modulates between 4px and 16px with a base frequency that produces 3-5 complete oscillations across the viewport width.
**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hamburger menus, hero images with overlay text, gradient backgrounds, card hover shadows, icon grids, feature comparison tables, modal popups. This is a contemplative space, not a conversion funnel.
**BIAS TOWARD:** Full-screen narrative experiences, single-axis scrolling, generous whitespace (warmspace, rather -- there is no white here), content that rewards slow reading, decorative elements that serve atmospheric rather than informational purposes, animation that feels physical and mechanical rather than digital and elastic.
## Uniqueness Notes
**Differentiators from other designs:**
1. **Analog Audio Visual Language as Structural System:** While other designs in the portfolio use "vintage" motifs (at 80% frequency) in generic, decorative ways -- antique borders, sepia filters, old-timey fonts -- koomimi.com builds its entire structural and interactive vocabulary from a specific subset of vintage culture: analog audio equipment from 1965-1985. VU meters become content headers, tape reels become section dividers, waveforms become horizontal rules, cassette cases become content containers. The vintage motif is not applied as surface decoration but as the fundamental organizational grammar of the site.
2. **Pulse-Attention Animation as Signature Interaction:** At only 6% frequency, pulse-attention is deeply underused in the portfolio. While 96% of designs rely on scroll-triggered fades and 80% use parallax, koomimi.com exclusively uses the pulse-thump pattern for element reveals. This creates a distinctive physical rhythm -- a heartbeat-like cadence -- that is perceptually unique from the smooth, flowing animations that dominate the other designs. The two-phase pulse (snap up, ease back) creates a sense of impact and weight that no other design achieves.
3. **Paper-Aged Texture as Multi-Layer Dynamic System:** While paper-aged imagery appears in 4% of designs, it is always implemented as a single static background texture. koomimi.com deconstructs the aged-paper effect into four distinct layers (base grain, foxing spots, edge darkening, fold lines), each implemented through different CSS techniques and each contributing a specific aspect of material authenticity. The result is a surface that feels genuinely aged rather than filtered, because the aging artifacts behave as they do in reality -- independently, at different scales, with different causes.
4. **Caveat Handwriting as Marginalia System:** No other design uses a true handwriting font (Caveat) as a systematic annotation layer. The three-typeface hierarchy (Playfair Display for structure, Source Serif 4 for reading, Caveat for human traces) creates a palimpsest effect where the site reads as a printed document that someone has written on -- notes in margins, labels stuck onto cases, dates scribbled on spines. This layering of formal and informal typography is absent from all other portfolio designs.
5. **Compressed Dynamic Range as Deliberate Chromatic Choice:** The palette contains no pure white and no pure black, with the full range compressed between #2C2118 and #F5ECD7. This is a conscious replication of how physical materials lose their extremes over time, and it produces a visual softness that is categorically different from the high-contrast palettes used by 43% of portfolio designs and the warm-but-full-range palettes used by 100%. koomimi.com is warm but also muted, achieving atmosphere through restraint rather than saturation.
**Chosen Seed/Style:** aesthetic: retro, layout: modular-blocks, typography: playfair-elegant, palette: sepia-nostalgic, patterns: pulse-attention, imagery: paper-aged, motifs: vintage, tone: nostalgic-retro
**Avoided Overused Patterns:** centered layout (99%), playful aesthetic (95%), friendly tone (97%), minimal imagery (94%), scroll-triggered reveal as sole animation (96%), parallax scrolling (80%), warm-gradient palette (90%), mono typography (99%). Each of these defaults has been deliberately replaced with a lower-frequency alternative from the same category.