# Design Language for xity.dev ## Aesthetics and Tone xity.dev is staged as **a deep-sea pressure laboratory that has been overgrown by soft architecture** — a place where every wall, console, and corridor has slowly inflated, melted at the corners, and fused into one continuous breathing membrane. The conceit: this is not a "developer site" with a hero and a feature grid; it is a **submersible habitat for an organism made of code**, and the visitor is descending through its chambers. Think of the bulbous concrete of a Niemeyer pavilion left underwater for forty years until it grew a skin; think of a lava lamp the size of a building; think of the inside of a jellyfish that has been wired with fiber optics. The "xity" in the domain is read as the silent **city** with its hard consonants dissolved away — a metropolis where nothing is rectilinear, where streets are peristaltic tubes and buildings are organs. The tone is **dreamy-ethereal but with an undertow of pressure** — calm, weightless, slightly narcotic, the way the body feels at 200 meters down. Not the bright friendly bubble-playfulness of a kids' app; this is **bioluminescent surrealism**: dark water, glowing soft forms, slow heartbeat rhythms. Copy speaks in the second person, present tense, as if narrating a dive: *"You pass through the first bladder. The walls remember your shape."* Nothing is sold. Nothing is rushed. The site is an environment to be moved through, the way you'd move through an aquarium tunnel at closing time, alone, with the pumps still humming. ## Layout Motifs and Structure The structural spine is **blobitecture** — the rarest layout in the cohort — executed as **`organic-flow`**: no grid, no columns, no cards, no bento boxes. Every region of every page is bounded by a closed Bézier curve (an SVG `` or a CSS `border-radius` with eight asymmetric values that animate). Content does not sit *in* boxes; it sits *inside cells*, like cytoplasm inside a membrane. When two regions meet, their membranes **press against each other and bulge** — the boundary is a meniscus, never a straight line. The page is one continuous vertical descent — **~640vh, eight chambers** — with `immersive-scroll` as the only navigation. There is no nav bar. There is a thin **pressure gauge** fixed to the left edge: a vertical glass capillary whose mercury (a glowing teal fluid) rises as you scroll, marked with depth labels (`0m`, `−40m`, `−110m` …) that *are* the chapter names. Clicking a depth mark eases the membrane-camera down to that chamber. **Chamber inventory (each is one inflated cell):** 1. **The Airlock** (`0m`) — title chamber. The domain `xity.dev` floats as soft 3D-looking lettering, each glyph a separate blob with internal gloss, slowly jostling like beads in oil. 2. **The First Bladder** (`−40m`) — what xity.dev *is*. Text wraps around the inside curve of the membrane; the membrane gently inhales/exhales (scale 1.0 ↔ 1.03 on a 6-second sine). 3. **The Coral Switchboard** (`−110m`) — capabilities, rendered as **organs**: a lung-shaped node, a kidney-shaped node, a fan-coral node, each pulsing at its own rate, connected by tubular conduits with fluid flowing through them (animated dash offset along the path). 4. **The Pressure Hall** (`−260m`) — the "how it works" chamber; columns of light fall through dark water (volumetric god-rays), and the membrane here is taut, almost spherical, the way a bathysphere window is. 5. **The Bioluminal Garden** (`−400m`) — process / philosophy; a slow drift of glowing spores (`particle-effects`), each leaving a fading trail, parallaxing at three depths. 6. **The Egg Room** (`−510m`) — incubated ideas / what's coming; a cluster of translucent ovoids, each with a faint shadow of something curled inside, that swell on hover. 7. **The Vent** (`−600m`) — credits / colophon; a hydrothermal chimney exhaling shimmer-heat that warps the text above it (SVG turbulence displacement). 8. **The Ascent** (`surface`) — the page does not link out; the final chamber is a slow rise: the water lightens, the membranes thin and disappear, and you surface into flat white silence. End. `layered-depth` is the secondary motif: every chamber has a **back membrane, a mid layer of drifting matter, and a front membrane**, scrolling at 0.4×, 0.7×, and 1.1× — the visitor is always *between* two skins. ## Typography and Palette **Typefaces — Google Fonts only, three families.** - **Fraunces** (display / chamber titles, optical size 144, soft "wonky" axis pushed toward the rounded extreme). Fraunces' fat, slightly melting serifs read like letters that have absorbed water — perfect for the inflated-organic feel. Used at 88–120px for chamber titles, weight 300–400, **always with a subtle inner-glow text-shadow in teal**, line-height 0.95. - **Spline Sans** (body / narration). A humanist sans with gently rounded terminals and generous counters — calm, legible underwater, never sterile. Set at 19–22px, weight 360, line-height 1.75, **measure clamped to follow the curve of the membrane** (text columns are mask-clipped to a Bézier shape, so line lengths vary). Letter-spacing +0.01em. - **Spline Sans Mono** (the pressure gauge, depth labels, tiny technical asides, the colophon manifest). Used sparingly, 12–13px, weight 400, letter-spacing +0.08em, uppercase for the depth marks. This is the only "hard-edged" voice and it lives only on instruments, never in prose. **Palette — `ocean-deep`, dark, with bioluminescent accents (deliberately NOT the cohort-default warm gradient).** - `#03070C` — **Abyss** — the base water; near-black with a blue bias. The body background. - `#0A1B2A` — **Trench Blue** — back-membrane fill, slightly lit. - `#12303F` — **Pressure Hull** — mid-layer membranes. - `#1FE0C8` — **Biolume Teal** — the primary glow: gauge fluid, conduit flow, title halos, hover swells. - `#7DF9C4` — **Spore Green** — drifting particles, secondary glow. - `#C4A9F2` — **Jelly Lilac** — the rare warm-cool accent; egg-room ovoids, vent shimmer, link underlines (which draw as a wobbling curve, never straight). - `#EAF6F4` — **Surface White** — text on dark; also the final chamber's flood color. - `#F2A65A` — **Vent Ember** — used in exactly one place (the hydrothermal vent's core), a single warm point in an otherwise cold sea, so it reads as heat. Glow is achieved with layered `box-shadow`/`drop-shadow` and a soft `radial-gradient` bloom behind each emissive element — never neon-harsh; always diffused, as if seen through water. ## Imagery and Motifs - **Membranes** (the load-bearing motif): closed organic curves everywhere, with a faint Fresnel-style rim-light (lighter on the side facing the nearest glow source). Implemented as SVG `` with animated control points (a tiny JS loop nudging them on a sine), or for simpler shapes, `border-radius` with 8 animated values. - **Conduits**: tubular connectors between organ-nodes; `stroke` with a moving `stroke-dasharray` offset to suggest fluid pumping through. Slightly translucent so you see the "fluid" inside. - **Organs as icons**: instead of line-icons, capabilities are represented by soft glyph-organs — lung, kidney, fan-coral, sea-pen, anemone — each a filled blob with one internal highlight and a slow independent pulse (`scale` 1.0 ↔ 1.04). - **Drifting matter** (`particle-effects`): marine snow and glowing spores, 60–120 of them, falling slowly, parallaxed across three depths, leaving 200ms fading trails. Density thins as you descend, then thickens in the Garden. - **God-rays**: in the Pressure Hall, 4–6 soft vertical light columns, very low opacity, slowly swaying, made with `linear-gradient` + blur, masked to wedge shapes. - **Heat-warp**: the Vent chamber applies an SVG `` + `` to the membrane and text directly above the ember core, animated so the warp shimmers like rising heat. - **The pressure gauge**: a 6px-wide glass capillary down the left edge, teal fluid level = scroll progress, with a tiny meniscus curve at the top of the fluid and small mono depth ticks. - **Cursor as a bubble**: the cursor is followed by a single small translucent bubble that wobbles (`spring`-eased), and when it passes over a membrane the membrane *dimples* toward it (`magnetic` pull on the nearest control point), then springs back. ## Prompts for Implementation Build xity.dev as **one HTML document, one CSS file, one small ES module — no framework, no router, no build step beyond a single bundling pass**. One continuous vertical scroll, ~640vh, eight chambers, descending then surfacing. - **Storytelling first.** The eight chambers are a single narrated dive. Write the copy as a second-person present-tense descent log; let the site's *meaning* (what xity.dev does/is) emerge through the metaphor rather than through a feature list. The last chamber must resolve — the ascent into white — so the experience has an ending, not a footer. - **Everything is curved.** No `
` should be visibly rectangular. Section boundaries are meniscus curves where membranes press together. Text columns are mask-clipped to Bézier shapes so line lengths breathe. - **Slow, biological motion.** Default easing is a soft sine or `spring` with low stiffness. Membranes inhale on 6s cycles; organs pulse on 1.5–4s offsets; particles drift, never zip. The only fast motion is the cursor-bubble's `spring` settle and a membrane's `magnetic` dimple-and-rebound. - **Bioluminescence via layered diffuse glow** — stacked soft shadows + radial bloom behind emissive elements. Never use a hard neon stroke. - **Scroll = depth.** Bind the pressure-gauge fluid, the particle density, the water darkness, and the parallax of the three membrane layers all to scroll position. Descending should *feel* like increasing pressure: membranes get rounder/tauter, sound (if any ambient hum) lowers in pitch, light gets scarcer — until the Vent's single ember, then the ascent. - **`path-draw-svg`** for the conduits and the wobbling link underlines; **`particle-effects`** for marine snow; **`fade-reveal` + `stagger`** for narration lines emerging as a chamber enters view (each line surfaces like a bubble, bottom-to-top). - **AVOID:** no CTA buttons, no pricing blocks, no stat-grids, no testimonial cards, no card-grid of any kind, no top navigation bar, no glassmorphism three-card stacks, no hand-drawn doodles, no warm-cream gradient backgrounds, no `cursor-follow` glow-orb cliché (use the wobbling *bubble* instead). - **Reduced-motion:** if requested, membranes hold still, particles freeze mid-drift, the dive becomes a series of stills you click through via the gauge — the world is paused, not removed. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other site in the cohort: 1. **Blobitecture as the *only* layout system.** Frequency analysis shows `blobitecture` at 3% and `organic-flow` at 6%, while `card-grid` (93%), `full-bleed` (84%), and `centered` (79%) dominate. xity.dev uses **zero rectangles, zero grids, zero cards** — every boundary is a closed animated Bézier membrane that presses against its neighbors. This is structural, not decorative, and is the signature of the site. 2. **A deep-sea pressure habitat that has been *overgrown by soft architecture*** — a "city" (xity, consonants dissolved) rebuilt as living organs and peristaltic corridors. The combination of `ocean-deep` palette (2%) + `blobitecture` + `particle-effects` (1%) + a depth-gauge-as-navigation has no precedent in the cohort. 3. **Depth-driven, descending-then-surfacing narrative** with a literal pressure gauge for navigation and a resolved ending (the ascent into flat white). Most sites end in a footer; this one ends by leaving the water. 4. **Bioluminescent diffuse glow on a near-black blue base** — deliberately rejecting the cohort-default `warm` (98%) `gradient` (93%) palette and the `glassmorphism` (85%) frost. The only warm color appears at exactly one point (the hydrothermal vent ember). 5. **Membranes that dimple toward a wobbling cursor-bubble** — a `magnetic` interaction applied to SVG control points, not to whole elements, and paired with a bubble cursor rather than the near-universal `cursor-follow` glow orb (89%). Avoided overused patterns per frequency analysis: `card-grid`, `full-bleed`, `centered` layouts; `hand-drawn` and `glassmorphism` aesthetics; `mono`-dominant typography (mono is confined here to instruments only); `warm` + `gradient` palette; `photography` imagery; the `cursor-follow` glow-orb cliché. Chosen seed/style: **blobitecture fluid layout** (fallback selection — no Planned Seed was supplied in the assignment; chosen because `blobitecture` is among the least-used aesthetics in the cohort at ~3% and is not the established signature of any reference site reviewed).