# Design Language for namu.style

## Aesthetics and Tone

namu.style is a high-fashion editorial universe that channels the opulence of a nineteenth-century private library colliding with a brutalist architecture manifesto. The mood is deliberately imperious — rich jewel-toned rooms where knowledge and beauty are indistinguishable, where the act of scrolling feels like turning illuminated manuscript pages. Every surface has weight and consequence. This is not minimalism; it is maximalism in service of meaning — ink pressed hard into expensive paper, gold leaf on dark stone, the smell of old books in a room with very good lighting.

The brutalist aesthetic here is not the concrete-slab variety but the intellectual kind: raw exposure of structure, refusal of ornament for ornament's sake, confidence in typographic hierarchy as the sole visual logic. Serif type is set at sizes that demand attention. Borders animate like breathing organisms. Lens flares ignite against deep jewel backgrounds — sapphire, garnet, emerald — as if captured mid-revelation.

Tone is opulent-grand: scholarly authority delivered with the quiet certainty of someone who has read everything twice.

## Layout Motifs and Structure

The layout is a single immersive-scroll column, but each section behaves as its own full-screen chapter. Think of the page as a codex: each panel is a spread, each spread a statement.

- **Hero chapter**: Full-viewport with oversized serif headline anchored bottom-left, a faint animating border (hairline, jewel-toned glow) tracing the frame, and a lens-flare burst fixed at upper-right as a luminous punctuation mark.
- **Content chapters**: Alternating asymmetric composition — wide text column with a narrow side-gutter housing floating marginalia in a lighter weight of the same typeface. The gutter notes echo, annotate, and provoke the main text.
- **Interstitial dividers**: Full-bleed color panels in a single jewel tone — deep garnet (#6B0F1A), sapphire (#0B2D5E), or forest emerald (#0B3B2E) — carrying a single large quote or chapter numeral in reversed type. These function as breath between chapters.
- **Closing chapter**: The page resolves into a dense typographic grid — names, references, a bibliography aesthetic — like the endnotes of a monograph.

Navigation is minimal: a thin vertical rule on the left edge with small Roman numerals marking chapters. No hamburger menus. No sticky headers breaking the manuscript immersion.

## Typography and Palette

**Primary Typeface:** Cormorant Garamond — used for all display, headline, and body text. Set at 72–120px for hero headings, 18–22px for body. Optical size variants leveraged for display vs. text grades. Tracking tightened at large sizes (-0.02em), loosened at small sizes (+0.04em).

**Secondary Typeface:** IM Fell English — deployed exclusively for marginalia, pull quotes, and interstitial chapter marks. Its irregular baseline and ink-trap character evokes letterpress printing.

**Accent Typeface:** Space Grotesk — used sparingly for metadata, timestamps, small navigation labels. Creates deliberate tension against the classical serifs.

**Palette:**

| Role | Name | Hex |
|---|---|---|
| Deep Ground | Midnight Ink | #0D0B0F |
| Primary Jewel | Sapphire | #0B2D5E |
| Secondary Jewel | Garnet | #6B0F1A |
| Tertiary Jewel | Emerald | #0B3B2E |
| Accent Jewel | Topaz Gold | #C49A2B |
| Warm Parchment | Vellum | #F2EBD9 |
| Flare Light | Lens White | #FDFAF4 |
| Border Glow | Aquamarine | #1D7A8C |

Background shifts across chapters: from Midnight Ink (#0D0B0F) in the hero, through Sapphire and Garnet interstitials, resolving to Vellum (#F2EBD9) for the bibliography chapter — a journey from dark revelation to warm accumulation.

## Imagery and Motifs

**Lens Flare System:** Not a filter applied to photographs but constructed lens flares built in CSS/SVG — starburst rings, chromatic aberration halos, and anamorphic streak elements. One major flare lives in the hero (upper-right quadrant), additional minor flares appear as section transitions, triggered on scroll entry. Flares are colorized in Topaz Gold (#C49A2B) and Aquamarine (#1D7A8C) to feel jewel-like rather than photographic.

**Animating Border Framework:** Each chapter panel has a hairline border (1px) that draws itself on viewport entry using SVG stroke-dasharray animation. The border color cycles: sapphire glow (#1D7A8C transparency gradient), garnet glow, emerald glow. On hover over the panel, the border brightens and increases to 2px. Animation duration: 1.8 seconds, ease-in-out. This is the signature motif — every bounded space is alive.

**Book-Scholarly Motifs:** Decorative drop capitals (versal letters) at the start of each chapter in Cormorant Garamond Display at 6–8 lines tall, colored in Topaz Gold. Footnote-style superscript numbers that, when hovered, reveal marginalia in a small floating layer. An illustrated compass-rose flourish (SVG, fine line) appears as the section separator between interstitials and content chapters. Chapter numbers rendered as Roman numerals in large reversed type on interstitial panels.

**No photography.** All visual richness comes from typography, color, borders, and constructed light effects. If background texture is needed, a very subtle grain overlay (2–4% opacity SVG noise filter) on deep panels evokes aged paper without kitsch.

## Prompts for Implementation

**Hero Panel:**
- Full viewport height, background #0D0B0F
- Animated border traces the entire panel perimeter using SVG `stroke-dasharray`/`stroke-dashoffset`, color #1D7A8C, duration 2.4s on load
- Headline: "namu" in Cormorant Garamond Display 900 weight, ~120px, color #F2EBD9, positioned bottom-left with padding 8vw
- Subhead in IM Fell English italic, 22px, color #C49A2B, below headline, slight delay entrance
- Lens flare burst at top-right: SVG starburst with 8 arms, inner glow #FDFAF4, outer rings in #C49A2B and #1D7A8C, subtle CSS keyframe pulse (scale 0.97–1.03, opacity 0.85–1.0, 3s infinite)
- Scroll indicator: single thin vertical line animated downward, #C49A2B, bottom-center

**Content Chapters:**
- 80vw max-width content column, offset 10vw from left
- 18vw right gutter for marginalia (position: sticky top 30vh on wide screens)
- Marginalia text: IM Fell English 14px, #C49A2B, italic
- Drop capital on first paragraph: Cormorant Garamond Display, 8 lines tall, float left, color #C49A2B
- Body text: Cormorant Garamond 19px, #F2EBD9 on dark panels, #0D0B0F on light panels, line-height 1.75
- Panel border: animates in on IntersectionObserver entry, 1.8s, hairline SVG around full panel

**Interstitial Dividers:**
- Full viewport height, alternating: #6B0F1A → #0B2D5E → #0B3B2E
- Central content: Roman numeral chapter mark in Cormorant Garamond 400 weight, 200px, reversed color (#F2EBD9 or #C49A2B)
- Single epigraph line in IM Fell English italic below, 26px
- Grain texture: SVG `feTurbulence` filter overlay at 3% opacity
- Border animation same system, but glows in complementary jewel color

**Lens Flare Construction (CSS/SVG):**
```css
.lens-flare {
  position: absolute;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #FDFAF4 0%, #C49A2B 20%, transparent 60%);
  box-shadow: 0 0 80px 20px rgba(196,154,43,0.4), 0 0 160px 40px rgba(29,122,140,0.2);
  animation: flare-pulse 3s ease-in-out infinite;
}
@keyframes flare-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}
```

**Border Animation System:**
```css
.chapter-border {
  stroke: #1D7A8C;
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 1.8s ease-in-out;
}
.chapter-border.visible {
  stroke-dashoffset: 0;
}
```

**Bibliography Chapter:**
- Background: #F2EBD9 (Vellum)
- Dense typographic grid: 3-column layout of names/references, Space Grotesk 12px, #0D0B0F
- A large Cormorant Garamond italic "—" em dash decorates the column gutter
- Superscript footnote numbers resolve here into full citations

**Animation Philosophy:**
- No parallax on text (legibility above all)
- Parallax permitted only on lens flares and background color layers
- All chapter entries: fade-up 40px, opacity 0 → 1, duration 0.9s, staggered children 0.1s delay
- JS: IntersectionObserver threshold 0.15 for all animated elements
- Scroll behavior: CSS `scroll-snap-type: y mandatory` on the scroll container, each chapter is a snap target — creates the codex page-turn sensation

## Uniqueness Notes

**Differentiators:**

1. **Constructed lens flares as narrative punctuation** — instead of decorative photography, CSS/SVG lens flares serve as chapter-marking luminous events, built without any image assets.

2. **Animating border as the primary identity system** — the hairline border that draws itself around each panel IS the design identity, not a logo or color alone. The border's lifecycle (invisible → drawn → glowing → hover-bright) mirrors reading itself.

3. **Marginalia as interactive architecture** — the right gutter is not whitespace but active: sticky marginalia in IM Fell English annotate body text like a scholar's pencil in the page margin, creating a two-voice reading experience.

4. **Jewel-tone chapter progression** — the page does not stay one color; it travels through a curated sequence of deep jewel tones (ink → sapphire → garnet → emerald → vellum), making the scroll feel like traversal through a treasure cabinet.

5. **Bibliography as closing chapter** — the page ends not with a CTA or footer but with a dense reference grid, reinforcing the scholarly-grand tone and rewarding readers who reach the end with a sense of intellectual completion.

**Chosen Seed:** aesthetic: brutalist, layout: immersive-scroll, typography: serif-classic, palette: jewel-tones, patterns: border-animate, imagery: lens-flare, motifs: book-scholarly, tone: opulent-grand

**Avoided Patterns (from frequency analysis):**
- `brutalist` used as aesthetic base but combined uniquely with serif-classic typography and jewel tones — avoiding the typical stark-white/black brutalist cliché (6% overused)
- No art-deco ornament system (6% overused) — using scholarly-book motifs instead
- No ethereal/soft treatment (6% overused) — jewel tones are saturated and deliberate
- No mid-century modern furniture aesthetics (6% overused)
- Marginalia system replaces typical card-grid or stat-grid patterns
- No CTA blocks, pricing tables, or conversion-oriented layout elements
<!-- DESIGN STAMP
  timestamp: 2026-05-09T13:41:55
  seed: seed:
  aesthetic: namu.style is a high-fashion editorial universe that channels the opulence of a ...
  content_hash: 9da85d92a7dc
-->