# Design Language for bada.day

## Aesthetics and Tone

bada.day is **a single dawn at the seashore, drawn as a hand-painted candy enso**. The Korean word *bada* means "sea" and the TLD *.day* means *one rotation of the planet* — so this site treats the page as a 24-hour solar diary written on a strip of taffy-colored rice paper. It is a **zen** site whose silence is broken by a single, brilliant, sweetshop-bright light: the sun rising over a horizon that has been re-tinted in raspberry, citron, and bubblegum. Where ordinary zen sites fade to ink-wash and oat-cream, bada.day commits to *optimistic-bright candy-bright* — the palette of a melted Pop Rocks sachet poured into a tea ceremony. Nothing on the page shouts. The colors do all the shouting, and the layout takes a vow of silence to let them.

Mood references that an implementer should hold in mind, in order of decreasing fidelity:

- A **Hiroshi Sugimoto seascape** that someone has airbrushed with strawberry-milk gradient powder.
- The first thirty seconds after a Pixy Stix is poured onto white linen.
- A **suzuri ink-stone** filled with melted sherbet instead of black ink, with a single hair-thin brushstroke arcing through it.
- The exact shade of the sky at 04:53 in early summer on a Korean east coast — that twenty-second window where the sea is still indigo but the horizon is already mango — but rendered as if Wayne Thiebaud painted it on a baker's airbrush.
- A **kaiseki tray** where every dish is an empty white circle except one, which is filled with a single perfect raspberry mochi.

The tone is **optimistic-bright** but never giddy. It is the optimism of someone who has already meditated for forty minutes and is now allowed one piece of fruit candy. The page never giggles. It glows. Generosity of color, austerity of everything else.

A user opening bada.day should feel that they have arrived at a **shrine to a single sunrise** — quiet, bright, slow, and very, very sweet — and that the only ritual is to scroll through twenty-four hours of one specific day, watching one specific horizon, while a thin animated border traces the path of the sun around the edge of the screen.

## Layout Motifs and Structure

The page is a **full-bleed horizon strip** that fills the entire viewport from edge to edge with no visible chrome. There is **no header, no footer, no nav, no sidebar, no card-grid**. The frequency analysis shows full-bleed at 87% (common), card-grid at 67% (avoid), centered at 81% (avoid stacking with full-bleed). bada.day commits to full-bleed in its **most rigorous, ma-negative-space (3% — preferred) form**: ninety percent of the viewport is empty colored air; the entirety of the typographic content lives along a single horizontal sun-path.

**The Horizon Line is the Layout.** A single hairline rule is drawn at exactly 61.8% of viewport height — the golden-mean horizon — and runs full-bleed left to right. Everything in the design is a relationship to this line:

- **Above the horizon = sky time.** A vertical stack of twenty-four faint hour markers — `00 01 02 03 ... 23` in a thin serif — distributed across the upper sixty-two percent. Each marker is keyed to a hue stop in the gradient-mesh sky. As the user scrolls, the sky's mesh shifts hue from indigo through raspberry through citron through bubblegum-blue and back to indigo, completing one full diurnal rotation across the page's vertical scroll length (24 viewport-heights total — one viewport per hour).
- **At the horizon = the sun.** A single solid candy-pink disc, ~9vh in diameter, fixed in viewport space at 61.8% height and 50% width on first paint. As the user scrolls vertically, the disc travels horizontally along the horizon line — left edge at 00:00, center at 12:00, right edge at 23:59 — completing one full traverse of the page's width across the full scroll length. *The sun moves horizontally as time moves vertically.* This is the central conceit of the layout.
- **Below the horizon = sea time.** The lower thirty-eight percent is a **mirror gradient-mesh** of the sky, but desaturated by 35% and with the candy hues inverted to their complementaries (raspberry sky → mint sea, citron sky → lavender sea). Long-form text lives down here, anchored to the bottom edge with a 12vh inner margin, as if printed on the sand.

