# Design Language for interplanetary.biz ## Aesthetics and Tone interplanetary.biz is the brand mark of a cheerful, slightly absurd cooperative: a registry of businesses that operate across worlds. Picture a small-town chamber of commerce, except the town has nine outposts on five planets and three Lagrange stations, and the office still smells faintly of fresh paper. The visual identity sits at the unusual intersection of **neomorphism** (soft, pillowy surfaces with diffuse double shadows, as if every panel were pressed-and-released into pale clay) and **scientific data visualization** (gentle line charts, sparklines, polar diagrams of trade routes). The mood is approachable-casual -- friendly, plain-spoken, almost cosy -- and the storytelling reads more like a Sunday-morning newsletter than a corporate annual report. The site should feel like opening a beautifully made paperback of *interplanetary small business statistics*. Every block is a soft-edged tile that looks debossed into the page rather than floating above it. Charts breathe. Aurora ribbons slowly drift across the upper bands of major sections. The cursor never feels rushed; the page never asks for a sale. Instead it teaches, charts, and quietly tabulates the work of distant cooperatives -- the lichen-farmers of Ceres-3, the methane sommeliers of Titan, the tide-clock makers of Europa -- as if their existence were the most ordinary thing in the world. Tonal references: the warm-but-precise voice of *Pudding* essays, the soft material of pre-iOS-7 dashboards crossed with a 2025 Lottie-illustrated banking app, the aurora-time-lapse calm of an ISS night-side video, the typesetting restraint of a university press monograph. ## Layout Motifs and Structure **Primary layout: modular-blocks on a strict 12-column tile grid, never broken, never decorative.** The page is composed of soft, indented panels of varying sizes (1x1, 2x1, 2x2, 3x2, 4x1 ratios). Every panel is the same neomorphic chassis -- same border-radius (28px), same dual-shadow recipe -- but its contents differ wildly: a paragraph here, a Lottie animation there, a sparkline, a polar plot, a quote. Modular-blocks is deliberately chosen because it is underused (9%) and because it lets the data and the Lottie illustrations sit as equal citizens with the prose. **Section architecture (vertical, top to bottom):** 1. **Masthead band (full-bleed, 100vh on first scroll, then collapsing to 16vh):** The interplanetary.biz logotype centered in elegant serif, with a single horizontal aurora-lights ribbon undulating above it. A Lottie-animated planet (rotating, with passing satellites) sits in a 240px circular debossed well. 2. **Today's Almanac (4-tile row):** Four 1x1 neomorphic tiles. Tile 1 -- a Lottie of a small mining drone, looping. Tile 2 -- a sparkline of Mars-1 cooperative dues. Tile 3 -- a quote in elegant serif italic. Tile 4 -- a tiny rotating polar chart of "current trade winds." 3. **Featured Cooperative (2x2 hero block):** Large neomorphic panel that contains an embedded Lottie illustration on the left half (e.g., a hydroponic mushroom farm with gently-bobbing caps) and a serif essay on the right half. The block is not a CTA. It is a story. 4. **The Ledger (3x2 modular cluster):** Six tiles forming a small dashboard of monochrome data visualizations -- a stacked area chart, a connected scatter, a small radial heatmap, a histogram, a Sankey of resource flows, a tiny choropleth of Mars provinces. All in one-color line work, no fills, no chart titles -- captions sit *below* the tile in serif italic. 5. **Field Notes (single-column 8-of-12, indented):** Long-form serif body text, broken every ~600 words by a 2x1 neomorphic data tile that comments on the surrounding paragraph. Like a Tufte sidenote, but with a softly-pressed chart in it. 6. **Aurora Index (4x1 wide band):** A horizontal panoramic neomorphic well containing a slowly-animating aurora-lights SVG ribbon (six soft monochrome layers) overlaid with a thin x-axis labeled in years. This *is* the data viz: the aurora itself is the chart, its ribbons encoding cooperative-membership growth across decades. 7. **Directory Index (modular masonry of 12 small 1x1 tiles):** Each tile is a Lottie-animated mini-icon of a member co-op, with a serif name underneath. Hover gently raises the indent (shadow softens, light shifts slightly). 8. **Colophon (centered, single column):** A serif blessing rather than a footer. Set ragged-right. **Spatial principles:** - Generous vertical rhythm (96px between rows, 32px between tiles in a row). - Panels never overlap. Depth is implied by shadow, not by stacking. - Negative space is *cool gray*, not pure white -- the indents must read as indents. ## Typography and Palette **Typography (Google Fonts only):** - **Display / Masthead / Section headings:** "Cormorant Garamond" -- weight 500 for section titles, weight 300 italic for the masthead wordmark, set in true small caps where supported. Letter-spacing 0.04em. Used at clamp(2rem, 5vw, 4.5rem). - **Body / Narrative:** "EB Garamond" at 19px / line-height 1.65, weight 400 for paragraphs, weight 400 italic for inline asides and chart captions. The pairing of two old-style serifs (one for display, one for reading) gives the page its book-like calm. - **Numerics, labels, axis ticks, fine print:** "JetBrains Mono" at 12px, weight 400, letter-spacing 0.06em. Used *only* inside data-viz tiles for axis labels and tabular figures, never in body prose. - **Tiny accent sans (button labels, navigation):** "Inter" 13px, weight 500, letter-spacing 0.02em -- the only sans on the page, used sparingly so the serif typography dominates. **Palette (strict monochrome with one warm accent):** - `#F1ECE3` -- *ivory paper.* Default page background. Warm enough to feel like uncoated paper, cool enough to be a digital surface. - `#E6E0D4` -- *ivory base.* The neomorphic panel surface. Slightly darker than the page so debossed shadows read. - `#D5CDBE` -- *kraft.* Secondary surface for nested tiles inside a panel. - `#2C2A26` -- *espresso ink.* Body text, axis lines, line work in charts. - `#4F4A41` -- *bistre.* Secondary text, captions, italic asides. - `#9A9183` -- *taupe.* Tertiary text, tick labels, subtle borders. - Highlight shadow: `#FFFFFF` at 0.7 opacity (top-left of every neomorphic surface). - Drop shadow: `rgba(44,42,38,0.18)` (bottom-right of every neomorphic surface). - *Aurora accents (used only in the Aurora Index band and as 1px hairlines on data-viz axes):* `#7DA39B` (dim seaglass), `#B7A179` (soft brass), `#967C95` (heather mauve). These are the only chromatic notes in the entire site -- always desaturated, always at 30-50% opacity, always against the ivory ground. They give the monochrome palette one quiet aurora pulse without breaking the rule. ## Imagery and Motifs **Core motif: the neomorphic well.** Every visual element lives inside or on top of a soft, indented panel. There are no floating cards, no drop-shadowed buttons in mid-air. The page is a sheet of pale clay that has been gently pressed in places. **Lottie animations (the patterns layer):** Used everywhere a static icon might otherwise sit, but always small-scale, slow (8-12s loops), low-amplitude, and monochrome (recolored at runtime to `#2C2A26`). Lottie inventory: 1. *Small drone* -- bobs once every 4s, blades shimmer. 2. *Hydroponic mushroom* -- caps inhale and exhale slowly. 3. *Tide clock* -- hands sweep, tide line rises and falls. 4. *Methane sommelier swirl* -- a glass tilts, gas curls. 5. *Lichen patch* -- spores drift up, a millimeter at a time. 6. *Tiny ringed planet* -- rotates, a dot satellite passes the rings every 11s. 7. *Trade route compass* -- needle wanders, finds north, wanders again. 8. *Open ledger* -- a page turns, a line of figures appears. 9. *Aurora ribbon* -- the only large Lottie; spans the masthead and the Aurora Index band. 10. *Cooperative seal* -- a wax seal slowly impresses itself. 11. *Hydrogen lamp* -- a flame flickers in plasma blue at 30% opacity (the only chromatic Lottie, and only here). 12. *Mail satellite* -- antenna dish nods in greeting on hover. **Data visualizations:** Tufte-clean, hairline (1px) line work in `#2C2A26`, no fill, no chart junk. Axis labels JetBrains Mono 12px in `#9A9183`. Tile captions live below the panel, set in EB Garamond italic. Charts include sparklines, slopegraphs, dot plots, small multiples, polar plots, and one Sankey. Crucially, **the Aurora Index band is itself a data visualization** -- the aurora-lights ribbons encode actual numeric series, with each ribbon's vertical amplitude tied to a cooperative-membership cohort over time. **Aurora-lights motif:** A soft, layered, six-band SVG ribbon that drifts horizontally, each band offset in phase, opacity 18-32%. The aurora is the only "atmospheric" element on a page that is otherwise resolutely terrestrial-paper. It appears in exactly two places (masthead, Aurora Index band) -- restraint is the point. **Icons:** All icons are neomorphic glyphs -- a soft circular indent containing a 1.5px ink-line glyph. Never filled, never colored, never animated except on hover (where the indent softens by ~20%). **No photography. No illustration in the conventional sense.** Lottie animations and data visualizations are the only "imagery" the site contains. This is intentional: the page is a journal, not a brochure. ## Prompts for Implementation **Full-screen narrative opening:** The visitor lands on a 100vh masthead. The page background is `#F1ECE3`. A faint aurora-lights ribbon drifts across the top 30vh, monochrome with three desaturated chromatic accents at 22% opacity. The wordmark "interplanetary.biz" fades up over 2.4 seconds in Cormorant Garamond italic, weight 300, slightly small-cap-stretched, in `#2C2A26`. Beneath the wordmark, in EB Garamond at 19px, the tagline appears one word at a time on a 90ms cadence: *"A quiet directory of cooperatives that work between worlds."* No CTA. No button. A small Lottie of a ringed planet rotates inside a 240px circular debossed well to the right of the wordmark. **Storytelling spine:** As the visitor scrolls, the masthead collapses smoothly into a slim 16vh sticky band. The site then unfolds as a long-form essay -- *not* a product page. The reader is led through Today's Almanac, then meets a Featured Cooperative through a 2-minute reading-time piece, then encounters The Ledger as a quiet visual aside, then enters Field Notes (deep prose), then the Aurora Index (the climactic visualization), then the Directory Index (the soft-UI denouement), and finally the Colophon. The whole site reads top-to-bottom, no tabs, no toggles, no modal, no pricing, no comparison table. **Neomorphism CSS recipe (every panel):** ```css background: #E6E0D4; border-radius: 28px; box-shadow: -10px -10px 24px rgba(255,255,255,0.7), 12px 12px 28px rgba(44,42,38,0.18), inset 0 0 0 1px rgba(44,42,38,0.04); ``` Inset variant for nested tiles: ```css box-shadow: inset 6px 6px 14px rgba(44,42,38,0.10), inset -6px -6px 14px rgba(255,255,255,0.65); ``` **Lottie integration:** Use lottie-web with `renderer: 'svg'`, `autoplay: true`, `loop: true`, and a runtime monochrome filter that swaps the JSON's color stops to `#2C2A26` at parse time (single function, ~20 lines). Each Lottie loops asynchronously -- never sync them, the gentle desynchronization gives the page a living, breathing quality. Lotties pause on `prefers-reduced-motion: reduce` and fall back to static SVG poster frames. **Aurora Index band animation:** Six SVG path layers, each a smoothed sine wave whose y-values come from the encoded data series. Each layer has a `` element shifting its `d` attribute through 4 phase-offset variants over 18, 22, 26, 31, 37, 41 seconds (mutually prime durations -- the band never quite repeats). Layers are stroked with the three accent colors at 24-38% opacity. A 1px JetBrains Mono x-axis sits at the bottom of the band, ticks every five years, labels in taupe. **Data viz behavior:** Charts are static SVG by default. On scroll-into-view, lines path-draw from origin in 1.4 seconds, easing cubic-bezier(0.22, 0.61, 0.36, 1). Counter-animate dataset numerals (*counter-animate is at 90% saturation in the corpus -- include it because it's part of the genre, but keep it muted: animate over 1.6s, no bouncing*). On hover, the line thickens from 1px to 1.5px and a single dot anchor appears at the nearest x-position. No tooltips beyond the inline serif label. **Micro-rhythms:** Every interactive surface deepens its indent by ~20% on hover (shadow blur grows, highlight softens). Click is a brief inset-bounce (90ms in, 220ms out, spring damping 0.8). Page-level scroll is buttery -- no scroll-jacking, but a `will-change: transform` on the masthead band so the collapse is silk. **What to avoid:** - No CTA-heavy hero. The page does not sell. It records. - No pricing block. There is no price. - No "trusted by" logo wall. - No stat grid with counter-up "10x faster" theatrics. (Counter-animate is allowed only inside actual data tiles, narrating real numbers, and only over 1.6s.) - No floating cards, no glassmorphism -- the entire page is one piece of paper, gently embossed. - No photographs. - No bright color. Aurora accents only, only desaturated, only in the two designated bands. ## Uniqueness Notes **Differentiators from other designs in the corpus:** 1. **Neomorphism as the entire chassis (not an accent).** Only 1% of the corpus uses neomorphism at all, and most that do treat it as a decorative flourish on otherwise modern flat UI. This site is *fully* committed: every panel, every input, every icon well, every chart frame is the same soft-debossed clay. The visual logic is monomaniacal in a way no other design in the registry attempts. 2. **Modular-blocks + monochrome + elegant-serif together.** Each of these is uncommon individually (9%, 10%, 24% respectively) and the combination is, as far as the frequency map shows, unique. Most monochrome designs lean Swiss-grotesk; most elegant-serif designs lean editorial-photo. Pairing serif type with a soft-UI grid produces the rare "interplanetary chamber-of-commerce monograph" feel. 3. **Lottie as the primary illustration system, not a single animated mascot.** Twelve discrete, tiny, asynchronously-looping Lottie animations are embedded throughout, always rendered monochrome via runtime recoloring -- a deliberate inversion of the usual Lottie-as-marketing-bauble pattern. 4. **Aurora-lights as a literal data visualization.** The aurora ribbon in the Aurora Index band is not decorative -- its six layers encode six real cohorts of membership data over time. Aurora-as-chart is not present elsewhere in the corpus. 5. **Approachable-casual tone applied to interplanetary subject matter.** Approachable-casual sits at 5% in the corpus; nearly every design treating space/interplanetary themes leans mysterious-moody (94% across the corpus) or futuristic-cutting-edge. This site deliberately runs in the opposite direction: interplanetary commerce told as a Sunday newsletter. 6. **Tufte-style data viz without dashboard energy.** The site contains many charts but is emphatically not a "dashboard" (17% of corpus) -- charts live as quiet sidenotes within a serif essay, with captions in italic and zero KPI theater. **Chosen seed:** aesthetic: neomorphism, layout: modular-blocks, typography: elegant-serif, palette: monochrome, patterns: lottie-animation, imagery: data-viz, motifs: aurora-lights, tone: approachable-casual. **Avoided patterns from frequency analysis:** Avoided the corpus-default *corporate* aesthetic (92%), *centered* layout as primary structure (91%), *gradient* + *warm* palettes (95% / 90%), *mono* typography (93%), and *mysterious-moody* tone (94%). Also avoided *photography* (61%) and *minimal* imagery as a pose (72%) -- this site has imagery, it's just all Lottie and data. *Counter-animate* is included because it's part of the data-viz idiom (used on real chart numerals only) but never as a hero-stat flourish.