# Design Language for bada.style ## Aesthetics and Tone bada.style is a **tidal couture lookbook** -- a biannual editorial imagined as if *Purple Magazine*, *Toiletpaper*, and a 1970s Korean marine-biology periodical collided on the low-tide flats of Ganghwa Island. The word **바다 (bada)** means "sea" in Korean, but here it is reframed not as landscape, nor as mood -- **bada is a material**. Salt is a fiber. Kelp is a ribbon. Tide-lag is a typographic rhythm. The site behaves as if the ocean itself were the house designer and everything else -- the model, the garment, the page, the viewer -- is an undressed mannequin that the sea briefly decides to style. The tone is **editorial-austere meets salt-damaged-luxury**. Think of a couture atelier that has been evacuated for two decades, its garments re-hemmed by brine, its mood boards waterlogged. The visual register is **cold, analytical, and slightly humid**: a taxonomist's plate meets an Acne Studios lookbook shot through polarized glass. There is deliberate discomfort here -- asymmetries that refuse to resolve, serifs stretched past polite proportion, whitespace pulled like a tide going out and then punched through by a single oversized garment-crop image that takes up an entire viewport. Nothing pulses, bounces, or celebrates. The site moves the way kelp moves: a slow, conditional sway answering a current the viewer cannot see. Humor exists but is dry as oyster shell -- a single caption reading "FW26 / COLLECTION: LOW TIDE / LOOK 04 / FIBER: *Undaria pinnatifida*, bleached" stated with a straight face under a photograph that is clearly just a wet napkin. The anti-thesis is: warmth, dopamine, card-grids, CTAs, gradient heroes, trust-badges. If it belongs on a landing page, it is banned. This is a **lookbook**, not a product. ## Layout Motifs and Structure The structural grammar is **magazine-spread crossed with broken-grid**, governed by a concept called **"The Tideline"** -- a single horizontal axis that runs across every spread at a variable y-position, marking where the page was last touched by water. Everything above the tideline is dry, precise, measured. Everything below is wet, swollen, typographically drowned. The tideline itself is a 1px hairline of Saltline Silver (#BDB7AA) with tiny animated droplet-ticks at irregular intervals (a custom SVG generator, NOT a repeating pattern). **The spread is the atomic unit, not the section.** The site is composed of **nine numbered spreads** (SPREAD 01 through SPREAD 09), each occupying 100vh minimum but extending downward as needed. Spreads are separated not by horizontal rules but by **"low-tide gutters"** -- vertical bands of 14vh of true black (#020202) containing a single centered frame number in Tide-Chart Gray ("/ 04 —"). **Per-spread grid:** a **13-column asymmetric pica grid** (inspired by broadsheet layout proofs) where columns 1-5 carry text, column 6 is always empty (a "breath column"), and columns 7-13 carry the image. Every fourth spread **inverts** this grid, so the image pulls left and text flushes right against the viewport edge, bleeding off-screen. No spread aligns perfectly with the previous -- there is always a 9-24px horizontal nudge, as if the page had settled differently in water. **The Catalog Rail:** permanently fixed on the left edge (desktop) is a vertical rail, 44px wide, rendered in Salt-Paper White with a dotted vertical line running down its center. The rail shows the full taxonomy of the current collection as a vertical etched list (ultra-small mono, 9px, 0.24em letter-spacing, written vertically with writing-mode: vertical-rl). Scrolling scrubs a small horizontal hairline-indicator along this rail -- the visitor is always told how far along the tide they are, phrased as a depth in centimeters below the high-water mark: "— 184 CM BELOW HWM". **The Mannequin Column:** running along the right 14vw of the viewport is a **ghost column** containing a single life-size SVG mannequin silhouette (drawn in 0.5px hairline, barely visible). As the visitor scrolls, tiny editorial callouts appear on this mannequin pointing to the body part currently being described in the spread's body text ("collar / bleached in brine for 14 days", "hem / reinforced with cuttlefish ink thread"). The mannequin rotates 2.3 degrees per spread, drifting slowly like a buoy. **No header, no footer, no hamburger.** Navigation is done via the Catalog Rail and via two **"tide buttons"** in the extreme lower-right corner: `↑ FLOOD` and `↓ EBB`. Nothing else. There is no search, no contact form, no newsletter signup, no legal stripe. The site is an object to read, not a product to transact. ## Typography and Palette **Typography** (all fonts on Google Fonts, no exceptions): - **Display / Spread Titles:** **"Italiana"** (Google Fonts) -- a sharp, high-contrast didone-adjacent serif with dramatically thin hairlines. Used at clamp(4rem, 14vw, 12rem), weight 400 only, letter-spacing: -0.03em on the capital pairings to make the terminals slice into each other like hull plates. Applied to the large spread-openers ("LOW TIDE", "BRINE BLEACH", "KELP BIAS", etc.) set in ALL CAPS, flush-left, with a **single descender-hacked lowercase letter** spliced in (e.g. "LOw TIDE") as a deliberate anti-perfection tic. This mimics the way a printer's proof shows one dropped sort. - **Editorial Body:** **"Newsreader"** (Google Fonts) -- a soft, warm, reading-focused serif with a slight wet feel to its bowls. Weight 300 for body at 15px/1.78 line-height. The unusual choice: we set a **fluid italic-toggle** on every 11th word using `:nth-child`-style spanning, so body copy has a slight tidal shimmer of italic moments without pattern. Optical-size axis pushed to 14 for long-form body, 36 for sub-deck. - **Editorial Micro / Captions / Rail:** **"JetBrains Mono"** (Google Fonts) at 9-11px, weight 400, letter-spacing: 0.22em, ALL CAPS. Used for callouts, fiber descriptions, coordinates, and the Catalog Rail. Provides the taxonomist-plate register -- dry, evidential, cold. - **Deck / Sub-head:** **"Cormorant Infant"** (Google Fonts, a specific variant of Cormorant) -- weight 500, italic, used at clamp(1.25rem, 2.2vw, 1.85rem) for the spread's tagline. Exactly one deck per spread. The infant variant's slightly rounded terminals soften the didone severity of Italiana. - **Rare Signature / Vertical Glyph:** **"Yeseva One"** (Google Fonts) used ONLY for the collection's signature mark "바" (the first Hangul syllable of "bada"), rendered once at extreme size in the cover spread and once as a 220px watermark on the final spread. Nowhere else. **Palette:** - **Salt-Paper White** `#F4F0E6` -- primary ground; warm, slightly yellowed, like an uncoated 130gsm mulberry stock. NOT pure white. - **True Black (Ink Well)** `#020202` -- primary ink. Saturated, absolute, no hint of navy. Used for body text and for the low-tide gutters. - **Brine Blue-Green** `#2A4A4B` -- a desaturated, nearly-black teal derived from the color of deep kelp forests photographed through 3m of water. Used for the tideline, for hover states, for the italic shimmer words. - **Oxidized Copper** `#7C5642` -- a single accent, used sparingly: only on the Collection number, the frame dots on the tideline, and the "FLOOD/EBB" buttons. Evokes the color of copper nails found in a shipwreck. - **Saltline Silver** `#BDB7AA` -- the secondary rule color; hairlines, mannequin silhouette, rail dotted-line. - **Cuttlefish Ink** `#1A1512` -- a warm black-brown, used for the `바` watermark and for the sub-deck italics. Distinctly softer than Ink Well. - **Bleached Foam** `#ECE4D4` -- a quarter-tone warmer than Salt-Paper White; used for the inset "damp" panels where some spreads show captioning sunk into a slightly darker recess, as if the paper absorbed humidity. - **Low-Water Amber** `#C9A55A` -- a single, rare glow color: used only once per site visit, on a pull-quote that the visitor cannot predict, revealed by a 4s-delayed transition. Evokes the amber of low evening sun on wet sand. No gradients are used anywhere on flat surfaces. The ONLY "gradient" that exists is a custom SVG displacement filter simulating water-blur on one specific element per spread (see Imagery). ## Imagery and Motifs **Core visual principle: the sea styles the garment; we document the result.** Therefore imagery is not decorative. It is forensic. - **The Tidechart Illustration:** Each spread is anchored by a single **hand-rendered SVG tidechart** (not a photograph, not a stock illustration) showing that spread's specific tide curve -- height in cm over hours. The chart is drawn at about 480px wide, in a single 1.5px Brine Blue-Green stroke on Salt-Paper White, with the current hour marked by a tiny oxidized-copper dot. The curve is NOT static: it is redrawn with a staggered path-draw-svg animation each time the spread enters viewport, revealing from left to right over 2.8s with ease-out-quart. Tiny vertical tick marks have hand-drawn irregularity (±0.6px offset) via a seeded pseudo-random generator. - **The Salt-Map Background:** A full-viewport, very-low-opacity (3%) SVG pattern in the background of each spread. The pattern is a **voronoi tessellation of salt-crystal polygons** (generated client-side in JS from a d3-voronoi-like routine with a seed per spread, so each spread's salt pattern is visibly distinct). Crystals are outlined in Saltline Silver hairlines, with one or two crystals per spread filled with Bleached Foam. The salt-map rotates by 0.0008deg/frame -- invisible if watched, but a 30-second observer notices the ocean slowly turning. - **The Kelp-Ribbon Divider:** Between each pair of spreads runs a **hand-SVG kelp ribbon** -- a single continuous curve (bezier, 7 control points) drawn in 2px Brine Blue-Green that snakes horizontally across the gutter. The kelp has tiny oval "leaves" at each control point, drawn as filled ellipses. On scroll, the kelp undulates via a chained sine transform on each control point's y-coordinate, with each control point lagged 120ms behind the previous, so the whole ribbon ripples like a single long frond in current. This is the only overtly "animated" motif on the site and it is subtle. - **Editorial Lookbook Imagery (Critical):** Every fashion-lookbook image is treated with a **two-layer duotone technique**: the source photograph (imagine: a wet muslin shirt hung on driftwood, a salt-encrusted leather boot, a kelp-woven collar on a mannequin's neck) is rendered with a CSS `filter: grayscale(1) contrast(1.14)` base, then overlaid with a `mix-blend-mode: multiply` solid of Brine Blue-Green at 22% opacity. The result is a warm-cold tonal photograph that looks like a silver-gelatin print that has been dipped briefly in seawater. AROUND each image, a single Cuttlefish Ink hairline frame sits 2mm off the edge (visible gap between image and frame = a margin of "beach"), and a JetBrains Mono caption is set BENEATH AND LEFT-ALIGNED with the image's left edge, never centered. - **The "Wet Blur" Element:** Exactly ONE element per spread uses an SVG `feTurbulence + feDisplacementMap` filter to create a water-refracted distortion. It is applied to the spread's frame number ("/ 04"), which wobbles like a digit seen through a tide pool. The turbulence baseFrequency is animated from 0.012 to 0.026 over a 7s keyframe, set to alternate-reverse infinite, creating a slow, breath-like wobble. This is the only "liquid" animation in the site. Everything else is still. - **The `바` Watermark:** On the final spread, the Korean syllable "바" (rendered in Yeseva One at 58vmin, Cuttlefish Ink, 12% opacity) sits in the bottom-right, rotated -14deg, as if stamped by a wet seal. This is the site's sign-off. - **Specimen Tags:** Small rectangular SVG "specimen tags" appear near each lookbook image, resembling museum catalog tags tied with string. Each has three lines of JetBrains Mono micro-text: a catalog number (e.g. "BAD-S26-04"), a specimen designation ("Kelp-bias collar, Look 04"), and a collection date ("Retrieved: 03 Mar 2026, Ganghwa low tide, 06:14"). The tag is rendered with a tiny punched hole, a 1-stroke string curving back toward the image, and a subtle crease-shadow. No two tags rotate the same way -- each has a random rotation between -6deg and +6deg. Explicitly **NOT used**: bokeh, grain overlays, noise textures, gradient meshes, stock photography, icon-heavy layouts, data visualizations, particle effects, 3D renders. No emoji. No stars, bubbles, waves-as-decoration, or sparkle elements. ## Prompts for Implementation **Full-screen narrative immersion.** The site must feel like turning the pages of a physical magazine found waterlogged on a beach. There is no "above the fold" thinking -- there is only the current spread. Intersection Observer marks the current spread with a `data-current-spread` attribute on ``, and the Catalog Rail updates accordingly. Only one spread is visible-focused at a time; adjacent spreads dim by 8% via a CSS variable `--dim-amount` applied to a `mix-blend-mode: multiply` overlay. **Scroll is not scroll -- it is tide.** Implement scroll with `scroll-snap-type: y proximity` (not mandatory -- the viewer must feel a gentle catch, not a lock). Use `scroll-behavior: smooth` with a custom CSS `scroll-timeline` to drive the Catalog Rail indicator and the depth-counter. On supporting browsers (Chromium-based), use `animation-timeline: scroll()` to bind the kelp-ribbon undulation directly to scroll position, not to time. The visitor's scroll speed IS the current. **Reveal choreography (per spread):** When a spread enters the viewport (threshold 0.35), execute a staggered cascade over 2.4s: 1. Ground color subtly shifts (Salt-Paper White → Bleached Foam if spread is "wet", or stays Salt-Paper White if "dry") over 800ms. 2. Tidechart draws left-to-right (see Imagery) over 2.8s. 3. Display title (Italiana) reveals letter-by-letter with a 40ms stagger, each letter translating from translateY(14px) + opacity(0) to rest, with cubic-bezier(0.2, 0.7, 0.1, 1). 4. Body copy fades in at 1.2s delay, 900ms duration, a flat opacity fade (no translation). 5. Lookbook image uses a **vertical wipe reveal**: a Salt-Paper White mask translates upward to uncover the image over 1.4s. As it uncovers, the image's CSS filter transitions from `blur(8px) saturate(0)` to `blur(0) saturate(1)`, as if clearing water is running off it. 6. Specimen tag swings into place with a spring-like settle (2.1Hz damped oscillation, 3 cycles). **Typographic-tide rhythm:** Body copy uses a custom CSS rule where every 11th word is wrapped in a `` with `font-style: italic` and `color: var(--brine)`, applied at build time or via a post-render text walker. This creates a shimmer without being legible as a pattern. DO NOT highlight the 1st, 7th, or 22nd word -- feels too rhythmic. 11 is prime and feels oceanic. **Cursor as salt grain:** Custom cursor is a single 4px × 4px Cuttlefish Ink square with a 0.5px Brine Blue-Green hairline frame. When over a link, it expands to 12px × 12px and rotates 45deg (becomes a diamond / salt-crystal). No cursor trail. No glow. The cursor is a piece of grit. **Hover states:** Links are body-inline, marked ONLY by a 1px underline in Brine Blue-Green. On hover, the underline does NOT animate its thickness; instead, the *word itself* shifts 2px to the right over 280ms ease-out, and a tiny JetBrains Mono footnote appears beneath it with a collection coordinate (e.g. "37.7457°N, 126.4852°E"). This is the only hover micro-interaction. **No conventional UI components.** No buttons with rounded corners. No cards. No modals. No tooltips. No dropdowns. No accordions. No tabs. The only "button" shapes are the FLOOD / EBB tide buttons, rendered as tiny Oxidized Copper triangles (7px equilateral) with their caption in 10px JetBrains Mono next to them. **Responsive behavior:** Below 900px, the Catalog Rail retracts to a 6px vertical hairline on the left edge with the depth-counter text tucked into the top-right corner. The Mannequin Column disappears entirely on mobile (it was an atmospheric flourish; its absence is honest). The 13-column grid collapses to a 5-column stack but retains the tidal-nudge asymmetries. **Load sequence:** The page opens with a full-viewport Salt-Paper White canvas. A single line of JetBrains Mono text at vertical center slowly types out: "Compiled from tide logs, 03 Mar 2026 — 17 Apr 2026." Below it, a 2px horizontal line draws left-to-right over 2.1s in Brine Blue-Green. When it completes, the entire line translates upward and fades out, revealing Spread 01 underneath. Total pre-roll: 3.6s. No skip button. The visitor is being asked to wait for the tide. **No tracking, no analytics UI, no cookie banner visible.** If consent tooling is needed, render it in the same typographic register as everything else -- JetBrains Mono, 10px, docked bottom-left, no color -- stripped of its normal dark-pattern cloth. **Avoid entirely:** card grids, bento boxes, stat counters, testimonial carousels, logo strips, pricing tables, feature-bullet trios, "as seen in" bars, parallax hero images, cookie-banner modals with buttons, social-share icons, newsletter signups, contact CTAs, typewriter loops on hero, scroll-triggered glow effects, hexagonal grids (bada.moe used that -- we are explicitly distinct). Also avoid mono-font body text (it's the most overused tic in the collection -- we use mono only for captions/rail). ## Uniqueness Notes **Differentiators from the 50-design collection (per frequency.sh):** 1. **Magazine-spread-as-atomic-unit, not card-grid.** Card-grid is used in 94% of designs; magazine-spread in 8%. bada.style commits fully to the spread as the fundamental compositional unit -- not as a section inside a longer page, but as the **whole interaction model**. Nine discrete spreads, navigated via tide buttons and a vertical catalog rail. No other ocean-themed design in the collection has done this; bada.moe (the only other "bada" design) chose hexagonal-honeycomb horizontal-scroll, which is a completely different structural grammar. 2. **Tideline as horizontal design axis.** No design in the collection uses a single animated horizontal hairline as a global compositional spine. The tideline is both a visual element AND a semantic marker (dry above / wet below) that governs how type and color behave on each side of it. This is a purpose-built typographic device unique to this site. 3. **Fashion-lookbook tone applied to a micro-domain.** "avant-garde fashion lookbook" seed is underused (0 designs in the frequency analysis have explicit lookbook structure). Combined with the marine vocabulary, this yields "Tideline Couture" -- salt, kelp, brine as editorial fashion materials, treated with forensic seriousness. Distinct from the generic "ocean deep calming spa" seed that most ocean-domains default toward. 4. **No gradients, anywhere.** 98% of designs in the collection use gradient palettes. bada.style uses **exclusively flat color** across every surface, with exactly one exception (the SVG `feDisplacementMap` wet-blur on frame numbers). This alone is a strong differentiator. 5. **JetBrains Mono used ONLY for captions**, not for body. 90% of designs reach for mono typography in body or titles; here we refuse that tic and relegate mono to its correct editorial role as taxonomic caption-type. Body is served by Newsreader (a serif rarely used in this collection) with a one-of-eleven italic-shimmer rule -- an invented device. 6. **Voronoi salt-map backgrounds generated per-spread.** Not a repeated pattern, not a tiled texture. Each spread's background is a **client-side-generated voronoi tessellation with a spread-specific seed**. No other design specifies generative-per-section backgrounds; this is distinct from the "generative-art" (12%) or "noise-texture" (10%) patterns which are usually static overlays. 7. **The Mannequin Column ghost element.** A persistent, right-edge, life-size hairline mannequin silhouette annotated with body-part callouts -- a motif borrowed from anatomical plates and tailor's marking diagrams. Fashion-atlas, not product-landing. 8. **Korean 바 watermark as sign-off, used exactly twice.** Cultural rooting without exoticism -- no generic "zen" or "japanese-minimal" appropriation. The Hangul syllable is the domain's literal etymology, treated as a signature mark rather than decoration. 9. **The specimen-tag motif.** Museum-catalog tags attached to editorial lookbook imagery -- collapsing fashion lookbook and natural-history plate into one visual register. No other design in the collection has done this hybrid. 10. **The "tide-as-scroll" haptic metaphor.** scroll-snap-type: proximity (not mandatory), combined with `animation-timeline: scroll()` for kelp undulation, means the visitor's scrolling physically generates the kelp's movement. Interaction IS the tide. No card-hover or CTA-click anywhere. **Chosen seed:** `avant-garde fashion lookbook` × `wabi-sabi imperfect ceramic` fused into a novel Tideline-Couture hybrid. Layout: `magazine-spread` + `broken-grid` (both underused in the collection). Typography: `serif-revival` + `serif-classic` + `mono` (captions only). Aesthetic: `avant-garde` (8%) crossed with `editorial` (16%) and a whisper of `wabi-sabi` (12%). Deliberately avoids the collection-overused `corporate` (90%), `gradient` (98%), `warm` palette (96%), `card-grid` (94%), `scroll-triggered` bouncy choreography (94%), and `mysterious-moody` (42%) default. Also explicitly distinct from sibling `bada.moe` which chose seapunk-y2k-mcbling -- bada.style is the austere editorial photograph to bada.moe's rainbow sticker binder. **Avoided patterns from frequency analysis:** - AVOIDED: gradient (98%), warm palette (96%), photography-driven imagery (94%), card-grid (94%), scroll-triggered bounce (94%), mono body (90%), corporate aesthetic (90%), mysterious-moody tone (42%), humanist typography default (42%), stagger animation (38%), parallax (56%). - PREFERRED (underused): magazine-spread (8%), avant-garde (8%), broken-grid (14%), editorial tone (16%), wabi-sabi (12%), generative-art backgrounds (12%), path-draw-svg (30%), serif-classic (30%), zen-contemplative (14%) as a minor undertone but reframed from Japanese-zen toward Korean maritime editorial.