# Design Language for rinji.dev

## Aesthetics and Tone

**Concept: The Chronometer Cabinet — a master horologist's personal instrument dashboard, rendered as a living artifact.**

rinji.dev is conceived as a **skeuomorphic instrument cabinet** — the kind that might sit on a 19th-century naval navigator's desk, except the dials and gauges track modern data streams instead of barometric pressure and compass headings. Every surface has physical weight: mahogany-grain panels, brass fittings, beveled glass bezels, embossed leather inlays. Yet the data inside those instruments is alive, generative, and present-tense.

The tone is **authoritative without coldness** — this is a craftsman's workspace, not a corporate interface. The authority comes from precision: everything is calibrated, labelled in small engraved capitals, lit by the warm amber glow of indirect incandescent light. The visitor feels they have opened a cabinet that belongs to someone who takes their work very seriously.

The aesthetic borrows from **precision instrument catalogs of the 1890s–1940s**: octant cases, chronograph faces, telegraph dashboards, cartographic plotting tables. Generative-art underpins the live data — Voronoi tessellations, Lissajous curves, and reaction-diffusion patterns fill the instrument faces, but they are always contained within the physical metaphors of bezels, dials, and ruled graph paper.

**Mood keywords**: calibrated authority, warm exactitude, instrument-grade precision, archival permanence, the hum of a well-maintained mechanism.

## Layout Motifs and Structure

**Dashboard of instrument panels with a cartographic plotting-table as hero.**

The primary structure is a **fixed instrument-panel grid** — not a CSS grid in the developer sense, but a visual composition of irregularly-sized instrument faces arranged the way a real dashboard would be: the dominant chronometer occupies center-left at roughly 40% width, flanked by smaller gauges (20%, 15%, 15%) and a tall barograph strip along the far right edge.

**Panel construction:**
- Each panel has a **raised bezel**: 2px inset shadow (dark side) + 1px highlight (top-left), `border-radius: 6px`, background in warm mahogany `#3d1f0a` or brass `#b8860b`
- **Inset dial faces**: recessed into the bezel with `box-shadow: inset 0 2px 8px rgba(0,0,0,0.6)`, background ivory `#f4ede0` or night-mode green `#0d1a0e`
- **Engraved labels**: small-caps text in `#9a7c5a`, positioned outside bezels on the mahogany surround, as if stamped into the wood
- **Brass screws** at four corners of each panel: 8px circles with radial gradient simulating a Phillips-head catch

**Structural zones:**
1. **Top rail (60px fixed)**: The instrument cabinet's top edge — a continuous mahogany rail with the site wordmark engraved in Playfair Display Small Caps, flanked by two pilot-light indicators (amber glow, CSS radial gradient)
2. **Main dashboard grid**: Three rows of instrument panels filling the viewport, each panel containing a generative-art face
3. **Right edge barograph**: A tall 160px-wide vertical strip showing a continuous scrolling waveform — the ambient data ribbon
4. **Bottom status rail (40px)**: Brass-plated, showing calibration metadata in monospaced small text

**Spatial rules**: All panel gaps are 12px — the width of a brass divider strip. No content bleeds across panel boundaries. The mahogany background `#2a1205` fills all inter-panel gaps, creating the sense of a real physical surround.

## Typography and Palette

**Primary display typeface: Playfair Display** (Google Fonts) — used for instrument names, section headers, and the wordmark. Set in Small Caps variant at panel label scale (13–15px) and at hero scale (48–72px) for the main chronometer face. Weight 700 italic for the wordmark. The high-contrast serif evokes instrument engraving and Victorian technical literature.

**Secondary typeface: IM Fell English** (Google Fonts) — a period-appropriate serif with ink-trap irregularities suggesting hand-composed type. Used for descriptive body text and instrument annotations. Weight 400 at 16–18px, line-height 1.8, giving the measured authority of a technical monograph.

**Tertiary typeface: Share Tech Mono** (Google Fonts) — for all numerical readouts, calibration codes, coordinate strings, and status values. The monospace grid evokes telegraph tape and scientific instrument printout paper.

**Color Palette — Warm Instrument Cabinet:**

