# Design Language for xbom.wiki ## Aesthetics and Tone `xbom.wiki` is a **corporate ledger that quietly went surreal**. Imagine the inside cover of a 1962 IBM annual report — impeccable serif typography, ruled columns, a palette that whispered authority — but someone has slipped candy-colored abstract shapes between the columns as if filing them as line items. The shapes are not disruptive; they are *categorized*. They have reference numbers. They belong here, in this register, stamped and accounted for. The aesthetic is **corporate-confection**: the rigor of mid-century institutional print married to a palette that tastes of Jolly Ranchers dissolved in ink. Cream fields. Charcoal rules. And then: a sudden fuchsia parallelogram, a lime ellipse, a cerise arc — each one sitting precisely inside its grid cell as if it were a financial instrument. The tone is **minimal** — never whimsical, never playful. The candy palette is treated with boardroom seriousness. There are no exclamation marks. There is no animation for joy's sake. Every motion is purposeful, like a clerk turning a page. The domain name itself signals provenance: *xbom* suggests a bill of materials, a structured accounting of components. The `.wiki` suffix implies a shared ledger, a collective index. Together they describe a site that **catalogs beautiful things** with the cool precision of procurement software. Mood references: the visual silence of a Helvetica-era annual report; the unexpected joy of Pantone color chips laid out in a specimen book; the hush of a museum storeroom where things are numbered but not yet shown. ## Layout Motifs and Structure The layout is built on **ma-negative-space** — the Japanese concept of *ma* (間), the meaningful pause, the loaded silence between forms. Every element earns its position by the emptiness that surrounds it. This is not whitespace as default; it is whitespace as argument. Structure: - **A single vertical spine** runs down the left 30% of the viewport. This is the ledger column — narrow, ruled in hairlines, reserved for labels, reference numbers, and marginal notes in a small-caps setting. The spine never holds primary content; it holds *metadata about* primary content. - **The remaining 70%** is the field. Elements in the field are never flush to the spine — they float with deliberate offset, as if pinned by invisible coordinate system. Each abstract shape rests in the field with a precise `(x, y)` reference printed beneath it in micro-type. - **Sections are separated not by dividers but by altitude.** Moving down the page is moving down a register. Each section has a row number (01, 02, 03) printed in the ledger spine in `#C8C0B0` — pale, almost invisible until hovered. - **No horizontal rules across the full page width.** Rules exist only inside the spine column, one hairline per section. The field is ruled only by invisible grid logic. - **Vertical rhythm is strict: 8px base unit, 4px sub-unit.** All spacing snaps to this grid. The precision is what makes the candy shapes feel purposeful rather than random — they too snap to grid corners. - **Abstract shapes are sized in Fibonacci increments** (34px, 55px, 89px, 144px, 233px) to suggest a natural ordering system beneath the corporate surface. On scroll, sections do not animate as sections — individual shapes within the field drift laterally by 0–12px on scroll, as if magnetized by the reader's attention. This is the magnetic pattern: objects respond to proximity, not velocity. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display & headlines — `Cormorant Garamond`** (Google Fonts, variable, wght 300–700). Set at opsz optical sizing enabled. H1 at 72px / wght 400, light italic — the elegance of a legal document's opening clause. H2 at 40px / wght 600, small caps via `font-variant-caps: small-caps`. The restraint of a single serif family doing all display work signals institutional seriousness. - **Body — `EB Garamond`** (Google Fonts, wght 400/500/italic). 18px / 30px line-height. The body text breathes; the generous leading is the *ma* made textual. No body text is smaller than 16px. No body text is bolder than 500. - **Labels, references, micro-copy — `DM Mono`** (Google Fonts, wght 400). 11px, tracked at `+0.12em`, `uppercase`. Used exclusively for coordinate references, section numbers, and the marginal ledger notes. The mono font anchors the corporate-register metaphor without overusing it. **Palette — candy-bright on institutional ground:** | Role | Hex | Name | |------|-----|------| | Background / parchment field | `#F7F4EE` | Ledger Cream | | Spine background | `#EFEBE0` | Column Buff | | Primary text | `#1C1A17` | Ink Black | | Ledger rules / hairlines | `#C8C0B0` | Pale Rule | | Accent shape 1 — fuchsia | `#F72585` | Cerise Entry | | Accent shape 2 — electric lime | `#8BF227` | Ledger Lime | | Accent shape 3 — sky candy | `#4CC9F0` | Aqua Reference | | Accent shape 4 — golden punch | `#FFD60A` | Specimen Gold | | Accent shape 5 — violet entry | `#7209B7` | Register Violet | The candy accents appear **only** on abstract shapes — never on type, never on backgrounds, never as borders. They are specimens in the ledger, classified but not contaminating the institutional field around them. Hover interactions shift a shape's candy color to its 15%-lightened version; active state drops opacity to 80% and adds a 1px `#1C1A17` outline — the shape becomes a labeled exhibit. ## Imagery and Motifs **No photography. No icons. No illustrations with narrative content.** The visual vocabulary is exclusively **abstract shapes as specimens** — geometric forms treated as catalogued objects. Each shape is: - **A flat, hard-edged geometric form**: parallelograms, arcs, ellipses, right trapezoids, irregular pentagons. No drop shadows. No gradients. No rounded corners (corner-radius stays at 0 or hard 2px maximum). The flatness is institutional; it says *this is a specimen, not a decoration*. - **Rendered in SVG** with a thin `#1C1A17` 0.8px border on hover, adding the feeling of a specimen box outline. At rest, shapes are borderless — pure candy fill against cream. - **Each shape carries a reference tag** printed in `DM Mono` 10px beneath it: `XB-034 · PARALLELOGRAM · 144×89px · CERISE`. The tag appears on hover, fading up from zero opacity over 200ms. This transforms decoration into catalog. - **Vintage motifs** are expressed not through Victorian ornament but through the *practice* of cataloguing vintage objects: specimen plates, typographic sorts, sample boards. The shapes *feel* like things that have been collected, archived, and placed in order. - **Background texture**: a single-layer 3% opacity noise texture overlay on the `#F7F4EE` field, suggesting aged paper without explicitly imitating it. Applied as an SVG `feTurbulence` filter on the root background element. - **The ledger spine** uses a subtle 45-degree hatching pattern at 6% opacity — three diagonal lines per 20px cell, suggesting graph-paper cross-hatching from a technical drawing pad. Shapes are distributed across the page with apparent randomness but strict underlying order: no two shapes of the same color appear in adjacent sections; no shape overlaps the ledger spine; all shapes are positioned at grid intersections. ## Prompts for Implementation Build this as **a single scrolling specimen register** — a corporate catalog of beautiful, unnamed objects. The reader scrolls down the page as if turning through a collector's log book, each section a new page of the register. The implementation must obey these directives: **Directive 1 — The spine is load-bearing.** The left 30% ledger spine is `position: sticky` — it scrolls with the page until the current section ends, then snaps to the next section's row number. The spine never has content other than: section number (`DM Mono`, `#C8C0B0`), a single hairline border-right (`1px solid #C8C0B0`), and the column hatching texture. The spine *never* holds calls to action, navigation, or promotional copy. **Directive 2 — Shapes respond to the reader's scroll position, not time.** No CSS `animation: ... infinite`. All shape motion is tied to `scrollY` via a single passive scroll listener. Each shape has a `data-drift-x` attribute (value: -12 to +12) and drifts that many pixels horizontally as the reader scrolls through its section. The drift is linear, subtle, and stops when the section leaves the viewport. This is the magnetic pattern implemented as scroll-parallax: the shapes are attracted toward the reader's gaze position. **Directive 3 — Hover summons the reference tag.** On `mouseenter`, each shape: 1. Lightens its fill color by 15% (CSS `filter: brightness(1.15)`) 2. Fades in its reference tag (`opacity: 0 → 1`, 200ms ease) 3. Draws a 0.8px `#1C1A17` border (`clip-path` or SVG `stroke`, 180ms ease) On `mouseleave`, all three reverse simultaneously. **Directive 4 — No CTA language anywhere on the page.** Do not implement: buttons labeled "Get Started", "Sign Up", "Learn More", "Try Free". Do not implement pricing blocks. Do not implement testimonial rails. Do not implement stat grids ("10,000+ users"). The page is a register, not a pitch. The only navigational affordance is a sticky top bar with the wordmark (`Cormorant Garamond`, 24px, italic) and three ledger-style text links: `Index · Catalog · Reference`. **Directive 5 — Magnetic cursor effect on shape proximity.** Shapes within 80px of the cursor exhibit subtle magnetic pull: they translate 0–6px toward the cursor position using `requestAnimationFrame` and a spring equation (`position += (target - position) * 0.08`). This is the magnetic interaction pattern. The cursor itself remains the default system cursor — no custom cursor, no pointer highlight. The magnetism is in the objects, not the pointer. **Directive 6 — Color is never used for typographic emphasis.** All heading color: `#1C1A17`. All body color: `#1C1A17` at 88% opacity. All label color: `#C8C0B0`. The candy palette belongs only to shapes. Breaking this rule — even once — collapses the entire composition's logic. **Directive 7 — The page loads in one single reveal.** On load, the cream background renders first (0ms). The spine hairline draws top-to-bottom via SVG `stroke-dashoffset` animation over 600ms. Shapes then appear section by section as the user scrolls — no above-fold animation parade. The initial viewport is silent except for the wordmark and a single pale rule, suggesting a ledger that has not yet been opened. ## Uniqueness Notes **Chosen seed:** aesthetic: `corporate`, layout: `ma-negative-space`, typography: `elegant-serif`, palette: `candy-bright`, patterns: `magnetic`, imagery: `abstract-shapes`, motifs: `vintage`, tone: `minimal` **Differentiators from every other design in the registry:** 1. **Candy palette deployed with boardroom discipline.** The frequency analysis shows `elegant-serif` typography at only 2% and `candy-bright` palette at rare frequency. Most candy/bright designs are playful or dopamine-maximalist. Here, fuchsia and electric lime are treated as specimen accents in an institutional register — the contrast between institutional typography and candy color creates a cognitive dissonance that is the site's visual identity. No other design in the registry crosses corporate aesthetics with candy-bright. 2. **Abstract shapes as catalogued specimens, not decoration.** The registry shows `abstract-shapes` imagery at 3% frequency. What makes xbom.wiki unique is that shapes carry reference tags (`XB-034 · PARALLELOGRAM · 144×89px`) — turning visual decoration into a metaphor for the domain's bill-of-materials meaning. The shapes *are* the content, not the ornament. No other design in the registry treats imagery as a cataloguing system. 3. **Ma-negative-space at ledger scale.** The `ma-negative-space` layout is underused in the registry. Here, negative space is not just breathing room — it is the corporate ledger's *blank lines awaiting entries*. Every gap is a potential row in the register. The spine column with section numbers makes the emptiness feel intentional and structured, not sparse. This is negative space with an audit trail. 4. **Scroll-driven magnetism without time-based animation.** The magnetic pattern is implemented exclusively through `scrollY` and cursor proximity — never through CSS `animation` or `transition` timers firing on their own. The shapes only move when the reader moves. This creates the sensation of a physical object responding to presence rather than performing for attention. 5. **Avoided overused patterns:** `card-grid`, `stagger`, `hero-dominant`, and `full-bleed` are deliberately excluded. The spine-plus-field composition avoids the 85% full-bleed rate noted in the reference designs. The single-column reading spine consciously rejects the dominant card/grid paradigm.