# Design Language for showa.boo
## Aesthetics and Tone
showa.boo is named for Japan's Shōwa era (1926–1989) — a period of radical transformation from imperial militarism through economic miracle to bubble-era excess, all experienced through the lens of a culture that simultaneously embraced and resisted modernization. The site treats this tension literally: **japanese-minimal discipline cracked open by sharp-angled modernity**. The aesthetic reads as if a Muji product brief were typeset by a mid-century Japanese graphic designer who had just returned from the 1965 International Typographic Symposium in Brissago, Switzerland, carrying a single suitcase and a notebook filled with asymmetric grid diagrams.
The visual language is cold and precise — midnight blue as a ground color, not a mood. Negative space is loaded, not empty. Every element earns its position through a logic of *ma* (間), the Japanese concept of the charged interval between things. What is not there defines what is. The sharp angles are not aggressive; they are decisive. A cut corner on a card is not decoration — it is a structural decision, like a haiku's final five syllables dropping the temperature of the whole poem.
Tone is **professional without warmth** — the quiet authority of an institution that doesn't need to convince you of its importance. No exclamation marks. No gradients. No stock-photography smiles. The site does its work in compressed type, precise geometry, and the kind of silence that comes from choosing not to say something.
## Layout Motifs and Structure
The page is built on a strict **asymmetric column system** — not the false asymmetry of a card grid with one wide column, but a deliberate violation of expected visual gravity. The primary reading column is off-center, pushed 23% from the left viewport edge, leaving a wide left gutter that is used for a single persistent numeral label (rotated 90° counterclockwise, tracking +0.25em, set at 11px) that names the current section. The right side breathes. The left side annotates.
**Section architecture (single scroll, no separate pages):**
1. **Identity block** — the wordmark *showa.boo* set in Playfair Display at 9vw, no tagline, no subhead. Below it, a single horizontal rule, 1px, `#1e2d5e`, full viewport width minus 48px right margin. Nothing else.
2. **Proposition panel** — left-annotated, a three-line statement set at 2.4rem/1.2 line-height in Playfair Display italic. Right: a geometrically masked abstract shape (CSS clip-path polygon), static, `#243770` fill.
3. **Domain counter panel** — four numerical counters (years, projects, clients, countries), each in Playfair Display bold at 4.5rem. Counters animate upward from zero on scroll-entry, easing out at the target value. Numbers are flanked by hairline rules, not cards. No background, no shadow.
4. **Work panel** — three project entries arranged asymmetrically: first at col 1, second at col 2-3, third at col 1-2. Each entry is text-only (title + type descriptor + year), no thumbnails. Sharp-angled dividers (45° clip-path cut across bottom-right corner) separate entries.
5. **Philosophy strip** — a full-viewport-width strip of `#0a1128` with a single Japanese character (書) in Playfair Display at 30vw, set at 8% opacity as a watermark. Over it: a two-sentence statement in 14px Cormorant Garamond italic, centered, `#b8c5e8`.
6. **Contact footer** — asymmetric, email address left, a sharp-angled line element right. No form, no button, no social icons.
Navigation: none visible. A minimal dot-index (five 4px dots, `#1e2d5e`, in a vertical column at viewport right edge 24px in) marks sections. Active dot is `#8fa3d4`. No labels.
## Typography and Palette
**Typography — playfair-elegant:**
- **Display / Headers:** [Playfair Display](https://fonts.google.com/specimen/Playfair+Display), weights 400 italic and 700. Used for all headings, wordmark, and large counter numerals. Set with `font-variant-numeric: lining-nums tabular-nums` for the counters. Letter-spacing: `-0.02em` at display sizes, normal at body.
- **Body / Captions:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond), weight 300 and 300 italic. Used at 14–16px for prose, project descriptors, and the philosophy strip statement. High-contrast letterforms harmonize with Playfair's ink-trap details.
- **Labels / Annotations:** [Space Mono](https://fonts.google.com/specimen/Space+Mono), weight 400. Used at 10–11px for rotated section labels, year numerals, and the dot-nav (via `content` pseudo-elements). Tracks at +0.15em. Provides functional contrast against the editorial serif pair.
- **No web fonts beyond these three. No variable weight ramps. No kinetic type.**
**Palette — midnight-blue:**
- `#0a1128` — ground black-blue (page background, philosophy strip)
- `#1e2d5e` — midnight-blue primary (rules, borders, annotation labels)
- `#243770` — mid-blue (geometric shape fills, secondary surfaces)
- `#8fa3d4` — pale-blue accent (active states, italic highlights, dot-nav active)
- `#b8c5e8` — mist-blue text (body text on dark backgrounds)
- `#e8edf7` — near-white (primary body text on `#0a1128`, wordmark)
- `#c8a96e` — antique-gold (single accent, used only for counter unit labels and the 45° cut edge highlight)
The palette is **cold, nocturnal, institutional**. No warm tones except the one gold thread. No gradients. No transparency layers. All surfaces are flat. All shadows are absent.
## Imagery and Motifs
**Imagery — abstract-shapes:**
The site uses no photography. No illustrations. No icons in the conventional sense. Imagery is entirely **CSS-generated geometric abstraction** — sharp-angled polygons, clipped rectangles, and single-axis transforms executed in pure CSS `clip-path` and `transform` syntax.
- **Proposition panel shape:** A right trapezoid, `clip-path: polygon(0 0, 100% 0, 100% 78%, 82% 100%, 0 100%)`, filled `#243770`. Width 40vw, height 56vh. Positioned absolute, right edge of its container flush to viewport right. Static — no animation, no hover state.
- **Counter dividers:** Hairline rules (`border-top: 1px solid #1e2d5e`) extending full column width. Above each counter, a 45° clip-cut element: a 24×24px square div with `clip-path: polygon(100% 0, 100% 100%, 0 100%)` filled `#8fa3d4` — used as a corner-accent marker, not as decoration.
- **Work panel dividers:** Each project entry's bottom edge is clipped: `clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%)`. The cut corner is 16px, consistent across all three entries.
- **Philosophy strip character:** The kanji 書 (writing/document) at 30vw, rendered in Playfair Display italic at 8% `color: #8fa3d4`. This is the only "image" in the conventional sense — a single character as atmosphere, not meaning.
- **No SVG files. No PNG. No JPEG. No WebP. No Canvas. No WebGL.**
**Motifs — sharp-angles:**
The sharp-angle motif is structural, not decorative. Every instance of a non-90° angle on the page carries information: a cut corner signals an interactive entry; a trapezoid signals a non-navigable content zone; a 45° hairline-rule accent signals a counter. The angle vocabulary is limited to **45°** — no 30°, no 60°, no organic diagonals. This constraint makes the motif read as systematic rather than styled.
## Prompts for Implementation
Implement showa.boo as a **single continuous scroll page** — six sections, no routing, no JavaScript framework. Vanilla HTML + CSS + minimal vanilla JS (counter animation only).
**Structural guidance:**
- Root CSS custom properties define the full palette: `--ground`, `--midnight`, `--mid-blue`, `--pale-accent`, `--mist-text`, `--near-white`, `--gold-thread`.
- All layout uses CSS Grid. No Flexbox for page structure (use Flexbox only within components). The outer grid is `grid-template-columns: 23fr 77fr` for desktop, collapsing to single column at 768px.
- Section labels: `position: fixed`, left edge, rotated `rotate(-90deg)`, tracking. Update via JS `IntersectionObserver` on section entry — only the label text changes, no scroll-jacking.
- Counter animation: `IntersectionObserver` triggers a `requestAnimationFrame` loop counting from 0 to target over 1400ms with `easeOutQuart` easing. **No scroll-triggered parallax. No stagger. No spring.** The counter is the only animation, and it runs once per session.
- The 45° clip-path cuts are applied via CSS classes `.cut-corner--sm` (16px) and `.cut-corner--lg` (24px). Both use `clip-path: polygon(...)` calculated with CSS `calc()`.
- Typography: load Google Fonts via `` + `` in ``. Subset to Latin + Latin Extended. No `font-display: swap` (flash of unstyled text is unacceptable here — use `font-display: block`).
- Mobile: single column, section labels hidden, dot-nav repositioned to bottom-center as a horizontal row of dots, counter animation unchanged. Typography scales via `clamp()` — Playfair Display at `clamp(2.4rem, 6vw, 5rem)` for display sizes.
- No hero CTA. No pricing block. No testimonial. No stat grid with icons. No sticky header. No hamburger menu. No modal. No cookie banner. No newsletter opt-in.
**Interaction bias:**
The one interaction of consequence is the counter animation — numbers climbing from zero to their targets as the section enters the viewport. This is the site's only kinetic moment. Everything else is static geometry and typography. Do not add hover effects to the project entries. Do not animate the dot-nav. Do not add micro-interactions to the wordmark. The silence is the design.
## Uniqueness Notes
**Overused patterns avoided:**
- parallax (75% of corpus): zero parallax effects on showa.boo
- stagger (50%): no staggered entrance animations
- scroll-triggered (36%): the only scroll trigger is the one-time counter; nothing else responds to scroll position
- warm palette (88%): palette is entirely cold blue spectrum with one gold thread
- gradient (76%): no gradients anywhere — all surfaces are flat solid fills
- photography (86%), minimal imagery (43%): no photography, no image files at all
- mono typography (74%): Space Mono is used only for labels/annotations, not as a primary type system
- vintage motifs (35%): no vintage reference, no aged textures, no retro revival
**Underused patterns prioritized:**
- counter-animate (4%): the primary and only animation on the page
- midnight-blue palette (1%): the entire chromatic foundation
- abstract-shapes imagery (3%): all imagery is CSS-only geometric abstraction
- asymmetric layout (seed vocabulary): primary grid is deliberately off-center
- playfair-elegant typography (3%): Playfair Display drives the editorial voice
- sharp-angles motifs (3%): all cut-corner geometry follows a strict 45° rule
- japanese-minimal aesthetic (2%): *ma* (negative space) as structural principle
**Documented seed:**
aesthetic: japanese-minimal, layout: asymmetric, typography: playfair-elegant, palette: midnight-blue, patterns: counter-animate, imagery: abstract-shapes, motifs: sharp-angles, tone: professional
**Similarity reference:**
No other site in the corpus combines midnight-blue as its primary palette with playfair-elegant typography and CSS-only abstract-shapes imagery. The closest neighbor in the typography dimension is aei.st (baskerville-refined), but that site uses vintage-photography, z-pattern layout, and a warm vellum ground — all inverted on every axis from showa.boo's choices. The japanese-minimal aesthetic appears in the corpus at 2%, but no other site in that category uses sharp-angles as its primary motif system.