# Design Language for bada.systems > Codename: **PIXIE-OS / Aurora Spec** — an operating system written in pollen, debugged by moths, deployed across the canopy. --- ## Aesthetics and Tone This is a **fairycore-meets-futuristic-cutting-edge** site about *systems* — not the cold, blue-glow systems of enterprise SaaS, but the systems that hum inside a forest at 3:42 AM when the bioluminescent fungus reroutes packets through a sleeping moth. The site reads like the **technical specification of a fairy-realm operating system**, written by an engineer who has spent too long staring at the northern lights and cannot stop seeing UML diagrams in cloud formations. The mood is **soft authority**: a sysadmin who happens to be a sprite. Documentation tone, but the documentation is bound in pressed petals and the version-control diffs leak a faint petrichor. We avoid the two cheap defaults this combination invites — (1) Disney-fairy schmaltz, and (2) generic neon cyber-grid — and instead steer toward **"the laboratory notebook of a botanist who works for the Fae Department of Networking."** Sober, instrument-grade, but the instruments are made of dragonfly wings and the readings shimmer. Emotional cadence: - **Inhale**: a watercolor wash of dawn-aurora green-violet-rose drifts across the viewport. - **Hold**: kinetic typography uncurls a single line — *"a system is a promise the forest keeps."* - **Exhale**: a brief glitch (one frame) reveals the underlying schematic: hex-tile mycelial routing tables. - **Loop**: scroll one full screen and the cycle restarts at a new dew-point. Cultural reference points (none copied, all metabolized): the marginalia of medieval bestiaries, Hayao Miyazaki's preliminary watercolor color-keys, Iain M. Banks's Culture-novel ship-name registries, the *Voynich Manuscript*'s plant section, the loading screens of *Hollow Knight*, and the print frequency-response curves on a vintage Bruel & Kjaer test sheet. The site should feel like a single artifact discovered by a hiker who, by accident, opened the lid of an aurora. The tone resists the dominant patterns in the corpus (warm-inviting, pastoral-romantic, hand-drawn). We are **futuristic-cutting-edge**: precise, slightly clinical, and confidently strange. Think *cold-pressed magic*. The fairy is wearing a lab coat. The lab coat is woven from spider silk. The spider is on payroll. --- ## Layout Motifs and Structure The page is a **vertical stack of full-bleed sections**, each one a self-contained "stratum" of the operating system. There is no card grid, no bento, no hero-with-three-columns-below. Just **stacked-sections** — eight to ten of them — each occupying ~100vh, each visually distinct, each separated by a horizontal **aurora-band** (a 6vh ribbon of animated gradient that doubles as a section divider and a "now playing: stratum 03/10" indicator). The stack reads top-to-bottom like a kernel boot log written by someone who has read too much Borges: 1. **STRATUM 00 — INVOCATION**: black field, single kinetic glyph drawing itself in watercolor strokes. 2. **STRATUM 01 — MANIFEST**: the system's name unfurls in oversized kinetic type, letters arriving on staggered easing curves like fireflies returning to a jar. 3. **STRATUM 02 — TOPOLOGY**: a slowly-rotating geometric figure (dodecahedron of dew) at left; spec text in a narrow column at right. 4. **STRATUM 03 — PROTOCOL**: full-width aurora wash with a single annotated diagram overlaid — the diagram is a watercolor *and* an SVG; both layers exist and the watercolor leaks a few pixels past the vector edges on purpose. 5. **STRATUM 04 — INVARIANTS**: a list of seven axioms ("a packet that has met a moth must be considered observed"), each axiom revealed by a glitch-pulse on scroll-into-view. 6. **STRATUM 05 — SCHEDULER**: a horizontal bloom of geometric shapes — triangles, hexagons, lemniscates — drifting slowly leftward at varied parallax depths, each shape tagged with a process name. 7. **STRATUM 06 — FAULT**: a deliberate "broken" stratum — for ~600ms on entry the viewport glitches (RGB split, scanline tear) before resolving into a calm watercolor field with the message *"all faults are pre-bloomed."* 8. **STRATUM 07 — HARVEST**: changelog as botanical specimen sheet. 9. **STRATUM 08 — COLOPHON**: the credits — but listed as *contributing organisms* (one moth, two lichen, one human, one rumor). **Spatial rules:** - Generous vertical whitespace (24vh) above each stratum's headline. - Asymmetric horizontal alignment — odd-numbered strata anchor content to a 38.2% (golden) left margin; even-numbered strata anchor to a 61.8% right margin. The eye tacks back and forth like a sailboat. - A persistent **left-edge "depth-rule"**: a thin (1px) vertical line running the full document height, with tick-marks at each stratum boundary, labeled in mono caps (`STRATUM 03`). This is the only navigation. It scrolls with the page; on hover, ticks expand and reveal the stratum title in 0.18s spring. - No header bar. No footer. The depth-rule is the chrome. The chrome is bark. **Composition motif: tessellated shapes.** Throughout the page, **geometric-shapes** (hexagons, triangles, lemniscates, vesica piscis, dodecagrams) appear at small scale (12–48px) as marginalia between paragraphs — the way a medieval scribe would draw a pointing hand. They are drawn in a single watercolor wash (one color, no outline) and they rotate *very slowly* (one full revolution per ~120 seconds) on scroll-velocity-coupled easing. --- ## Typography and Palette ### Typefaces (Google Fonts only) - **Display / Kinetic**: **Fraunces** — a variable serif with optical-size and SOFT axes. Used at 9vw–14vw for stratum titles. The kinetic animation manipulates the SOFT axis on letter entry (each letter starts at SOFT 100 and settles to SOFT 0 over 400ms staggered per glyph, so a word "blooms" from soft to crisp like a watercolor drying). - **Body**: **Inter Tight** — at 17–19px, 1.55 line-height, slightly negative letter-spacing on larger sizes. Plain, instrument-grade. The lab coat. - **Mono / Marginalia**: **JetBrains Mono** — for the depth-rule labels, axiom numbers, version strings, and the occasional inline `code` token. Sized small (11–13px) and uppercased for chrome elements; lowercase for inline. - **Accent / Botanical**: **Cormorant Garamond Italic** — used **sparingly**, only for the seven axioms and the colophon. It is the voice of the fairy footnoting the engineer. Pairing logic: Fraunces (organic-variable) + Inter Tight (rationalist-grotesque) creates the core fairy-meets-engineer tension. JetBrains Mono is the instrument readout. Cormorant Italic is the whisper from the canopy. ### Palette — *Aurora Gradient* A six-stop gradient that recurs verbatim across hero washes, dividers, hover halos, and the cursor trail. The stops are tuned so the gradient never lands on pure cyan-magenta vaporwave; instead it walks the **dawn-aurora** band: deep boreal green into glacier teal into petal violet into dust rose into cold gold. | Role | Token | Hex | Notes | |---|---|---|---| | Ground (deepest bg) | `--ink-canopy` | `#0B0F14` | Near-black with a 2% green undertone. The forest at 3:42 AM. | | Substrate | `--ink-soil` | `#141B22` | Section bg for "calm" strata. | | Aurora 1 (boreal) | `--aurora-fern` | `#2BD4A6` | Bioluminescent green. | | Aurora 2 (glacier) | `--aurora-glacier` | `#5BB6E8` | Cold cyan-blue. | | Aurora 3 (petal) | `--aurora-petal` | `#A88BE8` | Violet, the highest aurora band. | | Aurora 4 (dust-rose) | `--aurora-rose` | `#F3A6C8` | Dawn-side rose. | | Aurora 5 (cold-gold) | `--aurora-pollen` | `#F5D27A` | Pollen on a cold morning. | | Watercolor wash | `--wash-mist` | `#E8E1D6` | Warm paper-mist, used at low alpha for watercolor bleeds. | | Foreground text | `--ink-vellum` | `#F2EFE7` | Off-white, 92% on canopy bg. | | Glitch accent | `--glitch-rgb-split` | `#FF3B7A` / `#3BFFE0` | Used only in the brief glitch frames. | Gradient definition (load-bearing — render exactly): ``` linear-gradient( 108deg, #0B0F14 0%, #2BD4A6 22%, #5BB6E8 44%, #A88BE8 60%, #F3A6C8 78%, #F5D27A 92%, #0B0F14 100% ) ``` The gradient is animated — `background-position` drifts from `0% 50%` to `100% 50%` over 18 seconds, infinite, ease-in-out. It is the heartbeat. --- ## Imagery and Motifs The visual lexicon has exactly four primitives. Combinations of these four, and nothing else, build every illustration on the page. 1. **Watercolor washes.** Hand-painted (or convincingly faux-painted via SVG `feTurbulence` + `feDisplacementMap` + radial-gradient masking) blooms in the aurora palette. Each wash has a soft, irregular edge — never a hard boundary. Used as: section backgrounds (low alpha, 8–14%), inline behind a stratum number, behind the "fault" glitch resolution. The wash should look like it was applied with a wet brush onto cold-press paper, then scanned at 600dpi. 2. **Geometric shapes** — the *fairy-engineer's instruments*. Pure SVG, single stroke (1.25px), color = one of the aurora stops at full saturation. The bestiary: - **Hexagon** — represents a process / scheduled job. - **Vesica piscis** (two overlapping circles) — represents a protocol handshake. - **Lemniscate** (∞) — represents an event loop. - **Dodecagram** (12-pointed star) — represents a fault. - **Triangle** — represents a packet in flight. These appear as marginalia (12–24px), as composed diagrams (300–600px) in STRATUM 02 and 03, and as drifting elements in STRATUM 05. 3. **Glitch frames.** Used **rarely and intentionally** — 4 occurrences total on the page. A glitch is: a 90–180ms RGB-split (red channel offset +6px, cyan channel offset −4px) + scanline tear (1–3 horizontal slices shifted ±12px) + 4–8 frames of grain noise overlay. After the glitch, the layout snaps back to crisp watercolor. This is the *fairy-engineer's "compile error"* — and it is **only triggered by intentional events**: page load, the FAULT stratum entry, a deliberate "easter-egg" hover on the colophon, and a single random firing per session (chance ≈ 1/8 per scroll-pass). Never on every hover. Restraint is the entire point. 4. **Kinetic letterforms.** Each stratum title is a piece of motion typography. Letters arrive individually on a stagger, with an entry that maps onto Fraunces's SOFT axis: each glyph begins at SOFT 100 (rounded, "wet") and dries to SOFT 0 (crisp) over 400ms. Combined with a slight Y-translate (8px → 0) and opacity (0 → 1), each title *blooms onto the page*. The longest title takes ~1.4s end-to-end. Once dry, letters do not re-animate on re-entry — they are dry. **Negative motifs (do NOT use):** - No photography. No stock fairy imagery. No sparkles. No literal wings, wands, mushrooms with eyes. - No card components. No avatar circles. No testimonial blocks. - No CTA buttons in primary positions. The only "button-like" object is a single ghost-link in the colophon labeled `// open spec →`. - No pricing table. No stat-counter ("1M+ users"). No logo cloud. - No 3D-rendered crystals. No gradient-mesh blobs. No glassmorphism cards. --- ## Prompts for Implementation ### Narrative spine Build the page as **a single scroll-driven story**, not a marketing landing page. The user arrives, scrolls, and reads the spec for an operating system that doesn't exist but should. There is no CTA above the fold. There is barely a CTA at all. The "conversion" is the user reaching STRATUM 08 and feeling that they've read something rather than been sold something. **Bias toward full-screen narrative**; resist any urge to add a feature-grid or pricing block — the corpus has plenty. ### Concrete CSS / JS direction **Aurora gradient layer.** Implement the global aurora wash as a fixed-position pseudo-element on ``, `z-index: -2`, `mix-blend-mode: screen`, opacity 0.18–0.24 depending on stratum. Animate `background-position` via `@keyframes aurora-drift` (18s, infinite, ease-in-out). Use `prefers-reduced-motion` to halt the drift; the gradient stays static but visible. **Watercolor edges.** For SVG watercolor blooms, use a `` chain: `feTurbulence baseFrequency="0.012" numOctaves="3"` → `feDisplacementMap scale="14"` → `feGaussianBlur stdDeviation="2.5"`. Apply to a radial-gradient-filled `` to get a believable wet-edge. Bake six variants at build time and rotate through them so no two washes look identical. **Kinetic typography.** Use Fraunces variable. Per-letter `` wrapping (server-rendered, not JS-injected — accessibility-of-source matters even if a11y is out-of-scope here). On `IntersectionObserver` entry, animate `font-variation-settings: "SOFT" 100 → 0`, plus `transform: translateY(8px) → 0`, plus `opacity 0 → 1`, with a 28ms stagger-delay per letter. Use `cubic-bezier(0.2, 0.8, 0.2, 1)` — a slight overshoot, like a petal settling. **Stratum stack.** Each stratum is a `
` with `min-height: 100vh`, `display: grid`, `place-items: center`, and a per-stratum `--accent` CSS variable picked from the aurora stops. Sections snap softly via `scroll-snap-type: y proximity` (NOT `mandatory` — never trap the user). **Depth-rule navigation.** A fixed-position `