# Design Language for relativity.studio

## Aesthetics and Tone

`relativity.studio` is a **still life that moves when you look away**. Imagine a Tokyo art gallery where the walls are the color of warm rice paper and every canvas is slightly too large for the space — the frames brush the ceiling, and the negative space between works is the actual exhibition. The studio practices design that behaves like physics: relative, perspective-dependent, quietly unsettled beneath a creamy surface.

The aesthetic is **japanese-minimal disrupted by glitch** — not the aggressive RGB-split glitch of cyberpunk, but the *poetic* glitch: a calligraphic brushstroke that shudders at 12 frames per second, a photograph of negative space that briefly loses coherence at its edges, a grid that respects ma (間, the Japanese concept of meaningful interval) until it doesn't. The disruption is always brief, always beautiful, always contained within the same creamy warmth.

The tone is **warm-inviting** without saccharine softness. The site feels like a conversation with a practitioner who has worked for twenty years and no longer needs to impress anyone. The warmth comes from materiality — warm cream, dust-rose, whisper-sage, and bone — not from exclamation points or bright CTAs.

**Inspirations:** Hiroshi Sugimoto's long-exposure theaters, Muji's product catalogs, the typography of Helvetica Neue at 8pt in a Japanese grid, the blur at the edges of a Polaroid left in sunlight.

## Layout Motifs and Structure

The layout is a **portfolio-grid that breathes** — not the relentless 3-column thumbnail grid of Behance, but a **staggered asymmetric mosaic** where each work occupies a different proportional relationship to its neighbors. The grid is set on an 8-column baseline (desktop), but individual works break the column count: a wide horizontal piece spans 5 of 8 columns, a portrait piece sits in 2 columns and anchors the right edge, a square work floats in 3 centered columns with generous whitespace above and below.

**Spatial principles:**
- Ma governs all vertical intervals. Sections breathe with 120–180px of intentional void between them.
- The header is a single centered line, no navigation bar — a horizontal rule above and below the studio name, faint as a pencil mark.
- Each work-thumbnail has a hover state that reveals the piece title and medium in a type overlay that slides from below over 280ms, never covering more than 40% of the image.
- On scroll, the grid clusters gently drift — a parallax at 0.08 velocity, barely perceptible, like tide-drift rather than animation.
- A thin 1px horizontal rule in `#D9C9B4` runs the full viewport width between the grid and the footer, echoing the header structure.

**Sections (single scroll, no inner pages):**
1. **Identity mark** — studio name centered, displayed in Cormorant Garamond Italic, with a 3-second glitch pulse on first load that resolves to stillness.
2. **Portfolio mosaic** — the main grid, occupying 80vh, paginated by JS into three "rooms" that cross-fade rather than scroll.
3. **About interval** — a single paragraph of text set at 480px measure, centered, in a lighter body weight.
4. **Contact axis** — a single email address and three social glyphs, no forms, no CTA language.

## Typography and Palette

**Type system (all Google Fonts, verified):**

- **Display & studio mark — `Cormorant Garamond`** (weights 300, 400, 600 italic). Set the studio name at 88px/300 weight italic. On first load, a glitch animation runs: the letterforms split into RGB-offset layers at ±3px for 340ms, then snap to register. After that, the mark is completely still. No other display treatment in the site.

- **Navigation and captions — `Noto Serif JP`** (weights 200, 400). Used at 12px/200 for all work titles and at 14px/400 for medium descriptors. Noto Serif JP's hairline weight is practically invisible at body scale, creating the effect of type that hovers rather than sits.

- **Body prose — `EB Garamond`** (weight 400, italic 400). Used exclusively for the About section paragraph and the footer tagline. Set at 18px/1.8 line-height, 480px measure. EB Garamond at this size has the warmth of a handwritten letter.

**Palette — creamy-pastel, warm-inviting:**

