# Design Language for bvb.tools ## Aesthetics and Tone bvb.tools (v2) is a **Blobitecture Jewel Field Atlas** -- a bold-confident f-pattern tool catalog for a fictional independent jewel-cut digital-tools studio, presented as if a leather-bound jewel-cutter's atlas had been re-imagined with organic blob containers wrapping each tool entry like fitted-cushion bezels. The .tools TLD is taken literally: the design behaves like a working catalogue page where each tool sits in its own bezel-blob, ready to be picked up. The mood is **bold-confident**: declarative, structured, with jewel-tone saturation that refuses pastel timidity, balanced by a condensed typography that whispers "professional." Progressive-disclosure patterns mean each entry reveals more detail as it enters view; vector-art imagery shows each tool as a single-line geometric icon; leaf-organic motifs accent the catalog headers. Where most tool-catalog sites lean light-and-corporate, this one stays in jewel sapphire, ruby flame, emerald deep, citrine gold, and a paper-bone neutral -- a catalog rendered as a jeweler's tray. ## Layout Motifs and Structure The composition is an **f-pattern** layout -- the reader's eye is led along an F-shaped scan path: a strong horizontal top bar (the wordmark and section tabs), a vertical left rail (a vertical index of tool categories), and horizontal "sweeps" of tool entries that grow progressively shorter as the page descends. Progressive-disclosure means each tool's blob expands as the reader scrolls. **Macro structure:** - **Top bar (Section 0, 18vh sticky):** A horizontal bar with the wordmark "bvb.tools / Field Atlas vol. 26" set in condensed sans, a left-aligned section index, and a small leaf-organic decorative cluster at the upper-right. - **Hero entry (Section 1, 90vh):** A wide horizontal sweep -- a single oversized blob containing the catalog's headline tool, with a hand-cut vector-art geometric icon at the left, a tool name in condensed sans at the center, and a short description in body sans at the right. - **Catalog sweep I (Section 2, 130vh):** Three blob-bezeled tool entries arranged left-aligned, descending. Each blob is filled with a different jewel-tone (sapphire, ruby, emerald). Progressive-disclosure expands each blob's description as it enters the viewport. - **Catalog sweep II (Section 3, 130vh):** Three more blob-bezeled tool entries, each smaller than the previous sweep -- the f-pattern's horizontal arms shorten as we descend. - **Catalog sweep III + Index (Section 4, 110vh):** Two final blob-bezeled tool entries (the smallest sweep) followed by the vertical index ribbon at the left, listing all 8 tools in condensed sans with their jewel-tone color-codes. **Progressive-disclosure pattern:** Each blob-bezeled tool entry begins compressed (only the icon and tool name visible) when off-screen. As it enters the viewport, the blob expands its bounds, revealing the description, a hand-numbered detail list, and a small "pickup" affordance. The disclosure animation is 0.9s ease-out. **Spacing:** Outer margin 6vw. F-pattern horizontal sweeps occupy decreasing widths (100%, 78%, 56%, 38%) for a clear visual hierarchy. Vertical rhythm 26px on body. ## Typography and Palette **Fonts (all Google Fonts):** - **Display headlines:** "Oswald" weight 600 -- a condensed sans-serif used at clamp(36px, 5vw, 84px). Tracking 0.005em. The condensed proportions give the catalog its precise toolmaker's voice. - **Sub-labels:** "Oswald" weight 500 small-caps at 13-14px, tracking 0.12em uppercase. Used for category labels and tool ciphers. - **Body text:** "Manrope" weight 400 at clamp(15px, 1.15vw, 18px), line-height 1.65. Used for tool descriptions. - **Numerals:** "Oswald" tabular figures for tool ciphers and detail lists. **Palette (jewel-tone with paper-bone neutral):** - `#F0E9D8` -- **Paper Bone**, the dominant background -- pale warm cream. - `#E2D6BC` -- **Aged Linen**, secondary background tint. - `#1A3A6E` -- **Sapphire Deep**, jewel-tone for sapphire-class tools. - `#9C2A2A` -- **Ruby Flame**, jewel-tone for ruby-class tools. - `#2F5C42` -- **Emerald Deep**, jewel-tone for emerald-class tools. - `#C5972B` -- **Citrine Gold**, jewel-tone for citrine-class tools. - `#2A2520` -- **Coal Ink**, the deepest tone for body text and condensed headlines. The palette is jewel-saturated but anchored in paper-bone neutral, so each blob-bezeled tool reads as a setting on a jeweler's tray. ## Imagery and Motifs **Core visual motifs:** - **Vector art (imagery mandate):** Each tool entry features a single hand-cut vector-art geometric icon -- a polygon, a triangle stack, a hexagon lattice, a tessellation fragment -- drawn in 1.6px coal-ink strokes with a jewel-tone inner fill at 60% opacity. Icons are geometric, precise, and slightly asymmetric. - **Leaf-organic motif (motif mandate):** The top bar carries a small leaf-organic cluster at the upper-right (3-5 leaf silhouettes), drawn in 1.2px emerald-deep strokes -- a subtle reminder that the toolmaker's atelier sits in a garden. - **Progressive-disclosure pattern:** Each blob-bezeled entry begins compressed; on viewport-enter it expands its bounds and reveals description, detail list, and pickup affordance over 0.9s ease-out. - **Blob-bezel containers:** Each tool entry sits inside an organic blob container (SVG path-d) filled with the tool's jewel-tone at 92% opacity and outlined in 1.6px coal-ink. Blob shapes vary entry to entry. - **Hand-numbered detail lists:** Each tool's revealed description includes a hand-numbered detail list (e.g., "1. handle 12mm" "2. cut depth 0.8mm") in Oswald small-caps. - **Pickup affordance:** A tiny 18px coal-ink chevron in each blob's lower-right corner -- the "pickup" indicator. ## Prompts for Implementation **Opening narrative:** Page loads on Paper Bone. Over 1.8s, the top bar wordmark "bvb.tools / Field Atlas vol. 26" reveals letter-by-letter in Oswald condensed (70ms stagger); the leaf-organic cluster at the upper-right draws on via 1.2s SVG stroke reveal in emerald deep; the hero entry's blob bezel draws on with a 1.4s SVG path-d morph from a small dot to its full irregular shape; the hero's vector-art icon draws on via 1.4s SVG stroke reveal; the hero's tool name fades-in last (40ms stagger). **Scroll narrative:** As the user scrolls through the f-pattern sweeps, each blob-bezeled entry triggers its progressive-disclosure animation -- blob expands its bounds, vector-art icon draws on (1.0s SVG stroke), description fades-in line-by-line (32ms cascade), hand-numbered detail list types in (45ms per item), pickup chevron pulses-in last. Each sweep is shorter than the previous, accentuating the f-pattern's diminishing horizontal arms. **Microinteractions:** - **Tool blob hover:** Blob outline thickens from 1.6px to 2.2px; jewel-tone inner fill saturation lifts 8%; the pickup chevron pulses coal-ink to its jewel-tone over 600ms. - **Vector-art icon hover:** Icon strokes thicken from 1.6px to 2.0px; the inner fill brightens 10%. - **Detail list hover:** Detail list's hand-numbered items underline in jewel-tone over 220ms cascade. - **Pickup chevron hover:** Chevron scales 1.0 to 1.2 with a soft spring; the entire blob's outline pulses once. - **Section transitions:** F-pattern horizontal arm width animates from previous sweep's width to current sweep's width over 800ms. **Storytelling:** The site is structured as a working tool atlas, vol. 26. Section anchors: "Top Bar," "Hero Entry," "Catalog Sweep I," "Catalog Sweep II," "Catalog Sweep III + Index." The voice is bold-confident, declarative, slightly proud. There are no marketing CTAs. The index ribbon ends with "all tools available for in-person pickup at the atelier door." **Typography motion:** Oswald condensed headlines reveal letter-by-letter with 70ms stagger. Body Manrope cascades-in line-by-line (32ms). Hand-numbered detail lists type in mono-style (45ms per item). **AVOID:** stat-grids, pricing tiers, "buy now" CTAs, social-proof testimonial blocks, three-up service tiles, generic light-corporate-tool-catalog cliches. ## Uniqueness Notes **Differentiators from other designs:** 1. **Blob-bezel containers for tool entries:** Each tool sits inside an organic blob bezel filled with its jewel-tone and outlined in coal-ink -- the catalog reads as a jeweler's tray. 2. **F-pattern with diminishing horizontal arms:** The layout follows a strict F-pattern with horizontal sweeps occupying decreasing widths (100%, 78%, 56%, 38%) -- a clear visual hierarchy that mirrors the reader's eye-scan path. 3. **Progressive-disclosure on blob entry:** Each blob begins compressed and expands as it enters the viewport, revealing description, hand-numbered details, and pickup affordance over 0.9s. 4. **Jewel-tone palette with paper-bone neutral:** Sapphire, ruby, emerald, citrine are reserved for tool blob fills only; the rest of the page stays in paper-bone and coal-ink -- a chromatic discipline. 5. **Hand-cut vector-art geometric icons:** Each tool's icon is a single hand-cut geometric vector (polygon, triangle stack, hexagon lattice) drawn in 1.6px coal-ink strokes -- a precise, slightly asymmetric toolmaker's mark. **Chosen seed/style:** Planned seed -- aesthetic: blobitecture, layout: f-pattern, typography: condensed, palette: jewel-tones, patterns: progressive-disclosure, imagery: vector-art, motifs: leaf-organic, tone: bold-confident. **Avoided patterns from frequency analysis:** Avoided overused photography (91%), minimal imagery (33%), playful aesthetic (26%), corporate aesthetic (23%). Embraced underused blobitecture aesthetic (1%), vector-art imagery, leaf-organic motif, jewel-tones palette, progressive-disclosure pattern, and f-pattern layout with condensed typography.