**Border-animate is the only chrome.** The viewport's four edges carry a hair-thin (1.5px) animated border that draws a continuous loop — top edge, right edge, bottom edge, left edge — once every sixty real-time seconds. The stroke is a candy-pink that shifts hue around the rectangle so that each edge holds a slightly different sweetshop tint. This border is the site's *only* navigation: the user is being told, at all times, that the rectangle they are inside *is* the day, and the moving stroke *is* the second hand. No menu. No links above the fold. The border does the work.

**Section rhythm.** The vertical scroll is divided into **eight zen "stations"** (one per three hours, like a Buddhist monastic schedule): 00:00 *yamiake* (pre-dawn), 03:00 *akatsuki* (dawn breaking), 06:00 *asahi* (sunrise), 09:00 *gozen* (mid-morning), 12:00 *mahiru* (high noon), 15:00 *hiru-sagari* (afternoon), 18:00 *yuhi* (sunset), 21:00 *yoi* (early night). Each station occupies three viewport heights and holds at most **one koan** — a single line of serif text, set huge (clamp(3rem, 8vw, 8rem)), centered above the horizon, fading in over four seconds and fading out before the next station begins. There is no body copy in the traditional sense; the page is twenty-four hours of mostly-empty horizon punctuated by eight slow sentences.

**Asymmetric (55% — common, but used here in reverse).** Every koan is set with deliberate horizontal asymmetry tied to the sun's position: at 03:00 the koan is anchored to the left margin (because the sun is at the left edge of the horizon), at 12:00 it is centered, at 21:00 it is anchored to the right margin. The text follows the sun. This is the only asymmetry on the page; everything else is a mirror about the horizon.

**Mobile (<768w).** The horizon stays at 61.8% height. The sun's horizontal traverse becomes a **diagonal traverse** instead — bottom-left at 00:00, top-right at 23:59 — because a portrait viewport cannot read horizontal time without crowding. Koans drop one type-step. Border-animate continues unmodified. No hamburger. Still no nav.

## Typography and Palette

**Fonts (Google Fonts only — verified available).**

- **Cormorant Garamond** (variants 300, 400, 500, italic 400) — *the koan voice*. A serif-revival face by Christian Thalmann, derived from Claude Garamont's 1592 specimens but redrawn for screen with high-contrast hairlines and a fragile, almost candy-glass elegance. It carries every koan, every hour marker, and the wordmark "bada.day". Set at clamp(3rem, 8vw, 8rem) for koans with `font-weight: 300` and `letter-spacing: -0.022em`; at 0.78rem for hour markers with `font-weight: 400` and `letter-spacing: 0.18em` (small caps via `font-feature-settings: "smcp"`). Cormorant's hairline strokes are a perfect formal match for the candy-bright palette — they are physically thin, like sugar threads, so the bright color has space to breathe around each glyph.
- **EB Garamond** (variants 400 italic, 500) — *the long-form voice*. Used only for the small printed paragraph at the very bottom of each station, set at 1.0625rem with `line-height: 1.62`. EB Garamond's italics are tighter and more book-grade than Cormorant's; it gives the lower-margin text the feel of a footnote in a Penguin Classic. Body measure is held to 38ch.
- **DM Mono** (variant 300, all-caps tracked +0.22em) — *the timekeeping voice*. The only sans/mono on the page. Used exclusively for the tiny corner readout: `KST · 04:53 · 37.4566N · 129.1659E` (East Sea, near Donghae). Size: 0.6875rem. This is the only piece of "tech mono" on the page, and it is deliberately tiny — the registry shows mono at 96%, so we use it ironically, in a fingernail's worth of pixels, just to anchor the page in a specific real geography.

Type sizes follow a strict modular scale (1.333 — perfect-fourth): 0.6875 / 0.78 / 1.0625 / 1.42 / 1.89 / 2.52 / 3.36 / 4.48 / 5.97 / 7.96rem. Nothing on the page sits at an off-scale size.

**Palette — candy-bright meets sea-light (8 colors, hex specified).**

