# Design Language for tanso.in

## Aesthetics and Tone

`tanso.in` is a **carbon atelier where the Art Deco era got drunk on molten amber and decided to scroll sideways**. The name — *tanso*, Japanese for carbon (炭素) — anchors every visual decision in the elemental: burnt sienna, charcoal dust, raw ochre, the honeyed brown of old glass vials. But the carbon is not industrial. It is the carbon of a Japanese lacquer workshop, a 1926 Paris perfumer's label, a pressed-fern illustration in a botanical folio with a gold-foil border.

The tone is **whimsical-creative** — the brand is playful in the way an eccentric artisan is playful: precise but not uptight, decorative but not frivolous, warm but not saccharine. There is humor in the ornamentation: a zigzag egg-and-dart frieze that doesn't quite close; an art-deco sunburst that radiates into a smear of gradient-mesh amber rather than clean chrome. The site feels like a studio you want to linger inside — every panel a display case, every scroll a new cabinet drawer sliding open.

**Mood board references:**
- 1928 Sèvres porcelain catalog covers, warm cream with gold-foil tracery
- Japanese *urushi* lacquerware in burnt umber and gold maki-e
- Mid-1920s French fashion illustration linework — Erté's hatching patterns at 45°
- The amber warmth of a lit darkroom safelight bleeding into developer tray chemistry
- Carbon smear on drafting paper — the trace the pencil leaves when you lift it

The result is: **Art Deco ornamentalism recalibrated to an earthy Japanese sensibility**, scrolling horizontally like a scroll painting (*emakimono*), animated with a single rhythmic pulse that draws the eye left-to-right.

## Layout Motifs and Structure

The entire page is a **single horizontal scroll painting** — a continuous emakimono that unfolds left-to-right. There is no vertical scrolling anywhere. The viewport is a window frame; the content is a 5× wider canvas moving through it.

**Panel architecture:**
- The canvas is divided into **7 discrete panels**, each exactly `100vw` wide, snapped via CSS scroll-snap (`mandatory`, `start`). Panels do not bleed — each has a discrete identity, but all share the same amber-to-charcoal atmospheric gradient that flows uninterrupted across the full 700vw canvas width.
- Panel transitions use a **horizontal "drawer-slide"** metaphor: each panel edge has a decorative art-deco vertical rule — a 2px line with a repeated diamond dingbat at 32px intervals — that acts as the seam between cabinets.

**Grid within each panel:**
- Every panel uses a **12-column grid** with 32px gutters and 64px side margins.
- Content occupies either a centered 8-column block or a deliberate asymmetric 5/7 split with the larger half holding the main text and the narrower half holding the decorative motif.
- Vertical rhythm inside each panel is governed by a **28px baseline grid**. No element breaks it — headings, body copy, and ornaments all align to multiples of 28px.

**Horizontal navigation:**
- A persistent **bottom bar** (56px tall, always visible) shows: a progress track made of 7 art-deco diamond-chain nodes; the current panel name; left/right arrow buttons. The progress track pulses (see Patterns) to invite interaction.
- Keyboard arrow keys, trackpad horizontal swipe, and the bottom-bar arrows all drive the scroll.

**Spatial composition hierarchy:**
1. The leftmost panel (Entry) is the fullest: a large ornamental headline in Cinzel Decorative, the gradient-mesh globe-motif as a centered background element, and the studio name as a single vertically-centered wordmark.
2. Middle panels (Craft, Process, Elements, Studio) are progressively less text-heavy, more imagery and pattern-dominant.
3. The rightmost panel (Contact) returns to wordmark density — the footer equivalent, but horizontal.

**No vertical stacked sections. No hero-with-scroll-cue. No card grids. No feature rows.**

## Typography and Palette

**Palette — warm-earthy, carbon-inflected:**

- `#2C1A0E` — Charcoal Pitch (deepest background, almost-black with brown undertone)
- `#5C3317` — Burnt Sienna (primary dark tone, headings on light, borders, ornaments)
- `#A0522D` — Sienna (mid-tone, secondary text, active states)
- `#C8852A` — Raw Amber (accent, pulse glow, art-deco rule color)
- `#E8B96A` — Pale Ochre (body text on dark, tertiary labels)
- `#F5E6C8` — Cream Vellum (lightest surface, text areas, panel backgrounds)
- `#3D2B1F` — Espresso (panel surface on dark panels, card depth)
- `#D4A055` — Antique Gold (ornamental fills, foil-impression details, active nav node)

**Gradient mesh — amber bloom:**
The gradient-mesh is a radial amber bloom: center `#C8852A` at 0% opacity 0.9, transitioning to `#5C3317` at 60%, to `#2C1A0E` at 100%. Applied as SVG `<radialGradient>` with `gradientUnits="userSpaceOnUse"` so it scales with the panel rather than the element. Three overlapping radial blooms per panel at different positions and scales create the mesh quality without a raster image.

**Typography — humanist, specifically art-deco humanist:**

All fonts from Google Fonts.

