# Design Language for riron.xyz ## Aesthetics and Tone **riron** (理論) is Japanese for *theory* — the word that sits at the exact midpoint between mathematics and philosophy, between proof and intuition. The site carries that tension forward. It is not a portfolio. It is not a product landing page. It is a **contemplative proof-space**: a place where abstract theoretical work is presented the way a physicist writes equations on a blackboard — with calm authority, total confidence in sparseness, and the quiet understanding that the mathematics is beautiful enough to speak for itself. The aesthetic is **zen crystalline** — two ideas that seem opposed until they resolve: the emptiness of a zen garden made structurally explicit as a crystal lattice. A seed crystal dropped into supersaturated space. The page begins as near-void — a deep ink field — and *grows* outward from the center as the visitor arrives. Crystalline growth is the animation metaphor: facets nucleate, branch along geometric axes, then hold still. When the crystal is done growing, it is *complete* — not decorative, not noisy, simply faceted and precise. The tone is **professional in the Japanese sense** — *monozukuri* craftsmanship, not Western corporate authority. No confidence badges, no testimonials, no social proof. The work speaks. The silence around the work speaks louder. Primary mood reference: a scanning electron microscope image of a bismuth crystal, mounted on black velvet. Stepped terraces, iridescent thin-film interference colors, the geometry of a structure that grew itself by physical law. ## Layout Motifs and Structure The layout is radically centered — not in the banal "everything is centered text" sense, but in the sense of a **single optical nucleus** from which all structure radiates. The page is composed as five crystalline panels, each 100svh, each organized around a single centered anchor point from which faceted geometry extends. **The Crystal Spine.** A vertical axis — 1 px wide, `#C8E6FF` at 15% opacity — runs the full height of the page, exactly centered. It is not a nav rail. It is a growth axis. Each section's content nucleates from a point on this spine, with geometry extending left and right along facet lines at 30°, 60°, and 90° angles. The spine never moves. The facets grow in on scroll. **Panel 1 — Void/Seed (100svh hero).** Near-total darkness. A single point of light at the exact center of the viewport — 2 px dot, `#E8F4FF`. From this point, the crystal begins to nucleate over 2.4 seconds on first load: hairline facets extend outward at exactly 30°/60° intervals, traced by `stroke-dashoffset` animation on SVG paths. The wordmark **riron** appears last, at center, as the final crystal facet locks into place. Typography is set in Playfair Display SC, 6–9 vw, tracked at `0.4em`, color `#E8F4FF`. No subtitle. No CTA. **Panel 2 — Lattice/Field.** A generative crystalline lattice fills the background: a Voronoi-derived hexagonal mesh generated at build time (or via canvas on load), rendered as thin `#1a3a5c` lines on `#040d18` ground. Foreground: a single column of prose, 55–60 ch wide, centered. The lattice does not scroll — it breathes via a slow `scale(1.0) → scale(1.02) → scale(1.0)` pulse, 8-second period, subtly alive. **Panel 3 — Facet/Detail.** An asymmetric cluster of three crystalline "facet cards" — not rectangles but actual polygon shapes (4–6 sided, clipped via `clip-path: polygon()`), arranged around the central axis in a balanced but non-symmetric configuration. Each card on hover lifts 12 px vertically and shifts its shadow from `0 2px 8px rgba(200,230,255,0.08)` to `0 14px 40px rgba(200,230,255,0.18)` — the hover-lift effect is slow (0.5s cubic-bezier ease) and weighted, like a crystal slab lifting on air. **Panel 4 — Growth/Sequence.** A horizontal timeline of crystalline growth stages — five nodes, connected by the 1 px spine axis (here running horizontal). Each node is a small Voronoi polygon, 40–60 px across. The nodes are connected by animated growth lines that draw in left to right on scroll-enter. Each node expands to full panel width on click/tap. **Panel 5 — Terminus/Void.** Mirrors Panel 1 exactly, but in reverse: the crystal slowly *dissolves* back to the single seed point over a 4-second exit animation triggered when the visitor reaches the bottom 20% of the page. Contact/connect information appears in the void space above the dissolving crystal, in the same tracked small-caps. No form. Just an email address and a single line of context. **Spatial logic:** 80 px gutter on desktop (no smaller than 48 px), centered column max-width 960 px, spine always at 50vw. Mobile collapses to single-column with the crystal spine suppressed to 50% opacity. ## Typography and Palette **Typography — retro-display meets zen restraint.** The typographic system is built from exactly two faces, chosen for their geometric authority with classical proportions: - **Display / Headings:** [Playfair Display SC](https://fonts.google.com/specimen/Playfair+Display+SC) — used exclusively for the wordmark, section anchors, and any numerals presented at display scale (6–9 vw for hero, 3–4 vw for section heads). Small caps variant only. Weight 700. Tracked at `0.35–0.45em` — open-tracked like engraved lettering on scientific apparatus. Color: `#C8E6FF` (crystal highlight white-blue). - **Body / Prose:** [DM Mono](https://fonts.google.com/specimen/DM+Mono) — used for all running prose, captions, dates, and labels. Weight 300 (light). Size 14–16 px, line-height 1.8. This is the instrument readout face — scientific, calm, slightly cold. Color: `#8ab4d4` (muted crystal blue-gray). No third face. No sans for UI chrome. DM Mono handles all functional text including navigation (if any), which is reduced to three characters maximum per item. **Palette — crystalline gradient, not candy gradient.** The palette is built from real bismuth crystal interference colors — the iridescent thin-film colors that appear when bismuth oxidizes: gold-into-violet-into-teal, very desaturated, very deep. | Role | Hex | Name | |------|-----|------| | Void ground | `#030b14` | Deep vacuum | | Ground mid | `#071828` | Ink ocean | | Crystal axis | `#0d2a42` | Facet shadow | | Crystal highlight | `#C8E6FF` | Ice edge | | Bismuth gold | `#b8922a` | Thin-film gold | | Bismuth violet | `#4a2a6b` | Thin-film violet | | Bismuth teal | `#1a5a52` | Thin-film teal | | Prose text | `#8ab4d4` | Instrument blue | | Accent glow | `#4fa8d8` | Crystal interior | **Gradient application:** not color-band gradients but thin-film interference gradients — used exclusively on the polygon facet-card fills as `linear-gradient` running at 138°, from `#0d2a42` through `#1a5a52` to `#4a2a6b`. The gradient shift is subtle (20–30% saturation) so it reads as material depth, not as decoration. ## Imagery and Motifs **Imagery: generative crystalline art — procedural, not photographic.** There are no photographs anywhere on riron.xyz. All visual content is generated geometry: 1. **Voronoi crystal lattice.** The background of Panel 2 is a Voronoi tessellation computed from ~120 seed points arranged in a slightly perturbed hexagonal grid. The cell edges are rendered as 0.5 px hairlines in `#1a3a5c`. The cells themselves are filled with `#040d18` (matching ground) except for ~8 randomly selected cells per viewport which receive a very faint gradient fill (`opacity: 0.04`) in bismuth gold or teal — as if those cells caught light differently. On scroll, cells gradually illuminate and extinguish. 2. **Crystallographic facet SVGs.** The hero crystal and the Panel 3 facet cards are SVG polygons generated from a parametric crystal-growth algorithm: start with a seed hexagon, iteratively extrude faces at random walk steps constrained to 30°/60° lattice angles. Each run produces a slightly different crystal shape. The shapes are pre-generated at build time (3–5 variants) and selected randomly on load. Stroke: 0.8 px `#C8E6FF` at 60% opacity. Fill: dark bismuth gradient. 3. **Nucleus point light.** The single 2 px seed dot at hero center emits a soft radial glow: `radial-gradient(circle 120px at center, rgba(200,230,255,0.12) 0%, transparent 100%)`. This is the only "lighting effect" on the page. Everything else is line and polygon. 4. **Crystalline motifs in prose.** Section numbers are set as crystallographic Miller indices — `(001)`, `(110)`, `(111)` — in DM Mono at 11 px, `#4fa8d8`. This is the site's only decorative text element. It reads as scientific notation to those who know it, and as a quiet abstract symbol to those who don't. 5. **No icons.** No icon fonts, no SVG icon libraries. The only non-text symbol is the Miller index notation and the crystal geometry itself. ## Prompts for Implementation Build riron.xyz as a **single crystalline scroll-narrative** — five panels of increasing geometric complexity that grow from seed to terminus and dissolve back. The visitor is not a customer. They are an observer watching a crystal form. Every implementation decision should serve that metaphor. **Hero nucleation sequence (Panel 1):** - Black field on load, only the 2 px seed dot visible - After 300ms: SVG crystal paths begin stroke-dashoffset animation, drawing outward from center at ~160 px/second - After 2.4s: wordmark fades in over 0.6s - After 3.0s: faint downward-pointing chevron (12 px, 0.5 px stroke, `#4fa8d8`) pulses twice with opacity 0.4 → 0 to indicate scroll **Lattice field (Panel 2):** - Voronoi mesh rendered to `` or as inline SVG (SVG preferred for crispness at high DPI) - Mesh cells illuminate in sequence as scroll position increases — not all at once, but like a wave of thin-film color washing from top to bottom - Prose column has `backdrop-filter: none` (the lattice shows behind it without blur — intentionally no glassmorphism) **Facet cards (Panel 3):** - Three `clip-path: polygon()` cards, each a different crystal face angle - CSS custom properties `--facet-x` and `--facet-y` used with JS to drive the hover-lift transform without GSAP dependency - Hover: `transform: translateY(-12px)` + box-shadow bloom over 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) - No border-radius anywhere on this page — crystals have facets, not rounded edges **Growth timeline (Panel 4):** - IntersectionObserver triggers each node's growth-line animation as it enters the viewport - Growth lines use SVG `stroke-dasharray` / `stroke-dashoffset` technique - Node polygons scale from `scale(0)` at center to `scale(1)` over 0.6s with a slight elastic overshoot (`cubic-bezier(0.68, -0.55, 0.265, 1.55)`) **Terminus dissolution (Panel 5):** - Reverse of Panel 1: crystal paths animate `stroke-dashoffset` back to origin as visitor reaches bottom - Contact information uses `opacity: 0 → 1` staggered over 1.2s as crystal dissolves - No footer navigation. No links except the email address and one optional `→ work` internal link **DO NOT implement:** hero CTAs, pricing blocks, testimonial rails, feature grids, stat counters, newsletter modals, cookie banners (exempt for static sites), social media icon rows, sticky navigation (the site has no nav), hamburger menus, carousels, or any component that implies commercial transaction. **CSS architecture:** Custom properties for all palette values. SVG as primary illustration medium. No CSS framework. Minimal JS — only for the Voronoi computation and IntersectionObserver scroll triggers. No animation library required; all motion is pure CSS transition + SVG attribute animation. ## Uniqueness Notes 1. **Crystal growth as page narrative, not decoration.** No other design in the registry uses crystallographic geometry as the load-bearing structural metaphor — not just a motif applied to a standard layout, but the actual cause-and-effect logic of the page's composition. The page *grows* like a crystal; it *dissolves* like a crystal. Frequency data shows crystalline at 6% but always as a decorative motif, never as a structural logic. 2. **Voronoi + bismuth thin-film interference palette.** The palette is derived from a specific physical phenomenon (thin-film interference in bismuth oxides) rather than from brand color theory or aesthetic preference. The Voronoi lattice is computed from crystal geometry principles. This pairing of procedural imagery with a physics-derived palette is present in zero other designs in the registry. Generative-art sits at 2% frequency — the lowest tier — making this an actively differentiating choice. 3. **Retro-display typography in a scientific/zen register.** Playfair Display SC tracked at 0.4em reads as engraved instrument labeling — a scientific instrument aesthetic that is entirely different from the decorative or editorial uses of display typography in the registry. retro-display is at 3% frequency. No other design uses it paired with DM Mono and a void-dark palette. The combination reads as a physicist's chalkboard, not a designer's portfolio. 4. **No photographic imagery, no icons, no decorative non-geometric elements.** The entire visual vocabulary is line, polygon, gradient. This is rarer in the registry than it sounds — even "minimal" designs typically include photographs or icon sets. riron.xyz achieves full visual richness through geometry alone. 5. **Miller index notation as the sole decorative text element.** Using crystallographic notation `(hkl)` as section numbers is a micro-detail that rewards domain knowledge without alienating those who don't have it. No other design in the registry uses scientific notation as a design element. **Chosen seed:** `aesthetic: zen, layout: centered, typography: retro-display, palette: gradient, patterns: hover-lift, imagery: generative-art, motifs: crystalline, tone: professional` **Avoided patterns (from frequency analysis):** gradient used as candy/decorative color band (77% — avoided by using physics-derived thin-film interference gradients instead); centered as generic text-centering (84% — avoided by using centered as a crystallographic axis logic, not text alignment); hover-lift as simple card bounce (9% — avoided by using it as the weighted lift of a mineral slab, with slow timing and shadow bloom instead of quick pop).