# Design Language for rinji.org

## Aesthetics and Tone

`rinji.org` is a **personal field log from a near-future archivist** — someone who lives three hours ahead of everyone else but still makes bad coffee and forgets to reply to messages. The aesthetic is **sci-fi made warm**: not the cold chrome of a spaceship bridge, but the amber glow of a portable terminal strapped to a hiking pack, its screen cracked at the corner and covered in stickers. Think *Arrival* (2016) production design filtered through a Muji notebook and a bag of charcoal pencils.

The visual language is **burned in**. Every surface has been through heat — oranges that suggest blast furnaces and autumn bonfires, grays that look like graphite rubbed across acetate, whites that are not white but the color of a fluorescent tube seen through six layers of tracing paper. The grain is ever-present: not a trendy CSS noise filter layered on top, but an integrated texture that feels like the substrate itself is slightly organic, slightly imperfect.

The tone is **approachable-casual**: the person behind this site uses present-tense verbs, never writes "leverage" or "synergy," and would rather explain a concept with a scrappy animated sketch than a polished infographic. The sci-fi is the worldbuilding — the territory is still a human being trying to make things that matter.

Nothing on the page is here to sell, impress venture capitalists, or collect email addresses. Every element either carries meaning or gets cut.

## Layout Motifs and Structure

The page is a **timeline-vertical spine** — a single continuous vertical axis that the reader descends as time moves forward. This is not a blog feed with thumbnails and truncated excerpts. It is a **literal temporal map**: the leftmost rail is a ruled axis line, `2px` at `#C4581A` (the burn), drawn from the top of the page to the bottom. Every event, project, or signal node hangs off this axis as a horizontal arm that reaches right into a content zone.

**Grid architecture:**
- Viewport width is divided into three unequal columns: `48px` (axis gutter), `320px` (node arm zone), and the remaining viewport width (content field).
- On mobile, the axis collapses to `24px` and the node arm shortens to `120px`. The content field takes full width below the arm.
- The axis line is `position: sticky` on scroll for the first `100vh`, anchoring the visitor to the temporal structure before letting them free-scroll.

**Node anatomy:** Each timeline node is a small **geometric callout**: a circle on the axis (`18px`, filled `#C4581A`), an arm line (`1px`, `#C4581A`, `160px` long), then an arm-terminal diamond (`8px × 8px`, rotated 45°). The content hangs from the terminal as a card that sits `24px` right of the diamond. The Lottie animation for each node plays when the card scrolls into view — a 40-frame loop of a geometric form assembling from its vertices, then dissolving back.

**Sectioning:** The timeline is divided into named epochs — not "Work", "Projects", "About" — but temporal labels like `[0000–0012]`, `[0012–current]` set in mono-weight grotesque at `10px`, uppercase, tracked at `+0.4em`. The epoch headers sit on the axis line, not off to the side, like mileage markers on a highway.

**No hero section.** The visitor arrives directly at the timeline top. A fixed `56px` header carries only the domain (`rinji.org`) and a single toggleable theme control (light/dark). No navigation. No hamburger menu. The timeline is the navigation.

## Typography and Palette

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

- **Display & epoch labels — `Barlow`** (weight 500–600, condensed variant). Barlow Condensed is a grotesque-neo workhorse with just enough personality in its slightly squared-off curves to feel contemporary without being trendy. Used at `48px` / weight 600 for node titles; at `10px` / uppercase / `+0.4em` tracking for epoch markers. Never used in body copy.
- **Body & metadata — `Space Grotesk`** (weight 300–500). Space Grotesk is the natural grotesque-neo complement: optical metrics that sit comfortably at `16–17px`, with a slightly mechanical quality that reinforces the sci-fi substrate without pulling toward mono territory (mono is at 74% in the registry — hard avoid). Weight 300 for supporting text, weight 500 for inline labels and dates.
- **Accent & data — `JetBrains Mono`** (weight 400, italic). Used sparingly — only for epoch time codes, hex color references in the design system reference, and inline technical values like `[v0.3.1]`. The mono is used like a specialist notation, not as the primary display voice.

**Type scale:**
- Node title (Barlow Condensed 600): `48px` / `1.05` line-height
- Body paragraph (Space Grotesk 300): `16px` / `1.7` line-height
- Epoch marker (Barlow Condensed 500, all-caps): `10px` / `1.0` line-height / `+0.4em` tracking
- Technical inline (JetBrains Mono 400 italic): `13px`

**Palette:**

