# Design Language for talegrapher.com

## Aesthetics and Tone

**talegrapher** is the mapmaker of stories — not a writer, not a reader, but the one who charts narrative territory like a cartographer charts ocean. The domain name fuses *tale* (oral tradition, myth, the campfire story) with *grapher* (one who draws, one who records, one who makes visible). The site exists in the space where ancient storytelling meets a kind of ruthless, technical precision: ink meets algorithm, legend meets coordinate system.

The aesthetic is **japanese-minimal colliding with controlled rebellion**. Think Muji white cards defaced by a marker. Think a Zen garden that someone has raked into jagged diagonals instead of meditative curves. The visual logic borrows from Japanese minimalism — extreme white space, asymmetric negative space, single strong focal objects — but the tone is edgy and confrontational, the kind of minimalism that strips everything away not to calm you but to make you uncomfortable with what remains.

Visual references: the cover design of early Kashiwa Sato identity systems (clean, overwhelming whitespace, one brutal gesture), the compositions of Nagi Noda's visual work (silence punctuated by bizarre intrusion), Japanese fashion brand ISSEY MIYAKE's campaign asymmetry applied to web. The page does not welcome the visitor — it shows them a map and says: *find yourself*.

The palette is **coastal-blend** — not warm ocean, but the cold edge of it. The colors come from the moment a wave has just receded from dark sand: off-white sea-foam, deep charcoal basalt, muted salt-gray, one unexpected jolt of electric blue-green the color of bioluminescent surf. Everything is restrained except that one unignorable accent. It reads as severe until the accent appears, then it reads as knowing.

## Layout Motifs and Structure

The layout is **hero-dominant** — but the hero section is not a conventional hero. It occupies 100vh and refuses to center its content. The composition uses a principle borrowed from Japanese calligraphy: the *ma* (negative space as content). The wordmark `talegrapher` is set in oversized display type at the **far left edge**, nearly bleeding off-screen, vertical baseline, as if it is the Y-axis of a coordinate system. The rest of the hero is empty. Then a single thin horizontal line cuts across at 38.2% from the top (golden ratio minus one), and below that line floats one SVG object — a compass rose made of irregular strokes — at the far right.

**Page structure (top to bottom):**

1. **Hero (100vh):** Vertical wordmark on left. Thin horizontal rule at 38.2%. Floating vector compass rose at right. Background is off-white `#F4F1EC`. No CTA. No headline. Just composition.

2. **Manifesto Strip (full-width, 8px tall, background `#1F2B2E`):** A single sentence running horizontally in small-caps, reversed out in `#C8E8E1`. It scrolls on a ticker loop. Text: `"every story has a shape — talegrapher draws it"`

3. **Feature Grid (3-column, asymmetric):** Left column spans 7/12 width, right column 5/12. The left shows a large vector-art illustration of a "narrative map" — a topographic-style SVG map where contour lines trace the arc of a story (inciting incident = valley, climax = peak, denouement = plateau). Right column holds three feature cards floating at staggered Y-positions — not aligned to baseline grid, offset by -20px, 0px, +28px — in white with `#1F2B2E` border 1px, with sharp drop-shadows in `#1F2B2E`.

4. **Typographic Break:** Full-width black band with one oversized quote in display italic, reversed out: *"You don't tell a story. You map a territory that didn't exist before."* Set at clamp(3.2rem, 7vw, 8.4rem).

5. **CTA Block:** Near-empty composition. Off-white background. One call-to-action phrase in display bold, anchored bottom-left. One button, flat, `#1F2B2E` fill, `#C8E8E1` text, no rounded corners.

6. **Footer:** Minimal, 48px tall. Only domain + year on left, a single navigation list on right. No social icons, no decorative elements.

**Grid system:** 12-column CSS Grid, 24px gutter, but sections use asymmetric column counts (7+5, 4+8, full-bleed) rather than symmetric halves. The grid is invisible — the design asserts spatial relationships without revealing structure.

**Scroll behavior:** Sections enter with **bounce-enter** — each section slides in from 40px below with a cubic-bezier(0.34, 1.56, 0.64, 1.0) spring curve, creating a subtle pop-into-place rather than a linear slide. The hero has no scroll animation. The floating elements in the hero (compass rose, rule line) use a slow vertical drift loop — 6-second sinusoidal float, 8px amplitude — on loop.

## Typography and Palette

