# Design Language for busygirl.bar

## Aesthetics and Tone

busygirl.bar is **an avant-garde bento-tray dispatch desk** — imagine the personal triage console of a 1973 Tokyo OL (office lady) reimagined as a single-screen dashboard, drawn in two inks on cream paper, then photographed through a slightly dusty studio window. The aesthetic is **avant-garde** at only 3% in the registry, and it manifests here not as gallery-shock or anti-design provocation but as **disciplined strangeness**: a layout that looks like a Swiss train timetable that has wandered into a *zōkei* (form-study) magazine spread. The reference points are the Total Design / Wim Crouwel grids of 1969, the *Idea* magazine covers of 1970–1976, the early Tadanori Yokoo posters where everything is duotone and slightly wrong, and the over-precise scheduling diagrams in vintage *Katei Gahō* household-management illustrations. The site reads less like a commercial product and more like the back-cover diagram of a manual no one has translated yet.

The tone is **minimal** — at only ~5% across registered designs as a tone (most "minimal" claims hide as aesthetic, not voice). Here, minimal means **the writing is clipped to single declarative lines, the labels are numeric, and the personality lives in the *intervals between elements*, not in adjectives.** No exclamation points. No hospitality copy. No "welcome." The site greets the visitor the way a physical dispatch board greets a duty officer: by simply being there, already loaded with the next task.

The mood is **purposeful, slightly ceremonial, and quiet** — the way a librarian re-shelves books at 11pm with a ritual rhythm she does not narrate. There is no marketing. There is no funnel. There is, instead, a *shift* in progress: a busy girl has stepped away from her desk for ninety seconds and the dashboard is still ticking. The visitor has caught it mid-blink. That is the entire emotional posture.

This is **busy** as in *deliberately scheduled*, not as in *frazzled-startup-busy*. The girl whose desk this is would correct you if you said she was overwhelmed. She is, in her own phrase, **fully booked.**

## Layout Motifs and Structure

The site uses a **dashboard layout** (registry: 24%, but almost always paired with crypto/saas/dark-mode tropes). busygirl.bar is the deliberate inversion: a dashboard built on **cream paper, in two inks, with no dark-mode toggle, no sidebar nav, no "metrics," and no live data feeds** — the dashboard motif is purely formal, used for its grid-discipline and tile-rhythm, not for its tech-bro semantics.

The viewport is divided by **a single 12-column module grid**, baseline 24px, gutter 24px, max-width 1320px, with **named module shapes** rather than nested divs. The grid is visible — faint cream-on-cream column rules drawn at 4% opacity — and every tile sits *on* the grid, never spanning fractional columns. This is a **bento-tray dashboard**: 11 fixed-shape tiles arranged into a tray. Tile shapes are deliberately heterogeneous (one wide marquee tile, two square clock tiles, four small index tiles, one tall index column, one slim ribbon tile, one compass-disc tile, one reservation slip), but their *sizes* are chosen from a closed set of grid-spans, not freely sized. The visual reference is the lacquer *jubako* (stacked-box) bento — every compartment knows its dimensions, the food adapts.

**Tile inventory and grid spans (12-col grid, named left to right, top to bottom):**

1. `MARQUEE` — wide 8-col × 2-row tile, top-left. Holds the wordmark *busygirl.bar*, a single rotating verb (`drafting`, `routing`, `replying`, `archiving`, `commuting`, `napping`), and the current-shift dial.
2. `DIAL-A` — 4-col × 2-row square clock tile, top-right. A two-handed analog clock in duotone, ticking real time, with the second hand replaced by a tiny enamel-pin hand-drawn icon that changes shape on the half-hour.
3. `DIAL-B` — 4-col × 2-row square clock tile, second row right. A "next-task" countdown clock — same form-language as DIAL-A but the hands sweep counter-clockwise and the face is labelled with task-types instead of hours.
4. `INDEX-N` — four 2-col × 1-row index tiles, row three, left to right: `00. roll-call`, `01. notes`, `02. errands`, `03. mail`. Each index tile is a card that flips on hover.
5. `INDEX-COL` — 4-col × 4-row tall index column, row three, far right. Lists the next 12 dispatched items in a vertical strip with leader dots (à la a printed timetable).
6. `RIBBON` — 12-col × 0.5-row slim horizontal ribbon spanning the bottom edge. A continuous scrolling tape of *jōyō kanji* and English words drawn from the busy girl's day: "報告書, memo, 帰宅, kettle, 締切, 5pm, 文献, footnotes, …"
7. `COMPASS` — 4-col × 4-row circular compass-disc tile, lower-left. Eight-directional rose; each direction is a *task-type* rather than a heading. Click rotates the disc; the marquee verb above syncs.
8. `SLIP` — 4-col × 2-row reservation-slip tile, lower-middle. A perforated paper card showing the visitor's "reserved appointment" with the busy girl — a generated 4-character slot ID, a time, a duty.

