# Design Language for bada.style ## Aesthetics and Tone bada.style is a **tide-school** — a long-form, single-page **tech tutorial that teaches you how to *read the sea as if it were CSS***, rendered in an **evolved-minimal** visual language that reads at first glance as "another clean design system landing page" and then, on the second beat, reveals itself as a coastal field manual where every empty white slab is actually a depth of water and every typographic flourish is documenting a wave it just passed through. The site's whole identity rests on a Korean–oceanographic conceit: **"바다" (*bada*) = sea**, **".style"** = the aesthetic register, and the marriage of the two reads in two registers simultaneously — *the way the sea styles itself*, and *a stylebook for the sea*. The site is positioned as the canonical online lesson plan for a fictional one-week residency called **TIDE-SCHOOL // Volume 01: Reading the Coastline**, taught by a cohort of marine engineers, surf-cam operators, and Hangul typographers who have all decided that the swell, the wave, and the surf-line are simply the three states a CSS animation passes through. Every section of the page is a *lesson*; every lesson has a *lab*; every lab has *exit criteria*; every exit criterion is also a quiet meditation on the horizon. **Tone register.** This is not motivational. It is not poetic-romantic. It is *tutorial* — the steady, second-person, didactic voice of a really good MDN page or a really patient swim instructor — and it stays in that register even when the prose is naming the precise blue of a 6 a.m. sea-fog. The page is allowed to become beautiful, but it is never permitted to become *decorative*. Every aesthetic move must answer to a curricular question. The whole document is structured the way a good lab manual is structured: *here is what you're about to learn / here is the principle / here is the exercise / here is what success looks like / now apply it.* If a sentence is purely lyrical, it is moved to the margin gloss as commentary, not as body copy. **Visual register.** "Evolved-minimal" is doing the heavy lifting and the term needs to be defined precisely, because it is not the same as "minimalist" and not the same as "Swiss." Classic minimalism is *reductive* — it asks how much can be removed before meaning collapses. Swiss-minimalism is *systematic* — it asks how rigorously the grid can be obeyed. Evolved-minimal, as bada.style practices it, is *generative*: it begins from a near-blank page and then permits exactly the ornaments that the *content itself* is teaching the reader to notice, and no others. So if Lesson 03 is teaching the reader to see how a foamline trails a wave, Lesson 03 may render a single 1px hairline in the margin that does in fact trail behind the reader's cursor on a 200ms spring — and that hairline did not exist on the page until the lesson earned it. Decoration here is *pedagogical*. The reader watches the page become more visually articulate as their understanding becomes more visually articulate. By the end of the page, the document has accumulated a small inventory of marginal annotations, a grown index of sea-words, a hand-marked wave-height log, and a softly bokeh-scattered horizon — none of which were present on first paint. The mood, finally, is **morning-coast-lab**: the cool grey-blue light of 6:42 a.m. on a Korean coastline in late spring, when the sea is still glassy and the sun has not yet committed to anything, and someone in a wool jacket has set a notebook on a wet seawall and is about to teach you something specific. ## Layout Motifs and Structure The page is a **Z-pattern** in the classical newspaper-front-page sense — but the Z is *load-bearing curriculum*, not just a reading-eye guide. **Z-pattern, formalized.** A Z-pattern is a layout in which the eye traces a Z across the viewport — top-left → top-right → diagonal back to bottom-left → bottom-right. Most contemporary Z-pattern landings use this for hero/CTA, which is the use case this design rejects. Here, **the Z is a unit of pedagogy**: every full-viewport "lesson screen" obeys the Z, and the four anchor-points of every Z map to the four sections of a lab manual: - **Top-left anchor — *Lesson Number + Korean Title*** (e.g. `LESSON 03` and `너울 NEOUL — swell`). This is the largest type on screen, set in display-bold, and it acts as both heading and chapter divider. - **Top-right anchor — *Principle gloss*** in small mono caps. One sentence. The actual *physics* of what is being taught. ("A swell is a wave that has outrun the wind that made it.") - **Bottom-left anchor — *Lab*** — the body copy of the lesson, set in a humanist serif, never wider than 58 characters, with marginalia gathering in the left rail like a student's pencil notes. - **Bottom-right anchor — *Exit criteria*** — three to five terse, monospaced bullets that name what the reader should now be able to *see* on a real coastline. Not "achieve" — *see*. The lesson is complete when the reader can spot the principle in the wild. The four anchors are connected by a **drawn diagonal hairline** — a 1px hand-jittered SVG path that animates in over 600ms when the lesson scrolls into view, tracing the Z. This is the literal Z of the layout, made visible. On scroll out, it does not erase; it accumulates in a thumbnail spine at the page's right edge, so by the bottom of the page you have a small index of every Z you've crossed. **Twelve lesson screens, plus four interstitial labs.** The page is exactly **sixteen viewport-height "screens"** stacked vertically, no more and no less, scrolling at native browser speed with no scroll-jacking. Twelve are *Lessons* (full Z-pattern), four are *Labs* (interactive interludes that break the Z to insert a single full-bleed exercise — a horizon you tilt with the mouse, a tide-clock you advance, a foamline you trace with your finger, a sea-temperature gradient you scrub). The Labs are also pedagogically bound: each comes after every third lesson and forces practical application before the next concept arrives. **Grid spec.** A **12-column / 9-row CSS grid**, locked to a **1440 × 900 reference frame** but fluid down to 360w. Outer margins are 64px on desktop, dropping to 20px on mobile. Gutter is **24px**. Crucially, the grid is **not visible** as gridlines — but in any column that contains the body of a lesson, an **8.5pt baseline grid** is exposed only inside the body-copy column, rendered in a 4% opacity hairline so the reader can feel that the type is sitting on rails. This is the only "Swiss tell" the design permits, and it is permitted because the lesson's content is, in fact, taught against a grid. **Magnetic anchors.** Every lesson's four anchor-points are **magnetic targets**. The cursor — represented as a soft-edged 14px disc the same blue-grey as the morning sea — is attracted toward whichever anchor is nearest, with a sluggish 320ms spring. The user perceives this as the page *gently herding their eye along the Z*. This is the central interaction, and it is doing actual pedagogical work: the reader's eye is being trained to follow a Z, lesson by lesson, until in the final lab they are asked to follow a Z without the magnet, and they can. **Negative space.** Roughly **62% of the visible viewport in any lesson is empty**. The empty area is *not blank* — it is the **bokeh-background plane** (described below). This is what allows a tutorial-dense layout to read as evolved-minimal: the lesson copy is rigorously bounded to its anchors; the rest of the page is sea-fog. **Mobile reflow.** The Z collapses to a **single vertical column** in narrative reading order: lesson number → principle → lab body → exit criteria → diagonal-hairline-as-vertical-spine. The Z is preserved as the *spine itself*, drawn as a long zig-zag down the left rail of the mobile column. The metaphor survives the breakpoint. ## Typography and Palette **Type stack — Google Fonts only.** - **Big Shoulders Display** (variable weight 600–900, primarily 800/900) — the **display-bold** primary. Used for every Lesson Number + Korean Title pairing at the top-left anchor of each Z. Big Shoulders is a Google-Fonts condensed display sans designed for dense urban signage; at 96–144px it has the engineered, almost transit-system authority that *Helvetica Inserat* used to have, but with sharper terminals and a tighter waist that makes it read as contemporary rather than mid-century. We set it at -0.015em tracking and a stiff 0.92 line-height. Lessons in Korean co-set in **Black Han Sans** (Google Fonts) at the same optical size — Black Han Sans is the only Hangul display face on Google Fonts that genuinely matches Big Shoulders' confidence at large sizes. Latin and Hangul share a baseline; cap-height of Big Shoulders is calibrated to the Han Sans glyph-box height. - **Newsreader** (variable weight 400/500, italic 400) — the humanist serif that carries every body of every Lab. Newsreader is a Google Fonts open-source serif optimized for short-form reading on screens; it has just enough warmth to keep the page from feeling like a software manual, and it sits on its baseline grid cleanly at 17px / 28px on desktop and 16px / 26px on mobile. Italic Newsreader handles all sea-words on first introduction (e.g. *neoul*, *tteul*, *gae-ttae*) and all marginal glosses. - **JetBrains Mono** (weight 400, 600) — the mono used for *Principle glosses*, *Exit criteria* bullets, *lab inputs*, the wave-height log in the right rail, and any in-line CSS-as-pedagogy snippets. Set at 13px on desktop, tracked +0.01em, all-caps for principles only. - **Hahmlet** (weights 300, 500) — the secondary Hangul serif that takes over wherever Newsreader would handle Latin body copy but the line is in Korean. Hahmlet is a Google Fonts hangul-Latin pair-friendly serif; its proportions sit comfortably alongside Newsreader so a sentence may switch scripts mid-line without typographic rupture. ("이 파도는 *swell*이 아니라 *neoul*입니다.") **Palette — eight colors, high-contrast, named.** - **Sea-Fog White — `#F4F6F4`** — the page background. Not pure white. It has a faint cool-green cast that you only register against true white, and it is the literal hex average of the morning fog over the East Sea at 6:42 a.m. in late May. - **Ink-Black — `#0A0E12`** — the primary text color and the color of the magnetic cursor. Not `#000`. It carries a 4% blue cast so it sits inside the same family as the sea. - **Tide-Mark Red — `#D2381E`** — the **accent color**, used exactly three places: (1) the diagonal hairline of the Z when a lesson is "active," (2) the small triangular tide-mark glyph that prints between the Korean and English forms of a sea-word, (3) the underline on the *one* live link in the page footer. Tide-Mark Red is the color of a real tide-stake painted on a Korean breakwater; it is the only warm color on the page and it does the job of every CTA in a single ungraspable index. - **Pelagic-Blue — `#1B3A4B`** — the secondary text color, used for marginal glosses and for the tide-clock dial. It is the color of the East Sea at 4 m depth on an overcast day. - **Surf-Foam — `#E8EFEC`** — a near-white slightly cooler than Sea-Fog White. Used for the bokeh disc highlights and the inside of the magnetic cursor's soft halo. - **Kelp-Green — `#2C4A3A`** — used only in the Lab "tide-pool" interstitial; absent from all twelve lesson screens. Holds in reserve for emphasis. - **Salt-Crystal — `#FFFFFF`** — true white, used *only* for the printed-on-glass moments where a sea-word is glossed inside a small rectangular plate (think museum specimen label). Never as page background. - **Abyss — `#03060B`** — used only for the page footer block, which is the one full-bleed dark area in the entire page, framed as "Lesson 13: the deep, which we do not enter today." This is the color of the East Sea at 800 m. **Contrast.** The body-copy pair is `#0A0E12` on `#F4F6F4` — a ~17.6:1 ratio, well past WCAG AAA, and the design uses this margin to permit the body copy to be set thin (Newsreader at weight 400) and still read crisp. The "high-contrast" palette descriptor is honored not by neon clashes but by the *severity* of black-on-near-white, with one warm punctuation. ## Imagery and Motifs **No photography.** The site contains zero photographs, zero stock images, zero AI-rendered ocean shots. Every visual element is either a **typographic glyph**, a **single-stroke SVG line**, or an element of the **bokeh-background plane**. This is a deliberate departure from the corpus, in which 97% of designs use photography. **Bokeh-background, structural.** The page's empty areas — that 62% negative space — are not in fact empty. They are filled with a **scatter of soft, low-contrast bokeh discs** that drift extraordinarily slowly across the screen, parallax-bound to scroll. The discs are CSS-only: each is a `radial-gradient` from `#FFFFFF` at 30% opacity to `transparent`, rendered into a 60–140px circle, with a 28–40px Gaussian blur applied via `filter: blur()`. There are exactly **23 discs** on a desktop viewport at any time, populated by an inert JS routine on first paint and then never re-laid-out except by scroll-parallax. They drift at 0.02 to 0.06 viewport-heights per second — slower than the human eye registers as motion. The reader will not consciously notice them; they will feel that the page has *air* in it. This is the bokeh-background trend used as **visual atmosphere**, not as decoration — it is the medium the page is set inside. **Sea-words as the iconic system.** Where another tutorial would have icons, bada.style has *sea-words*. Every lesson introduces one Hangul sea-word (e.g. **너울 *neoul*** — *swell*; **물때 *multtae*** — *the tidal hour*; **갯때 *gae-ttae*** — *the moment of slack water*). The sea-word is set as a glyph-pair: large Hangul in Black Han Sans, the romanization in italic Newsreader, separated by the **tide-mark glyph** (`▾` rotated slightly off-axis) in Tide-Mark Red. This pairing replaces every icon, button, and pictogram on the page. The reader is being taught a small vocabulary, and the vocabulary is also the iconography. **Nature motif — the Coastline Atlas.** Running along the right edge of the desktop viewport is a **single 1px-stroke SVG**, drawn live in the user's browser, depicting the Korean east-coast shoreline from Sokcho down to Pohang as a continuous hand-jittered line. As the reader scrolls through the twelve lessons, a small Tide-Mark Red triangle slides along the coastline, marking the lesson's "geographic anchor": Lesson 01 anchors at Sokcho, Lesson 12 at Pohang, with the others apportioned along the line. The coastline is geographically real but stylistically simplified — it would render at the same line-weight in a navigational chart. This is the page's only persistent decoration. On mobile, the coastline collapses to a small triangle-pip at the bottom of each lesson card. **Hand-jitter as a design law.** Every line on the page that is not a glyph or a grid baseline is drawn with a deliberate hand-jitter — a per-pixel `±0.4px` random offset along a SVG path with `stroke-linejoin: round` and `stroke-linecap: round`. This includes the diagonal Z hairline, the coastline, the tide-clock dial markings, and the foamline that trails the cursor in Lab 02. The jitter is computed once per page-load and frozen — it does not animate, it does not refresh on scroll. The result is that every line on the page reads as *drawn by a slightly unsteady human hand on damp paper*. This is the single concession the evolved-minimal vocabulary makes to warmth. **Marginalia.** The left rail of every lesson accumulates **marginal glosses** as the reader scrolls — small italic Newsreader fragments at 14px in Pelagic-Blue, indented 12px in from the body column. They are in the visual register of a careful student's pencil annotations on a textbook page. They appear with a 220ms fade and a 6px drop, staggered 80ms behind the body of the lesson. By Lesson 12 there are seventeen marginal glosses present, and the reader can scroll back and re-read them as a kind of secondary, parallel narrative. This is the page's quiet payoff: the *evolved* in evolved-minimal is the accumulation of these annotations, which were not on the page when it loaded. **Foamline.** In **Lab 02 — *Drawing the Foam***, the user's cursor leaves behind a 600ms-fading hand-jittered foamline as they trace across the lab. This is the only place where the page's interaction leaves a temporary visible trace. The foamline is drawn in Surf-Foam (`#E8EFEC`) at 1px, with a slight 2px Gaussian blur, and it dissolves in the same 600ms window. The user is being taught — explicitly, by the lab's principle gloss — that *foam is the receipt a wave leaves of where it just was.* The interaction *is* the lesson. ## Prompts for Implementation Build bada.style as **one HTML file, one CSS file, one ES module** — no framework, no router, no service worker, no fetch, no analytics. Total uncompressed bundle target: under **90KB**, including embedded SVGs and the coastline path. Fonts are loaded via Google Fonts CSS2 with `display=swap` and preconnect. **Page event timeline (first paint to fully arrived).** - **0.00s — first paint.** Sea-Fog White background renders. Big Shoulders Display masthead `BADA.STYLE / TIDE-SCHOOL — VOL.01` appears in the top-left at viewport-height 0, weight 800, 96px. Below it, in JetBrains Mono 13px Pelagic-Blue, the line `EAST SEA · 35.0°N – 38.6°N · MORNING REGISTRY`. Nothing else. - **0.18s — bokeh discs fade up.** All 23 bokeh discs fade in at staggered 40ms intervals, from opacity 0 to their resting opacity of 0.30, over 480ms. Now there is *air* on the page. - **0.50s — coastline draws.** The right-rail coastline SVG draws its `stroke-dashoffset` from full to zero over 1.6s at an ease-out cubic. The Tide-Mark Red triangle pin appears at Sokcho (Lesson 01's geographic anchor) on completion. - **0.62s — first Z appears.** The first lesson's diagonal hairline begins drawing top-left → bottom-right. As it draws, each of the four anchor regions populates: number, principle, lab body, exit criteria. Stagger between anchors is 80ms. Total first-Z population time: 1.1s. - **2.0s — interaction unlocks.** The magnetic cursor is now active. The reader can scroll. - **scroll — lessons reveal.** Each subsequent lesson's Z draws in as it crosses 60% of viewport height. Marginal glosses populate the left rail with a staggered fade. **Magnetic cursor — implementation notes.** The cursor is a 14px disc, color `#0A0E12`, with a 28px halo of `#E8EFEC` at 30% opacity. On every `mousemove`, compute the four lesson-anchor positions (or the four lab-anchor positions, if a Lab is in view) and find the nearest. Apply a force toward that anchor: `velocity += (anchor - cursor) * 0.06`, then dampen `velocity *= 0.82`, then `position += velocity`. The cursor never reaches the anchor (the magnet is always weakly losing to the user's hand) but it is always being *pulled*. At rest, the cursor sits 8–14px off the user's actual mouse position toward the nearest anchor — the user feels their hand is being herded, gently. Disable on touch. **Marginal-glosses — implementation notes.** Glosses are pre-written in the HTML as `