| Role | Name | Hex |
|------|------|-----|
| Background (dark mode) | Forge Black | `#0E0B09` |
| Background (light mode) | Ash White | `#F2EDE6` |
| Primary accent | Burnt Orange | `#C4581A` |
| Secondary accent | Ember Amber | `#E08030` |
| Text primary (dark) | Bone | `#E8DDD0` |
| Text primary (light) | Charcoal | `#1C1410` |
| Surface (dark) | Scorched Gray | `#1F1A16` |
| Surface (light) | Paper Gray | `#DDD7CE` |
| Muted text | Ash | `#7A6E65` |
| Axis/accent line | Live Burn | `#C4581A` |

**Color logic:** The palette is monothermally anchored — everything derives from the orange-to-black thermal gradient. The burnt orange is not a brand orange, not a warning orange; it is the color of iron cooling in a forge, the `5500K` color temperature of a halogen lamp seen through smoked glass. On dark backgrounds, it reads as a scar of warmth. On light backgrounds, it reads as charred ink. The grain-overlay texture (see Imagery) slightly desaturates every surface by introducing a `3%` luminance noise field.

## Imagery and Motifs

**Grain overlay:** Every surface — backgrounds, cards, even the Lottie canvases — is covered by a single SVG `feTurbulence` noise layer at `opacity: 0.035` (dark mode) / `opacity: 0.055` (light mode), with `baseFrequency: 0.65`, `numOctaves: 4`, `type: fractalNoise`. This is not a separate image asset — it is a persistent `<svg>` filter applied as a `::before` pseudo-element on `body`. The grain does not animate. It is as static as paper. It prevents any surface from feeling synthetic or screen-born.

**Lottie animations:** Each timeline node has a dedicated 40-frame Lottie JSON that plays on scroll-enter (Intersection Observer, threshold `0.2`). The animations all share the same visual grammar:
- A geometric shape (triangle, hexagon, octagon — never circles, never blobs) assembles from its vertices outward over 18 frames.
- It holds for 4 frames.
- It dissolves back to a single point over 18 frames.
- The shape uses only two fill values: `#C4581A` (burnt orange) at `100%` opacity and `#0E0B09` (forge black) at `0%` opacity — so the dissolve is a fade, not a wipe.
- Animations loop once on enter, then idle. They do not loop infinitely.
- All Lottie assets are hosted inline as JSON data URIs to eliminate network requests.

**Geometric shapes motif:** Geometric shapes appear in three registers beyond the Lottie nodes:
1. **Axis decorators:** Every epoch boundary on the axis line gets a narrow equilateral triangle (`10px`, pointing right) in `#C4581A`, serving as a waypoint arrow.
2. **Background field:** A single fixed `<canvas>` element at `position: fixed`, `z-index: 0`, `opacity: 0.04`, renders a sparse field of large geometric outlines (hexagons, `120–240px`). These rotate at `0.02° per frame` — imperceptibly slow, visible only on extended reading sessions. The canvas respects `prefers-reduced-motion`.
3. **Node arm terminals:** The `8px` diamond at the arm tip is the smallest geometric shape instance — a structural element that also carries the motif vocabulary.

**No photography. No illustration.** The imagery system is entirely generative and vector-based. The frequency report shows grain-overlay and geometric-shapes are both underused (3% and 1% respectively). Both are implemented here.

## Prompts for Implementation

Build this as **a descent into a personal archive** — the visitor enters at the present and scrolls backward through time. The scroll direction is inverted mentally but not physically: the DOM is ordered oldest-to-newest from bottom to top in the source, but CSS `flex-direction: column-reverse` displays newest-first without reversing the tab order. This is a subtle storytelling decision: the page says "you are entering at now" without requiring JavaScript to invert scroll.

**The temporal axis is the protagonist.** Before a single word of content is written, draw the axis SVG:
- An `<svg>` spanning full document height, `position: absolute`, `left: 47px`, `top: 0`.
- A single `<line>` from `y=0` to `y=100%` in `stroke: #C4581A`, `stroke-width: 2`.
- Epoch label `<text>` elements at computed `y` positions.
- Triangle `<polygon>` waypoints at each epoch boundary.
- The axis SVG never reflows. It is drawn once on mount, then updated only if content changes.

**Lottie integration:**
```
npm install @lottiefiles/lottie-player
```
Load the web component via a single script tag. Each `<lottie-player>` is assigned `autoplay="false"` and triggered via `IntersectionObserver`. On entry: `player.play()`. After the animation ends (`complete` event): `player.stop()`. This prevents the 74% parallax / 75% scroll-triggered pattern surplus — the Lottie animation replaces scroll-triggered transforms entirely.

**Grain overlay implementation:**
```css
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,...");
  /* SVG contains feTurbulence filter applied to a full-size rect */
}
```
The grain sits above everything at `z-index: 9999` with `pointer-events: none`. It does not animate. It does not respond to scroll. It is permanent.

