# Design Language for bada.news

## Aesthetics and Tone

bada.news is **a victorian-ornate broadsheet for the open ocean** — an imagined evening edition, set in a clamp-bound study above a port at the southern coast of Korea, where a 19th-century compositor has been quietly retrained as a software engineer and now lays out tonight's sea-news beside a sputtering oil lamp. "바다" (*bada*) is **sea** in Korean, and every page is a conscious cross-pollination: the tactile authority of victorian engraved newspapers (Harper's Weekly, The Illustrated London News, The Graphic) folded together with the patient, step-by-step voice of a tech tutorial — so that a reader does not just *see* the news, but is walked through *how* the news was assembled, byte by byte and tide by tide.

The mood is **scholarly and avuncular**, never breathless. There is no chyron, no breaking-news red, no auto-refresh count — the page is set tonight and meant to be reread tomorrow. The **victorian-ornate** vocabulary is enforced through engraved dropcaps, foliate corner ornaments, hairline rules with diamond crossings, fleurons between sentences, and the small-caps byline tradition; but it is **deliberately stripped of victorian's usual reactionary nostalgia**. The ornament here is not decorative cosplay; it is a working scaffolding for a complex layout, the way a victorian printer used borders and rules because letterpress demanded them, not because they were "vintage." Tutorial voice grounds it: callouts read "Step 1 — fetch the tide table"; sidebars read "Why this byline appears here"; figures have captions of the form "fig. 14a — east-channel current, 21:00 KST". The result is **a tech-tutorial dressed in Victorian printer's clothes, reporting on the sea**.

A small thread of **imagined Korean coastal port history** runs underneath: ship-bell glyphs as section markers, a recurring lighthouse-coordinate motif (34° 45′ N, 128° 10′ E) printed in the running header, and the masthead's sub-line set in a faint Hangul echo of the English title. The reader is meant to feel that this newspaper was typeset in 1894 *and also* compiled at 22:14 KST tonight, and neither feeling cancels the other.

## Layout Motifs and Structure

The page is a **classical magazine-spread**, not a feed and not a card-grid. The reference frame is the proportions of a victorian quarto sheet: **1280 × 1760 effective canvas at 1.0 zoom**, scaling fluidly to viewport but always preserving the **golden tall-page ratio (≈ 1 : 1.375)**. On wide viewports (≥ 1280 px) the canvas pins centred with **wide cream margins** that read as the un-printed paper edge, never as empty UI space. On narrow viewports (< 720 px) the spread reflows into a **single-column codex** that preserves the masthead, the dropcap of each article, and the engraved figure plates, but stacks them.

**Six fixed regions per spread, in reading order:**

1. **Masthead band (rows 1–2 of 16).** "**bada.news**" set in tall victorian display roman across the full width, double-rule above (1px + 3px) and triple-rule below (1px + 0.5px + 1px) with a **fleuron-diamond crossing** at each rule end. The **dateline** sits centred between the rules in small-caps: *Wednesday Evening · 9 May 2026 · Vol. I · No. 87 · Tide 1.42 m, falling*. Two **lighthouse-coordinate cartouches** flank the title — left cartouche is the printing-house location (34° 45′ N, 128° 10′ E), right cartouche is the byline observatory.

2. **Lede column (rows 3–9, columns 1–4 of 12).** A single 4-col-wide article with a **74-pt engraved dropcap** that occupies 4 lines of body text, a small-caps **deck** ("HOW THE SOUTH-SEA CABLE LEARNED TO CARRY TIDE-DATA, AND WHY TONIGHT'S READING WAS LATE"), and **inline marginalia** in a tiny side-rail to the column's right (the rail is itself 1 column wide and runs the full lede height, holding tutorial-voice asides and a small running "step counter" — *Step 1, Step 2, Step 3* — that mirrors the article's structure).

3. **Engraved figure plate (rows 3–7, columns 8–12).** A single full-bleed-within-frame **SVG engraving plate** — a stipple-and-hatch coastal scene rendered entirely as cross-hatched paths, with a **caption frame** beneath it ruled with hairline + double-hairline + hairline ("fig. 14a — east-channel current, 21:00 KST · drawn in browser, no raster").