- `#2a1205` — Deep mahogany surround (primary background, panel dividers)
- `#3d1f0a` — Panel face mahogany (instrument housing)
- `#b8860b` — Dark goldenrod brass (bezels, fittings, accent lines)
- `#d4a843` — Warm brass highlight (engraving, label text, pilot lights)
- `#f4ede0` — Aged ivory (dial faces, light background panels)
- `#1a0e06` — Ebony shadow (deepest inset shadows, night-glass)
- `#c8702a` — Burnt sienna amber (active state glow, alert indicators)
- `#7a5c3a` — Mid-tone mahogany (secondary surfaces, inactive states)
- `#e8d5b0` — Pale parchment (body text on dark panels)
- `#0d1a0e` — Deep instrument green (night-vision dial faces, graph backgrounds)

**Typographic rules**: Never use pure white. Maximum lightness is `#f4ede0`. Minimum body font size 14px. All headings in Playfair Display. All data readouts in Share Tech Mono. Body prose in IM Fell English.

## Imagery and Motifs

**All instrument face art is generative — canvas-based, contained within bezels.**

**The instrument roster:**

1. **The Chronometer Panel** (hero, 40% width × 50% height): A generative Voronoi diagram that slowly re-tessellates every 8 seconds, cells colored in gradients from `#0d1a0e` through `#1e4a2a` to `#3aff8a` (phosphor green at active nodes). A radial clock hand overlaid in brass `#d4a843` sweeps the face once per minute. The Voronoi seeds drift with Perlin noise — organic, not mechanical.

2. **The Barograph Strip** (right rail, 160px × full height): A continuous scrolling line chart rendered on `<canvas>` — a waveform drawn in `#c8702a` on `#0d1a0e`, one new data point per 200ms, the line trailing off the left edge as the strip scrolls rightward. The effect is an instrument printing its own record in real time.

3. **The Lissajous Scope** (top-right panel, 20% × 25%): A Lissajous figure oscillating between frequency ratios 2:3, 3:4, and 3:5, drawn as a hairline trace in `#d4a843` on deep green ground. The figure morphs slowly using a phase parameter driven by `requestAnimationFrame`.

4. **The Reaction-Diffusion Tile** (bottom-center panel, 35% × 25%): A Gray-Scott reaction-diffusion simulation in a small canvas — the classic coral/leopard pattern rendered in warm palette: activator in `#d4a843`, inhibitor in `#2a1205`. Runs at ~15fps for period-appropriate "computational weight."

5. **The Compass Rose Panel** (left column, 15% × 30%): A static SVG compass rose drawn in Playfair Display letterforms for the cardinal labels (N, S, E, W), with a needle animated to slowly drift ±5 degrees using CSS `@keyframes` — simulating magnetic declination.

**Retro-pattern motifs woven into the surround:**
- Engraved hatching on the mahogany panel edges: SVG `<pattern>` with 45° diagonal lines at 2px pitch, `#3d1f0a` on `#2a1205`
- Guilloché rosette borders around the chronometer bezel: a repeated SVG spirograph pattern at 1px stroke in `#b8860b`
- Graph-paper inlay on data panels: 10px × 10px grid in `#b8860b` at 8% opacity behind the canvas elements

**Micro-interaction layer:**
- **Bezel hover**: each instrument panel raises 2px (`transform: translateY(-2px)`) and the brass highlight brightens (`filter: brightness(1.15)`) — over 120ms `ease-out`. The shadow deepens to simulate physical lift.
- **Dial tap/click**: a ripple ring expands from the click point inside the bezel (CSS radial animation, `#d4a843`, 40ms delay) — simulating the feel of pressing a physical instrument button
- **Label hover**: engraved text briefly illuminates — `text-shadow: 0 0 6px #d4a843` — as if a focused light source passed over the engraving
- **Data readout pulse**: Share Tech Mono numerical displays flicker with a 60ms opacity pulse when the value changes, referencing the behavior of electroluminescent displays
- **Pilot light breathe**: the two amber pilot lights in the top rail pulse from `opacity: 0.7` to `1.0` on a 3.2s sinusoidal cycle — always on, never urgent

## Prompts for Implementation