| Role | Name | Hex |
|------|------|-----|
| Background | Warm Rice | `#F5EFE3` |
| Surface | Bone | `#EDE4D3` |
| Grid lines / rules | Parchment Stroke | `#D9C9B4` |
| Primary text | Warm Charcoal | `#3A3530` |
| Secondary text | Ash | `#7A7068` |
| Accent (glitch R) | Dust Rose | `#E8A89C` |
| Accent (glitch G) | Whisper Sage | `#A8C4B0` |
| Accent (glitch B) | Soft Lavender | `#C4BEDD` |
| Hover overlay | Warm Translucent | `rgba(58, 53, 48, 0.72)` |

The three glitch-accent colors are **only ever used in the glitch animation**, appearing for 340ms maximum. Outside of that moment, the palette is monochromatic warm — the richness lives in texture, not saturation.

## Imagery and Motifs

**Organic blob forms as structural backdrop:**
Behind the portfolio grid, three large SVG organic blobs (Bezier-based, not circle approximations) float at fixed position. Each blob is drawn with 8 anchor points producing a shape that suggests a studio photography lightbox, a sand dune, a cloud of rice paper. They are rendered at `#EDE4D3` (2% contrast above background), visible only in raking screen angles, functioning as depth without clutter.

**Particle-effects system:**
On page load and on cross-fade between portfolio "rooms", a field of 60–80 particles appears. Each particle is a 1×1 to 3×3 pixel square (not circle — the square particle is the differentiator), distributed in a loose Gaussian field centered on the viewport. Particles drift at 0.3–0.8px/frame in randomized directions, fade from 40% to 0% opacity over 1.8 seconds, and are not interactive. The effect reads as grain on photographic paper — an atmospheric texture, not a UI element.

**Calligraphic glitch ornaments:**
At the base of each section divider, a single SVG path that approximates a Japanese calligraphic brushstroke is drawn with a glitch effect: the path is duplicated three times (R/G/B channels), offset by ±2px, and animated to snap to alignment over 220ms when the divider scrolls into view. This is the primary motion signature of the site.

**Photography treatment:**
All portfolio images are displayed desaturated to 15% saturation by default, with `filter: saturate(0.15) brightness(1.05)`. On hover, saturation transitions to 100% over 400ms. This creates a gallery effect where works reveal their true color only under attention.

## Prompts for Implementation

Build `relativity.studio` as a **single-page gallery in three rooms** — three portfolio collections that the viewer moves between via a cross-fade mechanism, not a scroll. The page itself is one vertical scroll only for the header, grid, about, and contact sections; within the grid, JS manages room transitions.

**The Glitch System (implement first, everything else follows):**

The glitch is not a CSS filter. It is a layered SVG/canvas technique:
1. The studio mark is rendered as three `<text>` elements in a `<svg>`, each filled with R, G, or B partial-opacity values (`rgba(232,168,156,0.85)`, `rgba(168,196,176,0.85)`, `rgba(196,190,221,0.85)`).
2. On load, a JS timeline offsets the three layers: R shifts `(-3px, 1px)`, G shifts `(2px, -2px)`, B shifts `(1px, 3px)`, held for 340ms, then all transition to `(0,0)` over 180ms via `transform: translate()`.
3. The calligraphic dividers use the same three-layer technique on `<path>` elements.
4. The grid's room-transition cross-fade includes a 120ms glitch burst mid-fade: a canvas overlay flickers with 4 horizontal scan-lines of 1px height, white at 60% opacity, sweeping top-to-bottom at 200px/frame.

**The Portfolio Grid:**
- CSS Grid: `grid-template-columns: repeat(8, 1fr)` with `gap: 16px`
- Each `.work-item` has a `data-span` attribute (values: `2`, `3`, `5`) controlling `grid-column: span N`
- Works are shuffled within their column constraints on each room transition to prevent repetitive pattern recognition
- Thumbnail hover: `::after` pseudo-element with `background: rgba(58, 53, 48, 0.72)`, `transform: translateY(100%)` default, `transform: translateY(60%)` on hover, transition 280ms ease-out
- Title appears as a `<p>` inside the overlay in `Noto Serif JP` 200 weight, 12px