4. **Tutorial sidebar (rows 8–12, columns 8–12).** A boxed insert ruled with a 1.5px outer + 0.5px inner double border, headed "**HOW THIS PAGE WAS ASSEMBLED**" in small-caps, containing a numbered tech-tutorial in Frutiger-clean: 1. fetch the tide table · 2. parse the harbour-master cable · 3. typeset the lede · 4. engrave the figure · 5. ring the bell. Each step is a clickable disclosure; opening one **morphs** the tutorial box larger, gently displacing surrounding ornament (no layout-shift jitter — the morph is the whole point).

5. **Second-feature spread (rows 10–14, columns 1–7).** A 7-col article with a smaller dropcap (52pt), set in **two newspaper columns of 3 cols each** with a 1-col rule-and-fleuron divider between them, and a **pull-quote** in the centre that crosses the divider rule.

6. **Footer rules and colophon (rows 15–16).** Triple-rule, then a centred colophon: "Set in Cormorant Garamond and Mulish, on a 12-column victorian spread · Printed in Hangul-shadow type · Composed entirely in browser, no images, no rasters · East-channel coordinates 34° 45′ N, 128° 10′ E."

**Spatial details that matter:** every column gutter is **18px**, every rule has a **1.5px primary stroke with a 0.5px shadow trail 1px below it** (this trick gives every rule a pressed-into-paper feeling without using any image filter); **fleurons live at every rule junction** as 8x8px filled SVG paths; **drop caps are SVG glyphs**, not text — they are individually engraved with cross-hatch interiors so they read as woodblock initials, never as a CSS `::first-letter`.

## Typography and Palette

**Type stack — Google Fonts only, three faces, one Hangul echo:**

- **Cormorant Garamond** (variable axes for weight 300–700, italic) — primary body roman and the primary display roman of the masthead. Cormorant is a Google-Fonts revival of Garamond with an unusually tall x-height-to-cap-height ratio, narrow apertures, and pronounced ink-trap details that read on screen as if they were just lifted from a victorian-era plate. Body is set at **15.5px / 1.55 leading / 0.005em letter-spacing**. The masthead "bada.news" is set at **104px Cormorant Garamond Italic 600** with a **+0.012em** loosening so the swash 'b' breathes.

- **Mulish** (variable, weights 300–700) — the **frutiger-clean** voice. Mulish is the closest Google-Fonts neo-humanist to Adrian Frutiger's open-aperture, square-shouldered grotesques. It carries **all tutorial copy, all marginalia, all figure captions, all sidebar prose, and all timestamps**. Body 13.5px / 1.5 leading. Small-caps captions 11px / 0.08em tracking / weight 500. The deliberate collision is the design's whole thesis: **Cormorant for the news, Mulish for the how-to**, with a single hairline rule between them every time they touch.

- **IBM Plex Mono** (weights 400, 500) — tertiary face for **byline coordinates, version stamps, and the running step-counter**. Mono is here because tech-tutorial demands it; it is never used in display sizes, only at 11–12px and only inside the tutorial sidebar and figure metadata blocks. *Cap on usage:* no more than 6% of total typed surface area.

- **Nanum Myeongjo** (weight 400, 700) — the **Hangul shadow companion**. Used exclusively for the masthead's sub-line ("**바다신문**" set at 18% opacity, directly below the English title) and for one subtle date-mark in the colophon. Nanum Myeongjo is the Google-fonts traditional Korean serif most temperamentally aligned with Cormorant Garamond — both are fine-stroked, classical, slightly old-fashioned.

**Palette — eight notated colours, named after victorian printing chemistry:**

