# Design Language for tanso.bar ## Aesthetics and Tone tanso.bar is a **subterranean carbon-cellar** — a hushed, lacquered counter-room dedicated to the element 炭素 (*tanso*, carbon, atomic number 6), where the same six protons rearrange themselves into six different "pours": diamond, graphite, graphene, fullerene, glassy carbon, and lampblack soot. The aesthetic is **art-deco** rendered not in the usual champagne-and-brass of a 1925 Parisian ballroom, but in **graphite-on-obsidian** — the deco vocabulary (sunburst fans, ziggurat stepping, faceted chevrons, mirror symmetry, hairline metal inlay) executed entirely in degrees of *black*: soot black, anthracite, gunmetal, with a single cut-diamond glint that behaves like the one light in a cellar catching a stone. The tone is **elegant-sophisticated** and faintly **mysterious-moody** — the voice of a curator-bartender who speaks in low sentences, never upsells, and treats each allotrope the way a sommelier treats a vintage: provenance, structure, "mouthfeel," what it does to light. Nothing here is cheerful; nothing here is loud. It is the calm of a vault. Carbon is described as "the only element that learned to be both the hardest thing and the softest thing," and the whole site is built to let that sentence land. There is **no cocktail menu in the bar-equals-pub sense** — `.bar` here is the *element bar*, the periodic-table cell, the counter where matter is served by structure rather than flavour. ## Layout Motifs and Structure The site is a **single vertical descent of six "cells"** — one per allotrope — staged as a **layered-depth** stack of black-on-black deco panels, each panel a stepped ziggurat frame (the classic deco "skyscraper" silhouette, but laid on its side as a doorway you pass through). Layout category note: **layered-depth (13%)** and **stacked-sections (2%)** are deliberately chosen over the corpus-saturated card-grid (92%) and centered (80%); there is **no card grid anywhere**, no bento, no dashboard. Navigation is a **minimal-navigation (5%)** left-margin "assay rail": six tiny hexagonal carbon-ring glyphs stacked vertically, the active one inlaid with a single diamond point of light. No top nav, no hamburger, no logo lockup, no sticky header, no footer nav — the wordmark `tanso.bar` appears once, hairline-engraved into the very first panel's deco frame, and never again. Each cell is a **mirror-symmetric deco composition**: a central vertical axis with a faceted sunburst or fan radiating from it, the allotrope's molecular structure drawn as the "centerpiece" inside the fan, and the curator's tasting note set in a narrow column running *down* the central axis (text as the spine of the symmetry, not beside it). Between cells, a **full-bleed** transition band the colour of pure soot, in which the previous allotrope's lattice visibly *re-bonds* into the next (diamond's tetrahedra collapsing into graphite's sheets, sheets rolling into nanotubes, tubes closing into a buckyball). The overall page proportion is tall and **narrow** — max content width 760px, generous black margins left and right like the unlit edges of a cellar — so the experience reads as a *core sample* drilled straight down through six forms of one element. ## Typography and Palette **Fonts (Google Fonts only):** - **`Poiret One`** — the deco display face, used only for the six allotrope names ("DIAMOND", "GRAPHITE", "GRAPHENE", "FULLERENE", "GLASSY CARBON", "LAMPBLACK") and the engraved wordmark. Poiret One is a geometric deco sans with hairline strokes, perfect circles, and elongated ascenders — it *is* the 1920s "skyscraper" letter, and at near-zero presence in the corpus it carries the whole period signal alone. Set at huge sizes (clamp 3rem–7rem), letter-spacing `0.18em`, in gunmetal with a 0.5px diamond-white inner hairline. - **`Cormorant Garamond`** (weights 300/400, italic available) — the curator's tasting notes, the prose spine running down each axis. A high-contrast old-style serif: it gives the writing the gravity of a wine ledger and the deco-era affection for refined book faces. Body 1.0625rem, line-height 1.85, colour `#9A9CA0` (graphite-grey) on near-black, italics for the "structure" lines. - **`Space Mono`** — micro-data only: atomic number "6", the Mohs hardness figures, lattice parameters, the panel indices "I / II / III / IV / V / VI" on the assay rail. Tiny (0.6875rem), letter-spacing `0.22em`, uppercase, in `#5C5E62`. (Space Mono is the *only* mono use and it is confined to numerals — a deliberate counter to the 94% mono-everywhere corpus convention.) **Palette — graphite-on-obsidian, near-monochrome (monochrome at 16%, chosen over the 98% warm corpus default):** - `#08080A` — soot black, the page ground and transition bands. - `#121317` — anthracite, raised panel surfaces. - `#1E2024` — gunmetal, the stepped deco frames and inlay channels. - `#2C2E33` — coke-grey, secondary frame lines and the molecular lattice strokes at rest. - `#5C5E62` — ash-grey, micro-mono data. - `#9A9CA0` — graphite-grey, the Cormorant prose. - `#E9EAEE` — diamond white, used *only* as a hairline highlight and the single travelling glint (never as a fill area). - `#3B6E63` — cellar-malachite, the lone chromatic accent, used at perhaps 2% coverage: the active assay-ring inlay and the "this pour" underline. (A muted desaturated green — the colour of old verdigris on a brass cellar fitting — never a neon, never warm.) No gradients except a single radial "lamp" glow (`#1E2024` → `#08080A`) behind each centerpiece. No warm tone anywhere. No pure white backgrounds. No second bright colour. ## Imagery and Motifs **Imagery is entirely custom SVG line-and-facet work — no photography (countering the 98% photography corpus), no 3D render, no stock, no raster, no AI image.** Everything is drawn in the same hand: hairline gunmetal strokes on soot, deco-faceted, mirror-symmetric. **The six centerpieces (each is the cell's hero in turn):** 1. **DIAMOND** — a tetrahedral carbon lattice drawn as an art-deco *sunburst fan*: bonds become the radiating rays, carbon atoms become tiny faceted lozenges. A single diamond-white glint travels along one ray on scroll. Mohs 10 set in Space Mono at the fan's hub. 2. **GRAPHITE** — stacked hexagonal sheets shown edge-on as a deco *ziggurat* of parallel planes, each plane sliding a few pixels on hover (graphite's cleavage made literal). Drawn in coke-grey, the topmost sheet lifting away like a card off a deck. 3. **GRAPHENE** — one perfect honeycomb sheet, rendered as a deco *radial grille* (think the iron grilles of a 1930s elevator), so thin it is labelled "one atom" — the sheet tilts in faux-perspective so its far edge dissolves into a single hairline. 4. **FULLERENE** — a buckminsterfullerene C₆₀ drawn as a deco *rosette*: pentagons and hexagons arranged into a perfectly symmetric medallion, like a stained-deco ceiling boss. It rotates with a slow elastic ease. 5. **GLASSY CARBON** — an amorphous tangled-ribbon structure tamed into a deco *interlace knot* (Celtic-by-way-of-deco), all curves, no straight bonds — the "soft" counterpoint to diamond's rigour. 6. **LAMPBLACK** — pure soot: a deco *sunburst rendered in negative*, rays of slightly-less-black radiating from a void, with a fine particle drift (12–16 tiny dots) settling under gravity. The plainest, humblest carbon, given the same deco dignity. **Recurring deco motifs:** stepped ziggurat frames (sharp-angles at 6%, layered-depth at 13%); hairline metal inlay channels between every panel; a mirror axis down the center of every composition; the carbon hexagon used as the only "icon" shape (assay rail, bullets, transition seams); a single travelling diamond glint that is the *only* moving bright thing on the entire page. **No floating blobs, no organic-blobs, no grain overlay, no glass cards, no neon glow.** ## Prompts for Implementation Build tanso.bar as **one HTML file, one CSS file, one ES module, and a single `lattices/` directory of SVG centerpieces** — no framework, no bundler, no build step, no service worker, no canvas, no WebGL, no Lottie. **Document structure:** ```