| Role | Name | Hex | Notes |
|---|---|---|---|
| Sky base (pre-dawn) | Indigo Drop | `#2A1F5E` | Nearly black-purple. Holds the page at 00:00–03:00. |
| Sky accent (dawn) | Raspberry Mochi | `#FF5C8A` | The hero candy hue. Sun fill. Border-animate seed. |
| Sky accent (morning) | Citron Sherbet | `#FFE066` | Mid-morning hue stop. Hour-marker glow. |
| Sky accent (noon) | Bubblegum Blue | `#7DC8F7` | High-noon sky. Calm-bright, never icy. |
| Sky accent (sunset) | Tangerine Taffy | `#FFA84A` | Yuhi station. Reads warm against mint-sea. |
| Sea complement | Sea Mint | `#A8EBD9` | The horizon's southern mirror, low saturation. |
| Sea complement | Lavender Tide | `#C8B8F0` | Twilight sea reflection. |
| Page paper | Onsen Cream | `#FFF7EE` | The "dry" base under everything; the rice paper. |
| Ink | Sumi Plum | `#1A0F2E` | Type color. Never pure black — always plum-tinted. |

**Palette logic.** Candy-bright sits at 2% in the registry, which makes it the third-rarest palette in the corpus. We exploit that rarity by *never* mixing it with neon (which would push to dopamine-neon, 3%) or with deep-burgundy (5%). The candy hues are held at a precise saturation level (HSL S: 78–88%, L: 60–72%) so that they read as **cold-pressed candy** — not Y2K, not vaporwave, not Memphis. Closest real-world analog: a tray of Korean *yakgwa* dipped in fruit-glass icing.

**Type-on-color rules.**

- Cormorant koans always set in `Sumi Plum #1A0F2E` against the gradient-mesh sky. The sky's hue rotation never exceeds an L of 72%, so plum text holds legibility through every station.
- Hour markers (the `00 01 ... 23`) set in the *currently-active sky stop* itself, at 28% opacity, against the page paper — so they look like watermarks of their own hour.
- The wordmark "bada.day" appears once, bottom-left, in Cormorant Italic at 1.42rem, in `Raspberry Mochi #FF5C8A`. It is the only place where the candy hue is used as type. It is also the only "branding" on the page.

## Imagery and Motifs

The site uses **gradient-mesh imagery** (16% — moderate, but used here in a configuration that is rare even within that 16%) as its primary visual substrate, plus **nature motifs** drawn at hairline weight in pure SVG. There is **no photography, no 3D, no Lottie, no raster textures, no stock illustration**.

**The Mesh System (gradient-mesh).** The sky and sea are not CSS conic gradients or radial gradients. They are a **6×4 SVG mesh-gradient** (`<linearGradient>` networks with eight color stops along two crossing axes, blended via `mix-blend-mode: screen` for sky and `mix-blend-mode: multiply` for sea). The mesh is rebuilt on scroll: the eight color stops are interpolated between station presets, so that at 09:42 the sky is a precise mathematical mix of the 09:00 and 12:00 station palettes. The mesh nodes themselves are slightly noisy — a 1.4Hz sine displacement on each anchor — so the boundaries between hues *breathe* by ±2px over a 22-second cycle. This breathing is the only animation on the sky surface itself; everything else holds still.

**The Sun (the central motif).** A single `<circle>` element, `r=4.5vmin`, fill `#FF5C8A` (Raspberry Mochi). Around it, four concentric `<circle>` elements at r=5.5, 6.6, 7.9, 9.4 vmin, no fill, stroke `#FF5C8A` at opacities 0.4, 0.22, 0.12, 0.06. These rings are the *halo*, drawn in candy-pink against whatever sky is currently active. They never animate independently of the sun — they translate with it as the disc traverses the horizon. At noon, the sun is at maximum size (r=4.8vmin) and the halo rings expand by 6%. At dawn and dusk, the disc tilts 3° (`transform: rotate(...)`) so the halo reads slightly oblong, like the sun setting through atmosphere.

