# Design Language for bada.day ## Aesthetics and Tone `bada.day` is read as the literal compound it is: **바다 (bada)** — the Korean word for *the sea*, two flat open vowels a child says before they have ever been to one — followed by **.day**, a single rotation of the earth measured against that same indifferent water. The domain therefore names the smallest unit of marine bookkeeping: **one tide-day**, twenty-four hours of brine and silt, four high-water inflections, two slack-water lulls, and the grain of moonlight that ledger-keeps the whole thing. The site is built as **the field-diary of an unnamed tidekeeper** who has been recording one shoreline, in **monospace ink on rice paper**, every day for thirty-one years and is now publishing only the entries from a single representative day — May 4th — onto a vertical scroll of the kind a Joseon-dynasty scholar would have unrolled across a low writing-desk at low tide. The aesthetic is **wabi-sabi**, but specifically the *coastal* wabi-sabi of **Leach Pottery in St. Ives** crossed with the **shore-poems of Ko Un** — the beauty of the chipped rim, the salt-bleached cedar, the single black character struck slightly off-axis on hand-deckled paper. Nothing on the page is centered to the pixel. Every glyph wobbles on its baseline by a fraction of an em as if the typewriter ribbon had been damp. Every botanical icon is **stamped, not drawn** — pressed once with a wood-block carved by someone whose hand was tired, the ink heavier on the lower-left, the right edge feathering into the deckle. The mood is **mysterious-moody**: not gothic-moody, not dark-academia-moody, but the specific moodiness of **a tide-pool at four in the morning when there is enough light to see that something is moving at the bottom but not enough to name it.** The cursor blinks. The page does not promise to explain what is moving. The visual register is **honest, slow, slightly broken, and entirely sincere.** There is no sales tone, no "we make X" sentence, no service grid. The site treats the visitor as a fellow tide-watcher who has been handed the ledger and asked to read in silence. ## Layout Motifs and Structure The structural metaphor is the **handmade octavo field-journal**, opened to one continuous unfolding leaf — no spreads, no facing pages, just **a single vertical column of 56 characters** (≈ 560px on desktop) running from the top of the viewport to a soft tide-line two thousand pixels below the fold, then below that line another full screen, then another, until the day is done. **Single-column logic.** The entire page is ONE column, max-width `560px` on desktop, `92vw` on tablet, `94vw` on mobile, **anchored 38% from the left edge of the viewport** rather than dead-center — an off-axis placement borrowed from Japanese hanging scroll convention, where the calligraphy never sits at the optical middle of the silk because that is where the dragon's eye would go and the dragon is implied, not drawn. The right two-thirds of the viewport is **deliberately empty** — pale parchment ground, occasionally interrupted by a single floating botanical stamp in the far margin, the way a scholar would have brushed a small chrysanthemum into the white space of a poem to weight the page. **Vertical structure — twenty-four hour-stamps.** The page is a **timeline of one day**, divided into 24 hour-headings, each set as a single line of monospace: ``` 04:17 ── 슬프다 ── low water, –0.31 m, sandpiper count: 6 05:02 ── 조용하다 ── slack, gull silence, brine fog at knee height 06:48 ── 차오르다 ── flood begins, oyster-ledge submerged at +0.04 m ... ``` Each hour-stamp is followed by **one short prose entry** (40–120 words), set in tech-mono at 15px / 1.85 line-height, justified-ragged. Below the prose, optionally, a single **botanical-icon stamp** sits in the right margin at roughly 64px square — never two stamps adjacent, never a stamp and a photograph in the same hour-block. Between hour-blocks is **108 pixels of vertical breathing room** (the count of beads on a Buddhist mala, a deliberate accent the visitor does not need to recognize). **Imperfect alignment as system.** Every hour-block is shifted left or right by `±6px` from the column centerline using a deterministic seeded jitter (so the layout is reproducible but never grid-true). Three or four entries per page have a **single mis-struck character** rendered slightly raised or sunk on the baseline — `t` in *tide* sitting 2px low, `ㅇ` in *바다* sitting 1px high — as if a key on the typewriter had a worn return spring. These are CSS, not images, and they are intentional. **No header. No nav. No footer.** The top of the page is the day's date in romaji-numerals (`MAY · 04 · MMXXVI`), set in 10px tracking-wide tech-mono, dim. The bottom of the page is a single line: `END OF DAY ── tide returns at 04:17 tomorrow.` The entire site is one document. ## Typography and Palette **Type system — three families, all monospace-or-monospace-adjacent, all from Google Fonts.** - **[JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)** — 400 / 500, the workhorse body face. Used for every hour-stamp, every prose entry, every margin note. Loaded with `font-feature-settings: "calt" off, "liga" off` so that `--` stays as two distinct hyphens (not an em-dash) and `=>` stays as `=>` (not an arrow). This is a typewriter, not an IDE. - **[Noto Serif KR](https://fonts.google.com/specimen/Noto+Serif+KR)** — 400 / 700, used **only** for the four-to-six Korean glosses that punctuate the day (슬프다, 조용하다, 차오르다, 빛나다, 어둡다). Set inline at `1.15em` against the surrounding mono so the Hangul characters sit slightly larger and noticeably warmer, the way a stamped seal sits inside a typed letter. - **[Special Elite](https://fonts.google.com/specimen/Special+Elite)** — 400 only, reserved for the **opening epigraph** and the **closing END OF DAY line** — a slab-typewriter face with deliberate ink-spread artefacts that lets the first and last lines of the page feel literally typewritten, while the body keeps the cleaner JetBrains Mono geometry. The contrast is the whole point: the diary is *typed clean* but its bookends are *typed by hand on a damp ribbon.* Type sizes form a tight, almost-flat hierarchy: - Epigraph (Special Elite): `21px / 1.4` - Hour-stamp lines (JetBrains Mono 500): `15px / 1.6`, letter-spacing `0.02em` - Prose body (JetBrains Mono 400): `15px / 1.85` - Korean glosses (Noto Serif KR 400): `17.25px` inline - Margin notes (JetBrains Mono 400): `12px / 1.5`, color dimmed to 38% opacity - Closing line (Special Elite): `14px / 1.4` **Palette — earth-tones, six values, all named after coastal substrates.** - `--rice-paper: #EFE8DA;` — the page ground, a warm off-white the color of mulberry paper that has been folded in a humid drawer for one summer - `--ink-low-tide: #2B2A26;` — primary text, near-black with a hint of green-brown so it never reads as pure carbon - `--seal-cinnabar: #8C3A2D;` — the single accent, used **only** for the Korean glosses and the four hour-stamps that mark the tidal turning points (high water, low water × 2, midnight); never for buttons, never for hover states - `--silt: #A89878;` — a warm mid-grey-brown for margin notes, hairline rules, and the deckled edge of the column - `--brine-fog: #C4BEB0;` — the "empty" column ground when shading is applied, a paler silt - `--moss-deep: #4A5A3D;` — used exactly four times across the entire page, for the four botanical stamps that mark the four tides; nowhere else - `--char: #1A1814;` — reserved for the single mis-struck baseline-shifted character per visit, slightly darker than the body ink, as if pressed twice The palette deliberately omits any blue. **The sea is not depicted as blue here.** The sea on this page is named, measured, and tabulated, but it is not pictured in its own color. This refusal is the point. ## Imagery and Motifs **Imagery is icon-heavy, but specifically: hand-carved-woodblock-stamp icons of coastal botanicals.** No photographs anywhere on the page. No illustrations rendered in vector polish. No emoji. The entire visual vocabulary is **eighteen botanical stamps**, each one inked in a single solid color (`--ink-low-tide` for most; `--moss-deep` for the four tide-markers), each rendered as an **SVG with deliberate stamp-bleed artefacts** — the ink heavier in the lower-left of every stroke, two or three small voids in the body of each leaf where the wood grain refused the ink, the right edge feathering into the parchment in a 0.8px irregular halftone. **The eighteen stamps (the tidekeeper's complete iconography):** 1. **갯메꽃 (beach morning glory, *Calystegia soldanella*)** — funnel-shaped flower with three sand-creeping leaves, used at sunrise hours 2. **순비기나무 (chastetree, *Vitex rotundifolia*)** — round leaves in opposite pairs, used at fog-knee hours 3. **갯기름나물 (sea hogfennel)** — flat umbel, used to mark slack water 4. **갯완두 (beach pea)** — pinnate compound leaf, four leaflets, single tendril, used at flood-tide 5. **나문재 (suaeda)** — fleshy spike, used at high water mark 6. **갯질경이 (sea plantain)** — basal rosette, used at low-water-1 7. **퉁퉁마디 (samphire / glasswort)** — segmented joints, used at low-water-2 8. **함초 (saltwort)** — a single jointed stem, used for evening entries 9. **모래지치 (sand gromwell)** — five-petalled flower, used for visitor-arrival entries 10. **해국 (sea aster)** — daisy-like, used for the late-afternoon golden hour 11. **갯사상자 (sea hedge-parsley)** — sparse umbel, used for wind-warning entries 12. **갯취 (coastal aster)** — alternate leaves, used for moon-rise entries 13. **갯메 (beach mallow)** — palmate leaf, used for storm-warning entries 14. **A bare oyster shell, hinge open** — used once, at exactly midnight 15. **A single sandpiper footprint** — used once, at the lowest tide of the day 16. **A pinch of salt-crystals** — used once, at slack water 17. **The character 海 (sea, hanja)** — pressed as a wood-block stamp, used as the page's only logomark, top-left at 28px square 18. **A single horizontal hairline** — the tide-line itself, one pixel of `--silt`, repeated four times down the page to mark the four tides **Decorative pattern in the empty right margin.** The far-right 22% of the viewport on desktop is a near-empty pale field, but at randomized but reproducible vertical positions (seeded by date), three to five **floating botanical stamps** appear in the margin at 32–48% opacity, larger than the in-line stamps (96–128px), drifting one or two screen-widths apart. They never sit at the same vertical y-coordinate as a body-text stamp. They are **the wind moving the dried specimens pinned to the studio wall behind the diary.** **Texture overlay.** A single **paper-grain noise** layer is applied to the entire viewport via a tiny 256×256 SVG turbulence filter at 6% opacity, multiplied. On wide monitors a second **deckle-edge** vector traces the left and right margins of the column at 18% opacity — irregular fibrous edges, not a clean rule. These two textures together carry the wabi-sabi argument: *the page is paper, the paper is uneven, and the unevenness is the page.* ## Prompts for Implementation Treat `bada.day` as **one continuous handwritten-then-typed diary of a single tide-day, scrolled top to bottom, no chapters, no clicks, no destinations.** The implementation is a single HTML page with one CSS file and one small JS module. The whole experience is **the slow act of reading**, and the only interaction is scrolling, watching, and waiting. **The opening — typewriter narration.** When the page first loads, the viewport is empty parchment for `1.4s`. Then a single line of Special Elite begins to **type itself out** at the top of the column at the cadence of an actual 1962 Olivetti Lettera 32 — `~7 characters per second`, with a **±20% jitter** on the inter-character delay so the rhythm has the irregularity of a tired wrist. The line is the day's epigraph, three short sentences: > `오늘은 바다가 두 번 차오른다. 한 번은 우리가 보지 않을 때.` > `Today the sea fills twice. Once when we are not looking.` > `MAY 04 — log entry 11,326 of 11,628.` The typing is implemented as a **deterministic JS routine** with prefers-reduced-motion fallback (instant render). The cursor is a single `▮` character that blinks at `530ms` cadence in `--seal-cinnabar`; it remains blinking at the end of the line until the visitor scrolls, at which point the cursor slides down the left margin of the column and **becomes the scroll-position marker for the rest of the page** — a slowly descending tide-mark that travels at exactly `1px` per `4px` of scroll, so by the bottom of the page the cursor has crawled 25% of the viewport height. This is the only navigation aid. There is no other. **Scroll-revealed typewriter cascade for the hour-blocks.** Each of the 24 hour-blocks is below the fold initially. As an hour-block enters the viewport (intersection-observer threshold `0.15`), the hour-stamp line **types itself in** at `40 characters per second` (faster than the epigraph — these are quick log notes, not literary passages), the prose entry below it then types at `60 cps`, and only after both are typed does the margin botanical stamp **fade in** over `1.2s` with a slight `translateY(+8px → 0)` and a barely-visible scale `0.98 → 1.0`. **Every animation respects `prefers-reduced-motion`** — in reduced-motion mode the type is instantly present, only the `opacity` fade survives, no Y-translation, no scale. **The four tidal moments — special treatment.** Four hour-blocks per page (low-water-1, high-water-1, low-water-2, high-water-2) are marked by a Korean gloss in `--seal-cinnabar` and a `--moss-deep` botanical stamp twice the size of the others. When one of these four blocks enters the viewport, a **soft, slow horizontal hairline** is drawn from the left edge of the column to the right edge of the viewport in `--silt`, taking `2.4s` to complete via SVG `stroke-dasharray` animation, like a tide-line being marked on the wall of a sea-cave. These four hairlines are the only horizontal rules on the page; they are also the only "decorative" animations. Everything else is type appearing. **Hover behaviors — minimal, contemplative.** Hovering a Korean gloss reveals its hanja (if any) and an English translation in a `--silt`-colored tooltip set in 12px JetBrains Mono, fading in over `400ms`. There are no hover states on the botanical stamps — they are passive specimens, not buttons. There are no clickable elements on the page except a single, almost-hidden permalink at the very bottom: `↪ permalink to today's entry`, set in 11px `--silt`, which copies the current date's URL to clipboard and momentarily swaps its text to `↪ copied (slack water)` for `1.6s`. **Ambient drift — the wind.** Every 90 seconds (and on initial load), one of the floating margin botanical stamps **drifts** by `±12px` along the y-axis over `8s` with `cubic-bezier(0.42, 0.0, 0.58, 1.0)` easing — the breeze through the studio window. Only one stamp drifts at a time. This is the only ambient motion on the page. **Mobile.** On viewports below 768px the column collapses to `94vw`, the right-margin floating stamps disappear (no room), the in-line stamps become full-width banners between hour-blocks at 80px square, and the desktop off-axis 38% anchoring becomes a centered column. The typewriter cadence is preserved exactly. Reading remains the entire experience. **AVOID.** No hero CTA, no "subscribe" form, no pricing tier, no stat-grid, no team grid, no testimonial carousel, no nav menu, no logo lockup at the top-right, no cookie banner styled as an interaction, no pop-in modal, no hover-card panels, no parallax of any kind, no scroll-snap, no horizontal scrolling, no full-bleed sections. The scarcity is the design. **EMBRACE.** Silence between blocks. The 108px breathing margin. The single mis-struck character that the visitor may or may not notice. The fact that the page ends with a sentence about tomorrow's tide and not with a button. The reader leaves slightly slowed. ## Uniqueness Notes Three or more deliberate differentiators from the existing 39-design corpus, with frequency-analysis context: 1. **Wabi-sabi as the *primary* aesthetic at 2% saturation.** The frequency report shows wabi-sabi appearing in only one of the existing 39 designs (2%, the floor of the histogram). The corpus is dominated by hand-drawn (84%) and editorial (51%) — both of which are *outwardly expressive* aesthetics. `bada.day` adopts the rarest serious-aesthetic in the vocabulary and renders it not as a surface tic (chipped corners, uneven borders) but as **a structural commitment**: the column is anchored off-axis, every hour-block is jittered ±6px, three to four characters per page are mis-struck on the baseline, the deckle-edge is irregular per-load. The imperfection is not decorative; it is the **ledger system itself**, in the spirit of Leonard Koh's *Wabi-Sabi for Artists, Designers, Poets and Philosophers.* 2. **Tech-mono typography at 2% saturation, used as a *typewriter* not as a *terminal*.** The corpus dominates with `mono` (94%) but `tech-mono` specifically appears only once. The crucial distinction this design draws is that **monospace can be the voice of a 1962 Olivetti, not a 2024 IDE.** Liga features are explicitly disabled, ASCII-art arrows stay as `=>`, the cursor is a Unicode `▮` block at 530ms blink (not a terminal `_` at 500ms), and the body face is JetBrains Mono *anti-styled* into typewriter discipline. The site reads as **a paper diary that happens to be typed**, not as a CLI dashboard. 3. **Earth-tones palette without a single blue value, applied to a sea-themed domain.** The palette is six earth values plus one cinnabar accent. **There is no blue on the page.** This is a deliberate refusal: 97% of the corpus uses a `warm` palette and 89% uses `gradient`, but no design in the corpus describes the sea without depicting its color. `bada.day` describes the sea entirely through **tide-times, salt-spray, sandpiper-counts, and saltwort stems** — never through cyan, navy, teal, or aqua. The chromatic discipline forces the prose to do the work that gradient backgrounds do elsewhere. 4. **Icon-heavy imagery (2% saturation) executed as eighteen Korean coastal-botany woodblock stamps with deliberate ink-bleed artefacts.** The corpus is dominated by `photography` (92%); only one design uses `icon-heavy` imagery and even that one renders icons in clean vector polish. `bada.day` rejects both photography and clean iconography: the site is **a corpus of eighteen named species of Korean shore plants, each rendered as a single-color wood-block stamp** with engineered imperfections (lower-left ink-pooling, right-edge feathering, two-or-three grain-voids per leaf). The botanical vocabulary is real Korean coastal-flora taxonomy, named in Hangul and Latin, used semantically (each species marks a specific tidal moment). 5. **Typewriter-effect (5% saturation) used as the *sole* page-load and reveal animation.** While five percent of the corpus uses typewriter-effect, no design in the corpus uses it as the **exclusive** page-construction mechanism, replacing fade-ins, slide-ups, parallax, and scroll-triggered reveals entirely. `bada.day` uses ONE animation primitive (per-character type-in at variable cadence) for the entire page, with reduced-motion fallback. The radical reduction in animation vocabulary is itself the wabi-sabi argument. 6. **Mysterious-moody tone (5% saturation) without any goth, dark-academia, or noir signifiers.** No black background, no thin-serif drama, no candle imagery, no key-light photography, no smoke. The mood is achieved entirely through **what is withheld**: the cursor blinks but does not click, the day fills with tides but never names what is moving in the four-AM tidepool, the page ends with a sentence about tomorrow that the visitor cannot click forward to. The mystery is **temporal and observational**, not cinematic. 7. **Single-column at 17% saturation, anchored 38% from the left edge — *off-axis*, not centered.** Most single-column designs in the corpus center their column. `bada.day` borrows hanging-scroll convention and places the column where Korean and Japanese calligraphic tradition places text: **deliberately to one side**, leaving the larger empty space to weight and silence the page. The two-thirds empty right margin is not "whitespace" — it is **the field of view the tidekeeper is looking at while writing.** **Chosen seed (from assignment):** `aesthetic: wabi-sabi · layout: single-column · typography: tech-mono · palette: earth-tones · patterns: typewriter-effect · imagery: icon-heavy · motifs: floral-botanical · tone: mysterious-moody` **Avoided patterns from frequency analysis:** `parallax` (89%), `stagger` (64%), `scroll-triggered` cascading reveals beyond the typewriter primitive, `gradient` palette (89%), `warm` generic palette (97%), `photography` imagery (92%), `centered` layout in its dead-pixel-center form (92%), `full-bleed` sections (87%), `hand-drawn` aesthetic (84%), `vintage` motif (87%), `editorial` aesthetic (51%), and `professional` tone (33%). None of these appear on the page. The design is built almost entirely from the rarest values in each category.