**Rotating geometry canvas:**
```javascript
const canvas = document.getElementById('geo-field');
const ctx = canvas.getContext('2d');
let angle = 0;
function drawFrame() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  // draw 8 hexagons at fixed positions, stroke only, #C4581A at 4% opacity
  // rotate each by angle += 0.0003 radians
  requestAnimationFrame(drawFrame);
}
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  drawFrame();
}
```

**Theme toggle:** A single `data-theme` attribute on `<html>` controls all color variables via CSS custom properties. The toggle button is a `24px × 24px` square in the header, filled with the current theme's background color and stroked in the accent color — no label, no sun/moon icons. Its title attribute reads "switch to [opposite] theme". Transition on theme switch: `200ms` ease on all color custom properties, no layout shift.

**Scroll velocity signature:** As the user scrolls faster, the axis line briefly thickens from `2px` to `6px` (CSS transition `100ms`), then snaps back over `400ms`. This is implemented by listening to `scroll` events, computing `delta / time`, and writing a CSS custom property `--axis-weight` that drives `stroke-width`. It is the only scroll-reactive animation on the page. It works on both touch and wheel.

**AVOID in implementation:** No hero sections, no sticky CTAs, no newsletter captures, no social proof grids, no pricing tables, no loading spinners, no skeleton loaders (the page is static), no parallax transforms on content sections, no stagger entrance animations on lists, no backdrop-blur glassmorphic cards, no gradient mesh backgrounds.

## Uniqueness Notes

**Chosen seed (per assignment):** aesthetic = **sci-fi**, layout = **timeline-vertical**, typography = **grotesque-neo**, palette = **burnt-orange**, patterns = **lottie-animation**, imagery = **grain-overlay**, motifs = **geometric-shapes**, tone = **approachable-casual**.

**Differentiators from every other design in the registry:**

1. **Lottie as the sole animation system, replacing scroll-triggers entirely.** The registry shows parallax at 75%, stagger at 50%, scroll-triggered at 35% — all severely overused. `rinji.org` eliminates all three and uses Lottie geometric assembly animations as the only motion layer. This is structurally novel: animation is node-specific, not page-global. When a timeline event enters view, its shape assembles. Everything else is static.

2. **Grain-overlay implemented as a fixed SVG feTurbulence layer, not a CSS backdrop-filter or image.** The registry shows grain-overlay at 3% — one of the least-used imagery approaches. Most sites that use grain apply it as a CSS `url(noise.png)` repeat or a `backdrop-filter: contrast() brightness()` trick. This design applies it as a true SVG filter, which means the noise is vector-quality at all pixel densities, responds to the document's color scheme, and does not require an external asset load.

3. **Geometric-shapes motif at three structural levels (axis decorators, background canvas, node arm terminals) rather than as decoration.** The registry shows geometric-shapes at 1% — the rarest motif in the system. The design uses geometry as infrastructure: the shapes are not decoration laid over content but functional markers in the temporal axis, terminal connectors in the node anatomy, and the subject matter of the Lottie animations. The geometry explains the structure.

4. **Timeline-vertical layout with inverted DOM order (newest-first via flex-direction: column-reverse).** The registry shows timeline-vertical at 3%. Most timeline implementations put old events at top and new events at bottom, matching document order. This design inverts the mental model — the visitor arrives at "now" and descends into the archive — while preserving DOM/tab order for accessibility via CSS reversal rather than JavaScript. No other design in the registry uses flex-direction inversion for temporal storytelling.

5. **Grotesque-neo typography (Barlow Condensed + Space Grotesk pairing) deliberately avoiding the 74% mono dominance.** Mono typography saturates the registry. This design uses JetBrains Mono only for technical inline values — epoch codes and version strings — while the display and body voice is fully grotesque. The Barlow Condensed / Space Grotesk pairing is not used by any other design in the registry.

**Reference avoided patterns from frequency analysis:**
- Parallax (75%) — zero parallax on this page
- Stagger entrance animations (50%) — no list stagger
- Scroll-triggered CSS transforms (35%) — replaced by Lottie
- Vintage motifs (35%) — no vintage; all motifs are geometric and sci-fi
- Tech/circuit motifs (23%/13%) — geometric-shapes chosen instead; circuit topology explicitly avoided
- Mono typography as primary voice (74%) — mono relegated to inline technical notation only
<!-- DESIGN STAMP
  timestamp: 2026-05-11T00:50:08
  domain: rinji.org
  seed: seed
  aesthetic: `rinji.org` is a **personal field log from a near-future archivist** — someone w...
  content_hash: 7c17f27f3240
-->