# Design Language for chika.stream

## Aesthetics and Tone

chika.stream (v2) is a **Luxury-Premium Terracotta Cartographer's Atelier** -- a raw-authentic luxury-premium portfolio for a fictional cartographer/illustrator named Chika who hand-draws maps and vector ornaments for high-end editorial clients. The luxury-premium aesthetic is read as artisan-luxe: hand-burnished terracotta pigments, brass-tooled grid-lines, leather-bound portfolios, parchment workbooks. But the tone refuses polish -- it is **raw-authentic**, like the working desk of a master artisan: half-finished sketches in the margins, ink-smudges, pinned scraps of paper.

The serif-classical typography (an editorial Cormorant Garamond) gives the work intellectual weight; the grid-lines motif reinforces the cartographic discipline; the centered layout puts the work itself at the center of attention with generous breathing room.

## Layout Motifs and Structure

The composition is **centered** -- a single narrow content column (max-width ~720px) centered on a wide terracotta ground. The centered column reads like a vertical portfolio scroll, each piece presented at its own page. But the discipline of centering is broken in deliberate places: cursor-follow grid-lines extend off the centered column to the page edges, vector-art ornaments occasionally break the column margin into the surrounding terracotta field.

**Macro structure:**
- **Atelier Welcome (Section 0, 100vh):** A wide terracotta ground with a centered narrow column. At the top: title "CHIKA // STREAM" in oversized serif-classical caps. Below: a short italic introduction in body type: "cartographer, illustrator, atelier of vector ornaments. since 2012. by appointment." A small hand-drawn-feel SVG compass rose sits at the column's center as the brand mark. A faint grid-line extends from the compass-rose across the full page width (terminating at the page edges as soft fades).
- **The Map Portfolio (Sections 1-5):** Five portfolio pieces, each a map or cartographic illustration:
  - 01: "Coastal Outposts of the Lower Levant" -- a hand-drawn-feel SVG map fragment
  - 02: "Three Rivers, Annotated" -- a river-system diagram with hand-lettered labels
  - 03: "A Forest at Midnight" -- a forest map with star-field overlay
  - 04: "City of Markets" -- a market-district plan
  - 05: "Field Sketches" -- a collection of small map-fragment sketches arranged as a contact-sheet
  Each piece has a centered title, the map artwork (rendered as vector-art SVG), and a brief caption. Cursor-follow grid-lines extend from the cursor across the page when the user hovers any map.
- **The Vector-Ornament Library (Section 6):** A vertical scroll-list of vector-ornament fragments (cartouches, compass-roses, decorative borders, sea-monsters, wind-direction arrows). Each ornament is set centered with a label below.
- **About / Workshop (Section 7):** A centered column with portfolio-info: workshop location ("Lisbon"), tools used (brass-nib pen, indigo ink, parchment-feel paper), commissioning process. A faint grid-line pattern continues to extend from cursor.
- **Commission Inquiry (Section 8):** A simple centered form: name, email, project description. Submit button is a brass-tooled "send" with a small ink-nib SVG.
- **Colophon (Section 9):** Imprint info centered. A final small compass-rose drift.

The cursor-follow pattern is the dominant interaction motion: anywhere the user moves the cursor on a portfolio page, faint cartographic grid-lines (latitude/longitude crosshairs) extend from the cursor toward the page edges. The crosshairs are subtle (1px brass-tooled lines at 30% opacity) and fade with distance from the cursor. They give the page the feel of being read through a cartographer's grid-overlay.

## Typography and Palette

**Fonts (all Google Fonts):**
- **Display headlines:** "Cormorant Garamond" weight 500 -- a serif-classical mandate. Used at clamp(40px, 6vw, 96px) for the atelier title and at clamp(28px, 3.5vw, 56px) for piece titles. Tracking 0.005em. Italic Cormorant for sub-titles and pull-quotes.
- **Sub-labels / piece meta:** "Cormorant Garamond" weight 500 small-caps at 12-14px, tracking 0.16em uppercase, used for "PIECE 03 // 2022 // INDIGO INK ON PARCHMENT."
- **Body text:** "Cormorant Garamond" weight 400 at clamp(16px, 1.2vw, 19px), line-height 1.78. The body is the same family as display -- a serif-classical unity. Italic Cormorant for captions and field-notes.
- **Hand-lettered map labels:** "Cormorant Garamond" weight 400 italic at 11-14px, used inline on maps as place-name labels. Some labels are intentionally rotated to follow map features (rivers, coastlines).