There is **no header, no nav, no footer, no logo lockup, no hero, no CTA, no pricing table, no testimonials, no stat-grid, no "learn more"**. The wordmark *is* the logo, the dial *is* the entry point, the slip *is* the only call-to-action — and the slip cannot be submitted, only torn off (it animates a perforation tear and detaches from the grid, leaving an empty slot).

The grid is **frozen on first paint** — once the bento tray lays out, tiles do not reflow on resize within the desktop range; instead the entire tray scales as a single unit, like a printed page. Below 720px the tray reflows into a single vertical column in the same fixed shape order; the dials become 2:1 stacked, the compass becomes a strip-rose. Below 380px the marquee verb collapses to a single rotating glyph.

Vertically the site is **one screen high**. There is no scroll on desktop. The whole thing is one tray. Scroll exists only on mobile and only because reflow demands it.

## Typography and Palette

**Fonts (Google Fonts only — verified):**

- **`Big Shoulders Display`** (variable axis wght 100–900) — the **retro-display** voice (only 6% in registry). Used for the wordmark *busygirl.bar*, the rotating verb in the marquee, the dial-face hour numerals, and the compass-rose direction labels. Big Shoulders is a US-WPA-poster-style condensed display sans with very high stroke contrast and ultra-tall caps; at 96px it reads as a mid-century industrial-signage ghost. It sits inside the avant-garde Showa-graphic frame because *Big Shoulders is what a 1972 Japanese poster would have used if it had been printed in Cleveland*. Set the wordmark at weight 250 (an unusually thin axis), letter-spacing -0.02em, and slope it 0deg — but pair it on hover with weight 850 to suggest the same word "shouting" without changing typeface.
- **`DM Mono`** — the body and label voice. Used for every numeric label, every tile caption, the index-column timetable, the ribbon scroll, and the slip's 4-character reservation ID. DM Mono is a humanist monospace with rounded terminals and a near-square aspect — it gives the dashboard its *operational-document* register. Set at 13px / 22px line-height for body labels, 11px / 18px for the index column, 32px / 32px for the slip ID.
- **`Klee One`** — used **only** for the busy girl's hand-written marginalia: a single sentence in the lower-right of the compass tile, the verb "due" handwritten over the second dial, and a faint date written in the corner of the slip. Klee One is a Japanese-pen handwriting sans (designed for *kakikata*, schoolchildren's handwriting practice) with both *kana* and Latin glyphs. It is the only soft, human voice on the page. Use it sparingly — total Klee One characters on the page should not exceed 80.

**Type sizes are quantised to a 4px scale**: 11, 13, 16, 22, 32, 48, 96. No size between these is permitted anywhere.

**Palette — strict duotone with two accent points:** the registry shows duotone at 23% but almost always paired with photography (duotone-photo). busygirl.bar is duotone *as a system*, applied to type, ink, illustration, and grid lines simultaneously. The two inks are:

- **Ink A — `#1F1A2E`** ("midnight indigo") — the primary ink. Used for type, hairlines, illustration outlines, the dial faces, all monospace labels.
- **Ink B — `#E8443B`** ("dispatch vermilion") — the accent ink. Used only for the rotating verb, the second hand, the active compass direction, the slip's perforation line, and the underline beneath the wordmark dot. **Total area of vermilion on the page must not exceed 4% of the visible viewport.**

**Substrate — cream paper:** the page background is **`#F4ECDC`** ("notebook cream") — a warm, slightly desaturated kraft cream that reads as paper. All tiles are the same cream; tile separation comes from hairline rules, not fills.

