# Design Language for rinji.org ## Aesthetics and Tone rinji.org ("rinji" meaning "extraordinary" or "special/temporary" in Japanese) embodies the visual language of a field engineer's weathered notebook crossed with a speculative futures lab. The aesthetic is playful in the way that prototype hardware is playful -- exposed screws, handwritten labels on brushed aluminum panels, circuit boards with whimsical Easter eggs etched into the copper traces. Think of the joyful chaos inside a well-loved makerspace: soldering irons next to origami cranes, oscilloscope readings pinned beside doodles of rocket ships. The tone is raw-authentic -- no polish, no corporate veneer. Text reads like it was typed on a mechanical keyboard at 2am by someone who genuinely loves what they're building. Sentences are direct, occasionally fragmented. The voice of someone showing you their workshop, not pitching you a product. There's an undercurrent of wry humor -- tooltips that say unexpected things, loading states that feel like inside jokes. The rawness is the point: every imperfection is evidence that a human made this. The mood oscillates between focused intensity (dense information, tight grids of icons) and expansive wonder (full-viewport animated horizons, slow-moving particle fields that evoke deep space or deep ocean). The playfulness emerges not from bright colors or bouncy animations but from unexpected juxtapositions: earth-toned palettes applied to futuristic interfaces, hand-drawn annotation marks overlaying precision-engineered layouts, icon systems that mix technical symbols with natural forms. ## Layout Motifs and Structure The layout uses a minimal-navigation philosophy: there is no traditional navbar, no hamburger menu, no sticky header. Instead, navigation is embedded contextually within the content itself -- section headings double as anchor links, and a single floating glyph in the bottom-right corner (a small compass-rose icon rendered in #8B6914) expands on hover into a radial menu showing all sections as short labels arranged in a circle. This radial menu uses `position: fixed` with `z-index: 999` and transitions from `scale(0) rotate(-90deg)` to `scale(1) rotate(0deg)` over 400ms with a cubic-bezier(0.34, 1.56, 0.64, 1) spring curve. **Primary Structure:** The page is organized as a vertical sequence of "field notes" -- discrete content blocks that feel like pages torn from different notebooks and arranged on a corkboard. Each block occupies 85vw max-width and is offset alternately left and right by 3-5vw, creating a subtle zigzag rhythm down the page. Blocks are separated by 8rem of breathing space. **Section Architecture:** - **Hero zone (100vh):** A full-viewport canvas showing an animated topographic map rendered in earth tones (#5C4A2E lines on #F2EDE4 background). The map lines slowly drift and reform, suggesting terrain that is alive and shifting. The site title appears in variable-fluid typography that responds to viewport width, centered over the map. No subtitle, no CTA -- just the name and the moving earth beneath it. - **Disclosure panels (3-5 sections):** Each section begins as a single line of text (a provocative question or statement) with a small arrow icon (#8B6914). Clicking or scrolling into view triggers progressive-disclosure: the content unfolds downward in a staggered cascade, with each paragraph appearing 150ms after the previous one, sliding in from `translateY(20px)` with `opacity: 0` to resting position. This creates the sensation of a document being declassified in real time. - **Icon gallery (1 section):** A dense grid of custom icons (6 columns on desktop, 3 on mobile) displayed at 48x48px each, rendered as inline SVGs in #5C4A2E on transparent backgrounds. Each icon represents a concept (signal, terrain, orbit, seed, forge, compass, prism, antenna, meridian, fossil). On hover, each icon scales to 1.15x and its color transitions to #C4772A over 200ms, while a tooltip fades in below showing the concept name in "Inconsolata" at 0.75rem. - **Terminal block (1 section):** A faux terminal interface with a #2B2118 background and #D4C8A5 text, displaying a slow typewriter animation of poetic/philosophical text about the domain's purpose. The cursor blinks at 530ms intervals using `@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } }`. **Spatial Relationships:** Content blocks use `margin-inline: auto` with alternating `padding-left` and `padding-right` offsets. No content touches the viewport edges -- minimum 5vw padding on all sides. The overall feeling is of generous negative space punctuated by dense information clusters, like islands of meaning in an ocean of calm. ## Typography and Palette **Typography:** - **Headlines:** "Anybody" (Google Fonts) -- a variable font with width and weight axes that allows extreme fluidity. Headlines use `font-variation-settings: 'wdth' 120, 'wght' 700` at rest, and on scroll-trigger, the width axis animates from 75 to 120 over 800ms, creating a breathing/expanding effect. Sizes use `clamp(2.2rem, 4.5vw + 0.8rem, 5.5rem)` for full fluid scaling. Color: #2B2118. Letter-spacing: -0.02em for tight, confident headlines. - **Body Text:** "Hanken Grotesk" (Google Fonts) -- a clean, humanist sans-serif with excellent readability at small sizes. Weight 400 for body, 600 for emphasis. Size: `clamp(1rem, 1.1vw + 0.6rem, 1.25rem)`. Line-height: 1.7. Color: #3D3326 on light backgrounds, #D4C8A5 on dark backgrounds. Max paragraph width: 62ch for optimal reading measure. - **Monospace/Accent:** "Inconsolata" (Google Fonts) -- used for the terminal block, icon labels, metadata, and small annotation text. Weight 400, size 0.85rem. Color: #8B6914 when used as accent text on light backgrounds. Letter-spacing: 0.04em. Also used for any numerical data or code-like content. **Palette:** | Role | Name | Hex | Usage | |------|------|-----|-------| | Background Primary | Bone Dust | #F2EDE4 | Main page background, breathing space | | Background Deep | Kiln Dark | #2B2118 | Terminal block, dark sections, footer | | Text Primary | Char Earth | #3D3326 | Body text, secondary headings | | Text Dark | Obsidian Soil | #2B2118 | Headlines, strong emphasis | | Accent Primary | Raw Ochre | #8B6914 | Navigation glyph, links, icon hover, annotations | | Accent Warm | Fired Clay | #C4772A | Hover states, active elements, progress indicators | | Accent Muted | Lichen Stone | #7A8B6E | Success states, secondary icons, subtle dividers | | Surface Card | Parchment | #EAE2D4 | Card backgrounds, disclosure panel backgrounds | | Border Subtle | Dried Reed | #C9BDA6 | Thin borders (1px), separator lines | All colors maintain WCAG AA contrast ratios against their intended backgrounds. The palette draws from actual earth materials -- kiln-fired ceramics, dried lichens, ochre pigments, bone meal -- giving every surface a tactile, geological quality. ## Imagery and Motifs **Icon System (Primary Visual Language):** The site's visual identity is built on a proprietary icon system of 20+ custom SVG icons, each drawn at 48x48px with 2px stroke weight and no fill. The style is technical-meets-organic: clean geometric construction with occasional hand-drawn imperfections (slightly uneven curves, endpoints that don't quite meet). Icon subjects span two families: *Terrestrial/Natural:* seed (sprouting form), fossil (ammonite spiral), terrain (contour lines), meridian (globe slice), root-system (branching downward), mineral (crystal lattice), erosion (layered curves), canopy (tree crown from above) *Technical/Futuristic:* signal (concentric arcs), orbit (elliptical path with dot), antenna (branching upward), prism (light splitting), forge (anvil with spark), compass (four-point with rotating needle), scanner (sweeping arc), relay (node-to-node path) The deliberate mixing of natural and technical icon families reinforces the site's identity as a space where earth science meets speculative engineering. **Animated Topographic Map:** The hero section features an SVG-based topographic contour map that slowly morphs. Contour lines are rendered as `` elements with `stroke: #5C4A2E` and `stroke-width: 1.5` on the #F2EDE4 background. Using CSS `offset-path` and JavaScript requestAnimationFrame, the control points of each path shift by 2-5px over 15-second cycles, creating terrain that appears to breathe. The effect is subtle -- viewers may not consciously notice the movement for several seconds. **Annotation Marks:** Scattered across the page at intentional intervals, small hand-drawn SVG marks appear: circles around key words (rendered as imperfect ovals with `stroke-dasharray` animation), arrows pointing to important elements, small "x" marks at coordinates. These are rendered in #C4772A at 60% opacity and create the feeling that someone has been studying this page and marking it up -- a meta-layer of human attention overlaid on the digital surface. **Motif: Futuristic Field Equipment:** Decorative elements throughout the page reference speculative scientific instruments: a small rotating radar sweep in the footer (CSS-only, using `conic-gradient` and `@keyframes rotate`), subtle grid-dot patterns (`radial-gradient(circle, #C9BDA6 1px, transparent 1px)` at `background-size: 24px 24px`) behind disclosure panels, and thin horizontal scan-lines (1px #C9BDA6 at 10% opacity, repeating every 4px) overlaying the terminal block. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must function as a single-page vertical journey through a field researcher's discoveries. The hero section occupies the full viewport and is non-scrollable for the first 1.5 seconds (using `overflow: hidden` on `` with a setTimeout release), during which the topographic map animation establishes itself and the site title fades in from `opacity: 0` over 1200ms with `filter: blur(4px)` transitioning to `filter: blur(0)`. After the hold releases, scrolling feels intentional and weighted -- apply `scroll-behavior: smooth` globally and use Intersection Observer to trigger section reveals. **Progressive Disclosure as Core Mechanic:** Every content section below the hero begins in a collapsed state showing only a single-line header. As each section enters the viewport (threshold: 0.3 on IntersectionObserver), it triggers a staggered reveal: the header's arrow icon rotates 90 degrees (transform: `rotate(0deg)` to `rotate(90deg)` over 300ms), then child elements cascade in with 150ms delays between each. Once revealed, sections remain open -- there is no re-collapsing. This creates a one-directional unfolding narrative: the page grows richer as you scroll deeper, like excavating layers of sediment. **Icon Interactions:** The icon gallery section uses CSS Grid with `grid-template-columns: repeat(auto-fill, minmax(72px, 1fr))` and `gap: 1.5rem`. Each icon cell is a `