**Nature motifs (20% — moderate, but rendered at hairline minimum).** Three nature elements appear, each drawn in a single `<path>` with `stroke-width: 0.6px` and no fill:

1. **A pine branch** (`matsu`) at the bottom-left corner of every station from 09:00 onward. Drawn in 24 strokes total — eleven needles, eight stem segments, five shadow strokes. The branch grows by one needle per station, so by 21:00 it is a full sprig. Stroke color: Sumi Plum.
2. **A single circling gull** at the upper-right of the 12:00 station only. Two arc strokes. It does not animate; it is a still, ink-wash gesture.
3. **A koi-fin curve** at the bottom-right of the 18:00 (yuhi) station. Two beziers. The same hairline plum stroke. Reads as a single brushed gesture, not an illustration.

These three motifs together form the page's entire representational vocabulary. There are no other figures, characters, photos, or icons. The frequency analysis shows photography at 97%, so omitting it entirely is a structural choice.

**Border-animate (5% — preferred) as ritual.** The animated viewport border is a single `<rect>` SVG element with `pathLength=4` and `stroke-dasharray: 1 3`. The dash advances around the perimeter at one full cycle per sixty seconds. Stroke color is a CSS custom property that shifts hue along the candy palette: top edge → Raspberry Mochi, right edge → Citron Sherbet, bottom edge → Bubblegum Blue, left edge → Tangerine Taffy. The transitions between edges are sharp at the four corners — there is a tiny "tick" of color change at each corner, like the second hand on a kitchen clock catching at the 12. This is the only way the page acknowledges that time is passing in real life, independent of scroll. **The border is the clock.**

**Texture.** A faint grain overlay (CSS `filter: url(#grain)`) at 4% opacity over the entire page. Grain frequency 0.65 baseline, octaves 2. This grounds the candy palette in a paper feel, so the page never reads as digital plastic.

## Prompts for Implementation

Build bada.day as **one HTML file, one CSS file, one JS module, one SVG sprite**. No framework, no router, no service worker, no build step. Total uncompressed bundle target: under 60KB. The SVG sprite holds the gull, koi, pine sprig, and grain filter. Everything else is generated inline.

**Document skeleton:**

```
<body>
  <main class="day">
    <svg class="border-clock" aria-hidden="true">…</svg>      <!-- the animated rectangle -->
    <svg class="hour-rail" aria-hidden="true">…</svg>         <!-- 24 hour markers, vertical -->
    <svg class="sky-mesh"  aria-hidden="true">…</svg>         <!-- gradient-mesh sky, 6×4 -->
    <svg class="sea-mesh"  aria-hidden="true">…</svg>         <!-- mirrored mesh, sea -->
    <svg class="sun-rail"  aria-hidden="true">                 <!-- the sun + halo -->
      <g class="sun">…</g>
    </svg>
    <section class="station" data-hour="00">…</section>        <!-- 8 stations × 3vh each -->
    …
    <section class="station" data-hour="21">…</section>
    <aside class="stamp">                                       <!-- DM Mono coordinate readout -->
      KST · 04:53 · 37.4566°N · 129.1659°E
    </aside>
    <small class="wordmark">bada.day</small>                    <!-- Cormorant italic, mochi pink -->
  </main>
</body>
```

**The Eight Koans (final copy, in scroll order).**

1. *00:00 — yamiake.* "The sea has not yet remembered it is blue."
2. *03:00 — akatsuki.* "A pink line, drawn before the dawn signs its name."
3. *06:00 — asahi.* "One sweet light. The horizon learns to taste itself."
4. *09:00 — gozen.* "A pine drinks the morning, slowly, with both needles."
5. *12:00 — mahiru.* "Above the noon, only candy. Beneath, only mirror."
6. *15:00 — hiru-sagari.* "The day folds itself in half and saves the second half for tomorrow."
7. *18:00 — yuhi.* "The sun is a raspberry, melted on the rim of the sea."
8. *21:00 — yoi.* "Indigo returns, but the sweetness is remembered."