- `#F4ECDB` — **Foolscap** — the page paper. Warm, slightly oxidised cream with a 6% green undertone (so it does not read as cheap manila). Background of the canvas.
- `#EFE3CB` — **Hand-Laid** — secondary paper for sidebar boxes and figure-plate frames. Half a step warmer and grainier than Foolscap.
- `#1B1410` — **Iron-Gall** — primary ink, a deep brown-black with a perceptible warmth (unlike `#000`, which feels digital). All body text, all rules.
- `#3A2A1E` — **Bistre** — secondary ink for marginalia, captions, and the Mulish tutorial copy. Sets it visibly apart from the lede's Iron-Gall body.
- `#7A1F12` — **Vermilion-Cinnabar** — single accent ink, used *sparingly*: dropcap inner highlights, the running step-counter numerals, the section ornaments at row breaks, and the masthead's coordinate cartouches. Never more than 2% of the visible page.
- `#2F4A3E` — **Verdigris** — secondary accent, used for the engraving plate's stipple shadows and the **morph**-state hover background of the tutorial sidebar disclosures.
- `#8C7B5E` — **Tarnished-Brass** — for the engraved-rule shadows (the 0.5px trail that lives 1px below every primary rule) and for the dateline's small-caps tracking.
- `#5E4632` — **Walnut-Stain** — used only on hover-states and on the lede's marginalia rule, to keep the marginalia visually subordinate to the body without losing legibility.

**Palette ratios** (target, ±2%): Foolscap 56%, Hand-Laid 14%, Iron-Gall 17%, Bistre 6%, Tarnished-Brass 3%, Verdigris 2%, Vermilion-Cinnabar 1.5%, Walnut-Stain 0.5%.

## Imagery and Motifs

**No raster images. No photographs. No icon fonts. No emoji.** Every visual element is **drawn at runtime** from SVG primitives and a small library of cross-hatch paths, so that the entire page reads as one continuous typesetting operation. Two specific imagery techniques carry the whole load:

1. **Noise-texture as paper grain.** A single SVG `feTurbulence` filter (baseFrequency 0.85, numOctaves 2, seed 4) drives a tiled grain layer at 7% opacity, multiplied over Foolscap. This grain is **per-region, not per-page** — the tutorial sidebar and the figure plate each get a slightly *different* turbulence seed, so when you hover-morph the sidebar, the grain visibly resettles inside it (a tiny but defining detail). The grain is the only thing on the page that uses any kind of filter; rules, dropcaps, ornaments, and figures are all clean SVG paths.

2. **Engraved cross-hatch, drawn in the browser.** The figure plate (`fig. 14a`) is built from **180–240 hairline SVG paths**, each 0.5–0.8px stroked, layered at three orientations (-30°, 0°, 45°) with stipple dots filling shadow regions. The drawing depicts the east-channel current at 21:00 KST: a low coastal headland on the right, a navigational buoy in the foreground, a steamship's mast just at the horizon, and a hatched-out tide-line crossing the centre. The plate is **never static**: a slow `path-draw` reveal renders it stroke-by-stroke over 2.4 seconds on first viewport entry, so the reader watches the engraving emerge as if from a printer's press. After draw-in, the plate stays still — there are **no looped animations** on the figure plate.

**Motif library — book-scholarly, used as structural ornament, not decoration:**

