# Design Language for chika.review

## Aesthetics and Tone

chika.review (v2) is a **Swiss Ethereal-Blue Kinetic Magazine** -- an approachable-casual, magazine-spread review-journal where Swiss-design typographic discipline (strict grid, Helvetica-feel hierarchy, generous whitespace) is animated through kinetic typography that breathes, drifts, and lightly rearranges itself. Swiss design at rest; kinetic typography in motion. The ethereal-blue palette gives the whole journal a cool, atmospheric calm -- like reading a serious magazine on a slow gray morning when the sea-mist hasn't burned off yet.

The tone is **approachable-casual** -- this is a thoughtful reviewer's notebook, not a stiff academic journal. Swiss discipline is held lightly; kinetic motion gives the typography life. Vintage motifs (a small antique compass-rose, a printer's mark, a leather-bound book spine) drift in the margins as ambient memory.

## Layout Motifs and Structure

The composition is **magazine-spread** -- two-page editorial spreads with Swiss-grid discipline. Each spread has a 12-column grid: typically a 7-column main column + 5-column sidebar, or three columns of 4. Pages flow vertically (the user scrolls between spreads), with each spread's content held in disciplined hierarchy.

**Macro structure:**
- **Cover (Section 0, ~100vh):** A wide ethereal-blue gradient ground. At the upper-left of the grid: title "CHIKA // REVIEW" in oversized kinetic-animated type. At the upper-right: issue meta ("ISSUE 47 // SPRING"). A horizontal hairline rule across the page. Below the rule, the lead headline "Notes on patient noticing." A single small vintage motif (a printer's compass-rose) sits in the lower-right corner.
- **Contents Spread (Section 1):** A two-column contents listing reviews in this issue:
  - "The Sea-Mist at Six AM"
  - "Yamamoto's New Book"
  - "A Lecture I Attended"
  - "An Old Photograph"
  - "Things I Have Carried"
  Each entry has a small kinetic-animated number-prefix (the number subtly flexes its weight axis on a 6s loop).
- **Reviews 01-05 (Sections 2-6):** Five magazine-spread reviews. Each follows the same Swiss editorial structure:
  - Spread title (kinetic-animated, oversized)
  - Sub-title and byline
  - 5-7 columns of body text
  - One minimal accent (a single small vintage ornament, a horizontal rule, a kinetic pull-quote)
  - A "marginalia" sidebar with related notes
- **The Photograph (Section 7):** A single-page spread dedicated to "An Old Photograph" -- the only image in the entire site, but it is described, not shown (a written description fills the place where a photograph would be). This is a deliberate Swiss-restraint joke about minimalism.
- **Editor's Note (Section 8):** A short closing spread with the editor's name in italic kinetic type and a small note in body type.
- **Colophon (Section 9):** Imprint info in Swiss typographic hierarchy. A small vintage printer's mark.

The parallax pattern is the dominant interaction motion: each spread has subtle parallax depth between layers (title parallaxes slightly differently from body text, marginalia from main column). Kinetic typography enhances the parallax with axis-based motion -- as the user scrolls, certain titles subtly stretch or compress their width-axis based on scroll velocity.

## Typography and Palette

**Fonts (all Google Fonts):**
- **Display headlines (kinetic):** "Inter" variable axis (weight 100-900, width 75-125, optical-size 14-32) -- the kinetic-animated mandate. Used at clamp(48px, 7vw, 132px) for spread titles. The font axes animate ambient:
  - Weight axis breathes 400-600 on a slow 8s sine loop
  - Width axis subtly responds to scroll-velocity (75 when slow, 110 when fast)
  - Optical-size adjusts to viewport width
- **Static Inter for hierarchy:** "Inter" weight 600 (frozen, no animation) for sub-titles at clamp(20px, 2vw, 32px). Weight 500 for bylines.
- **Sub-labels / issue meta:** "Inter" weight 500 small-caps at 11-13px, tracking 0.16em uppercase, used for issue numbers, dateline, section labels.
- **Body text:** "Source Serif Pro" weight 400 at clamp(16px, 1.2vw, 19px), line-height 1.78. The serif body contrasts the geometric Inter -- a classic Swiss typographic pairing (sans display, serif body). Italic Source Serif Pro for pull-quotes and marginalia.

**Palette (ethereal-blue mandate):**
- **#E8F0F2** Sea-Mist Pearl (page ground, primary surface)
- **#D2E2E8** Morning Blue (secondary surface, sidebar tint)
- **#A8BCC4** Tidal Gray-Blue (mid-tone accent, hairline rules)
- **#6A8090** Slate Blue (sub-label type, secondary text)
- **#2A3A48** Deep Slate (primary type ink)
- **#0F1A24** Ink Black (deepest type ink, used sparingly)
- **#C8D8D2** Sage-Mist (rare warm accent, vintage ornament fills)
- **#F4F8F6** Almost-White (lightest surface, hairline-thin highlights)

The palette is restrained ethereal-blues with a single sage-mist warm tone. No saturations; everything is misted.

## Imagery and Motifs

**Core visual motifs:**

- **Minimal (imagery mandate):** True to Swiss discipline, the design is nearly imageless. The only "imagery" is:
  - A tiny vintage compass-rose SVG on the cover (drawn in tidal-gray-blue stroke, 12% opacity)
  - A small vintage printer's mark in the colophon
  - "An Old Photograph" (Section 7) -- a deliberately-absent photograph, replaced by its written description
  - Section dividers are single 1px hairline rules
  - Marginalia have small italic Source Serif citations only
  No photographs, no illustrations, no decorative imagery -- this is Swiss restraint at its limit.
- **Vintage (motif mandate):** Small vintage motifs drift through the page at very low opacity (10-15%):
  - A compass-rose on the cover
  - A small ribbon-banner illustration on Section 2
  - A leather-bound book spine in the margins of Section 3
  - A printer's mark (an anchor) in Section 5
  - An old-fashioned pen-nib in the editor's note
  - The colophon printer's mark
  Each vintage motif is drawn in a single-line SVG path, in tidal-gray-blue or sage-mist, with a slight subtle drift animation (each motif oscillates 2-3px on its own 8-14s loop).
- **Kinetic typographic motion:** Spread titles have ambient kinetic motion:
  - Continuous slow weight-axis breathing (400-600 on 8s sine)
  - Width-axis response to scroll-velocity
  - On hover, an additional brief width-axis stretch (75 to 110 over 240ms)
  - On click of an issue-meta link, a brief slant-axis rotation (0 to 6deg italic)
- **Hairline rules:** Section dividers and grid-anchor lines are 0.5px tidal-gray-blue, sometimes with a small dot marker at one end (a Swiss-design typographic convention).
- **Magazine-margin notes:** Marginalia sit in the right sidebar of each spread, set in italic Source Serif at 12px. Each marginal note has a small kinetic-flag (a single character that subtly animates its weight axis to mark the note).

## Prompts for Implementation

**Opening:** Page loads on sea-mist pearl. The kinetic title "CHIKA // REVIEW" reveals letter-by-letter with each letter's weight axis starting at 100 and animating to 500 over 600ms (during the reveal). After all letters settle, the ambient weight-breathing loop begins. The issue meta "ISSUE 47 // SPRING" fades in at the upper-right. The hairline rule below the title draws via stroke-dashoffset (1.0s). The lead headline reveals in word-by-word. The vintage compass-rose in the lower-right fades in last and begins its slow drift loop.

**Scroll narrative:** As the user scrolls into each spread:
- The spread title fades in with its kinetic weight-breathing already active
- The sub-title fades in below
- The body text columns reveal line-by-line (60ms stagger)
- The marginalia in the sidebar fade in (slower, 150ms stagger -- emphasizing the spread's primary column first)
- Vintage ornament for that spread drifts in at low opacity
- Parallax depth between layers becomes evident as the user continues scrolling

**Kinetic axis response:** As the user scrolls:
- Scroll velocity is measured (px/sec, smoothed over 240ms)
- The width-axis of currently-visible spread titles responds: width 75 at 0 px/sec, width 110 at 1000+ px/sec
- The transition is smoothed over 200ms so changes feel ambient
- On still pause, axes return to their breathing-loop defaults

**Magazine-spread parallax:** Each spread has subtle vertical parallax between elements:
- Spread title parallaxes at 0.9x scroll speed (slightly slower than the page)
- Body text parallaxes at 1.0x (with the page)
- Marginalia parallaxes at 1.05x (slightly faster)
- Vintage ornaments parallax at 0.5x (much slower)
The max drift between layers is 24px, ensuring readability.

**Hover interactions:**
- Hovering a spread title: brief width-axis stretch (240ms)
- Hovering a link or emphasis-word: subtle weight-axis bump on the link itself
- Hovering a marginal note: the note's kinetic-flag character animates more vigorously

**The Photograph spread:** Section 7 is a deliberate Swiss-restraint joke. Where a photograph "should be," there is empty space (3 columns wide × 12 grid units tall). Above the empty space: "Plate I // The Photograph." Inside the empty space: a single small line of italic Source Serif: "(an old photograph; the description is below)." Below: a long written description, in proper magazine-spread editorial style, of what the photograph depicts -- the user "reads" the photograph rather than seeing it. The empty space has a thin hairline rule outlining it.

**Editor's Note:** The editor's signature is kinetic-italic (slant-axis 8deg) Inter, with a brief animation of the slant returning to 0 then back to 8deg on hover. A small vintage pen-nib SVG drifts beside it.

**Closing:** The colophon prints in disciplined Swiss hierarchy. A small final vintage printer's mark (an anchor) drifts at the very bottom.

**Avoid:** No CTA-heavy layouts. No pricing (this is editorial). No newsletter modal (the closest is a small mailto link in the colophon styled as a magazine-correspondence line). No stat-grid. No photographs (the absence is the point).

## Uniqueness Notes

**Differentiators from other designs:**

1. **Swiss aesthetic with kinetic typography ambient motion:** Swiss design is famously static; this design holds Swiss discipline while letting variable-axis typography breathe ambient. Swiss aesthetic is 4% in the batch; kinetic-animated typography is 3%.

2. **Magazine-spread layout as full editorial structure:** Cover, contents, reviews, photograph-spread, editor's note, colophon -- a complete magazine architecture. Magazine-spread is 4% in the batch.

3. **Minimal imagery treated as Swiss limit-test:** Almost no imagery; one absent-photograph that is described instead of shown; vintage ornaments at 12% opacity. Minimal imagery is 35% in the batch but rarely with such literal restraint.

4. **Ethereal-blue palette as misted morning atmosphere:** The whole palette is sea-mist and slate-blue with one sage warm accent. Ethereal-blue is 1% in the batch.

5. **Width-axis typography responding to scroll velocity:** Currently-visible spread titles subtly stretch wider when the user scrolls fast, narrowing when scrolling slow -- a kinetic-typography behavior tied to reading-pace. Variable-fluid typography is 1% in the batch and rarely with explicit velocity-response.

Chosen seed: aesthetic: swiss, layout: magazine-spread, typography: kinetic-animated, palette: ethereal-blue, patterns: parallax, imagery: minimal, motifs: vintage, tone: approachable-casual

**Avoided patterns from frequency analysis:** No generic-parallax-as-default (96% -- parallax is held to subtle 24px max, deliberate Swiss restraint), no centered/card-grid (96%/93%), no warm gradient (95%/78%), no mono (81%), no mysterious-moody (71%), no photography-fill (91% -- imagery is minimal). Used: magazine-spread (4%), swiss (4%), kinetic-animated (3%), ethereal-blue (1%), minimal imagery (35% with distinctive Swiss limit), vintage motifs (15% with restraint), approachable-casual (3%).