# Design Language for bada.coffee

## Aesthetics and Tone

bada.coffee is a **light-academia tasting-notebook for a roaster who is also a quiet data scientist** — the open laptop on the second floor of a glass-walled university coffee bar in early summer, where the morning sun is climbing over a far blue ridge of mountains and the laptop screen is showing a working notebook of brew telemetry beside a pressed bay leaf.

"바다" (*bada*) is the Korean word for **sea**, and ".coffee" plants the cup directly inside that sea. The site reads the pairing literally: the coffee is the dark current, the cream is the foam line where the wave breaks, and the steam rising off the cup is the morning haze hanging on a coastal mountain range. A barista who studied applied statistics on the side built this for themselves, then opened it to whoever wanders in. The mood is **playful** — never solemn, never corporate, never precious — but the playfulness is the playfulness of a graduate student who keeps a labelled jar of green beans on the office shelf and has named each one after a constellation.

**Light-academia, specifically.** Not dark-academia's candlelit dread of the unwritten thesis. Light-academia in the Northern-summer sense: open-window libraries, linen book covers gone slightly yellow at the edge, marginalia in pencil, the upper window panes throwing parallelogram patches of buttery light across an oak desk, a brass cup of pencils, a pressed flower as a bookmark. The reference photograph in our heads is **the morning study desk, not the midnight stack** — and crucially, **the morning study desk of someone who does numbers**. Spreadsheets coexist with poetry. A cup of long-pulled drip sits next to a printed scatter plot of extraction yield versus dial-in time, and neither feels out of place.

**Data-viz is foregrounded, not hidden** — this is a data-viz-first coffee site, an exceptionally rare combination, and it works because the data being visualized is genuinely about coffee craft (TDS curves, brew weight over time, seasonal flavor wheels, the *aurora-gradient* applied to a temperature-vs-time plot of an actual cooling pour). The chart is decoration *and* meaning, simultaneously. Charts replace stock photographs of coffee. There is not one photograph of a barista's hands or a latte heart on this site.

**Tone is playful, not flippant.** A footnote might read "(p < 0.04, but vibes are also high)." A toggle is labelled "academic mode / café mode" and changes the units between grams and "good handful." The header counter that runs the live extraction-yield demo overshoots its target on every paint and bounces twice before settling — the chart genuinely arrives by **bounce-enter**, not by a polite ease-out. The data is rigorous. The voice is not.

The result is an aesthetic that has not yet appeared in this 80-design corpus: **light-academia (8% of corpus, mostly applied to bookstores) crossed with data-viz imagery (6% of corpus, almost always applied to fintech or analytics), with a mountain-landscape motif (2% of corpus, almost always applied to outdoor brands), tied together by an aurora-gradient palette (1% of corpus) and a tech-mono type body (8% of corpus) that pretends it is a Jupyter notebook.** None of those individual numbers are zero, but their intersection is — this is, as far as the registry knows, the only one.

## Layout Motifs and Structure

The page is built around a **ma-negative-space** discipline (3% of corpus, drastically underused) — *ma* (間) being the Japanese principle that the empty interval is a structural element with the same weight as the filled one. On a 1440×900 reference frame, **roughly 64% of the visible area is intentionally empty** at first paint, and that emptiness is load-bearing: it is doing the work of letting the eye understand which of the few placed elements is the protagonist of which moment.

**The page is a single-column scroll, 7 chapters tall, ~6300px on desktop.** Each chapter has its own grid logic — there is no master 12-column grid. Each chapter borrows its grid from the data it is showing. The site is, in effect, **a paginated notebook**.