These eight sentences are the entire prose content of the site. Do not pad. Do not add subtitles. Do not write supporting copy.

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

- **0.00s — first paint.** The Onsen Cream paper background. Nothing else.
- **0.18s — sky-mesh fades up** over 900ms (cubic-bezier 0.22, 1, 0.36, 1) at the *current real-time hour* (read `Date.now()`, find the matching station preset, render). If the user opens the page at 04:53 KST, the page opens at 04:53 — not at 00:00.
- **1.10s — horizon line draws** left to right, 1400ms, hairline plum, ease-in-out-quart.
- **2.50s — the sun and halo bloom** at the horizon position corresponding to the real local hour. The halo rings draw outward in a 1.6s spring (`stiffness: 90, damping: 18`).
- **2.80s — pine sprig draws** stroke-by-stroke at the bottom-left, 2.4s.
- **3.60s — the first koan (matching the current hour-station) fades up** in Cormorant 300, anchored to the sun's horizontal position. 1.8s ease.
- **4.20s — border-clock activates.** Stroke begins to march around the rectangle.
- **5.00s — wordmark and stamp fade in** at 12% opacity (rising to 100% on hover).
- **steady state.** The mesh breathes (±2px node displacement, 22s cycle). The border ticks. Nothing else moves until the user scrolls.

**Scroll behavior.**

- Scroll-distance-to-time mapping: total page height = 24 × `100vh`. Scroll progress is mapped linearly to a virtual hour, and the sun's horizontal position, the sky-mesh hue stops, and the sea-mesh hue stops are all interpolated from that virtual hour.
- Scrolling never triggers parallax (parallax is at 92% in the registry — actively avoided here). The sun translates *only* horizontally; the mesh shifts *only* in hue. Vertical motion of any element is forbidden during scroll. The user is moving through *time*, not space.
- Koans cross-fade in and out as the user enters and leaves each three-viewport station window. The fade is opacity-only (no translate, no scale).
- The hour-rail's currently-active hour marker brightens to 100% opacity over 400ms when the virtual hour passes it; the others stay at 28%.
- A `prefers-reduced-motion: reduce` user gets: no breathing mesh, no halo bloom, no border-march. The sun and koans still update on scroll, but instantly (no transition). The border becomes a static 1.5px stroke in Raspberry Mochi.

**Cursor and interaction.**

- The cursor is a custom SVG: a small filled candy-pink disc, r=5px. It does not magnetize, does not lag, does not trail. Cursor-follow is at 67% in the registry — bada.day rejects it. The cursor simply matches the system pointer position 1:1, but recolored.
- On the wordmark only: hovering reveals a one-line italic tooltip in Cormorant — *"a single day at the east sea"* — that fades in over 600ms.
- No clickable elements other than the wordmark (which links to itself / re-opens the page at 00:00). No CTA, no email signup, no pricing block, no stat-grid. None of those things exist on this site.

**Audio.** None. No ambient ocean. No chime. Silence is part of the zen contract.

**Storytelling arc.** The implementer should think of bada.day not as a "page" but as a **24-hour silent film starring one sun**. The story is: the sun rises, traverses, sets, and disappears, while eight tiny serif sentences describe what the sea is feeling. That is the entire experience. Every implementation choice — the border-clock, the hue-shifting mesh, the candy palette held against zen restraint — must serve that single narrative. If a feature does not serve "one sun, one day, one horizon," cut it.

**Avoid (per frequency analysis and per zen contract):**
- No card-grid (67% — overused).
- No CTA stack, no pricing block, no stat-grid (banned by SDESIGN.md prompt rules).
- No parallax (92% — overused).
- No cursor-follow / magnetic / spring effects (67/53/70% — overused).
- No photography (97% — universal; we abstain).
- No mono headlines (96% mono usage — we use mono only for the tiny coordinate stamp).
- No glassmorphism, no neumorphism, no inflated-3d.
- No header, no nav, no menu, no footer credits.

## Uniqueness Notes

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

