# Design Language for bada.style ## Aesthetics and Tone `bada.style` reads as the literal collision it is: **바다 (bada)** — the Korean noun for *the open sea*, two soft vowels that a fishing-village grandmother sings into a child's hair while she braids it — meeting **.style**, the most fashion-saturated, most editorial-loaded, most aestheticized TLD in the entire commercial web. The site refuses to resolve that collision into either pole. It is **neither a sea-themed lookbook nor a fashion-house portfolio**; it is the imagined private journal of a *romantic maximalist coastal stylist* who lives in a stone cottage above a tidal pool, who has never owned fewer than nine layered scarves at once, and who considers the act of dressing the morning the same kind of pastoral devotion that a 19th-century watercolourist gave to painting one cloud. Think **William Morris pattern density** translated into deep marine color, **Klimt's gold-foliage maximalism** rendered in cobalt and indigo instead of gilt, **a Hwagak (화각, Korean ox-horn lacquerware) cabinet** whose every drawer and panel carries a different inlaid scene, and **a Victorian seashell-collector's parlour** at midnight when the gas lamps are turned low and the tide is running. Every surface should feel **over-decorated but never decorative for decoration's sake** — every blob, every curl, every drawn line is doing the work of saying *the sea is romantic, the sea is too much, the sea is a maximalist who refuses minimalism's permission to be quiet*. The tone is **pastoral-romantic with a wet undertow**. Words on the page should read like the captions in a 19th-century botanical-marine encyclopaedia: long, looping, comma-spliced, occasionally archaic, never ironic. The site does not address the visitor as *user* or *customer*. It addresses them as *traveller*, *reader*, or simply *you, who came in from the sea-wind*. There is no CTA voice anywhere. There is no scarcity language. There is no "join 10,000 stylists." The closest the site comes to commerce is a single inlaid card, two-thirds of the way down the page, that whispers *if any of this becomes a longing, write to the lighthouse*. Mood adjectives: **drenched, sumptuous, candlelit, tidal, embroidered, slow-blooming, brackish, ornamented, devout**. Mood adjectives the site rejects: *clean, modern, efficient, scalable, conversion, intuitive*. ## Layout Motifs and Structure The page is built as a **deep-blue Victorian curiosity-cabinet whose drawers are arranged in a vertical masonry**. Imagine the long wall of a coastal collector's parlour: thirty-odd shadowboxes, hung in a non-aligning grid, each box a different width and a different height, each one containing one specimen — a pressed sea-fan, a tide-table fragment, a piece of indigo-dyed silk, a fragment of mother-of-pearl, a paragraph of looping handwritten prose, an organic indigo blob holding a single drawn jellyfish. The masonry is **CSS Grid with `grid-auto-rows: 8px` and `grid-row: span N`** so that every cell can claim a different vertical extent; columns are **5 on desktop (≥1280px), 3 on tablet (≥768px), 2 on phones, never 1**. The site refuses the single-column elegant default that the rest of the corpus leans on; bada.style is *visually crowded on purpose*, because maximalism is the entire point. **Top-of-page macro structure.** The page opens with a **full-bleed letterpress-style frontispiece** — 100vw × 100vh — that is not a hero card but a hand-set title plate: the words `바다 · style` set in oversized grotesque-neo display, surrounded by a hand-drawn engraved border of **coral, kelp, anemone, and wave-curl** rendered as inline SVG with `stroke-dasharray` path-draw animation that *traces itself in over 4.2 seconds*. Below the frontispiece the masonry begins, and from that point on the page is **never less than three columns wide**. The masonry never closes; it does not collapse into a footer. Instead the bottom of the page is a **soft underwater dissolve** — the last 30vh of the page fades the masonry cells into a deep-indigo gradient that is itself an SVG with twelve animated water-bubbles drifting upward at 22–58 second loop durations. **Cell typology — six kinds of drawer.** Every masonry cell is one of exactly six drawer types, and the page mixes all six: *(1) **Specimen drawer*** — a single hand-drawn marine specimen on a deep-indigo ground, captioned in italic serif with a Latin binomial; *(2) **Pattern drawer*** — a tile of one of seven repeating Morris-marine patterns (kelp lattice, wave scallop, anemone rosette, tide-line stripe, scallop-shell diaper, eelgrass diagonal, coral fretwork); *(3) **Letter drawer*** — a paragraph of long-form pastoral prose set in the elegant serif companion, with hanging punctuation and an ornamental drop cap; *(4) **Blob drawer*** — a single organic blob (a `` whose `d` attribute is animated via SMIL `animate` between 4 keyframe shapes over 14s) holding one specimen on its surface like an island; *(5) **Path drawer*** — a square cell containing only a self-drawing SVG line illustration that *redraws every time the cell scrolls into view, then pauses, then redraws again every 38s*; *(6) **Bubble drawer*** — an empty drawer with no caption and no specimen, only a column of slow-rising bubbles, present as **deliberate breathing room** against the maximalism. **Spatial rhythm.** The grid is *not* uniform-gap. Horizontal `column-gap` is **18px**, but vertical `row-gap` is **2px** — so the cells stack almost touching vertically while breathing horizontally, mimicking the way specimen-cabinet drawers nestle. Every fifth cell is given `transform: rotate(-0.6deg)` or `rotate(0.4deg)` (alternating) to break the perfect orthogonality and suggest hand-hung framing. **No cell is ever centered in the viewport** — there is no z-pattern, no f-pattern, no hero-dominant focal point after the frontispiece. The reader's eye must wander. ## Typography and Palette **Typography — three families, all on Google Fonts.** - **Display / Wordmark — [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk)** at weights 500 and 700, used for the frontispiece wordmark, every drawer-header, and every Latin binomial label. Space Grotesk is the **grotesque-neo** voice: a contemporary, slightly geometric grotesque whose `a`, `g`, and `t` carry the modernist coolness that keeps the maximalism from collapsing into Victorian pastiche. Set headlines at **letter-spacing -1.6%, font-feature-settings "ss02" on** (alternate single-storey `a`), and at very large sizes (the wordmark at `clamp(96px, 14vw, 220px)`) the lowercase forms are kerned tight enough that *bada* reads almost as one ligated mark. - **Body / Letter — [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond)** at weights 400 and 500 italic. The pastoral-romantic prose voice: a high-contrast modern Garamond revival with extreme thin strokes that *only render correctly on a deep blue ground* (which the site provides). Used for every Letter Drawer, every caption, every long sentence. Set at **18px / 1.55 line-height** with `text-wrap: pretty` so widow lines never collapse to a single word. - **Accent / Binomial — [Cormorant Garamond *Italic* 300](https://fonts.google.com/specimen/Cormorant+Garamond)**, used exclusively for the Latin specimen labels (e.g. *Sargassum horneri*, *Bullacta exarata*, *Holopneustes purpurascens*) at 13px small-caps-style with `font-variant: small-caps` — a single typographic gesture the page uses ten or eleven times to bind the maximalist visual sprawl into one quiet scholarly thread. **Palette — midnight-blue maximalism, six colours plus an ink-line.** - `--abyss` **#0A1430** — the page background. Not navy, not midnight; this is the colour of the ocean at 02:00 from a stone parapet, two parts ultramarine to one part graphite. - `--cobalt` **#1B3A6B** — primary mid-tone, used for masonry-cell backgrounds and for the path-draw stroke when it is on the lighter accent. - `--indigo-bloom` **#2E4A8C** — the "blooming" middle blue used for organic-blob fills and pattern-tile backgrounds. - `--pearl` **#F4EEDC** — warm bone-pearl, the only light hue, used for body type and for the engraved-border line work in the frontispiece. Slightly yellow-shifted to read as candlelit, never as bone-white. - `--coral-romance` **#D86A6A** — a single muted dusty-coral accent, used **sparingly** for the drop-cap initial of every Letter Drawer and for the Latin binomial italics. Roughly 4% of pixel area on the page. - `--seafoam-faint` **#7BB6A8** — a muted oxidized seafoam, used only in pattern tiles and as a *secondary* line-stroke on path-draw illustrations. - `--ink-line` **#E6DDC2** — the engraving-ink colour, used at 1.25px stroke for every hand-drawn line on every blob, every pattern, every specimen. The palette obeys a strict ratio: **65% abyss + cobalt + indigo-bloom (the blue field)**, **22% pearl + ink-line (the line and prose)**, **9% seafoam-faint (the secondary accent)**, **4% coral-romance (the rare devotional warm)**. ## Imagery and Motifs **No photography. No 3D. No icons-as-icons.** Every visual is either an inline SVG hand-drawn engraving or a procedurally animated SVG primitive. The site renders the entire imagery vocabulary in three layers: **Layer 1 — water-bubbles (signature imagery).** Twelve `` elements scattered across the bottom 60vh of the page, each with `r` between 4px and 28px, each filled with a radial gradient from `--pearl @ 0.06` to `--pearl @ 0.18` to keep them barely visible against `--abyss`. Each bubble has its own `transform: translateY()` keyframe animation cycling 22s–58s, drifting upward, occasionally **wobbling sideways** with a sub-animation on `cx`. Every bubble has a thin `stroke: --ink-line` at `0.5px` so they read as engraved circles, not modern flat dots. **Crucially, water-bubbles also appear inside individual masonry cells** — Pattern Drawers tile bubbles into a Morris-style repeating field; Specimen Drawers float two or three bubbles around the specimen; the frontispiece has bubbles rising through the engraved border of the wordmark. **Layer 2 — organic-blobs (the primary structural motif).** Eight large blob `` elements distributed across the masonry as **Blob Drawers**. Each blob is defined by an irregular closed Bézier curve with 7–11 anchor points, animated via SVG SMIL `` with 4 keyframe variants and a 14–22s loop duration so the blob *slowly breathes between forms* like a slow-breathing jellyfish bell. Blobs are filled with `--indigo-bloom` and outlined with `--ink-line` at 1.25px. Each blob holds a single specimen drawing on its surface — a coiled seahorse, a single moon-jelly, a half-open scallop — drawn as a small inline SVG inside the blob's ``. Blobs also serve as the divider between the frontispiece and the masonry: the bottom edge of the frontispiece is a single very wide blob (`viewBox 0 0 1920 240`) that morphs over 18s, separating top from grid like a tideline. **Layer 3 — path-draw-svg (the recurring pattern).** Every Path Drawer cell, every engraved-border in the frontispiece, every tide-line, every drop-cap initial is a hand-drawn SVG path animated with `stroke-dasharray + stroke-dashoffset` so the line *traces itself in*. The path-draw runs in the following catalogue: 1. The frontispiece engraved border — 4.2s draw, runs once on load. 2. Eight specimen-drawings inside Blob Drawers — each redraws on `IntersectionObserver` entry, in 2.6s, with `cubic-bezier(.35,.04,.16,1)`. 3. Six Path Drawers scattered through the masonry, each one drawing a different specimen (kelp blade, sea-fan, sand-dollar, anemone, jellyfish, coiled rope) — each one redraws every 38s on a permanent loop, with a `0.7s` pause between the finish and the restart. 4. Every drop-cap initial in every Letter Drawer is a path-drawn ornamental capital that completes its trace on first scroll-into-view, then becomes static. 5. Hover micro-interactions on every Specimen Drawer add a 0.6s underline-draw beneath the binomial. **Pattern motifs — seven Morris-marine tiles.** Used as backgrounds inside Pattern Drawers and as repeating accents: 1. **Kelp lattice** — diagonal interweaving kelp blades, 4-fold rotational repeat. 2. **Wave scallop** — overlapping scalloped arcs in tight horizontal bands. 3. **Anemone rosette** — radially symmetric anemone tentacles, octagonal repeat. 4. **Tide-line stripe** — alternating thick/thin horizontal lines mimicking driftline strata. 5. **Scallop-shell diaper** — diagonal lattice of scallops, classic damask diaper-pattern logic. 6. **Eelgrass diagonal** — long thin diagonal blades, 30-degree slant. 7. **Coral fretwork** — Greek-key-like geometric fret built from coral-branch right-angles. All seven tiles are rendered as inline SVG `` elements at 240×240 cell size, two-color (background blue + ink-line) — never more than two ink stops per tile. The Pattern Drawers cycle through which tile they show on a 22s rotation with a soft cross-fade. **Specimen vocabulary — eighteen marine-and-shore creatures, all hand-drawn line illustrations**: moon-jelly, comb-jelly, sea-fan, kelp-blade, scallop, mussel, sand-dollar, anemone, hermit-crab, periwinkle, sea-star, abalone, sea-slug, brittle-star, eel, seahorse, holdfast, and one solitary crow on a piece of driftwood. Each one has been drawn as a single SVG path with no fill, only `stroke: --ink-line` at 1.25px, in deliberately uneven line-weight (achieved with `stroke-width: 1.25` and a hand-traced curve where the anchor density mimics where a 19th-century etcher would have pressed harder). ## Prompts for Implementation Treat `bada.style` as **one long Victorian curiosity-cabinet wall, scrolled top to bottom, that the visitor reads like a private journal at midnight**. The implementation is a single HTML page, one CSS file, one small ES module of vanilla JavaScript. There is no router, no framework, no build step required, no analytics. The page weighs less than 200KB but renders as if it weighs a tonne. **The opening — frontispiece path-draw.** On page load the viewport shows `--abyss` only. After `0.6s`, twelve water-bubbles begin drifting up from below the fold, drawn but invisible (opacity 0). At `0.9s` they fade to their working opacities (0.18–0.3). At `1.2s` the engraved-border SVG begins its `stroke-dasharray` self-draw — 4.2s total, easing-in-out — and the wordmark `바다 · style` *does not appear* until `t=4.6s`, when the border has completed. Then the wordmark fades from opacity 0 to 1 over 1.4s with a gentle `transform: translateY(8px) → 0`. There is no skip button. The frontispiece is a 5.4-second devotional moment that the visitor watches whether they want to or not. **Scroll narrative — the descent into the cabinet.** Past the frontispiece, scrolling enters the masonry. Cells appear via `IntersectionObserver` with **stagger reveals** — every cell that enters the viewport delays its opacity transition by `(column-index × 90ms)` so the row reads left-to-right like a sentence. Each cell's reveal is *not* a slide; it is a **soft un-veiling** — opacity 0 → 1 over 0.9s combined with a `filter: blur(6px) → 0` over the same duration, so cells *focus into being* like specimens emerging through dim parlour-light. Once visible, every Path Drawer begins its self-drawing cycle (2.6s draw, 0.7s rest, 35.7s pause, repeat indefinitely). **Blob-breathing as the page metronome.** Every visible blob in the page is *always* breathing — its `` runs continuously regardless of scroll position. This means the page is *never visually still*. Even if the visitor stops scrolling, eight blobs are slowly morphing, twelve bubbles are slowly rising, and six path-draws are looping. The page has the **slow living-thing rhythm of an aquarium at 02:00 in an empty museum**. **Letter Drawers — long-form pastoral prose.** Each of the six Letter Drawers contains 90–160 words of slow, comma-rich, archaic-feeling pastoral prose about the sea — never about the *site*, never about *services*. Topics: *what the moon does to a sleeve hem in winter*, *the seventeen indigos a Korean grandmother dyed her wedding silk in 1947*, *what an oyster knows at slack water*, *a recipe for kelp ink*, *the colour blue that exists only between 04:11 and 04:23 on the East Sea in late August*, *a list of nine things that look like jellyfish at night and are not*. Each Letter Drawer opens with a `--coral-romance` ornamental drop-cap that path-draws on first appearance. **Hover and cursor — restrained, never magnetic.** No `cursor-follow` blob, no glow-trail, no ripple-on-click. Hovers are quiet: Specimen Drawers gain an underline-draw beneath the binomial in 0.6s; Pattern Drawers slow their tile-rotation to half-speed; Blob Drawers brighten the specimen on the blob from `opacity 0.85 → 1.0` over 0.4s. That's all. The maximalism is in the visual density, not in the interaction noise. **Accessibility — leave intact (per project rules).** Skip the a11y considerations beyond using semantic `
` for each drawer. Do not write skip-to-content links, do not write reduced-motion media queries, do not write aria labels — the project explicitly says ignore. **Avoid absolutely:** no pricing block, no plan-comparison grid, no testimonial slider, no "trusted by" logo wall, no stats counter, no sign-up gate, no email capture, no countdown timer, no gradient hero with a centered headline and a CTA button, no dashboard widgets, no parallax stars, no terminal aesthetic, no cursor-follow trail, no light/dark toggle (the page is *always* midnight), no language toggle, no nav bar, no hamburger menu, no footer with links to "About" "Privacy" "Terms" — there is no second page; there is only this page. **The closing — underwater dissolve.** When the visitor reaches the end of the masonry, they enter a 30vh underwater-dissolve zone where the cells fade into pure `--abyss` and only the bubbles continue rising. There is no contact form. There is no "thank you for reading." There is one single, very small, italic Cormorant line at `text-align: center` that says *if any of this becomes a longing, write to the lighthouse — bada @ style* (yes, with the spaces, on purpose). Below that, eight more bubbles, and then the page truly ends. ## Uniqueness Notes Three or more deliberate differentiators relative to the existing 49-design corpus, with frequency-analysis context: 1. **Maximalist as a sustained aesthetic at 8% saturation.** The frequency report shows `maximalist` at only 8% of the corpus, and the dominant aesthetic vocabulary is overwhelmingly `hand-drawn` (85%) and `editorial` (57%) — both of which lean *outwardly tasteful and curated*. `bada.style` commits fully to **maximalist as the headline aesthetic**, treating visual density as devotional rather than decorative. The page is *deliberately too much*: 30+ masonry cells, 8 breathing blobs, 12 rising bubbles, 6 looping path-draws, 7 morris-marine pattern tiles all on one screen, all moving. None of the existing 49 designs commits to this density with a coherent unifying motif. 2. **Masonry layout at 8% rarity, paired with midnight-blue palette at 4% rarity.** Masonry appears in only 8% of the corpus, and `midnight-blue` palette appears in only 4% — and *no existing design pairs them*. The dominant layout patterns are `centered` (93%) and `full-bleed` (89%), and the dominant palette mode is `warm` (97%) and `gradient` (91%). bada.style explicitly **rejects warm gradient and the centered hero**, choosing instead a non-aligning vertical masonry on a cool, dark, single-tone field — putting the design in a sub-1%-occupancy quadrant of the corpus. 3. **Grotesque-neo typography at 2% rarity (the floor of the histogram).** `grotesque-neo` typography appears in just 2% of the corpus — i.e. one prior design — versus the corpus-dominant `mono` (95%) and `humanist` (34%). bada.style uses **Space Grotesk** as its sole display face, and pairs it with `Cormorant Garamond` as the body — a pairing that does not exist anywhere in the existing 49 designs. The grotesque-neo voice keeps the maximalism modern; without it the page would collapse into Victorian pastiche. 4. **Pastoral-romantic tone at 4% rarity.** Tone of voice in the corpus is dominantly `professional` (40%) and `friendly` (34%); `pastoral-romantic` is at the 4% floor. bada.style commits fully to a **slow, comma-rich, archaic, devotional** voice — six full long-form Letter Drawers of original pastoral prose — and refuses to write a single CTA, pricing line, or stat-counter. This single editorial choice differentiates the entire reading experience from the corpus norm. 5. **Water-bubbles as a primary, page-spanning imagery motif at 8% rarity.** The frequency report shows `water-bubbles` at 8% — and in those existing instances bubbles are usually decorative accents, not structural. bada.style elevates bubbles to a **page-metronome**: twelve bubbles drift across the entire page at all times, plus additional bubbles inside individual cells, plus bubbles in the frontispiece border. They are the only continuous-motion element in the page that is *not* a blob, and they thread the maximalism into a single tidal rhythm. 6. **Organic-blobs at 4% rarity, used as structural drawers (not as background).** `organic-blobs` appears in only 4% of the corpus, and where it appears it is usually a background gradient-mesh. bada.style uses blobs as **literal islands** that hold one specimen each, and animates them with SMIL `` keyframe morphs — turning the blob into a living drawer rather than a decorative wash. This treatment does not exist in any existing design. 7. **Path-draw-svg used as a *recurring* page-rhythm element rather than a one-shot reveal.** `path-draw-svg` appears in 36% of the corpus, but in nearly every case it runs once on scroll-in and then stops. bada.style runs **six path-draws on a permanent 38-second loop**, plus the frontispiece border, plus eight specimen-on-blob path-draws on intersection — making path-draw a *continuously living* element of the page, not a single decorative flourish. This sustained-loop usage is unique within the corpus. 8. **The page is one page only — no nav, no footer-links, no second route.** The corpus norm is multi-section pages with at least an implicit nav and a footer. bada.style refuses both: the page begins at the frontispiece and ends in an underwater dissolve, and the only "contact" is a single italic line of prose that gives an email address spelled with spaces. This editorial extremism is not present in any other design. 9. **Avoided patterns (per frequency analysis).** This design deliberately avoids `parallax` (91%), `centered` layout (93%), `full-bleed` after the frontispiece (89%), `gradient` palette (91%), `warm` palette (97%), `mono` typography (95%), `vintage` motifs (89%), `photography` imagery (93%), `cursor-follow` (16%), `hover-lift` (16%), `tilt-3d` (18%), and all dashboard / sidebar / bento-box layouts. The design seed (aesthetic: maximalist, layout: masonry, typography: grotesque-neo, palette: midnight-blue, patterns: path-draw-svg, imagery: water-bubbles, motifs: organic-blobs, tone: pastoral-romantic) is honoured exactly, and every choice in this document derives from those eight axes rather than from any corpus-popular default. **Chosen seed:** `aesthetic: maximalist, layout: masonry, typography: grotesque-neo, palette: midnight-blue, patterns: path-draw-svg, imagery: water-bubbles, motifs: organic-blobs, tone: pastoral-romantic`.