**Chapter 1 — The Cover (0–900px).** A blank parchment field (#F5EFE2) fills the viewport. Top-left, in a fine 11px tech-mono caption, the running header: `bada.coffee — notebook 04 / summer ridge / draft.` Top-right, a 14×14px filled square in the day's brew color. **Center-left**, reserved for a single line of oversized condensed display: `wave / ridge / cup` set in three lines, set with extreme tracking, the third word slightly indented to suggest a breaking edge. **Lower-right quadrant**, occupying perhaps 11% of the viewport, is **a hand-coded SVG mountain-landscape silhouette** drawn in two tones of muted graphite — three overlapping ridge curves, the further ones lighter — and behind those ridges, a single filled aurora-gradient rectangle, the only fully saturated color on the cover. Everything else is white space. This is the *ma*: 89% empty. The empty area carries the morning-window mood.

**Chapter 2 — The Notebook Margin (900–1800px).** Two columns: a narrow left column at 22% width holding running pencil notes and timestamps (set in handwritten Caveat); a wide right column at 78% width holding the running body copy (set in tech-mono JetBrains Mono). The left column is **never aligned to the body baseline grid** — its lines float at the angles a real student would pencil them, and three of them are tilted 1.4° clockwise. This is the only chapter with serious horizontal content density.

**Chapter 3 — The Aurora Plot (1800–2700px).** The chapter is a single full-width data-viz: a temperature curve and a TDS curve, drawn over each other on a 1100×460 SVG canvas, both filled below their lines with the **aurora-gradient** (a non-warm, multi-stop gradient running from `#3F4DA6` through `#4F8FB8` through `#7DD0B0` to a pale `#E8F0E1`). The chart axis labels are `t (s)` and `g/L` — actual technical labels, no euphemisms. Either side of the plot is empty space. The chart enters with **bounce-enter**: the line draws from left, overshoots its rightmost target by 18px, and bounces back twice with decreasing amplitude before settling.

**Chapter 4 — The Bay-Leaf Aside (2700–3600px).** A single small element, vertically centered: a 320px wide pressed-bay-leaf SVG, hand-drawn with veins, set against the ridge silhouette repeating at 8% opacity in the far background. Beside the leaf, set in serif italic (Cormorant Garamond), is a four-line pencil note about how the seasonal bean changes character at altitude. The chapter is 92% empty. *Ma* is the protagonist of this chapter; the leaf is the verb.

**Chapter 5 — The Ridge Wheel (3600–4500px).** A radial flavor wheel — the standard SCAA tasting wheel — but redrawn as **three concentric mountain ridges instead of three concentric rings.** The taxonomy still works (outer ring is specific descriptors, middle is families, inner is broad categories) but the segmentation is irregular like a real ridge profile. Hovering a wedge tilts the whole wheel 3° toward that wedge with a spring response, and the ridge "behind" the wedge brightens to its aurora-gradient hue.

**Chapter 6 — The Brew Log Table (4500–5400px).** A table of the last twelve brews. Set entirely in JetBrains Mono. Columns: `date`, `bean`, `dose g`, `yield g`, `time s`, `TDS`, `note`. The notes column contains real prose: "morning ridge fog, slightly dirty, opened up at minute 4." The `TDS` column has, beside each numeric value, **a tiny inline sparkline 64px wide drawn in the aurora-gradient.** This is the single most data-dense moment in the page; the surrounding white space is correspondingly generous.

**Chapter 7 — The Closing Sky (5400–6300px).** Returns to the cover's emptiness, now inverted: the aurora-gradient rectangle from the cover has expanded to occupy the full upper third of the viewport, the mountain silhouette is now a black wash across the lower third, and between them is a single horizon line of body type — the first line of a half-finished poem — at 32px, centered, with the second half of the poem deliberately replaced by a blinking caret.

**Margins.** Outer margin is **120px on desktop, 28px on mobile.** This is *very* wide for desktop and is doing intentional work — light-academia layouts are remembered for their generous outer margin (the page bleed on a Penguin Modern Classic), and that margin is the first cue the reader gets that this is a literary artifact and not a SaaS landing.

**Visible scroll affordance.** A 2px-wide left-edge progress line that is itself filled with the aurora-gradient, growing from the top as the reader descends. The line is the only persistent UI element across all seven chapters; everything else is allowed to leave when the chapter changes.

## Typography and Palette

**Type stack — Google Fonts only.** Three faces, no display extras:

- **JetBrains Mono** (weights 400, 500, 700) — the **primary body face.** A Google Fonts open-source variable monospace explicitly designed for code. We use it for *all* body copy, all data labels, all axis labels, all table cells, all running navigation, the running header on every chapter, and the closing poem caret. Body size is **15px / 1.62 line height / 0.00em letter-spacing.** This is the tech-mono backbone — coffee science prose set in a developer face — and it is the single largest signal that this is a notebook for someone who works in numbers.
- **Cormorant Garamond** (weights 400, 500 italic, 700) — the **literary serif.** A revival Garamond optimized for screen at large sizes by the team behind Cormorant. Used exclusively for **chapter epigraphs, marginal italics, and the closing-poem horizon line**, never for body and never for UI. Sizes used: 32px italic for the closing horizon, 22px italic for chapter epigraphs, 18px regular for the bay-leaf aside. Tracking +0.02em at body sizes for that pressed-page airiness.
- **Caveat** (variable 400–700) — the **pencil hand.** Used only in Chapter 2's left margin and for two real "marginalia" annotations elsewhere in the page. Set at 16px with deliberate 1–3° rotations and slight pen-pressure-sensitive opacity (the variable axis is animated).

**Type scale (vertical rhythm).**

- 11px JetBrains Mono — running header / chapter labels / data caption.
- 13px JetBrains Mono — chart axis ticks, sparkline annotations.
- 15px JetBrains Mono / 24.3px line height — body copy.
- 18px Cormorant Garamond regular — bay-leaf aside.
- 22px Cormorant Garamond italic — chapter epigraphs.
- 32px Cormorant Garamond italic — horizon line, closing chapter.
- 56px JetBrains Mono 700 (compressed via `font-stretch` if available) — the cover triptych "wave / ridge / cup."
- 92px JetBrains Mono 700 — used **once**, for the running word "summer" on the page-2 introduction.

**Numeric features.** JetBrains Mono is set with `font-variant-numeric: tabular-nums slashed-zero;` everywhere a number can appear, so the brew-log table aligns perfectly digit-for-digit and the temperature curve's annotations don't drift on hover.

**Palette — aurora-gradient, applied with restraint.**

The aurora-gradient is the protagonist palette; the rest of the page is muted neutrals so that gradient does not have to fight for attention.

- `#F5EFE2` — **parchment** (page background). A warm off-white pulled toward yellow, evoking the inside cover of a paperback that has spent two summers near a window. Used as the dominant chapter background.
- `#F1E8D5` — **parchment shadow.** Used for soft section dividers, table row stripes (alternating with #F5EFE2), and the outer 4px frame of the chart canvas in Chapter 3.
- `#2C2A28` — **graphite ink.** Body type and primary line work, including the mountain silhouette's foreground ridge. Pulled slightly warm from neutral black to feel like pencil on aged paper, not laser print.
- `#5C5854` — **soft graphite.** Secondary type, marginal pencil notes, the further mountain ridges in the silhouette. Used for ~28% of typographic content — anywhere "the second voice" is speaking.
- `#9C9588` — **dust.** Used for axis grid lines, table rules, the 8%-opacity ghost ridge behind Chapter 4. The quietest neutral on the page.

**The aurora-gradient itself**, defined as a 4-stop linear gradient at angles 110° (default) or 22° (sparkline only):

- `#3F4DA6` — **predawn indigo** (0%).
- `#4F8FB8` — **fjord blue** (32%).
- `#7DD0B0` — **glacier mint** (64%).
- `#E8F0E1` — **dawn pale** (100%).

The gradient is exclusively non-warm — there is no purple, no pink, no orange anywhere on the page. This is the **summer-dawn aurora**, the band of color a Korean coastal sunrise makes against a peak-black mountain ridge in the half-second before the sun crosses the horizon, not the winter Northern aurora. Using it for a coffee site is the central inversion: **coffee is brown, the aurora is not, and the site spends almost no pixels on coffee-brown anything.** The sole "coffee" color in the page is the day's brew indicator square in the top-right corner, computed from the day's recorded TDS and dose values, and it is deliberately tiny — 14×14px — to underline that the science is the visual, not the cup.

**Where the gradient is applied.** Beneath the temperature curve in Chapter 3 (filled below the line, 36% opacity). On the inline sparklines in the brew log. On the 2px-wide left-edge progress line. On the cover and closing aurora rectangles. On the wedge highlight of the radial flavor wheel during hover. **It is never used for body type, never used as a button background, never used in a CTA.** It is reserved for moments of data and atmosphere.

## Imagery and Motifs

**Imagery anchor: data-viz.** The dominant visual category on this page is *the chart itself*. Every chapter that contains a graphic contains a chart, not a photograph. Specifically:

- Chapter 3 — a full-width temperature/TDS overlay plot.
- Chapter 5 — the ridge-wheel flavor radial.
- Chapter 6 — twelve inline sparklines in the brew log.
- Chapter 1 cover — a small bar-of-the-day chart in the corner where most landings would put a logo.

Charts are drawn in **inline hand-coded SVG**, not generated by D3 or Chart.js. We want fingerprints — the line caps are slightly soft, the ticks vary in length by 1px to suggest a real pencil-and-ruler hand, and the typeset axis labels skip 0 the way a real worksheet does. The aesthetic is *graphical statistics in the Tufte tradition crossed with the hand of someone keeping a real notebook*. Photographs would domesticate this — photographs are what you put on the about-page to prove the cafe is real, and bada.coffee is post-needing-to-prove-anything.

**Motif: mountain-landscape.** The mountain ridge appears in five places at five different scales:

1. The 11% silhouette in the cover's lower-right quadrant.
2. The ghost 8%-opacity ridge behind Chapter 4's bay leaf.
3. The redrawn ridge profile that *is* the radial flavor wheel in Chapter 5.
4. A 30px ridge mark in each table row of Chapter 6, used as a sparkline frame for the row's brew profile.
5. The full-width black wash across the lower third of Chapter 7's closing sky.

The ridge silhouette is **always the same silhouette** — three peaks, asymmetric, the leftmost the highest, the middle the broadest, the rightmost a long descending shoulder — so that the reader unconsciously builds a memory of "the bada.coffee ridge" the way a reader of a book builds a memory of a recurring image. This is a deliberate steal from book design (running visual motifs across chapter heads) applied to web.

**Pressed bay leaf.** A second motif, used exactly once, in Chapter 4, at scale. The leaf is hand-drawn SVG in graphite, with eleven veins and a slightly broken tip — it is a real leaf the designer pressed in a notebook in 2024 and traced by hand. On hover the leaf's veins darken in sequence from base to tip over 1100ms, **bounce-entering** at the tip. There is no second motif object on the page; the leaf is allowed to be the only one of its kind, which is what gives it weight.

**Marginalia, in three places.** Real pencil-style annotations in Caveat:

- Chapter 2 left margin — three slanted notes in dust gray.
- Chapter 5, beside the flavor wheel — the single note "the wheel is also a horizon."
- Chapter 7, beneath the horizon line — the unfinished poem's last word, written by hand and erased, with the eraser smudge faintly visible as a 3px-wide light gray rectangle.

**Decorative tokens, sparingly.** A 14×14px filled square in the top-right of every chapter, holding the day's brew color. A 2px-wide left edge gradient line (already mentioned). A horizontal hairline between chapters (1px in dust). That is the entire decorative inventory. **No icons. No emoji. No arrows. No "scroll" indicators except the gradient line.** A light-academia page does not advertise its own scrollability — books don't either.

**The day's brew square.** Computed from a tiny JS object representing today's recorded brew. Format: `hsl(28, calc(s%), calc(l%))` where saturation and lightness derive from TDS and brew time. Today is `hsl(28, 22%, 38%)` — a mid-warm taupe. This is the single warm-hex value on the page and it lives in a 14×14 box.

## Prompts for Implementation

Build bada.coffee as **one HTML file, one CSS file, one ES module** — no framework, no router, no service worker, no build step. Total uncompressed bundle target: under 70KB including all SVG. The site must be readable as a static document with JavaScript disabled — the chapters render, the charts render (because they are inline SVG), only the bounce-enter animations and the radial wheel's tilt require JS.

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

- **0.00s — first paint.** The parchment background renders. The cover's tech-mono running header is visible. Nothing else is. (CSS only; no JS required.)
- **0.20s — cover triptych words slide up.** "wave," "ridge," "cup" appear in stagger, each translating from `translateY(8px) opacity(0)` to rest. JetBrains Mono compressed at 56px. 110ms gap between words. The third word lands deliberately late, after a small 70ms pause — *ma* in the timing.
- **0.62s — mountain silhouette fades up** at 28% opacity, then up to 100% over 540ms. The aurora-gradient rectangle behind it draws from the bottom edge upward, like a slow-rising sun, in 880ms with a custom `cubic-bezier(.18,.74,.39,1.06)` to give the bottom-up motion a tiny overshoot.
- **0.95s — top-right brew square drops in** with a single soft bounce — the **bounce-enter** signature. It overshoots by 4px downward, returns 2px up, settles at 0. 360ms total.
- **1.20s — page is at rest.** No further animation triggers until the user begins to scroll.

**Scroll narrative.**

The page must use **`IntersectionObserver` with rootMargin tuned to fire 12% before the chapter enters the viewport**, so that bounce-entries feel anticipated, not delayed. Each chapter's animations fire exactly once and never replay. The only element that updates continuously while the user scrolls is the 2px aurora-gradient progress line on the left edge.

**Chapter-3 chart entrance.** The temperature curve and TDS curve enter sequentially, not simultaneously. Temperature first, drawing left-to-right over 720ms, overshooting the rightmost x-coordinate by 18px and bouncing back twice (12px overshoot in opposite direction, then 4px). TDS second, drawing left-to-right over 600ms, with no overshoot — TDS is the secondary voice and arrives quietly. Both lines are drawn with `pathLength="1"` and a `stroke-dasharray` animation, *not* with mask reveals — the path-draw is honest.

**Chapter-5 wheel tilt.** On hover over a wedge, the entire wheel rotates around a point 18% past the wedge centroid (so it tips toward the cursor) at `transform: rotate(3deg)` with a spring response of 280ms in, 380ms out. The hovered wedge's aurora-gradient brightens from 36% to 72% fill opacity. Multiple wedges at once is impossible — the wheel can only "lean" toward one wedge at a time, by design.

**Chapter-6 sparkline construction.** Each of the twelve table rows has its own inline 64×16 SVG sparkline, drawn from real-looking but synthetic brew curves. The sparklines do **not** animate on row entry — they appear instantly with the row text — but on row hover, the sparkline's stroke increases from 1.4px to 2px and the fill (aurora-gradient, 18% opacity below the line) brightens to 40%. Hover state has 120ms ease-out.

**Type animation in the closing chapter.** The horizon line of poetry sets letter-by-letter using a stagger over 1.4 seconds, total. The blinking caret at the end of the half-finished line animates indefinitely at 1.06s on / 0.6s off (deliberately slower than a terminal cursor — this is a poet's caret).

**Cursor.** Default OS cursor — no custom cursors, no cursor-follow halo, no magnetic targets. **Light-academia is reserved.** Hovering the wheel changes cursor to `pointer`; hovering the bay leaf changes cursor to `crosshair` (the only easter egg). That is it.

**Reduced motion.** With `prefers-reduced-motion: reduce`, all bounce-enters become instant fades over 240ms. The 2px progress line still updates on scroll. The radial wheel does not tilt on hover; the wedge brightens only.

**Page chrome.** No header bar, no footer, no nav menu. The 11px running header in the top-left is the entire chrome. There is no "menu," no hamburger, no logo wordmark — the cover word "wave / ridge / cup" replaces all of those. There is no contact form, no subscribe field, no pricing block, no testimonial, no team grid, no stat-grid, no CTA button. The page is for reading, not for conversion. If a reader wants to write to bada.coffee they can find the email at the bottom of Chapter 7's right margin, set in 11px tech-mono dust gray, no `mailto:`. They have to copy it. Friction is romantic.

**Storytelling priority.** This is a notebook page. Every implementation decision should be measured against: *would this disturb the reading?* The bounce-enter on Chapter 3 is justified because charts genuinely arrive in a notebook — you draw the line, then you correct it, and the correction is the bounce. The flavor wheel tilt is justified because flavor wheels in real notebooks are dog-eared and tilt in the reader's hand. Marginalia are justified because they are how thinking is recorded. **The opening cover's empty 89% is the most important pixel decision on the page** — a CTA there would destroy the work the rest of the page does.

**Bias toward full-screen narrative experiences.** Every chapter, on desktop, uses ≥720px of vertical space and is constructed so that one chapter is mostly visible at a time. On a 900px-tall viewport this means each chapter's protagonist element is in the optical center when the chapter is "the current page." We are not optimizing for fold or for above-the-fold conversion; we are optimizing for the second-paragraph experience, which is where light-academia readers actually live.

**Avoid.** No gradient meshes, no glassmorphism, no card grid, no bento layout, no parallax (we are explicitly not in the parallax 92% — the only parallax-like motion is the 2px gradient progress line, and even that is honest scroll-tracking), no cursor-follow halo, no stat-grid (the brew log is a *table*, not a stat grid; it has a header row), no testimonials, no pricing, no team avatars, no "as featured in" logo strip, no newsletter form, no cookie banner, no chatbot bubble, no vintage-photography filter, no marble texture, no glass blur. The page must be allowed to be a page.

## Uniqueness Notes

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

1. **Aurora-gradient unprivileged of its native habitat.** The aurora-gradient palette appears in 1% of the corpus, almost universally tied to Y2K-futurism, holographic, or sci-fi-hud designs. bada.coffee is the registry's first deployment of aurora-gradient inside a **light-academia** scaffold — the gradient stops are deliberately re-tuned away from the standard violet→pink→cyan toward a Korean coastal-dawn `#3F4DA6 → #4F8FB8 → #7DD0B0 → #E8F0E1`, which preserves the gradient family while removing every tonal cue that would read as Y2K. This is the registry's only literary, ink-and-pencil application of the gradient.

2. **Light-academia × tech-mono is itself rare.** Light-academia (8% of corpus) almost always gets paired with elegant-serif or baskerville-refined typography. tech-mono (8% of corpus) almost always gets paired with cyberpunk, terminal, or sci-fi-hud aesthetics. The intersection is essentially empty. bada.coffee uses tech-mono (specifically JetBrains Mono) as the *body* of a literary, light-academia notebook — the first time, in this registry, that a coding monospace is doing the work of a humanist book face. The justification is diegetic: the protagonist is a barista who codes.

3. **Data-viz as the single imagery system, on a coffee domain.** Data-viz appears in 6% of the corpus and is, in every other instance, applied to fintech, analytics, or developer-tools sites. There is no other registered design that uses **data-viz as the entire imagery system on a coffee, food, or beverage domain.** Photographs are the dominant imagery in 97% of the corpus; bada.coffee uses zero photographs.

4. **Mountain-landscape motif at five scales, repeated rather than scattered.** The mountain-landscape motif appears in 2% of the corpus, almost always at one scale (a horizon banner). bada.coffee uses the *same* three-peak silhouette at five different scales across the page (cover, ghost, flavor wheel, sparkline frame, closing wash). Repetition-as-typographic-leitmotif is borrowed from book design and applied to web — distinct from any other mountain treatment in the registry.

5. **ma-negative-space at 64% on a "commerce-adjacent" domain.** ma-negative-space appears in 3% of the corpus. .coffee is a commerce-coded TLD. The combination of "this is a coffee site" and "the cover is 89% empty" deliberately violates the conversion-optimization expectation of a coffee landing page, signalling to the reader that this site is a notebook, not a store.

6. **bounce-enter as the page's animation signature, applied to data not to UI.** bounce-enter appears in 3% of the corpus, almost universally applied to UI elements (buttons, modals). bada.coffee uses bounce-enter as the **chart-arrival signature** — the temperature line literally overshoots and bounces, like a real pencil-drawn line being corrected — which makes the animation diegetic rather than decorative.

7. **No CTAs, no pricing, no stat-grid, no parallax.** The brief explicitly lists these as patterns to avoid; bada.coffee respects all four absences. The 92% parallax-corpus is *not joined* by this site. The site has zero conversion elements. Email is presented as raw text, uncopyable as a `mailto:`.

8. **Playfulness without color riot.** The "playful" tone (21% of corpus) is conventionally signalled by candy-bright or dopamine-neon palettes (5% combined of corpus). bada.coffee achieves playfulness through *voice* (the academic-mode/café-mode toggle, the "p < 0.04 but vibes are also high" footnote, the deliberately overshoot bounce-enter on the temperature line) while keeping the palette muted-neutral plus a single restrained gradient. Playfulness as content, not as color, is the registry's second instance.

**Documented chosen seed:** *aesthetic: light-academia, layout: ma-negative-space, typography: tech-mono, palette: aurora-gradient, patterns: bounce-enter, imagery: data-viz, motifs: mountain-landscape, tone: playful.*

**Avoided patterns from the frequency analysis (overused, and intentionally not used here):** parallax (92%), stagger as decoration (70%) — used here only at chapter cover for the triptych words and at closing horizon line, never elsewhere; cursor-follow (67%); magnetic (53%); card-grid (67%) — replaced by per-chapter custom grids; full-bleed (87%) — every chapter has 120px outer margin; centered (81%) — three chapters use deliberately off-center compositions; warm palette (93%) — the page is non-warm by construction; gradient (95%) generally — used here in *one* gradient family with strict deployment rules; photography (97%) — zero photographs; hand-drawn aesthetic (93%) — explicitly avoided.

**Underused patterns this design joins:** ma-negative-space (3% → +1), aurora-gradient (1% → +1), bounce-enter (3% → +1), data-viz (6% → +1), mountain-landscape (2% → +1), tech-mono (8% → +1), light-academia (8% → +1). This single design moves seven separate underused patterns one step further into the registry — by intersection, the rarest combination this corpus has yet seen.
<!-- DESIGN STAMP
  timestamp: 2026-05-09T11:03:53
  seed: seed:
  aesthetic: bada.coffee is a **light-academia tasting-notebook for a roaster who is also a q...
  content_hash: e95fa0d59d4b
-->