- **Display / Wordmark: `Cinzel Decorative`** — weight 900. Used only for the studio name `tanso.in` (wordmark) and major panel anchors. Size 96px at desktop. Letter-spacing `+0.08em`. Color: `#C8852A` Raw Amber. This is the single most art-deco face on Google Fonts — derived from classical Roman inscriptions with subtle art-deco flair. Renders beautifully in the large, airy way a porcelain label would be impressed.

- **Headings H1–H2: `Josefin Sans`** — weight 300 (light) and 700 (bold) used in contrast pairs. H1: 52px, tracking `+0.12em`, uppercase, weight 300. The extreme tracking and lightness give an art-deco poster quality. H2: 28px, weight 700, normal case, tracking `+0.04em`. Color: `#E8B96A` Pale Ochre on dark panels; `#5C3317` Burnt Sienna on light panels.

- **Body / Running text: `Nunito`** — weight 400. Size 18px, line-height 1.78 (2 × 28px baseline = 56px per two lines). Color: `#E8B96A` on dark, `#5C3317` on cream. Nunito is distinctly humanist with rounded terminals — it introduces warmth against the geometric rigidity of Josefin Sans without straying into friendliness.

- **Captions / Labels / Nav: `Josefin Sans`** — weight 300, size 11px, uppercase, tracking `+0.2em`. Color `#C8852A`. Used for panel progress labels, ornament dingbats, section markers.

- **No monospace. No italic body. No third-party fonts outside Google Fonts.**

**Type scale (major third, 1.25× ratio):** 11 / 14 / 18 / 22 / 28 / 36 / 45 / 56 / 70 / 88 / 96px.

## Imagery and Motifs

**Gradient-mesh imagery (no photographs):**
All imagery is SVG-based. The primary atmospheric visual in each panel is a **radial gradient-mesh bloom** rendered in SVG using multiple overlapping `<radialGradient>` definitions. Each bloom is 600×600px, positioned at different panel quadrants. The blooms interact via `mix-blend-mode: screen` on a dark background and `multiply` on light panels, creating a subtle glow-haze that looks like candlelight through amber glass.

**Retro-patterns — art-deco ornamental vocabulary:**
- **Sunburst fans**: SVG `<line>` arrays radiating from a point, 36 lines at 10° intervals, stroke `#C8852A` at 0.6px. Used in panel corners at 20% opacity.
- **Egg-and-dart frieze**: A repeating SVG pattern (`<pattern>` element, 32×16px tile) used as a horizontal rule between sections. The dart is a flattened diamond; the egg is a filled oval. Colors alternate `#C8852A` and `#5C3317`.
- **Chevron field**: A CSS `repeating-linear-gradient` in 45° chevrons at 4px pitch, `#2C1A0E` on `#3D2B1F`, used as a panel-edge texture behind the diamond-chain vertical rules.
- **Diamond-chain vertical rule**: The panel separator. A 2px vertical line in `#C8852A` with an SVG `<pattern>` overlay placing a 12×12px rotated square every 28px — exactly matching the baseline grid.
- **Carbon smear overlay**: A single SVG `<feTurbulence>`-based filter (`baseFrequency="0.04"`, `numOctaves="4"`) applied as a `filter` on the panel body at 6% opacity. Creates a micro-grain texture resembling charcoal dust on vellum.

**Motif placement rules:**
- Sunburst fans live in top-right and bottom-left quadrants only (never top-left, never centered).
- Egg-and-dart friezes run only horizontally, never at 90° rotation.
- The diamond-chain rule is the only element permitted at the panel boundary. Nothing else may break the panel edge.
- The carbon smear filter is applied globally, never element-specific.

## Prompts for Implementation

Build `tanso.in` as a **horizontal emakimono** — a Japanese illustrated scroll that unfolds panel by panel as the visitor navigates. This is not a parallax site. It is not a vertical site rotated 90°. It is a designed scroll-painting, and every implementation decision should honor that metaphor.

**Architecture:**

```
<body>
  <div class="scroll-track">  <!-- width: 700vw; display: flex; -->
    <section class="panel" id="panel-entry">…</section>
    <section class="panel" id="panel-craft">…</section>
    <section class="panel" id="panel-process">…</section>
    <section class="panel" id="panel-elements">…</section>
    <section class="panel" id="panel-studio">…</section>
    <section class="panel" id="panel-atelier">…</section>
    <section class="panel" id="panel-contact">…</section>
  </div>
  <nav class="scroll-nav">…</nav>  <!-- position: fixed; bottom: 0 -->
</body>
```

Each `.panel` is `width: 100vw; height: 100vh; overflow: hidden; scroll-snap-align: start`. The `.scroll-track` is `display: flex; width: 700vw; height: 100vh; scroll-snap-type: x mandatory; overflow-x: scroll; overflow-y: hidden`.

