# Design Language for muhan.ai ## Aesthetics and Tone muhan.ai (무한 — Korean for *infinite*, *boundless*, *without limit*) is the digital atelier of a scholar-aesthete who spent a decade cataloguing illuminated manuscripts in the Bodleian and then disappeared into an AI research lab. The site does not announce this story — it *embodies* it. The aesthetic is **dark academia recast as opulent revelation**: the reading room of an institution that does not admit the public, where the leather is tobacco-brown, the lamplight is amber, the shelves go up further than anyone has ever counted, and the knowledge inside them is simultaneously ancient and terrifyingly advanced. The mood draws from: **Oxbridge common-room gravitas** (dark panelling, hand-tooled bindings, candle-wax drips on oak), **Ottoman illuminated manuscript tradition** (obsidian backgrounds with micro-pattern gold fill, geometric interlace at every margin), and the **material warmth of earth itself** — raw ochre clay, dried umber ink, the red-brown of iron gall on vellum. This is not the dark-academia of Instagram — it has no candles, no sweaters, no autumn leaves. It is *older* and *stranger*: the dark of a scholar's study at 3 a.m., where the only light is the screen and the lamp, and the stakes are cosmological. The tone is **opulent-grand** without being baroque: every element earns its richness through restraint. A single gold hexagonal motif in the margin is worth more than a field of gold noise. Typography does the heavy lifting of grandeur; ornamentation is structural, not decorative. **Interaction register:** slow, deliberate, weighted. Transitions feel like turning a heavy folio page — a momentary resistance followed by a smooth reveal. Hover states feel like running a fingertip along gilt page edges. The entire site reads at the pace of a reader who intends to remember what they read. ## Layout Motifs and Structure The structural metaphor is the **honeycomb of knowledge cells** — an ancient metaphor for memory, inherited from the *ars memorativa* tradition — rendered as an actual hexagonal-honeycomb grid that organises every content module on the page. The grid is not decorative; it is the *architecture*. Every content block, every image, every pull-quote lives inside a hexagonal cell or a cluster of merged cells. The cells tile edge-to-edge with a 2px `#4a3728` border gap that glows faintly amber on hover. **Desktop layout (≥1200px):** A full-viewport entry scene: one enormous merged hexagonal cluster (six cells fused) holding the site's name and primary statement, set against a deep umber background with a faint watercolour ripple wash visible through the hex grid. To the right, a vertical column of smaller hex cells shows the navigation. The hex grid extends in all directions but is clipped at viewport edges, implying infinite extension — the *muhan* (boundless) idea made spatial. **Scroll behaviour:** the page does not paginate. It scrolls as one continuous vertical surface. As the user scrolls, the hex-grid backdrop shifts at 0.4× parallax speed — the cells never stop, they just move behind the content, creating the sensation of moving through an infinite library. Individual content clusters snap into view with a `clip-path: polygon(hexagon)` reveal animation as they enter the viewport. **Section architecture (top to bottom, one continuous scroll):** 1. **Chamber I — The Threshold.** Full-viewport hex-cluster entry. Domain name `muhan` in enormous grotesque-neo, a single line in Korean `무한` directly below at 40% opacity. Background: deep umber with a watercolour-wash noise texture. 2. **Chamber II — The Proposition.** Three medium hex cells in a triangle: what muhan.ai *is*, stated in one dense, precise paragraph per cell. No bullet points. 3. **Chamber III — The Work.** A large merged hex cluster (seven cells) holding a case study or primary artefact, with a watercolour wash as the background fill of the cluster. 4. **Chamber IV — The Index.** A honeycomb of small cells (24+) arranged in a dense grid, each holding one concept, one word, one node — a visual index of the domain. Clicking a cell ripples its neighbours. 5. **Chamber V — The Colophon.** Two cells: one holding contact information, one holding a closing statement. Set in small-caps grotesque at a reduced weight. **Mobile (≤768px):** hexagons reflow to a single-column ribbon of stacked lozenges, maintaining the hex-clipped aesthetic on all images and text blocks. The parallax backdrop is disabled; the watercolour texture remains. ## Typography and Palette **Typography (Google Fonts only):** - **Primary Display — [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk)**, weights 300–700. The headline voice — a grotesque with idiosyncratic details (the single-storey `a`, the slightly-flared terminals on `f` and `r`) that read as *contemporary but eccentric*, the typographic equivalent of a scholar who keeps notes in three languages on the same page. Set at 10–18vw for Chamber I, tightly tracked at -0.04em. - **Secondary Display — [DM Serif Display](https://fonts.google.com/specimen/DM+Serif+Display)**, weight 400 italic. Used exclusively for pull-quotes, chapter headings set in the hex cell headers, and the Korean `무한` subtitle. The contrast between DM Serif's high-contrast ink traps and Space Grotesk's even strokes enacts the site's core duality: ancient scholarship, machine intelligence. - **Body — [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk)**, weight 300–400, 16–18px, line-height 1.72. The same family throughout preserves unity; the weight differential (300 body vs 700 display) creates a six-stop dynamic range within one typeface. - **Monospace accent — [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)**, weight 400, used only for data labels, timestamps, and the hex-cell index entries. Set at 11px uppercase with 0.15em letter-spacing. This is the only concession to the AI/tech context — a single voice that says *the machine is also in this room*. **Palette:** ``` --umber-deep: #1c120b /* base background — darkest earth */ --umber-mid: #2e1c0f /* hex cell background */ --umber-surface: #3d2515 /* card surface, elevated cells */ --ochre-gold: #c8832a /* primary accent — illumination gold */ --ochre-warm: #e0a84a /* hover state, glow edges */ --vellum-cream: #f0e6d0 /* primary text on dark surfaces */ --vellum-faint: #c4aa88 /* secondary text, captions */ --iron-gall: #5c3d28 /* hex border, dividers */ --terracotta: #8b4a2a /* active states, strong accents */ --wash-sienna: #9e6040 /* watercolour wash tint base */ --shadow-ink: #0d0806 /* deepest shadow, text drop shadows */ ``` The palette is a **geological cross-section** through layered earth: volcanic dark base, ochre clay surface, pale vellum light. Every colour is a material found in a scholar's studio — umber pigment, iron-gall ink, ochre tempera, vellum parchment, beeswax candle. No synthetic colours; no blues, purples, or greys that reference screens or sky. ## Imagery and Motifs **The watercolour wash system:** Every hexagonal cell that acts as a background container carries a unique watercolour wash — not a photograph, not a flat colour, but a procedural SVG watercolour simulation using `feTurbulence` + `feColorMatrix` + `feBlend` filters in the colour range of `--wash-sienna` to `--ochre-warm`, painted over the `--umber-mid` ground. The washes are different on every cell: cell 1 might be a pale sienna bloom, cell 2 a darker terracotta tide. No two cells are identical. The overall effect is the look of handmade marbled endpapers — the traditional watercolour decoration that lines the inside covers of leather-bound books. **The ripple pattern:** used exclusively as a *state indicator*, not wallpaper. When a hex cell is hovered, a CSS `clip-path` ripple expands outward from the cursor point through the honeycomb — each adjacent cell receives the ripple 80ms later, each second-ring cell 160ms later, the ring fading in opacity by 0.3 per ring. The ripple is drawn in `--ochre-gold` at 15% opacity. This is the *only* use of ripple; it is interaction-native, not decorative. **Book-scholarly motifs:** - **Running marginalia:** a 40px-wide column on the right edge of every desktop view carries micro-annotations in JetBrains Mono, 10px, `--vellum-faint` — page numbers in the academic style (§ II.iii), brief cross-reference notes, dates in the form `MMXXVI`. These are purely typographic, not interactive. - **Section ornaments:** between chambers, a single hexagonal rosette in `--ochre-gold` at 24px acts as a chapter ornament — derived from Islamic geometric interlace, it reads simultaneously as a hex cell and a scholarly section marker. - **Colophon mark:** at the foot of the page, a hand-drawn-style colophon glyph rendered in inline SVG — a hexagonal seal with `無限` inside it, styled as if stamped in red lacquer seal paste (`--terracotta`), but drawn with subtle SVG filter imperfection. - **Gold hex grid overlay:** a persistent full-page `position: fixed` SVG hex grid at 3% opacity in `--ochre-gold` — visible as a barely-there structure behind all content, like the ruled lines showing through a page in raking light. **Iconography:** no icon library. All UI indicators are typographic or geometric: arrows are `→` in Space Grotesk 300; close states are `×`; the only "icon" is the colophon seal described above. ## Prompts for Implementation Treat muhan.ai as a **single illuminated scroll** that opens from darkness and deepens as it unfolds — each chamber is a new folio in a manuscript that is also a machine. The user is a scholar who has been granted access; the page reveals itself slowly, as if the ink is still drying. **Technical architecture:** 1. **Hex grid engine:** implement the honeycomb using CSS `clip-path: polygon()` on `
` elements — NOT SVG ``. The clip-path approach allows normal HTML content (text, images, nested elements) inside each cell. Define a `--hex-size` CSS custom property (default: 180px apothem); cells are positioned with the flat-top orientation formula: `x = col * hex-width * 0.75`, `y = row * hex-height + (col % 2) * hex-height / 2`. Use a CSS Grid or `position: absolute` layout; prefer absolute for animation flexibility. 2. **Hex cell clip-path:** ```css --hex-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); clip-path: var(--hex-clip); ``` Merged cells (multi-cell clusters) use a custom polygon path that traces the outer boundary of the merged region. 3. **Watercolour SVG filter (per cell):** ```svg ``` Each cell gets a unique `seed` value (1–48). The `feColorMatrix` values shift slightly per cell to vary between sienna, ochre, and terracotta ranges. 4. **Ripple propagation (JavaScript):** ```javascript // On hex cell mouseenter, find all cells and their graph distance from hovered cell // Apply ripple class with delay: distance * 80ms // Ripple class: CSS custom property --ripple-opacity: calc(1 - (var(--ring) * 0.3)) // Transitions: box-shadow inset 0 0 0 2px rgba(200, 131, 42, var(--ripple-opacity)) ``` 5. **Parallax backdrop:** the persistent gold hex grid overlay (`position: fixed`, `z-index: 0`) transforms on `scroll` via `transform: translateY(calc(scrollY * -0.4px))` — use `requestAnimationFrame` with a passive scroll listener. The backdrop moves at 40% scroll speed, creating depth separation from fixed content. 6. **Entry animation sequence:** - `0ms`: page background fades from `#000000` to `--umber-deep` over 800ms - `600ms`: the hex grid overlay fades in at 3% opacity over 600ms - `1000ms`: Chamber I hex cluster's cells reveal in sequence: cell 1 (centre) clips in with `clip-path` scale from 0→100% over 500ms, cells 2–7 follow at 80ms stagger - `1800ms`: the domain name `muhan` types in — NOT a typewriter effect, but a weight-transition: each letter fades from weight 100 to weight 700 over 300ms in sequence, 40ms apart - `2200ms`: the Korean subtitle `무한` fades in at 40% opacity, 400ms ease-in 7. **Scroll-reveal for chambers:** use `IntersectionObserver` with `threshold: 0.15`. When a hex cluster enters the viewport, its cells reveal in clockwise spiral order from the cluster's topmost cell, each with a 60ms stagger and a `clip-path` inward-to-outward expand. 8. **Marginalia system:** the right-edge annotation column is a `position: sticky` element inside each chamber. As the user scrolls through a chamber, the marginalia content updates via `IntersectionObserver` to show chamber-relevant annotations. The transition between annotation sets is a slow `opacity: 0 → 1` over 400ms. 9. **Typography sizing system:** ```css --type-display: clamp(4rem, 12vw, 10rem); /* Chamber I domain name */ --type-hero: clamp(2rem, 5vw, 4.5rem); /* Chamber II cell headlines */ --type-body: clamp(0.9rem, 1.1vw, 1.125rem); /* Body text */ --type-mono: 0.6875rem; /* Marginalia, JetBrains Mono */ ``` 10. **No JavaScript frameworks.** Vanilla JS only. No React, no Vue, no build system dependency. The page must be a single `index.html` with inline `