**Palette (terracotta-warm mandate):**
- **#C97A5A** Terracotta Burnt (page ground, primary brand color)
- **#D9956B** Soft Terracotta (secondary surface, gentle gradient anchor)
- **#A85E40** Deep Terracotta (deep accent, grid-line color)
- **#7A3D24** Burnt Sienna (deepest brand, type contrast)
- **#F2E4D2** Parchment Cream (centered column surface, map ground)
- **#E8D2B5** Aged Parchment (alt surface)
- **#3A2418** Sepia Ink (primary type ink, map-line ink)
- **#C9A86A** Brass Tooled (accent, brass-pin ornaments, grid-line highlights)

The terracotta ground holds the entire site like a workshop wall; the centered column is a parchment-cream sheet of paper on that wall; sepia ink is the cartographer's ink.

## Imagery and Motifs

**Core visual motifs:**

- **Vector-art (imagery mandate):** Every "image" on the site is a vector-art SVG illustration. The vector-art has a consistent style:
  - Sepia-ink line work (1.5px stroke)
  - Subtle parchment-cream fill regions
  - Hand-drawn-feel imperfection (subtle stroke-width variation, slight path wobbliness)
  - Occasional hand-lettered labels integrated within the artwork
  - Compass-rose and scale-bar ornaments at consistent positions
  - The artistic style is consistent: minimal, slightly naive, ink-on-parchment authenticity
  Vector-art appears in:
  - Each portfolio map
  - Decorative section dividers (small SVG cartouches)
  - The brand compass-rose
  - Hand-drawn-feel arrows, pointers, and annotation lines
  - The vector-ornament library section (a catalogue of ornaments)
- **Grid-lines (motif mandate):** Cartographic grid-lines are the dominant decorative motif:
  - Cursor-follow crosshairs (latitude/longitude lines extending from cursor)
  - Faint static grid on portfolio-map sections (a 60px x 60px grid at 8% opacity)
  - Section divider grid-marks (a small grid-cross at the section boundary)
  - Margin grid-ticks on portfolio pieces (small 4px ticks at regular intervals along the column edges)
  - Brass-tooled major grid-lines (a 480px x 480px major grid at 12% opacity)
  Grid-lines serve as the cartographic vocabulary -- this is a cartographer's atelier, and grids are everywhere.
- **Brass-tooled accents:** Small brass-tooled ornaments appear at key anchor points -- the corners of the centered column, the heading underlines, the submit button. The brass has a subtle gradient sweep (brass-tooled → parchment-cream → brass-tooled) suggesting tooled-leather binding.
- **Margin scribbles:** Small hand-drawn margin scribbles appear at the centered column edges -- a partial sketch of a compass-rose, a tiny coastline fragment, a single hand-lettered word. These are the "ink-smudges" of the raw-authentic tone.
- **Hand-tied red string:** A few portfolio pieces have small SVG hand-tied red string ornaments at the corners (a sailor's knot, a binder's tie) -- a tactile workshop detail.

## Prompts for Implementation

**Opening:** Page loads on terracotta burnt ground. The centered parchment column fades in with a slight scale-from-0.98 (1.2s). The serif-classical title "CHIKA // STREAM" reveals letter-by-letter (60ms per letter). The italic introduction types in word-by-word (150ms per word). The centered compass-rose SVG draws via stroke-dashoffset (1.6s) -- the rose draws itself as if hand-drawn live. Once complete, the rose remains gently still. The horizontal grid-line extends outward from the rose across the page (stroke-dashoffset, 1.4s starting after rose completes).