**Two-step tonal supports** for the duotone, used only for shadows, faint grids, and the grain overlay:

- `#D7CDB8` — a 12% darker cream, used for hairline column rules and the index-column leader dots.
- `#3A3148` — a slightly desaturated near-black-indigo, used **only** for the grain-overlay texture and the dial-tick marks at every 30°.

That is the entire palette. Six values: `#F4ECDC`, `#1F1A2E`, `#E8443B`, `#D7CDB8`, `#3A3148`, plus pure `#FFFFFF` reserved exclusively for the slip's torn perforation reveal.

## Imagery and Motifs

The imagery is **grain-overlay** (registry: 6%) layered over **custom-illustration** drawn entirely in the duotone above. No photography. No 3D render. No gradient mesh. No stock icons. No emoji.

**The grain overlay** is a single 240×240px tiled SVG noise pattern — generated with `<feTurbulence baseFrequency="0.85">` and a duotone matrix mapping luminance to `#3A3148` at 4% alpha — applied as a top-layer pseudo-element across the entire viewport with `mix-blend-mode: multiply`. The grain breathes faintly (a 14-second sine modulation of opacity between 3% and 5%) so the page reads as paper sitting under a lamp, not a flat web surface.

**Cultural motifs (registry: 5%, dramatically underused).** busygirl.bar takes "cultural" specifically as **late-Showa Japanese office culture** — not as ornament, but as the *vocabulary* of every illustration on the page. The illustrative motifs are:

- **The hanko (personal seal stamp)** — appears as the dot of the period in *busygirl.bar* (a tiny circular hanko impression in vermilion, slightly off-register). The wordmark literally signs itself.
- **The tetsubin (cast-iron kettle)** — drawn in the corner of the marquee tile, with three faint steam-curls when the rotating verb is `drafting`. The kettle is a single closed indigo path with three negative-space highlights.
- **The Casio digital wristwatch (1976 reference)** — drawn into DIAL-B's bezel as a tiny rectangular window showing the visitor's local IP region as a 4-character station code (e.g., `KR-SE`, `JP-KIX`, `US-LAX`). This is the only network-derived element on the page.
- **The chiyogami pattern strip** — a 2px-tall band of repeating *seigaiha* (wave-crest) pattern in indigo on cream, sitting *under* the ribbon tile as its baseline divider. The pattern is hand-drawn, not generated; the rhythm is intentionally imperfect.
- **The teruterubōzu (paper rain-doll)** — drawn in the upper-right corner of DIAL-A, hanging by a single hairline thread. It rotates 0.3° on a 6-second sine when the visitor's cursor is idle.
- **The norenu (fabric door-curtain)** — the wordmark, on hover, briefly displaces vertically as if a noren has been pushed aside, revealing a thin "OPEN / CLOSED" indicator beneath.
- **The reservation slip** — modelled directly on a 1970s *kissaten* (coffee-shop) order ticket, with a perforation line, a column for time, a column for duty, and a four-digit serial.
- **The compass rose** — drawn as a *hōi-ban* (Edo-period directional disc), with eight cardinal/inter-cardinal points labelled in tiny *kana* (北, 北東, 東 …) on the outer ring and English task-types (`reply`, `read`, `walk`, `eat`, `nap`, `draft`, `mail`, `wait`) on the inner ring.

**Decorative pattern beyond the cultural motifs:** the index column uses **leader dots** (·············) in DM Mono between each entry's title and time, exactly as in a 1968 NHK programme guide. The faint column rules of the underlying grid are drawn with **dot-dash hairlines** (4-1-1-1 rhythm) at 4% opacity, evoking a printed dispatch-form template.

**Illustration style:** every drawn element is a **single closed indigo path with no fill except for solid duotone** — no gradients, no soft shadows, no anti-aliased glow. Outlines are 1.25px at 100% scale. The total SVG payload across all illustrations is capped at ~24KB; this is intentional and aesthetic, not a performance concession.

## Prompts for Implementation

Build busygirl.bar as **one HTML file, one CSS file, one ES module, and a `tray/` directory of nine inline-or-linked SVG illustrations**. No framework, no bundler, no Lottie, no WebGL, no canvas, no analytics. Animation is CSS keyframes plus ~60 lines of vanilla JS for the dial motion and the slip perforation-tear.