**The Pulse-Attention animation:**
The 7 diamond-chain nav nodes in the bottom bar perform a **heartbeat pulse** on the current node:
- Keyframe `pulse-node`: scale from 1 → 1.4 → 1.0 → 1.2 → 1.0 over 2400ms, with `box-shadow` expanding from `0 0 0 0 rgba(200,133,42,0.7)` to `0 0 12px 6px rgba(200,133,42,0)`.
- The current node pulses continuously. Inactive nodes are static `#5C3317` at 60% opacity.
- On hover, inactive nodes perform a single half-pulse (scale 1 → 1.2 → 1.0, 300ms) to invite interaction.
- This is the **only continuous animation** on the site. Everything else is triggered by navigation or user action.

**Panel Entry — first panel:**
- Full-panel radial gradient bloom in amber, centered at 55% / 40% (slightly right-up of center).
- The wordmark `tanso.in` in Cinzel Decorative 96px, centered both axes, `#C8852A`, with a 1px `text-shadow` at +1px / +2px in `#2C1A0E`.
- Beneath the wordmark: a single egg-and-dart frieze line, 320px wide, centered.
- Below that: one H2 label in Josefin Sans light, 28px, tracking `+0.12em`, uppercase: `CARBON ATELIER`.
- Bottom-right corner: sunburst fan at 20% opacity, rotated 45°, clipped to panel.
- Top-left corner: diamond-chain vertical rule stub (48px tall) transitioning into the panel edge.

**Panels 2–6 — content panels:**
- Each panel has a dominant art-deco ornamental feature (sunburst, frieze row, chevron field, etc.) occupying ~35% of the panel width on the right half.
- Text occupies the left 5 columns (of 12): one H1, two H2s max, 3–4 body paragraphs.
- The gradient-mesh bloom is repositioned per panel (top-left for Panel 2, bottom-right for Panel 3, etc.) to create a sense of the light source migrating as you scroll right.

**Panel Contact — last panel:**
- Near-mirror of the Entry panel but inverted: cream vellum background, charcoal text.
- The egg-and-dart frieze runs full panel width as a top border.
- Contact info in Josefin Sans light, large tracking. Studio name reprise in Cinzel Decorative at 64px.
- A single SVG carbon-smear texture at 12% opacity (doubled for emphasis).

**Forbidden patterns (per frequency analysis):**
- No parallax (74% overuse)
- No stagger reveal animations (49%)
- No scroll-triggered entrance animations (35%)
- No spring physics (33%)
- No vertical sections or hero-scroll-cue

**Animation budget:** pulse-attention on nav node (continuous, low-CPU), one-time slide-in text as each panel first enters (translateX(-20px) → 0, opacity 0 → 1, 400ms ease, fire once, never again). Nothing else moves.

## Uniqueness Notes

**Chosen seed (per assignment):** aesthetic = `art-deco`, layout = `horizontal-scroll`, typography = `humanist`, palette = `warm-earthy`, patterns = `pulse-attention`, imagery = `gradient-mesh`, motifs = `retro-patterns`, tone = `whimsical-creative`.

**3+ differentiators from the existing registry:**

1. **Horizontal emakimono structure.** The frequency report shows `horizontal-scroll` at only 2% (1 of ~60 sites). No other site in the registry uses a snap-scrolled horizontal panel track as the primary navigation metaphor. More importantly, this layout is not merely "sections placed side by side" — it replicates the physical sensation of unrolling a Japanese emakimono scroll painting, where each scene is a discrete visual world and the journey between scenes is the artwork.

2. **Art-deco ornament as structural element, not decoration.** In most art-deco-influenced sites, ornament is applied on top of a neutral layout as trim. Here, the ornament IS the structure: the egg-and-dart frieze is the horizontal rule that separates copy from motif; the diamond-chain vertical rule IS the panel boundary. Remove the ornament and the structure disappears. This inversion is unique in the registry.

3. **Pulse-attention as the sole continuous animation.** At 2% frequency, pulse-attention is nearly absent from the registry. Using it as the only moving element — the single heartbeat of the nav indicator in an otherwise static site — gives it exceptional salience. Other sites layer 4–7 animation types; tanso.in has exactly two: the pulse (continuous) and the panel-enter slide (one-shot). The restraint amplifies the whimsy of the pulse rather than burying it in motion noise.

4. **Carbon-as-concept color palette.** The warm-earthy palette (3% frequency) exists in the registry but has never been articulated through the lens of carbon chemistry — charcoal, burnt sienna, raw amber, espresso. The specific narrative of "Japanese lacquer meets 1920s Paris perfumer's label" does not appear in any existing design. The gradient-mesh is rendered entirely in SVG using stacked radial gradients rather than raster images, making it crisp at all resolutions.

5. **Typography contrast: Cinzel Decorative × Josefin Sans × Nunito.** The humanist category is overused (31%) but almost always defaults to Inter, Space Grotesk, or DM Sans. This design pairs a classical Roman display face with a geometric art-deco sans and a warmly rounded humanist body — a combination not found in any sampled design. The result is hierarchically clear (three visually distinct roles) yet tonally unified (all share the art-deco era's preference for controlled geometry).
<!-- DESIGN STAMP
  timestamp: 2026-05-11T21:47:38
  seed: seed
  aesthetic: `tanso.in` is a **carbon atelier where the Art Deco era got drunk on molten ambe...
  content_hash: 172c9eccc1bd
-->