**Scroll narrative:** As the user scrolls into each portfolio piece:
- The piece title fades in
- The vector-art SVG map draws in via stroke-dashoffset (2.0-2.4s, depending on map complexity) -- map elements draw in order: coastline first, then rivers, then place-name labels, then ornamental cartouches, then the compass-rose and scale-bar
- The caption fades in below the map
- The brass-tooled corner accents fade in last

**Cursor-follow grid:** As the cursor moves anywhere on a portfolio page:
- A horizontal grid-line extends from the cursor toward the left and right page edges (1px brass-tooled, 30% opacity)
- A vertical grid-line extends from the cursor toward the top and bottom edges
- Both lines fade with distance from the cursor (opacity falls to 0% at the page edges)
- The lines have a slight 80ms easing delay so they "drift" rather than snap with the cursor
- Where the lines intersect the map artwork, they highlight the map's existing static grid-cells beneath

**Vector-art interaction:** Hovering any vector-art map causes:
- The cursor-follow grid-lines intensify (40% opacity)
- A small "you are here" indicator appears at the cursor position on the map -- a tiny cartographer's red-dot with crosshairs
- Place-name labels nearest the cursor brighten

**Vector-Ornament Library:** Hovering any vector-ornament:
- The ornament scales 1.06 and rotates 2-4deg with a slight spring
- A "view in detail" link slides out from beside it
- Clicking shows the ornament centered with a small caption explaining its origin

**About / Workshop:** This section breaks the visual rhythm with a small workshop-photograph (the only photographic element, rendered as a single sepia-tone duotone image of a cartographer's desk). The image sits centered with hand-tied red-string ornaments at its corners.

**Commission form:** The form's text inputs are styled as parchment lines (single 1px sepia-ink underlines). The submit button is a brass-tooled "send" with a small ink-nib SVG. On submit, the form animates: ink-nib lifts and writes a "thank you" line in hand-lettered Cormorant italic.

**Closing colophon:** The final compass-rose drifts in slowly (a 2deg rotation oscillation on a 12s loop). Imprint info sits centered below it.

**Avoid:** No CTA-heavy layouts (the commission form is the only "CTA," and it's deliberately raw-authentic). No pricing (commissions are inquired-about). No newsletter modal. No stat-grid.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Luxury-premium aesthetic held in raw-authentic tone:** The visuals are luxurious (brass tooling, parchment, terracotta) but the tone refuses polish -- margin scribbles, ink-smudges, hand-tied strings. Luxury-premium is 2% in the batch; raw-authentic tone is 3%.

2. **Cursor-follow grid-lines as cartographic ambient overlay:** Cursor position generates latitude/longitude crosshairs extending across the page -- a literal cartographic grid-overlay tied to cursor presence. Cursor-follow pattern is 16% in the batch and rarely as cartographic grid.

3. **Vector-art as 100% of imagery, with hand-drawn-feel SVG cartography:** Every map and ornament is hand-illustrated SVG in consistent ink-on-parchment style. Vector-art imagery is 2% in the batch.

4. **Grid-lines motif as cartographer's vocabulary:** Grid-lines appear as cursor-follow, static-overlay, section-dividers, margin-ticks, and brass-tooled major grids -- a complete cartographic grid-system. Grid-lines motif is 3% in the batch.

5. **Centered layout with deliberate column-break ornaments:** The disciplined centered column is broken by vector-art ornaments extending into the terracotta field, creating intentional asymmetry within centered discipline. Centered layout is 96% in the batch but rarely with column-break ornaments.

Chosen seed: aesthetic: luxury-premium, layout: centered, typography: serif-classic, palette: terracotta-warm, patterns: cursor-follow, imagery: vector-art, motifs: grid-lines, tone: raw-authentic

**Avoided patterns from frequency analysis:** No parallax (96%), no card-grid (93%), no warm gradient (95%/78% -- terracotta is solid, not gradient-heavy), no mono (81%), no mysterious-moody (71%), no photography-fill (91% -- vector-art only, with one small sepia-duotone in the about section). Used: centered (96% but with distinctive cartographer treatment), luxury-premium (2%), serif-classic (5%), terracotta-warm (2%), cursor-follow (16%), vector-art (2%), grid-lines (3%), raw-authentic (3%).