- **Fleuron-diamonds** at every rule junction: 8×8px filled lozenges, occasionally a 4-petal rosette. Set in Iron-Gall.
- **Foliate corner ornaments** at the four corners of the tutorial sidebar and the figure caption frame — small acanthus-leaf SVGs, hand-pathed (not from any open library), each unique per corner so the symmetry is **broken on purpose** by 1–2 strokes (a victorian printer's "approved imperfection").
- **Ship-bell glyphs (𓏤-like)** as section markers between the lede and the second feature: a 14×18px engraved ship's bell, two stipple-shaded faces drawn in cross-hatch.
- **Dropcap engravings** — the lede's "T" and the second feature's "I" are bespoke 74pt and 52pt SVG glyphs respectively, with **interior cross-hatch shading** (45° hairlines spaced 1.4px) and a Vermilion-Cinnabar inner highlight along the upper-left stem. They are NOT typeset; they are drawn paths.
- **Lighthouse coordinates** as a recurring micro-motif: every region that contains data has a 9px IBM Plex Mono coordinate label in the lower-right outside its frame (e.g. "34°45′N · 128°10′E · z=2"). The 'z' is a tutorial-voice joke about z-index — included only on hover, in small-caps Mulish.
- **Page-corner curl** at the bottom-right of the canvas: a 60×60px SVG curl with a Tarnished-Brass shadow, drawn as if the foolscap is lifting from the desk. The curl reacts (slow morph) to scroll velocity — at high scroll speed it lifts ~3px more, then settles via a 480ms ease-out.

## Prompts for Implementation

Build bada.news as **one HTML file, one CSS file, one ES module**. No framework, no router, no service worker, no fetch, no build step. **Total uncompressed bundle target: under 90KB.** No raster images. No icon fonts. No web-component libraries. No Lottie. SVG and CSS only.

**Page event timeline (from first paint to steady state):**

- **0.00 s — first paint.** Foolscap (`#F4ECDB`) fills the canvas. The noise-texture grain layer renders at 7% opacity over the entire foolscap. *Nothing else is visible.*
- **0.18 s — masthead rule strikes in.** The triple rule above and double rule below the masthead **draw-in horizontally** from the centre outward, in 320ms (cubic-bezier 0.2, 0.6, 0.0, 1.0). The fleuron-diamonds at the rule ends pop in 60ms after the rules complete.
- **0.50 s — masthead text settles.** "**bada.news**" fades up from 0 → 1 over 280ms, with a **−1.5px vertical** initial offset that springs to 0. The Hangul shadow line ("바다신문") fades to 18% opacity 80ms after the English title.
- **0.85 s — dateline cartouches**. The two lighthouse-coordinate cartouches flanking the title slide in from their respective edges (left from `-12px`, right from `+12px`) with a soft `path-draw` of their cartouche borders.
- **1.10 s — lede block.** The 74pt engraved dropcap **path-draws stroke-by-stroke** over 920ms (the 'T' has 18 strokes, drawn in compositor's order: vertical stem first, then crossbar, then interior cross-hatch shading, then Vermilion-Cinnabar highlight). The body text fades in column-first, paragraph-by-paragraph, staggered 60ms, beginning when the dropcap is 60% drawn.
- **2.10 s — figure plate begins drawing.** The 180+ hairlines of `fig. 14a` draw in over **2.4 s**, ordered by depth: horizon line first, then steamship mast, then headland silhouette, then tide-line, then buoy, then stipple shadows. The caption frame's hairlines draw in last, in the final 200ms.
- **4.50 s — tutorial sidebar settles.** Box rules path-draw, the small-caps heading "HOW THIS PAGE WAS ASSEMBLED" types in (one character per 24ms — a tasteful, slow type-on, **not** typewriter-effect with cursor), and the five steps appear stagger-fade 100ms apart.
- **5.30 s — second feature, footer, colophon.** All remaining elements settle in a single 600ms wave.
- **5.90 s — page-corner curl.** The bottom-right curl draws in last, with a soft 280ms ease-out, signalling that the spread is now "set."

After 5.9 s the page is **completely still**. There are no looped animations except for two reactive ones: (a) the page-corner curl reacts to scroll-velocity, (b) the tutorial sidebar's `morph` reacts to hover/disclosure.

**The morph pattern (signature interaction):** Each of the five tutorial steps is a `<details>` disclosure. When the reader opens one, the entire sidebar **morphs** — the box's `width`, `height`, `padding`, and **the noise-texture's `feTurbulence` baseFrequency** transition together over 480ms (cubic-bezier 0.4, 0.0, 0.2, 1.0). The grain visibly *resettles* during the morph (different seed, animated), so the reader perceives the paper as physical. Surrounding ornament (the corner foliates, the figure-plate caption frame) **gently displaces** by 6–10px to accommodate the new sidebar size, using FLIP technique to avoid layout-shift jitter. Closing the disclosure reverses the morph at the same duration. **This is the only morph interaction on the page.**

**Storytelling structure (five-act, no CTA, no sales surface):**

- **Act I — Masthead and dateline.** Establish that this is a newspaper, not a website.
- **Act II — Lede.** "How the south-sea cable learned to carry tide-data, and why tonight's reading was late." A 600-word article in tutorial voice, with marginalia explaining the engineering. The reader learns *why* a particular tide was late, in the same breath as *what* the tide is.
- **Act III — Figure plate (`fig. 14a`).** The reader watches the engraving draw in, then reads the caption.
- **Act IV — Tutorial sidebar.** Five steps explaining how the page itself was assembled. *This is the page being honest about itself.* The morph interaction lives here.
- **Act V — Second feature + colophon.** A 350-word companion article ("The bell that still rings at 22:00") and a colophon naming the type, the coordinates, and the construction method.

**Forbidden surfaces:** no CTA bar, no sign-up, no email capture, no pricing, no stat-grid, no testimonials, no logo wall, no product-feature grid, no "Get Started" button, no chatbot, no cookie banner, no social-share row, no "trusted by," no FAQ, no comparison table, no countdown. The only interactive surfaces are: (a) the five tutorial disclosures, (b) optional hover-state coordinate-label reveals on each region. There are **no links** to anywhere — bada.news is an evening edition; tomorrow there will be another one.

**Implementation specifics:**

- **All rules** are 1.5px Iron-Gall with a 0.5px Tarnished-Brass shadow 1px below, achieved via a single CSS custom property `--rule: 1.5px solid #1B1410;` plus a `::after` pseudo with the shadow.
- **Fleuron-diamonds** are inline `<svg>` glyphs from a 5-glyph library (diamond, 4-petal rosette, lozenge, trefoil, bell), each at 8×8 viewBox, inserted at every rule junction by the same templating function.
- **Dropcaps** are bespoke `<svg>` files inlined in HTML, not images. Each has its own `<animate>` element on stroke `pathLength` for the path-draw reveal.
- **Cross-hatch engravings** use a single reusable function `hatch(x1,y1,x2,y2, density, angle)` that emits SVG `<path>` elements; the figure plate is constructed from ~28 calls to this function.
- **Noise-texture filters** are defined once in `<defs>` and referenced by `filter="url(#paper-grain-A)"`; per-region resettling is done by animating `<feTurbulence>`'s `baseFrequency` and `seed`.
- **Hangul shadow** ("바다신문") is set in Nanum Myeongjo at 18% opacity, never animated, present from 0.93 s onward.
- **Step-counter coordinates** in the marginalia mirror the article's headings — when the reader scrolls past the third paragraph, the marginalia counter updates from "Step 2" to "Step 3" via a 220ms cross-fade. This is the only scroll-triggered visual state on the page outside the page-corner curl.

**Tone of all written copy:** every sentence in the lede, the figure caption, the tutorial sidebar, and the colophon should read as if a senior victorian printer is patiently explaining a contemporary engineering problem to an apprentice who has never seen a tide chart before. Sentences are long but not florid. The technical content is real and specific. There are no exclamation marks anywhere on the page.

## Uniqueness Notes

This design's distinct departures from the 80 designs already in the registry, and from the seed's defaults:

1. **Victorian-ornate at 3% rendered as a working layout scaffold, not a costume.** The few existing victorian-ornate sites in the corpus tend to play the aesthetic for nostalgia, lace, or wedding-stationery whimsy. bada.news takes the *engineering* of victorian printing — the rules, fleurons, marginalia, dropcap initials — and uses them as the *structural CSS* of the page. Every ornament does load-bearing typesetting work; nothing is a decorative sticker.

2. **Tech-tutorial tone (2% of the corpus) as the controlling voice over a victorian visual register.** This collision has no precedent in the registry. Tech-tutorial sites are usually dark-mode, mono, terminal-flavoured. Setting tech-tutorial copy inside a Cormorant-Garamond broadsheet and flanking it with cross-hatched engravings inverts the cliché completely: *the printer teaches the engineer, the engineer teaches the printer.*

3. **Magazine-spread layout (6%) executed as a true quarto with golden tall-page proportions, not a hero-and-cards adaptation.** Most magazine-spread treatments in the corpus are really hero-with-pull-quote variants on card-grid. bada.news commits to a 12 × 16 victorian quarto grid, with marginalia rails, dropcap stacks, fleuron rule junctions, and a colophon — closer to a real broadsheet page than to any web layout pattern.

4. **Frutiger-clean (3%) as the *tutorial* voice nested inside a Cormorant body, never as the page voice.** The frutiger-clean trend is usually deployed as a complete brand voice; here, Mulish (the Frutiger stand-in) is contained inside marginalia, sidebar, and figure captions only — a measured 30–35% of typed surface, never the masthead, never the lede body. This gives Frutiger a curatorial supporting role rather than the lead.

5. **Morph (11%) used as a single, signature, paper-physical interaction — not as a generic page-transition trick.** Morph drives one disclosure in the tutorial sidebar, with **synchronised noise-texture resettlement** so the reader perceives the morph as paper actually flexing, not as a CSS shape-change. Every other morph implementation in the corpus is an SVG blob or hero-image flow. This is morph as **typesetting state**, which is unprecedented here.

6. **Noise-texture (5%) per-region with reseeding, not page-wide and static.** Most noise-texture treatments in the corpus apply one filter once across the page background. bada.news gives every region (foolscap, sidebar, figure plate, masthead band) its own turbulence seed, and **animates the seed during the morph interaction**, which makes the grain feel like real paper grain rather than a generic CSS texture pass.

7. **Book-scholarly motifs (1%) — the rarest motif family in the corpus — committed to as a consistent ornament library, not a single accent.** Fleuron-diamonds at every rule junction, foliate corner ornaments at every framed region, ship-bell glyphs as section markers, lighthouse-coordinate cartouches at the masthead. The motif system is a complete victorian printer's drawer, used everywhere a junction or boundary occurs.

8. **Warm palette (93%) deflected into specifically victorian printing chemistry.** Where the corpus's warm palette typically reaches for terracotta-cream-honey, bada.news stops at *iron-gall ink, foolscap paper, vermilion-cinnabar accent, verdigris shadow, walnut-stain, tarnished-brass*. Same warm-family hue space, but every value is justified by a 19th-century pigment, which keeps the warmth from collapsing into the corpus's standard "warm-inviting blog" neutral.

9. **No raster images of any kind.** 97% of the corpus uses photography. bada.news uses zero photographs, zero icons, zero raster files; the entire visual experience is composed at runtime from inline SVG paths and a single noise filter. Even the engraved figure plate is path-drawn live, not embedded as a graphic.

10. **No CTA-heavy surface, no pricing, no stat grid** — the design specifically avoids the layout patterns the orchestrator instructions name as anti-goals, and substitutes a five-act broadsheet narrative whose *only* interactive surface is the tutorial sidebar morph.

**Chosen seed:** *aesthetic: victorian-ornate, layout: magazine-spread, typography: frutiger-clean, palette: warm, patterns: morph, imagery: noise-texture, motifs: book-scholarly, tone: tech-tutorial.*

**Frequency-avoided patterns:** hand-drawn (93%), glassmorphism (70%), card-grid (67%), full-bleed (87%), gradient (95%), parallax (92%), stagger (70%), spring (70%), cursor-follow (67%), magnetic (53%), photography (97%), mono primary (96%), pastoral-romantic (20%), warm-inviting (18%). bada.news is built so that none of these high-frequency patterns appears as the dominant register; where any of them brushes the page (e.g. stagger appears in the body-paragraph fade-in, mono appears at micro-sizes only), they are subordinate to victorian-ornate magazine-spread structure.
<!-- DESIGN STAMP
  timestamp: 2026-05-09T11:03:45
  seed: during the morph interaction
  aesthetic: bada.news is **a victorian-ornate broadsheet for the open ocean** — an imagined ...
  content_hash: 6b71fecfad9a
-->