# Design Language for miko.day ## Aesthetics and Tone miko.day is a **cyberpunk** but pastel rainfall — a calm sub-orbital morning-after dashboard for a city that has already burned down its neon. The aesthetic borrows cyberpunk's HUD-overlay vocabulary, dense data-cell grids, and corner-bracket framing, but strips out the saturated chrome blues and acid magentas of the genre, replacing them with washed pastels: cherry-blossom pink on slate, mint on smoke, pale lavender data-trails. The tone is **minimal** — not minimalist in form (cyberpunk dashboards are by definition dense), but minimal in *voice*: short, clipped labels; no headlines longer than five words; no decorative copy. Inspiration draws from Ghost in the Shell: SAC's UI overlays softened to a Studio Ghibli sunrise, the geometric futurism of Vignelli's NYC subway map quietly merged with the data-dense panels of *Death Stranding*'s map screen, and Dieter Rams' calculator typography seen through a humid pink dawn. ## Layout Motifs and Structure The architecture is a true **dashboard** — a fixed full-viewport grid of 12 columns × 8 rows divided into seventeen tiles of varying span (1×1 up to 4×3). Each tile is bracketed by corner ticks (┌ ┐ └ ┘) drawn as four small SVG paths, never as a continuous box border. Tiles host: a system time readout, a "miko.day" identity glyph, an animated weather strip in 24-segment bars, a constellation map, an idle metrics panel, a low-fi waveform, a 7-day calendar, a footer line, an isometric "tower" diagram, and so on. The grid does not scroll — it is the entire screen, with content rotating in place via small in-tile state changes. A bottom command-bar runs full-width with monospace key hints (`/about`, `/quiet`, `/rain on`). The right-side rail holds a vertical 8-segment "load average" of nothing in particular — purely decorative system theater. Tiles use **stagger** entry on first load: each tile fades in with a 30ms-per-tile delay sweeping diagonally from top-left, like a console booting. ## Typography and Palette **Typography** is anchored in Futura PT (the **futura-geometric** brief): Futura PT Bold 11px tracked +180 uppercase for tile labels, Futura PT Book 13px for in-tile body, and Futura PT Heavy 32px for the "miko.day" identity tile. A secondary face, JetBrains Mono 11px, appears in numeric readouts and the command bar — pure terminal feel. Tabular figures are used everywhere a number could change so values never jitter. **Palette** is **pastel** but tuned to feel cyberpunk-at-dawn: - `#1B1D2A` — predawn graphite (page ground) - `#2A2E45` — secondary tile fill (slightly lifted) - `#F5C9D8` — sakura-soft pink (primary accent, active labels) - `#C7E9D9` — mint-vapor (secondary accent, ok-state) - `#D8C7F0` — pale lavender (data lines, hover glow) - `#FFF1B8` — sodium-pale yellow (warning, single-tile highlight) - `#7E8AA7` — twilight pewter (text label color, gridlines) - `#FFFFFF` — pure white (rare key value, ratio 1 to 30) This is cyberpunk with the saturation slider turned to 18%. ## Imagery and Motifs Imagery is built around **isometric-icons** — 30°/30° axonometric SVG illustrations rendered in 1.5px line-art with pastel accent fills. Recurring isometric pieces: a tiny three-tier pagoda standing in for "home", a satellite dish for "feed", a stack of three discs for "archive", a flower in a pot for "garden", a tilted radio tower for "signal", a low cube of cherry-tile data for "history". Each is sized 64×64 max and sits in the top-right of its host tile. **Bubble-playful** motifs (per planned seed) appear as small floating speech-bubble badges with a single character inside (e.g., `?`, `!`, a pixel-heart), used sparingly to soften the dashboard's industrial grid — they bob at 4-second intervals with a 4px vertical drift. No photographs anywhere. Decorative type-glyph motifs include the miko-stamp 巫 set in Futura's nearest analog (a custom outline), and pale lavender circuit-trace dividers. ## Prompts for Implementation Build a fixed full-viewport cyberpunk dashboard. Use CSS Grid: `grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(8, 1fr);` with `gap: 8px` and a 24px page padding. Each tile renders four corner-bracket SVGs (8×8px each, 1.5px stroke `#7E8AA7`) instead of a border, so the box appears "tagged" rather than framed. On initial load, **stagger** entry: each tile fades from `opacity: 0; transform: translateY(8px)` to identity, delayed by `calc(var(--tile-index) * 30ms)` for a diagonal sweep. Numbers in metrics tiles tick via a CSS counter and `@property --value` interpolation — small numerical churn, never wild. The bubble-playful badges bob via `animation: bob 4s ease-in-out infinite`. The bottom command-bar accepts keystrokes via a tiny JS handler that recognises a half-dozen commands and toggles tile states (`/rain on` triggers a 1px lavender diagonal-line rain animation across the whole grid at 0.6 opacity for 12s). Avoid CTA blocks, pricing menus, hero headlines, signup walls, testimonial rows — this is a dashboard, not a marketing surface. The "footer" is the bottom command-bar. ## Uniqueness Notes - **Differentiator 1:** Cyberpunk + pastel as a deliberate dampening of the genre — almost no design in the registry pairs `cyberpunk` aesthetic with `pastel` palette. - **Differentiator 2:** Tiles framed only by corner-bracket SVG ticks, never by borders — a tactile UI detail rarely seen elsewhere. - **Differentiator 3:** Imagery is 100% isometric vector icons; sidesteps the 89% photography saturation flagged by frequency. - **Differentiator 4:** Fixed-viewport dashboard with zero scroll — unusual against a registry of long-page scroll experiences. - **Differentiator 5:** A typed command-bar that mutates dashboard state — interactive theater of a calm cyberpunk OS, not a CTA. - Planned seed: aesthetic=cyberpunk, layout=dashboard, typography=futura-geometric, palette=pastel, patterns=stagger, imagery=isometric-icons, motifs=bubble-playful, tone=minimal. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.