**The Organic Blob Backdrop:**
- Three SVG elements, `position: fixed`, `z-index: -1`, `pointer-events: none`
- Blob 1: top-left, `width: 45vw`, opacity `0.025`
- Blob 2: right-center, `width: 35vw`, opacity `0.018`
- Blob 3: bottom-left, `width: 40vw`, opacity `0.022`
- Each blob animates via CSS `@keyframes`: scale oscillates between `1` and `1.04` over 12s ease-in-out, looping — barely visible breathing

**The Particle System:**
```
// Generate 72 particles on room transition
particles = Array.from({length: 72}, () => ({
  x: gaussianRandom(vw/2, vw/3),
  y: gaussianRandom(vh/2, vh/3),
  size: [1,1,2,2,3][Math.floor(Math.random()*5)],
  vx: (Math.random()-0.5)*0.6,
  vy: (Math.random()-0.5)*0.6,
  alpha: 0.4,
  decay: 0.4/108 // fade to 0 over 1.8s at 60fps
}))
```
Particles render on a `<canvas>` element that sits above the grid at `pointer-events: none`.

**AVOID throughout:** floating action buttons, hamburger menus with animated dropdowns, scroll-progress bars, loading spinners, testimonial carousels, "Let's work together" CTA sections, numbered stat blocks ("50+ projects"), pricing tables.

**The About section** is exactly one paragraph, 40–60 words, set in EB Garamond italic, centered, preceded by 160px of whitespace. No byline, no headshot, no social proof. The paragraph uses the word "relativity" — the physics concept — exactly once, in italics, not as a brand name.

## Uniqueness Notes

**Chosen seed (per assignment):** aesthetic = `japanese-minimal`, layout = `portfolio-grid`, typography = `serif-revival`, palette = `creamy-pastel`, patterns = `glitch`, imagery = `organic-blobs`, motifs = `particle-effects`, tone = `warm-inviting`.

**Differentiators from the corpus (436 analyzed designs):**

1. **Glitch as haiku, not as noise.** The corpus uses glitch at 10% with no restraint — full-screen RGB-offset that announces itself. `relativity.studio` uses glitch in exactly three controlled moments (studio mark load, calligraphic dividers, room-transition scan-lines), each lasting under 350ms, each resolved into stillness. Glitch is not decoration; it is punctuation.

2. **Portfolio grid with room-based cross-fade navigation, not scroll pagination.** The corpus shows portfolio-grid at 2% — and of those, all use standard scroll or click-to-filter. The room metaphor (three physical gallery rooms, navigated by cross-fade) is unused in the analyzed corpus and is semantically aligned with the studio domain.

3. **Square particles, not circles.** Particle systems in the corpus (2% usage) universally use circular particles. The 1–3px square particle reads as photographic grain or pixel dust — more material, less digital, resonant with the creamy-pastel palette and Japanese minimalist aesthetic.

4. **Desaturate-by-default portfolio images.** The corpus does not document this technique (hover-to-reveal-color). It creates a gallery effect where viewer attention is rewarded with color, making the interaction feel curatorial rather than commercial.

5. **Avoided overused patterns:** `full-bleed` layouts (64% in corpus) — this design uses a contained grid on a warm background, never full-bleed. `warm` color abstraction (89% in corpus) — the warmth here is precise hex values, not a genre label. `mono` typography (74% in corpus) — every font choice is a serif, zero monospace.
<!-- DESIGN STAMP
  timestamp: 2026-05-11T00:48:09
  domain: relativity.studio
  seed: seed
  aesthetic: `relativity.studio` is a **still life that moves when you look away**. Imagine a...
  content_hash: 0c8b93b4455d
-->