**Document structure (semantic, no divs-only):**

```
<body>
  <main class="tray" role="main">
    <section class="tile marquee">    <!-- wordmark + verb + tetsubin + noren -->
    <section class="tile dial-a">     <!-- analog clock, teruterubōzu, hanko second-hand -->
    <section class="tile dial-b">     <!-- countdown, casio window, klee handwriting "due" -->
    <section class="tile index" data-idx="00..03"> ×4
    <section class="tile index-col"> <!-- timetable strip -->
    <aside  class="tile ribbon">     <!-- marquee scroll -->
    <section class="tile compass">    <!-- rotating hōi-ban disc -->
    <section class="tile slip">       <!-- reservation ticket -->
  </main>
  <div class="grain" aria-hidden="true"></div>
</body>
```

**The four narrative beats (the page tells one ninety-second story):**

1. **First paint.** Tray lays out instantly with a 240ms staggered cream-fill — each tile fades from 0% opacity to 100% in alphabetical order of its name (compass, dial-a, dial-b, index, index-col, marquee, ribbon, slip), 30ms apart. No movement, only ink-soak.
2. **Idle ambient.** Dials tick. Ribbon scrolls (continuous, 60s loop, infinite). The marquee verb cycles every 5.4s with a flip animation drawn on a 1px-tall vermilion underline that wipes left-to-right (using `clip-path: inset(0 100% 0 0)` → `inset(0 0 0 0)`). Teruterubōzu rotates ±0.3° on its thread. Grain breathes.
3. **First interaction.** Hover any of the four `INDEX-N` tiles — the tile **flips on the X-axis** (`transform: rotateX(180deg)`, 480ms cubic-bezier(.7,.0,.3,1)). Front face shows the index number and label; back face shows three tiny illustrated tasks in the duotone. Card-flip is 10% in the registry — used here at the discipline-level of a Crouwel grid, not as gimmick: every flip is exactly the same motion, exactly the same duration. **Only one tile may be flipped at a time** — flipping a second tile flips the first one back first, then flips the new one. This is enforced by JS (a single `data-flipped` attribute on `<main>`).
4. **The final beat — the slip.** The reservation slip displays a generated 4-character ID computed from `Date.now()` mod a small base-36 alphabet, plus a time-stamp 4 minutes in the future. On click, the slip animates a **perforation tear** (a clip-path inset transitions left-to-right along the perforation line, with a paper-fibre SVG mask appearing along the tear edge), and the slip detaches from the grid, falling 18px while rotating -1.5deg, with a 200ms duration. The empty slot reveals a hand-written Klee One sentence beneath in indigo: *"see you at the counter."* This is the only persistent state on the page; once torn, the slip stays torn until reload.

**Storytelling notes for the implementer:**

- **The dashboard never lies.** Every clock is real time. The countdown actually counts down. The ribbon really cycles. There are no fake numbers, no placeholder Lorem. If a tile cannot be authentically populated, the tile is blank.
- **Silence is composed.** The intervals between animations are the design. Do not chain animations into a continuous performance. The dials tick, the ribbon scrolls, *everything else holds still*. When the visitor moves their cursor, **only the immediate target tile reacts** — there is no global cursor-follow effect, no magnetic hover, no parallax. Cursor-follow is at 70% in the registry. busygirl.bar refuses it entirely.
- **The grid is the protagonist.** Resist the temptation to break the grid for emphasis. The avant-garde claim is paid by the *uniformity* of the bento, not by exceptions.
- **Compass interaction.** Click rotates the compass disc to that direction in 600ms ease-out, and the marquee verb above re-binds to that direction's task-type. Compass direction is a single source of truth for the marquee.
- **Reduced motion.** When `prefers-reduced-motion: reduce`, the dials tick once per second instead of once per second-with-easing, the ribbon stops, the grain stops breathing, the compass jumps to its target rotation, and the card-flip becomes an instant cross-fade. The slip-tear becomes a 60ms fade-out.
- **Mobile reflow.** Below 720px, the tray collapses into a single vertical column. Tile order is preserved. Dial sizes shrink to 64% of desktop. The ribbon detaches from the bottom of the tray and floats fixed at the bottom of the viewport.