1. **Candy-bright + zen — a contradiction held precisely.** Candy-bright sits at 2% of registry palettes (rarest tier); zen sits at 3% of aesthetics. Their **co-occurrence is unprecedented in the corpus** — every existing zen design pairs with muted, monochrome, or ethereal-blue palettes, and every existing candy-bright design pairs with maximalist, dopamine, or memphis aesthetics. bada.day is the only design in the registry that lets candy *be* the silence — bright color used in zen quantities (one sun, eight sentences, four border edges). This contradiction is the design's single defining gesture.

2. **The sun moves horizontally as time scrolls vertically.** The mapping of vertical scroll → horizontal sun translation across a fixed-height horizon line is, to my knowledge, not present in any of the eighty existing designs. Most scroll-driven sites either translate elements vertically with the scroll (parallax, 92%) or animate fixed elements in place. Here, scroll is *time*, sun is *space*, and the two axes are perpendicular. This is the layout's narrative engine.

3. **Border-animate as the only chrome and the only clock.** Border-animate is at 5% in the registry. Of those uses, all are decorative — an animated border around a card or section. bada.day is the only design that promotes border-animate to *the entire site's navigation, branding, and timekeeping system*. The animated viewport border replaces the header, the footer, the menu, the loader, and the clock, all at once.

4. **Serif-revival in the candy palette.** Cormorant Garamond is a hairline-contrast serif normally paired with cream/sepia/burgundy palettes (the "library" register). Pairing a Garamond revival with raspberry mochi pink and citron sherbet has no precedent in the registry — the closest matches are dark-academia (15%) and editorial (35%), which both use serifs but on muted palettes. This pairing is the design's typographic signature.

5. **Imagery: gradient-mesh as a 24-hour clock face.** Gradient-mesh appears in 16% of designs, almost always as a static decorative background. bada.day animates the mesh's color stops across a 24-hour scroll, so the background *is* the time-of-day display. The mesh is not decoration; it is the watch face.

6. **No photography, no 3D, no Lottie, no icons.** In a 97%-photography corpus, bada.day's entire imagery system is: one circle (the sun), four halo rings, one mesh, three hairline ink gestures (pine, gull, koi). That is the entire visual vocabulary, and it is intentionally fewer drawn elements than any other design in the registry.

7. **Eight koans, no body copy.** The frequency analysis does not capture this directly, but every other design in the registry includes some form of explanatory or supporting text — section headers, captions, descriptions, calls-to-action. bada.day has none. The total prose is eight one-line koans (about 110 words combined) plus one wordmark and one coordinate stamp. This is the lowest text density of any site in the registry, by an order of magnitude, and is essential to the zen contract.

8. **Tone: optimistic-bright (3% — preferred over warm-inviting at 18%).** The dominant warm tones in the registry are pastoral-romantic (20%) and warm-inviting (18%). bada.day commits to optimistic-bright instead — a tone the corpus uses three times — and gives it a zen-shrine setting rather than the energetic-startup setting where optimistic-bright is normally found. Optimistic-bright in a meditation context is the tonal twist that ties the whole design together.

**Chosen seed (from assignment):** `aesthetic: zen, layout: full-bleed, typography: serif-revival, palette: candy-bright, patterns: border-animate, imagery: gradient-mesh, motifs: nature, tone: optimistic-bright`.

**Avoided patterns (from frequency analysis):** hand-drawn (93%), glassmorphism (70%), photography (97%), card-grid (67%), centered (81%), gradient (95% — used only in the controlled mesh), warm (93% — replaced with candy-bright), parallax (92%), stagger (70%), spring (70%), cursor-follow (67%), magnetic (53%), mono headlines (96% — relegated to one tiny stamp).
<!-- DESIGN STAMP
  timestamp: 2026-05-09T11:03:48
  domain: bada.day
  seed: seed
  aesthetic: bada.day is **a single dawn at the seashore, drawn as a hand-painted candy enso*...
  content_hash: c7057869e187
-->