# Design Language for bada.studio
## Aesthetics and Tone
bada.studio is a **neomorphic stone-tutorial atlas** — a single-page documentation surface that pretends to be a physical, sand-colored slab of compacted seafloor sediment, into which every illustration, control, and figure has been *pressed inward* (concave) or *raised outward* (convex) by a millimeter or two. The site looks like a museum interpretive panel that a hiking trail's tide-pool ranger station might bolt to a cliff face: matte, dust-soft, structurally heavy, and authored entirely as embossed and debossed forms with no hard borders, no rectangles, no drop shadows in the conventional sense — only paired soft inner-light and inner-shadow gradients that imply the slab's depth.
The Korean root *bada* (바다) means **sea**, and the second-level domain `.studio` is interpreted not as a creative agency or recording booth, but as the literal *workshop* of someone who studies the sea — a marine geologist's casting room, a tidepool naturalist's lab, a coast-cartographer's bench. Every neomorphic element on the page therefore behaves as if it were *molded* rather than *drawn*: when you hover a navigation tab it doesn't slide, it *presses inward* like a physical button being depressed into wet plaster; when you click a section header, the heading itself stays planar but a hairline ink-stroke draws itself underneath in slow real time as if a fountain pen is annotating the slab.
The tone is **tech-tutorial** (only 2% of the corpus) — patient, sequential, numbered, scaffolded. The site is structured as a 12-step illustrated guide titled *"Reading the Sea: A Field Tutorial in Coastal Forms"* — each step is one honeycomb cell, each cell explains one natural sea-shaped phenomenon (the swash zone, the rip current, the tombolo, the brackish wedge, the kelp holdfast, the foraminiferal ooze, the storm berm, the spit, the lagoon, the upwelling cell, the abyssal plume, the bathymetric chart). The voice is that of a soft-spoken naturalist-instructor — second-person, present-tense, no marketing language, no calls to action, no buttons begging to be clicked. Tutorials end. Sales pages don't. bada.studio ends.
The mood is **studious, tactile, hushed, slow** — the design must feel like reading a textbook printed on rag-pulp paper, in a room where a window is cracked open to the surf. There is no dopamine. There is no urgency. There is exactly one ambient motion (a gentle breathing of the lighting source moving in a 24-second loop) and one explicit motion per step (the underline-draw annotation when a heading enters the viewport). Everything else is still.
The visual lineage is **Dieter Rams's Braun controls + a 1972 marine biology field manual + the soft-shadow ceramic tiles in a Noguchi sunken courtyard** — all reduced to a single warm grey-beige material. The site looks like it was molded from one continuous block of stone, then carefully labeled with a quill.
## Layout Motifs and Structure
The dominant structural metaphor is a **hexagonal honeycomb** (only 1% of the corpus) — twelve hexagonal cells arranged in a flat-top hex grid that tessellates without seams. This is not the over-used circle-packed bento-box of fintech dashboards or the angular crypto-protocol grid; this is a calm tessellation borrowed from a geologist's thin-section microscope reticle.
**Grid spec.**
- Reference frame: 1440 × 1024 desktop, 768 × 1280 mobile.
- Hexagon flat-to-flat width: 280px desktop, 200px mobile-stacked.
- Tessellation: 4 columns × 3 rows of flat-top hexagons (offset alternating rows by 140px horizontally), totaling 12 cells.
- Inter-cell gutter: 14px (just enough to let each cell read as its own pressed-into-stone medallion, not enough to break the honeycomb tessellation).
- Outer page margin: 64px desktop, 24px mobile.
- The page does not scroll horizontally and only scrolls vertically by exactly **two viewport heights** — the first viewport is the title slab + the first six cells; the second viewport is the remaining six cells + a quiet bibliographic footer.
**Cell anatomy.** Each hexagon is a neomorphic well *pressed into* the stone slab (concave, inner-shadow top-left + inner-light bottom-right). Inside the well, a smaller hexagon (180px f-to-f desktop) is *raised out* of the well floor (convex, outer-light top-left + outer-shadow bottom-right) — this nested raised hex is the actual content card. The two-layer well-and-island construction is the entire structural conceit and is repeated identically for all 12 cells. No cell has its own aesthetic exception. The honeycomb is uniform.
**Cell content (within each raised inner hexagon):**
- Top — a small (40px) flat-top hexagonal numeral plate (01 through 12) in Bebas Neue.
- Middle — a single-glyph hand-drawn nature element (the swash, the rip, the tombolo, etc.), centered, monochromatic, embossed-line.
- Bottom — a 4-word phenomenon title in Bebas Neue, all caps, with the underline-draw annotation pattern triggering on viewport entry.
**Title slab (above the honeycomb).** A single 1440 × 240 px concave well containing only the centered, oversized title "READING THE SEA" in Bebas Neue at 168px, with a hand-drawn nautical-chart compass rose to the right (250 × 250 px), embossed into the stone. The subtitle "A FIELD TUTORIAL IN COASTAL FORMS" sits at 28px, 32px below the main title. No nav, no logo lock-up, no sign-in. The compass rose's needle slowly drifts ±2° around true north on a 24-second loop — the only ambient motion on the entire title slab.
**Footer.** A 1440 × 120 px concave well at the bottom of the second viewport, containing a single embossed line of 14px Inter Tight: a bibliographic citation in the form of a real marine biology journal entry, e.g. *"Hwang, J.-M. (2026). Reading the sea: a field tutorial in coastal forms. bada.studio, Field Notes, Vol. 1."* — and nothing else. No social icons, no copyright bar, no sitemap.
**Honeycomb fallback (mobile).** Below 768px, the hexagonal tessellation collapses into a single vertical column where each hex remains hex-shaped (not converted to a rectangle — that would be a betrayal of the conceit) and is centered on the viewport, full-width minus 24px margin. The 12 hexes stack as a beaded vertical chain. The page becomes a long scroll, but the cell-anatomy is preserved.
## Typography and Palette
**Type stack — Google Fonts only.**
- **Bebas Neue (regular, 400)** — the headline voice for all-caps display. Used for the title slab, the hexagon numerals (01–12), the per-cell phenomenon titles, and any single-word callouts. Bebas Neue at the bebas-bold treatment (3% of the corpus) is the deliberate seed choice. We set it at 168px on the title slab, 22px on the hexagon numerals (with letter-spacing 0.06em to compensate for the tight default), and 18px on the per-cell titles. Tracking: 0.04em on body-size, 0.00em on display-size. Line-height: 0.95 on display, 1.10 on body-display.
- **Inter Tight (variable wght 400–600)** — the running-prose voice. Used for the tutorial body text inside an expanded reading panel that opens when a hexagon is clicked, for the bibliographic footer line, and for the alt-text and aria-labels embedded as visible captions. Inter Tight at 17px desktop, 15px mobile, line-height 1.55, weight 420 (a sub-regular weight only available because the variable axis lets us interpolate). Inter Tight is chosen over default Inter because the slightly narrower glyph yields a denser textbook page.
- **Cormorant Garamond (italic, 500)** — the marginalia voice. Used exclusively for hand-italicized scientific names (e.g. *Macrocystis pyrifera*, *Foraminifera*, *Mytilus edulis*) and for the latin etymology gloss that appears in the corner of each hexagon when expanded. Cormorant Garamond italic against the Bebas Neue display creates the visual rhythm of a 1972 field manual where the editor used metal type for headlines and a manual italic typewriter for the binomial nomenclature. Set at 19px italic 500.
No other typefaces are used. The three-font stack is enforced.
**Palette — strict monochrome, warm-stone variant.** Eight values on a single hue ramp.
- `#1A1715` — abyssal ink. Used only for the underline-draw stroke and the cormorant italic binomial nomenclature. Never as a background.
- `#3D352F` — kelp shadow. Body text on the slab.
- `#5C5147` — driftwood. Per-cell title text. Embossed-line illustrations.
- `#8B7E72` — wet-sand. Secondary captions, footer line, page numerals 01–12.
- `#B5A89B` — dry-sand. The mid-tone separator between concave and convex highlights. Compass-rose detail strokes.
- `#D9CFC2` — bone-shell. The slab's primary surface color (the entire page background).
- `#EDE5DA` — chalk-foam. The convex highlight on raised forms (top-left light source).
- `#F8F3EB` — paper. The brightest inner-light edge on the most-raised elements (the inner hexagon islands).
The shadow direction is fixed at **315° (top-left light source)** for all neomorphic elements. The convex highlight is `#F8F3EB` at 100% with a 20px Gaussian blur on the top-left edge; the convex shadow is `#8B7E72` at 50% with a 22px Gaussian blur on the bottom-right edge. The concave equivalents simply invert these positions. There is no other lighting model on the page — every depth cue is derived from this single light.
The palette is **monochrome warm-stone** — at 17% it is well-represented in the corpus, but the corpus's monochrome examples skew toward cool greys, mid-century black-and-white, or gradient-tinted near-monochromes. bada.studio is monochrome on a single warm-beige hue ramp with zero blue, zero green, zero saturation excursion. It is closer to a Donald Judd chinati-stone wall than to a Swiss-grid black-on-white poster.
## Imagery and Motifs
The seed's **imagery: nature-elements** is treated as the entire iconographic corpus of the site. Twelve embossed-line natural-form illustrations, one per hexagon, all hand-drawn in 1.5px stroke width using the `#5C5147` driftwood color, then *embossed* into the inner-hexagon island via the same neomorphic shadow language as the structural elements (a faint inner-light along the top-left edge of every stroke, a faint inner-shadow along the bottom-right edge, simulating that the line was carved into the stone rather than printed on top of it).
**The twelve illustrations — each is a single centered glyph at 88 × 88 px:**
01. SWASH ZONE — three concentric arcs sweeping up a sloped line, the topmost arc dotted to imply foam.
02. RIP CURRENT — a narrow, ribbon-like seaward arrow flanked by two opposing inward-curling shore-bound arrows, the central arrow wider than the flanking pair.
03. TOMBOLO — an island connected to a coastline by a thin sandbar isthmus, drawn as a top-down map outline.
04. BRACKISH WEDGE — a side-section through a river mouth where two layers of hatching (fresh on top, salt below) interlock as a wedge.
05. KELP HOLDFAST — a single kelp stipe with a branching root-like holdfast clutching a drawn rock.
06. FORAMINIFERAL OOZE — a magnified field of seven spiral and chambered shells viewed top-down, scattered organically.
07. STORM BERM — a cross-section profile of a beach with a raised storm berm and a backshore lagoon.
08. SAND SPIT — a curving, hooked landform extending from a coastline into open water.
09. LAGOON — an enclosed water body with a barrier reef and a single inlet, drawn top-down.
10. UPWELLING CELL — a vertical column with three rising arrows offshore, fed by a deep-water curl.
11. ABYSSAL PLUME — a hydrothermal vent with a rising column of hatched smoke-particles spreading at depth.
12. BATHYMETRIC CHART — a small six-isobath topographic map of an offshore canyon.
All twelve are bespoke; none are taken from an icon library. The line weight is uniform; the corner treatment is uniformly square (no rounded line-caps); the hatching density is uniformly 4 lines per 10mm at 1:1 print scale. The illustrations read as if they were copied by hand from a 1972 NOAA coastal-survey manual.
**The motif of flowing-curves (3% of the corpus)** is the page's secondary structural ornament. Between the title slab and the first row of hexagons, a single horizontal SVG path of length 1380px is drawn — a 2px embossed-line Bezier wave that traces the form of a small swell breaking from left to right. The path is the visual seam between the title and the tutorial body. A second flowing-curve appears at the bottom of the second viewport, between the final row of hexagons and the bibliographic footer — this one mirrored horizontally and slightly larger (12px peak amplitude vs. 8px above). These are the only two flowing curves on the entire page. They are static — they do not animate. Their function is solely to soften the otherwise perfect tessellation of the honeycomb.
**No photography. No 3D renders. No stock vectors. No iconography library. No emoji. No CSS gradients other than the neomorphic shadow pairs. No background patterns. No noise overlay.** The slab is unbroken, undecorated, and quiet.
The compass rose on the title slab is the single ornamental object — 250 × 250 px, embossed-line at 1.5px stroke, with eight cardinal arms, an inner 32-point sun-burst rim, a circular degree scale, and a free-floating needle that drifts ±2° around true north on a 24-second sinusoid. It is the most decorative element on the page and even it is restrained.
## Prompts for Implementation
Build bada.studio 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 60KB. The twelve illustrations are inline SVG (not external files) so they participate in the neomorphic shadow language directly via CSS filter chains.
**Document structure:**
```
READING THE SEA
A FIELD TUTORIAL IN COASTAL FORMS
01
SWASH ZONE
```
**Page event timeline (from first paint to steady state):**
- **0.00s — first paint.** The bone-shell `#D9CFC2` slab fills the viewport. Nothing else.
- **0.18s — title-slab well presses in.** The concave well behind the title fades up over 280ms via opacity 0→1 on the inner-shadow filter. The title text and compass rose are still invisible.
- **0.46s — title text emerges.** The Bebas Neue display title fades up over 320ms with no movement, no slide, no skew. The subtitle follows 80ms after the title with the same fade.
- **0.84s — compass rose embosses.** The compass rose SVG strokes draw themselves via `stroke-dasharray` over 700ms, starting from the central pivot and radiating outward arm by arm. Once drawn, the needle begins its 24-second sinusoidal drift.
- **1.54s — top seam draws.** The flowing-curve seam below the title slab path-draws over 600ms left-to-right via SVG stroke-dashoffset.
- **2.14s — honeycomb cells press in.** The twelve concave wells press into the slab in *reading order* (left-to-right, top-to-bottom across the tessellated rows), each over 200ms, with a 60ms stagger. Total duration: 2.14s + (12 × 60ms) + 200ms = 5.06s. During this time the inner islands are still flat.
- **5.20s — islands rise.** All twelve raised inner hexagons emerge from their wells simultaneously over 380ms via a convex-shadow opacity ramp. No movement, no scale — only the lighting model changes from "flat plate" to "raised plate."
- **5.60s — numerals and glyphs fade in.** The 01–12 numerals appear first (over 240ms), then the 88×88 nature-element glyphs (over 320ms, 80ms after the numerals).
- **6.20s — first six cell titles enter the viewport.** The Bebas Neue titles fade in. As each enters, the underline-draw pattern triggers: a 1.5px abyssal-ink stroke draws itself left-to-right under the title over 480ms, with a slight pen-pause halfway through (a 60ms hold) before resuming. This is the underline-draw motif (21% of the corpus, but rendered here as a single continuous fountain-pen mark rather than the more common single-velocity underline).
- **6.20s onward — steady state.** The page has reached its final composition. The compass needle continues to drift. Nothing else moves until the user scrolls.
- **on user scroll** — the second six cells animate their underline-draw patterns as they cross the viewport threshold, in the same fountain-pen style.
**Interaction model.**
- **Hexagon hover (desktop only).** On `pointerover`, the inner island depresses 2px deeper into the well — implemented as a swap of the convex shadow pair to a *less-raised* pair (20px blur → 12px blur, 100% opacity → 70% opacity) over 220ms, easing `cubic-bezier(0.33, 1, 0.68, 1)`. There is no scale change, no translate, no rotation. The button feels softer when touched.
- **Hexagon click.** The clicked island *fully presses inward* into the well — the convex shadows invert to concave shadows over 320ms — and the clicked cell expands to fill 80vw / 70vh as a single overlay panel (still hex-shaped, still neomorphically embossed) containing the expanded tutorial text in Inter Tight body, with a single Cormorant Garamond italic line of binomial Latin in the upper-right corner. The other eleven hexagons fade to 30% opacity behind a `#D9CFC2` veil at 70% — they are not blurred (a `backdrop-filter: blur` would betray the stone-slab metaphor). A 32 × 32 px embossed `×` in the panel's upper-left corner closes the overlay; clicking outside the panel closes it; pressing Escape closes it.
- **No other interactions.** No menu. No search. No theme toggle. No login. No share. No copy-link. No language switcher (the site is in one language, English, with embedded Latin binomials).
**Storytelling beats.**
- The page is a *single tutorial*, not a hub. The narrative arc is from the shallowest coastal form (the swash zone) to the deepest (the abyssal plume), and finally to the chart that abstracts all of them (the bathymetric chart). The order of cells is the *reading order*, and is intentional.
- Inside each expanded panel, the body text is exactly three short paragraphs — never more, never less. First paragraph: definition. Second: mechanism. Third: a one-sentence field observation in second person ("Stand on the swash zone with bare feet at low tide; the surface beneath your soles is firm but uniform, the grain size sorted by the last receding wave.").
- The site is finished. There is no "next chapter," no "subscribe for updates," no roadmap teaser. When the user reaches the twelfth cell, they have completed the tutorial.
**AVOID throughout:** CTA buttons, pricing tables, stat-grids ("12+ years experience" etc.), testimonial carousels, social-proof logo bars, hero-image splash photography, gradient meshes, glassmorphic blur planes, pop-up modals soliciting email, and any "Learn more →" link. The tutorial is the site; the site is the tutorial.
## Uniqueness Notes
This design's deliberate departures from the 80 designs already in the registry, and from the seed's defaults:
1. **Neomorphism as cast-stone, not soft-plastic UI-kit.** Neomorphism appears in only 2% of the corpus, and the broader web's neomorphic exemplars almost universally render the style as light-grey iOS-app-mockup chrome with `#E0E5EC` plastic. bada.studio re-imagines neomorphism as *embossed and debossed cast stone*: warm-beige sediment, fixed 315° light, no rounded rectangles, no toggles, no pill-buttons. Every neomorphic affordance is hexagonal or curved, never rectangular — the rectangle is forbidden. This decouples neomorphism from its iOS-kit baggage and re-roots it in physical museum-panel materiality.
2. **Hexagonal-honeycomb at 1% — and used as a tutorial sequencer, not a metric grid.** Hexagonal-honeycomb appears in only 1% of the corpus and the rare existing examples deploy it for stat dashboards, blockchain validators, or fintech "feature grids." bada.studio uses the honeycomb as a *page-numbered tutorial sequence* (12 cells = 12 chapters), explicitly rejecting the hex-grid's stat/metric default. The honeycomb is read top-to-bottom in narrative order, not consumed as a parallel array of equally-weighted tiles.
3. **Tech-tutorial at 2% with no code, no terminal, no API reference.** Tech-tutorial tone (2%) typically implies developer documentation, code samples, and command-line examples. bada.studio applies the *pedagogical structure* of tech-tutorial — numbered steps, scaffolded vocabulary, "now you know" terminal beats — to *coastal geomorphology*. The tutorial form is borrowed; the content is intentionally non-code, non-tech, and non-developer.
4. **Bebas-bold (3%) used for a marine field manual, not a startup hero.** Bebas Neue's display-bold treatment dominates SaaS-startup hero sections and gym-membership landing pages. Here it is repurposed as the headline face of a *naturalist's field manual* — a context where Bebas would normally never appear (field manuals tend toward Garamond, Caslon, or Times). The pairing of Bebas Neue display with Cormorant Garamond italic binomials and Inter Tight body is, to the best of my survey, novel in this corpus.
5. **Monochrome warm-stone, not cool-grey or print-black.** The corpus's monochrome examples (17%) skew toward cool greys, neutral black-and-white, or gradient near-monochromes. bada.studio commits to a single warm-beige hue ramp from `#1A1715` to `#F8F3EB` with zero saturation excursion across all eight values. There is no blue on the page despite the marine subject matter — a deliberate refusal of the "marine = blue" cliché.
6. **Underline-draw (21%) rendered as fountain-pen fountain-pause, not single-velocity dash.** The 21% of designs using underline-draw apply a uniform-velocity left-to-right draw. bada.studio breaks the velocity with a 60ms pen-pause at the midpoint of each underline, simulating a hand pausing to dip ink. This converts underline-draw from a generic CSS animation into an annotation gesture.
7. **Nature-elements (1%) as embossed line drawings, not as photography or 3D-render.** Nature-elements imagery in the seed vocabulary is interpreted by most designers as photographs of leaves, foliage, coastlines, etc. bada.studio renders nature-elements as *bespoke 1.5px embossed line drawings* of marine geomorphological forms — twelve drawings, all custom, all monochromatic, all embossed into the stone via the page's existing neomorphic shadow language. No photographs, no 3D, no stock vectors.
8. **Flowing-curves (3%) used as exactly two static seams, not as scattered ornament.** Where flowing-curves appears elsewhere it is typically a decorative, kinetic, or background-of-everything pattern. bada.studio uses precisely two flowing curves — one above the honeycomb, one below — as static structural seams. They divide the page into title / tutorial / footer and otherwise do no decorative work.
9. **The page is finite and ends.** Almost every site in the corpus is functionally infinite — its scroll, its CTA stack, its footer ladder of links all imply "there is more, keep going." bada.studio is twelve cells long, ends with a single bibliographic citation, and offers no continuation. The terminal state of the page is *the tutorial is complete*. No newsletter signup, no roadmap, no "next."
**Chosen seed:** *aesthetic: neomorphism, layout: hexagonal-honeycomb, typography: bebas-bold, palette: monochrome, patterns: underline-draw, imagery: nature-elements, motifs: flowing-curves, tone: tech-tutorial.*
**Avoided patterns from frequency analysis:** photography (97%), gradient (95%), parallax (92%), full-bleed (87%), warm gradient palettes (93%), spring/stagger (70% / 70%), cursor-follow (67%), card-grid (67%), magnetic (53%), and the dominant glassmorphism + hand-drawn aesthetic pairing (70% + 93%). bada.studio uses none of these. Where stagger does appear (in the cell-emergence sequence), it is the only such use, and it is deployed with the slowest reasonable cadence (60ms) in the corpus.