**AVOID — explicit no-list:**
- No CTA-heavy hero. No pricing block. No stat-grid (no "10,000+ users" tiles). No testimonials. No FAQ. No newsletter signup. No "trusted by" logo bar. No social-proof.
- No light/dark toggle. The site is one mode. Cream paper, two inks.
- No hero photograph. No founder portrait. No abstract product mockup.
- No skeleton-loading state — the page is small enough to paint instantly; loading skeletons would betray the bento-tray illusion.
- No glassmorphism. No gradient mesh. No 3D render. No bokeh.
- No emoji.
- No "made with love." No copyright footer. The grid is the signature.

## Uniqueness Notes

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

1. **avant-garde aesthetic at 3% in the registry**, used here with **disciplined Swiss-Showa restraint** rather than the more typical avant-garde signal of broken-grid / anti-design / collage-noise. busygirl.bar's avant-garde claim is paid by *uniformity in service of strangeness* — the bento tray is rigorously regular, but the things on it (a Casio watch in a clock bezel, a teruterubōzu on a thread, a compass that drives a verb) are quietly off.
2. **dashboard layout (24%) inverted from its default crypto/saas/dark-mode habitat.** Every other dashboard in the registry leans on neon-on-black, live data, sidebar nav, and stat-cards. busygirl.bar uses the dashboard form on cream paper with no live data, no sidebar, and no stats — purely for its grid-discipline and tile-rhythm.
3. **retro-display typography (6%)** specifically routed through `Big Shoulders Display` instead of the more common `Bebas` / `Anton` / `Oswald` retro-display picks. Big Shoulders' US-WPA-poster pedigree is recontextualised as 1972 Japanese-poster ghost.
4. **duotone palette (23%) used as a *system*, not as a photographic filter.** Every other duotone in the registry is paired with `duotone-photo`. busygirl.bar applies duotone to type, illustration, grid hairlines, and ink simultaneously, with no photographic content at all.
5. **card-flip pattern (10%) used at exactly four tiles, with single-tile-at-a-time discipline.** No other registry use of card-flip enforces a "one flipped tile maximum" rule. Here, card-flip becomes an *aperture* metaphor, not a hover-cute.
6. **grain-overlay imagery (6%) applied as a *breathing* multiplied texture**, not a static noise. The 14-second sine modulation of grain opacity is intentional — the page reads as paper sitting under a flickering desk lamp.
7. **cultural motifs (5%) used as illustrative *vocabulary*, not as ornament.** The hanko, tetsubin, teruterubōzu, hōi-ban, kissaten reservation slip, and seigaiha pattern are not decorative flourishes — they are the *only* illustrations on the page, replacing the generic icon-set entirely.
8. **minimal tone (rare as a tone classification) defined as silence between elements**, not as "less stuff." The site is *full* — eleven tiles, eight motifs, three fonts — but every label is one line, every interaction is one motion, and there is no marketing copy at all. Minimal here is *editorial discipline*, not visual emptiness.
9. **AVOIDED registry-overused patterns:** parallax (93%), spring (73%), stagger (73%, used only for first-paint ink-soak), cursor-follow (70%, refused entirely), magnetic (57%), full-bleed layout (88%, refused — the tray sits in cream margins), gradient palette (95%, refused — strict duotone), photography imagery (97%, refused — illustration only), warm palette (94%, refused — cream + indigo + vermilion is *cool* in tonal balance), mono typography (95%, used only for labels, not for display).
10. **AVOIDED CTA / commerce furniture:** no hero, no pricing, no testimonials, no stat-grid, no learn-more, no signup, no logo bar, no FAQ, no footer. The slip is the only "action" and it cannot be submitted — only torn.
11. **The ninety-second-story posture.** The site does not sell, onboard, or convert. It performs *being mid-shift*. The visitor is a passing colleague, not a prospect. Chosen seed: **aesthetic: avant-garde, layout: dashboard, typography: retro-display, palette: duotone, patterns: card-flip, imagery: grain-overlay, motifs: cultural, tone: minimal.**
<!-- DESIGN STAMP
  timestamp: 2026-05-09T11:14:21
  domain: busygirl.bar
  seed: defaults:
  aesthetic: busygirl.bar is **an avant-garde bento-tray dispatch desk** — imagine the person...
  content_hash: 67d70245bcb7
-->