**The story to tell.** rinji.dev is a master craftsman's private instrument room. The visitor does not browse a portfolio — they observe a working environment. The generative instruments are always running, always producing, always calibrated. The site communicates authority through *operational presence*: everything is doing something purposeful, nothing is decorative for decoration's sake.

**Entry experience**: The page loads as if the cabinet light is warming up — a 600ms fade from `#1a0e06` to reveal the full panel array, no hero text, no headline. The instruments are simply *on*. The wordmark `rinji` appears in the top rail in Playfair Display Small Caps, engraved-gold `#d4a843`, 28px — modest, confident, not shouting.

**Scroll behavior**: The dashboard does NOT scroll in the traditional sense. Instead, the viewport is divided into the fixed instrument panel layout. On mobile (< 768px), panels stack vertically and become tappable — a scroll experience that moves from instrument to instrument, each occupying full screen width with a soft 8px mahogany gap between.

**Interaction philosophy**: every micro-interaction must feel *physical*. The 120ms panel lift should feel like pressing a key on a mechanical keyboard, not floating a CSS card. Use `cubic-bezier(0.2, 0, 0, 1)` for descents and `cubic-bezier(0.4, 0, 1, 1)` for lifts — asymmetric easing matches the physics of lifting a physical object vs. setting it down.

**Generative art guidance**: All canvas elements must use `willReadFrequently: false` and `desynchronized: true` where supported. Target 30fps for reaction-diffusion, 60fps for Lissajous and Voronoi. On reduced-motion preference, freeze all generative animations but maintain the static visual state (last frame).

**Avoid**: hero headlines, call-to-action buttons, pricing grids, modal overlays, off-canvas navigation drawers, white backgrounds, flat design conventions, rounded-corner cards without bezel depth.

**Include**: the sound of precision — tight spacing, small-caps labels, numbers that update with purpose, surfaces that have material weight.

## Uniqueness Notes

1. **Skeuomorphic-as-instrument-science, not nostalgia.** Most skeuomorphic designs invoke either Apple iOS 6 nostalgia (leather textures, linen backgrounds) or generic desktop metaphors. rinji.dev is the only design in the registry that uses skeuomorphism as *instrument-grade craft* — the mahogany and brass are not decorative references to the past but functional visual metaphors for precision, calibration, and permanence. The physical depth of bezels, screws, and inset dial faces is earned by the data inside them.

2. **Dashboard layout as instrument cabinet, not SaaS analytics.** The dashboard pattern (2% frequency) is nearly always used for data-heavy product UIs with stat-grids and KPI tiles. rinji.dev is the only dashboard design that draws from pre-digital instrument traditions — the compass rose, the barograph, the oscilloscope — using a generative-art fill inside period-correct physical housings. No other registry design combines dashboard layout with skeuomorphic depth and generative art faces.

3. **Retro-patterns as technical vocabulary, not decoration.** The guilloché rosette borders, hatching patterns, and graph-paper inlays are drawn from precision engraving and cartographic traditions. They serve as visual grammar — delimiting zones, marking precision, establishing material context — not as background wallpaper. retro-patterns (1% frequency) has never been applied in this specific technical-instrument register.

4. **Micro-interactions that simulate physical instrument behavior.** The panel lift (120ms asymmetric ease), dial ripple, electroluminescent display flicker, and pilot light breathe are all derived from the behavior of real physical instruments. This is distinct from the generic hover-lift and scale-hover patterns (4–5% frequency) which are purely UI conventions with no referent in the physical world.

5. **Avoided overused patterns**: vintage motifs (35% — avoided by using instrument aesthetic as distinct register), tech motifs (23% — no circuit boards or data-center imagery), sidebar layout (overused — using dashboard instead), parallax-sections (overused — no scroll parallax).

**Chosen seed**: `aesthetic: skeuomorphic, layout: dashboard, typography: playfair-elegant, palette: warm, patterns: micro-interactions, imagery: generative-art, motifs: retro-patterns, tone: authoritative`
<!-- DESIGN STAMP
  timestamp: 2026-05-11T00:48:13
  domain: rinji.dev
  seed: seed
  aesthetic: Concept: The Chronometer Cabinet — a master horologist's personal instrument das...
  content_hash: a148981deb7e
-->