# Design Language for simai.day
## Aesthetics and Tone
simai.day is **a Noh stage rendered as a webpage — and the page performs a *shimai***. 仕舞 (*shimai*) is the stripped-bare solo dance of Noh theatre: no mask, no costume, no orchestra, just a single figure in plain *montsuki* hakama tracing the essential gestures of a play on a bare cypress floor. The word also reads 仕舞い — "the closing, the putting-away, the end of the day's work." simai.day holds both meanings at once: it is *the closing dance of the day*. The simulation-AI reading ("sim AI") is folded in quietly underneath — the page treats itself as a *simulated* performance, a stage that knows it is empty, a dancer that is only ink and timing.
The tone is **zen-contemplative crossed with the held-breath formality of a Noh recital hall** — *jo-ha-kyū*: slow beginning, gathering middle, sudden swift end. Everything is unhurried, ceremonial, and almost silent. Pale unbleached *kinari* paper, a single Hosho-school cypress floor in the warmest possible gray-beige, and the deep persimmon-black of an old *kakemono* scroll. No glassmorphism (84% of the corpus — refused). No hand-drawn doodles (94% — refused). No photography (98% — refused). The only "image" is negative space, a brushed circle, and the geometry of an actual Noh stage seen from above. The mood: you have entered a recital hall ten minutes before the *shite* walks the bridge, and the page is the breath you take while you wait.
## Layout Motifs and Structure
The governing structure is **the Noh stage plan, drawn to its real proportions, used as the page's grid** — a layout in the **ma-negative-space** family (17% of the corpus) and **single-column** by gravity (17%), never a card-grid (92% — refused), never a hero-and-sections marketing skeleton, never a dashboard.
- **The honbutai (本舞台).** A real Noh main stage is a near-perfect ~5.4m square of cypress. simai.day reproduces it: a single `aspect-ratio: 1` square, centred, occupying ~62% of the viewport's smaller dimension, floated in a sea of *kinari* margin. All primary content lives *inside* this square. The square is the page's only "container."
- **The four pillars (柱).** A Noh stage has four named pillars at the square's corners — *shitebashira*, *metsukebashira* (the "gazing pillar"), *wakibashira*, *fuebashira*. simai.day marks each corner with a thin vertical rule and a tiny vertical-set kanji label. Section anchors live at the pillars: the reader's eye, like the masked *shite*'s, navigates by pillar.
- **The hashigakari (橋掛り).** The bridgeway — in a real stage a railed gangway entering from stage-left at a slight angle, lined with three small live pines (*ichi-no-matsu, ni-no-matsu, san-no-matsu*). Here it is a diagonal corridor entering the top-left of the viewport at exactly 9°, carrying the page's nav and the "entrance" of each new section. Content *walks in along the hashigakari* before settling on the honbutai.
- **The kagami-ita (鏡板).** The back wall of every Noh stage carries one painting and only one: the *Yōgō no matsu*, the ancient pine. simai.day's footer is the kagami-ita — a wide low band holding a single CSS-drawn pine silhouette and nothing else.
- **The kamae stance.** Vertical rhythm follows the dancer's *kamae* (the slightly-crouched ready posture): content blocks are set with a low, wide, grounded feel — generous leading, short measure (~30em max), nothing tall and thin. Scroll is *suri-ashi* — the gliding Noh walk — meaning the page advances in slow, even, floor-skimming increments, never in jolts.
The overall reading order traces a single *shimai* dance: enter on the hashigakari → cross to the *jōza* (the "constant position", upstage by the gazing-pillar) → a slow circuit of the four pillars → a still center → exit. One column, one square, one breath.
## Typography and Palette
**Fonts — Google Fonts only, verified available.**
- **Shippori Mincho** (weights 400, 500, 600, 700, 800) — the primary voice. A Japanese *mincho* (the Far-Eastern serif: thin horizontals, triangular *uroko* serifs, the printed-sutra texture) with a fully matched Latin companion, designed to evoke early-Shōwa letterpress. This is the ink of the *utaibon* (Noh chant-libretto books). Display headings at 700/800; body Latin at 400. Sits in the **elegant-serif / serif-revival** territory (7% / 17% — uncommon against the corpus's 94% mono).
- **Zen Antique** (weight 400) — used *only* for the four pillar-labels and the single largest title ("simai"). A retro Japanese serif modelled on antique sign-painting and old book covers — slightly worn, slightly irregular, with a strong calligraphic memory. It is the brushed *kanban* of the recital hall.
- **Zen Kaku Gothic New** (weights 300, 400, 500) — the *one* sans, reserved for the smallest functional text: timestamps, the program-note captions, the hashigakari nav links. A humanist Japanese gothic that recedes; it never competes with the mincho.
No monospace anywhere — a deliberate refusal of the corpus's 94%-mono default. Type is set ranged-left with occasional **vertical (tategaki) runs** for the pillar labels and the section's *jo-ha-kyū* markers.
**Palette — the eight inks of a bare Noh stage:**
- `#EAE3D2` — **Kinari** (unbleached cotton). The page ground; the colour of the *montsuki* under-robe and of cheap recital-hall paper.
- `#F4EFE2` — **Hosho** (the lightest cypress, raked floorboards in stage light). Used inside the honbutai square, a half-tone above the margin.
- `#1C1814` — **Sumi-kuro** (sutra ink, near-black with a warm undertone). Body text, the pillar rules, the pine silhouette.
- `#3A332A` — **Kobushi-zumi** (faded ink, the colour of an old *utaibon*'s text after a century). Secondary text, captions, the hashigakari rail.
- `#9C3B22` — **Beni-aka / akodama persimmon** — the single accent. The colour of a *kakemono*'s mounting silk and of the Hinoki-stage support posts. Used *once or twice per screen at most*: the title's seal, the active pillar, the *kamae* underline.
- `#C9B98F` — **Kincha** (weak gold-tea). The pine's needles when the back wall catches lamplight; hairline dividers; the *jōza* marker dot.
- `#6E6450` — **Rikyū-nezu** (the muted olive-gray of a tea-house wall). Tertiary lines, the diagonal hashigakari fill at very low opacity.
- `#D8CFB8` — **Shironeri** (lightly-fulled silk) — used only as the *ma* itself: the breathing tint behind blocks that need to lift a hair off the kinari.
High contrast lives only between Sumi-kuro and Kinari; everything else is whispered. The persimmon is rationed like stage blood.
## Imagery and Motifs
**No photography. No 3D render. No stock texture. No icon library. No Lottie. No gradient mesh.** Imagery here is geometry, ink, and emptiness — every visual is hand-rolled SVG or CSS.
1. **The stage plan itself.** A precise top-down line drawing of a Noh stage — the square *honbutai*, the angled *hashigakari* with its three pine-dots, the *kirido* (the low "hurry door" upstage-left), the *jōza* and *metsuke-bashira* positions — rendered as 1.25px Sumi-kuro strokes on Hosho. It appears full-bleed once, faintly, behind the whole page, and again as a tiny "you-are-here" diagram in the corner that lights the active pillar in persimmon as you scroll.
2. **The ensō-adjacent brushed ring.** Not a perfect *ensō* (that would be cliché) — instead a *single hard horizontal brush-sweep*, a flat ink bar with a dry-brush ragged trailing edge (CSS `mask` on a hand-tuned SVG), used as the divider between dance-sections. It is the stamp of the floor under a stomping foot (*hyōshi*).
3. **The Yōgō no matsu — the one pine.** A flat black silhouette of a wind-bent old pine, drawn as a single SVG path, occupying the footer's *kagami-ita* band. The needles are the only place Kincha appears in quantity. It does not animate except for the faintest sway (≤3px, ~14s ease-in-out).
4. **The fan (扇).** The *shimai* dancer's only prop. A closed/half-open folding-fan glyph — a thin SVG arc of radial ribs — marks "the gesture": it sits beside the page's single most important line and slowly *opens* (the ribs fan out over ~1.2s) when that line enters the viewport. Used exactly once.
5. **Tategaki marginalia.** Down the right pillar runs a vertical column of tiny kanji marking the *jo-ha-kyū* phase of the current section — 序 (jo, the slow entry), 破 (ha, the break/development), 急 (kyū, the swift close) — the active one in persimmon, the others in Kobushi-zumi.
6. **Suri-ashi rules.** Horizontal hairlines are never solid: they are a row of very fine evenly-spaced dashes, like the seam between two cypress boards seen from the gallery — the floor the foot glides along.
## Prompts for Implementation
Build simai.day as **one static HTML document, one CSS file, one small ES module, one inline SVG sprite (the stage-plan, the pine, the fan-ribs, the dry-brush bar, the three jo-ha-kyū kanji), and one favicon SVG (a single persimmon brush-bar on kinari)**. No framework. No bundler. No raster images. No canvas, no WebGL, no video. No analytics, no service worker, no router. The page is **a recital: rendered once, read straight down at the pace of a gliding foot.** AVOID CTA-stacks, pricing tables, stat-grids, testimonial carousels, feature cards — none of these belong on a Noh stage.
**Document skeleton:**
```
… faint full-page stage-plan SVG …
シテ柱目付柱ワキ柱笛柱 … "simai" in Zen Antique, persimmon seal, ".day" small … … … …
```
**The opening (jo).** The page loads on near-empty kinari: only the faint stage-plan and, after a held ~700ms beat, the word **simai** fades up at the *jōza* position (upstage, near the gazing-pillar) in Zen Antique at `clamp(56px, 11vw, 148px)`, Sumi-kuro, with a small persimmon brush-bar struck through the last stroke like a hanko. Below it, tiny Zen Kaku Gothic, Kobushi-zumi: a single line of program-note text — *"a closing dance for the day · 仕舞 / 仕舞い"*. Nothing else above the fold. The cursor, if it moves, leaves no trail — stillness is the point; the only cursor affordance is that the four pillar-labels grow ~6% and warm toward persimmon on hover (a slow `spring`, ~280ms).
**Scroll = suri-ashi.** Bind scroll progress to a `data-phase` attribute on `` that steps `jo → ha → kyū`. As it changes: the active kanji in the right-pillar `tategaki` column lights to persimmon (`underline-draw` of a 1px vertical rule beside it), the tiny corner stage-diagram lights the corresponding pillar, and the section's content slides in *along the hashigakari* — entering from the top-left at the 9° angle, decelerating to rest on the honbutai (`transform: translate()` + slight rotate that resolves to 0; `stagger` the child lines ~60ms each; `fade-reveal` paired). Motion is *floor-skimming*: short travel (≤40px), long ease (~900ms `cubic-bezier(.16,1,.3,1)`), nothing bouncy. Respect `prefers-reduced-motion` by removing all travel and keeping only opacity.
**The "gesture" (the one fan).** Somewhere in the *ha* act there is a single line that is the heart of the page — the page's actual thesis sentence. Beside it sits the closed-fan SVG. When that line crosses 60% viewport height, the fan ribs *open* over ~1.2s (`path-draw-svg` revealing each rib in sequence, slight `elastic` settle on the last), and the line itself gets a slow persimmon `underline-draw`. This is the only flourish on the entire site. It happens once. It does not repeat on re-scroll within the session.
**Dividers = the stomp.** Between acts, a full-measure dry-brush ink bar (`#1C1814`, ragged trailing edge via SVG `mask`) wipes across left-to-right over ~600ms when it enters view — the *hyōshi*, the floor-stomp that punctuates a phrase. Hairlines elsewhere are dashed cypress-seam rules; never solid.
**The close (kyū).** The final act is sudden after all the slowness — *kyū* means "swift." The last section's content enters faster (~450ms), the persimmon accent appears more freely, and then everything *settles to absolute stillness*: the page ends on a single centred line in Shippori Mincho — *"the day is put away."* — and below it, the footer *kagami-ita* with the lone wind-bent pine, swaying ≤3px on a ~14s loop. No CTA. No newsletter. No links farewell. The dancer has left along the bridge; the stage is bare again; the pine remains.
**Texture & finish.** A whisper of paper grain via a tiled SVG `feTurbulence` at ~3% opacity over the kinari ground — just enough to kill the digital flatness, never enough to read as "grunge." Type rendering: `text-rendering: optimizeLegibility`, generous `letter-spacing` on the Latin mincho (~0.01em), tight on the kanji. Everything aligns to an 8px baseline grid that itself echoes the cypress-board module of the floor.
## Uniqueness Notes
Differentiators this design commits to (other CMassC sites must not duplicate these):
1. **The real Noh stage plan as the literal layout grid.** The page is built on the actual proportions of a *honbutai* — square stage, 9°-angled *hashigakari* bridgeway with three pine-dots, four named corner pillars used as section anchors, the *kagami-ita* back-wall as footer with its single mandatory pine. No card-grid (92% of corpus), no dashboard, no hero-stack. Architecture-as-stage, not architecture-as-marketing-page.
2. **The double pun made structural: 仕舞 *shimai* (the bare solo Noh dance) ⊕ 仕舞い (the closing, the day's end) ⊕ "sim AI" (a simulated performance).** The whole site *is* a single *shimai* — enter on the bridge, circuit the pillars, a still center, a swift *kyū* close, exit — and "the day" is what's being danced and put away. The simulation reading stays a whisper. No other site in the corpus is a Noh recital.
3. **jo-ha-kyū as the scroll engine.** Scroll progress drives a three-phase `序 / 破 / 急` attribute that governs pacing itself — slow entries through *jo*, gathering *ha* with the single fan-opening "gesture," and a deliberately *faster* *kyū* close ending in absolute stillness on the lone pine. Pacing is the content.
4. **A near-monochrome warm-ink palette with persimmon rationed like stage blood.** Eight named inks of a bare cypress stage (Kinari `#EAE3D2`, Hosho `#F4EFE2`, Sumi-kuro `#1C1814`, Kobushi-zumi `#3A332A`, Beni-aka `#9C3B22`, Kincha `#C9B98F`, Rikyū-nezu `#6E6450`, Shironeri `#D8CFB8`) — and the persimmon accent is used at most once or twice per screen. Against a corpus that is 84% glassmorphism and 94% gradient, this is flat ink on unbleached paper.
5. **Typography refuses the corpus's 94%-mono reflex entirely.** Shippori Mincho + Zen Antique + Zen Kaku Gothic New — Far-Eastern *mincho* serif and antique sign-serif, with vertical *tategaki* runs for the pillar labels and phase markers. Zero monospace anywhere by deliberate choice.
6. **Exactly one flourish.** The folding-fan opening on the page's single thesis line — and that's it. No carousels, no parallax-heavy hero, no cursor-trail (89% of corpus has cursor-follow — refused), no tilt-3d cards (31% — refused). Stillness is treated as the primary expressive tool, and motion is hoarded for one moment.
**Chosen seed/style:** `japanese zen portfolio` (zen aesthetic ≈9%, japanese-minimal ≈3% — both well under-used in the corpus), interpreted as a Noh-theatre *shimai* recital rather than the usual rock-garden-and-bamboo zen treatment.
**Avoided patterns from the frequency analysis:** glassmorphism (84%), hand-drawn (94%), photography imagery (98%), card-grid layout (92%), warm-gradient palette (94%), mono typography (94%), cursor-follow (89%), parallax (89%), tilt-3d (31%) — refused or radically minimised in favour of ma-negative-space layout, single-column flow, elegant-serif/serif-revival type, a flat warm-ink monochrome, and motion held back to a single fan-opening gesture.