**Display: [Syne](https://fonts.google.com/specimen/Syne)** — specifically Syne ExtraBold (weight 800). Used for the vertical wordmark, oversized pull quotes, and section labels. Syne was designed as a graphic arts school typeface with deliberately irregular metrics; its letters feel constructed, not drawn. Tracked at -0.02em for display sizes. Set at clamp(4rem, 9vw, 11rem) for the vertical hero wordmark. This is the rebellious element — Syne reads as both refined and disruptive.

**Body / Secondary: [Noto Sans JP](https://fonts.google.com/specimen/Noto+Sans+JP)** — weight 300 for body, weight 500 for subheadings. The pairing of Syne (designed in France for a contemporary arts school) with Noto Sans JP (designed for maximum cross-cultural readability, with Japanese letterform influence) enforces the dual heritage of the design: Western display energy, East Asian spatial restraint. Body text at 1rem/1.75 line-height, `#1F2B2E`.

**Accent / Feature: [Space Mono](https://fonts.google.com/specimen/Space+Mono)** — weight 400. Used exclusively for metadata: coordinates, timestamps, system labels, the ticker strip. Size 0.75rem, tracked at 0.08em. The monospace grid of Space Mono echoes the mapmaking metaphor — data points on a grid.

**Palette:**

- `#F4F1EC` — Sea foam white. Primary background. The color of bleached driftwood or dry sea salt. Slightly warm, not clinical. Used across all light sections.
- `#1F2B2E` — Basalt near-black. Primary text, borders, the hero manifesto strip. The color of wet volcanic rock at low tide. Not pure black — retains the ocean reference.
- `#C8E8E1` — Bioluminescent blue-green. The one accent. Used only for: ticker strip text, button labels, one SVG stroke on the compass rose, hover states. At max three uses per section. This is the color that makes the otherwise austere page feel alive.
- `#8BA8A4` — Salt-gray. Secondary text, divider rules, card borders at hover state. Desaturated teal — a tide-pool color without drama.
- `#2F4045` — Deep charcoal teal. Used as the full-bleed quote block background (slightly warmer than `#1F2B2E`). Creates depth differentiation between the two dark tones.

## Imagery and Motifs

All imagery is **vector-art** — no photographs, no rasters. The aesthetic demands it: a map is a drawn thing, not a photographed one.

**Primary illustration: The Narrative Map.** An SVG topographic map where contour lines trace the emotional arc of a generic story. Peaks labeled with story-theory terms: `INCITING INCIDENT`, `MIDPOINT`, `CLIMAX`, `RESOLUTION`. The style is spare line-drawing: 1.5px strokes in `#1F2B2E`, occasional `#C8E8E1` highlight strokes for peaks. No fill on contour lines. The map is partially cut off at the right edge, implying it continues beyond the viewport — the story has no clean boundary.

**Hero motif: Compass Rose.** A deconstructed compass rose — the cardinal directions are drawn in full (N/S/E/W arms), but the intercardinal directions are barely suggested, half-finished strokes. It floats in the hero at 20% viewport width, right-side. The imperfection is intentional: a talegrapher's tool is never quite calibrated. Stroke weight 1px, color `#1F2B2E` for cardinal arms, `#8BA8A4` for the faint intercardinals.

**Floating elements:** Three geometric SVG fragments orbit the hero in a continuous slow drift — a coordinate axis fragment (two short perpendicular lines with arrow tips), a distance-marker strip (a ruled segment with hash marks), and a small legend key frame (an empty rectangle with the label `LEGEND` in 8px Space Mono). These float independently with slightly different periods (6s, 7.3s, 8.8s) and amplitudes (8px, 12px, 6px), creating a layered parallax of cartographic detritus.

**Decorative motifs across sections:**
- Thin 0.5px rules used as section separators, but always offset 10–18% from full width — never edge-to-edge.
- Coordinate notation in `#8BA8A4` Space Mono appears at the corner of each feature card: fictional lat/long pairs that correspond to story narrative positions.
- Each feature heading is preceded by a single filled square dot (4×4px, `#C8E8E1`) as a map-legend symbol.

## Prompts for Implementation

The build is a **single-page narrative-map landing** — everything the site does, it does without navigation clutter, without a hamburger menu, without a sticky header after the fold. The visitor should feel like they have unrolled a map on a table and are now looking at it.

**Do not build:** carousel/sliders, testimonials, parallax photo backgrounds, hero video, modal overlays, cookie banners, chat widgets, social proof counters, emoji in body text, gradient backgrounds (except the one deep band), sticky sidebar navigation, loading screens, progress bars on scroll.

**Do build:**

1. **Vertical wordmark in hero.** Use CSS `writing-mode: vertical-rl` and `transform: rotate(180deg)` to set `talegrapher` vertically along the left edge of the hero, 40px from the left viewport edge. Font: Syne 800, clamp(3.2rem, 6.5vw, 8rem) — the vertical dimension is the size. Color `#1F2B2E`. Do not center vertically — anchor to middle-left with flexbox or absolute + top:50% + translateY(-50%).

2. **Horizontal rule at 38.2%.** A 1px line, `#1F2B2E`, opacity 0.35, spanning 65% of the hero width, starting at 17.5% from left. Positioned at `top: 38.2%`. On mobile, hide the rule — the vertical wordmark alone carries the composition.

3. **Compass rose SVG, floating.** Inline SVG, no external request. Position: `right: 8vw`, `top: 50%`, `transform: translateY(-60%)`. Add `animation: drift-y 6s ease-in-out infinite`. The `drift-y` keyframe: `0%,100%{ transform: translateY(-60%) }` `50%{ transform: translateY(calc(-60% - 8px)) }`. Width: clamp(120px, 18vw, 240px).

4. **Bounce-enter for sections.** On scroll entry (IntersectionObserver, threshold 0.1), add class `.entered` which transitions from `opacity:0; transform:translateY(40px)` to `opacity:1; transform:translateY(0)` with `transition: all 0.55s cubic-bezier(0.34, 1.56, 0.64, 1.0)`. The spring overshoot of the cubic-bezier is critical — it creates the bounce. Each child element within a section staggers by `transition-delay: calc(var(--i, 0) * 80ms)`.

5. **Ticker strip.** A `<marquee>`-replacement using CSS animation: `@keyframes ticker{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }`. Duplicate the text twice inside the strip so the loop is seamless. Strip is `height: 8px` collapsed until scroll reaches it, then expands to `height: 36px` on `.entered`. The text is the only `#C8E8E1` on `#1F2B2E` background on the page until the CTA.

6. **Vector narrative map.** Build the SVG inline. Use `<path>` elements for contour lines, `<text>` for labels. The map SVG is set at `width:100%; height:auto` in its 7/12-column container. On mobile, scale to full-width. Add a subtle `stroke-dashoffset` animation on the primary peak contour — the line draws itself in 2.4 seconds on section entry (`stroke-dasharray` + `stroke-dashoffset` from full length to 0, `transition: stroke-dashoffset 2.4s ease-out`).

7. **Feature cards.** Three `<div>` elements with `position:relative`. Outer wrapper uses `display:flex; flex-direction:column; gap:0` with each card having `margin-top: -20px, 0, 28px` relative offsets. Card styles: `background:#F4F1EC; border:1px solid #1F2B2E; box-shadow: 4px 4px 0 #1F2B2E; padding:2rem`. On hover: `box-shadow: 6px 6px 0 #1F2B2E; transform:translate(-1px,-1px)` — the sharp offset shadow shifts, a small brutal gesture.

8. **Typography hierarchy.** Import from Google Fonts: `Syne:wght@800`, `Noto+Sans+JP:wght@300;500`, `Space+Mono:wght@400`. Use CSS custom properties: `--font-display: 'Syne', sans-serif`, `--font-body: 'Noto Sans JP', sans-serif`, `--font-mono: 'Space Mono', monospace`.

9. **Mobile behavior (max-width: 768px).** Vertical wordmark scales to 2.8rem. Compass rose moves to top-right at 20vw. 3-column grid collapses to single column. Feature cards lose their Y-offsets and stack normally. The manifesto strip font-size drops to 0.65rem.

10. **No JavaScript frameworks.** Vanilla JS only. The entire interactive layer (bounce-enter, ticker, compass drift) can be achieved with CSS animations and a 30-line IntersectionObserver snippet. Resist the temptation to reach for a library.

## Uniqueness Notes

1. **japanese-minimal aesthetic with edgy-rebellious tone is unrealized in the registry.** The frequency report shows `japanese-minimal` at 2% — only one prior use — and it was paired with calm/meditative tone. Zero designs in the registry pair japanese-minimal aesthetic with deliberately confrontational, anti-welcome positioning. The tension between spatial restraint and rebellious gesture (Muji-vandalized) is the design's core identity.

2. **Vertical wordmark as structural axis instead of decorative element.** Most sites in the registry that use vertical type use it for small section labels. Here it is the primary navigation element, the Y-axis of a literal coordinate system, and the compositional anchor of the entire hero. `hero-dominant` at 4% usage is already underused; using it with asymmetric vertical-text-as-axis is uncharted.

3. **Coastal-blend palette expressed as post-wave volcanic rock, not resort warmth.** The three prior uses of `coastal-blend` in the registry all interpret it through warm ocean-resort tones (sandy, sunset, turquoise). This design takes the cold side — basalt, sea-foam, salt-gray, bioluminescent accent — making the palette feel like a Pacific Northwest tide pool rather than a Caribbean beach. The `#C8E8E1` accent is bioluminescent, not decorative.

4. **Bounce-enter animation with spring overshoot instead of standard ease-in-out.** `bounce-enter` appears in 2% of designs but all prior implementations use simple keyframe bounces. The cubic-bezier(0.34, 1.56, 0.64, 1.0) spring curve creates a genuine physical overshoot that feels different from standard bounce — more like a released elastic band than a dropped ball.

5. **Cartographic metaphor rendered entirely in inline SVG vector-art.** The narrative map as topographic SVG (contour lines = emotional arc) with draw-in animation is a content concept unique to this domain. `vector-art` at 3% usage, and none of the prior uses apply it to abstract data-as-map. The coordinate-notation easter eggs on feature cards extend the metaphor throughout.

Seed: aesthetic: japanese-minimal, layout: hero-dominant, typography: display-bold, palette: coastal-blend, patterns: bounce-enter, imagery: vector-art, motifs: floating-elements, tone: edgy-rebellious
<!-- DESIGN STAMP
  timestamp: 2026-05-11T21:28:05
  domain: talegrapher.com
  seed: aesthetic: japanese-minimal, layout: hero-dominant, typography: display-bold, palette: coastal-blend, patterns: bounce-enter, imagery: vector-art, motifs: floating-elements, tone: edgy-rebellious
  aesthetic: talegrapher** is the mapmaker of stories — not a writer, not a reader, but the o...
  content_hash: c0831efad702
-->