# Design Language for bada.city ## Aesthetics and Tone bada.city is a **midnight foundry catalog from a city that doesn't quite exist yet** — a single editorial broadside printed on the inside of a candle-lit obsidian vitrine, where each artifact is photographed in **inflated-3d** and labeled like a catalogue raisonné from the year 2049. The conceit is precise and unusual: the **candle** is the sole light source in the entire site, but everything it illuminates is a **bulbous, helium-blown, latex-rubber-soft 3D sculpture** of a city object — a parking meter swollen until its display is a teardrop, a fire-hydrant inflated until its caps are pumpkins, a "WALK" pictogram puffed into a balloon-figure pilgrim. The mood is **futuristic-cutting-edge** but in the *quiet* register: not chrome-and-neon Blade Runner cutting-edge, but **gallery-late-at-night cutting-edge** — the deserted Saturday-2-AM hour at the design biennale when the docents have gone home and only the emergency exit candles are still lit. The tonal axis is exactly three notes: 1. **Stillness** — every animation is slow, viscous, latex-physics, with springs critically damped to feel like room-temperature silicone, not bouncy rubber. Nothing snaps; everything **eases as if through honey**. 2. **Heat** — a single candle flame lives in the upper left of every section, hand-rendered with **8-frame loop noise** so the flicker is visibly artisanal, not procedural. Its warm 1850K orange is the **only warm hue in the entire palette**, surrounded by sub-zero blacks. The candle is the visitor's anchor. 3. **Mass** — every "city" object is rendered as an **over-inflated 3D primitive** (booleaned spheres, lofted toruses, smooth-shaded with a single subsurface-scatter pass), implying weight, soft skin, and slight translucency where the candle hits the rear edge. Inspirations are **deliberately specific and slightly off-genre**: the catalog plates of *Object Lessons* by Dieter Roth, the inflatable typography of **Six N. Five** circa 2023, the candle-photography of Hiroshi Sugimoto's *Theaters* but reversed (lit instead of burned out), the blow-up urban-furniture renders of **Andrés Reisinger**, and the cursor-controlled lighting demos that **Bruno Simon's three.js portfolio** popularized — except here the cursor doesn't drive a car; it drives **the candle's hand**. The result is a site that feels like **a digital vitrine you have walked into alone, holding a single taper, examining inflated effigies of the city you live in**. ## Layout Motifs and Structure The structure is **editorial-flow** in the literal magazine-monograph sense: one continuous vertical scroll of seven *plates*, each plate a full-viewport spread with **asymmetric column logic**, hand-set kerning, and editorial captions running in the marginalia. There is no header, no nav bar, no hero CTA, no footer in the conventional sense — only the candle, the scroll, and the plates. **Spatial system — the "vitrine grid":** - The page is a single column **min(960px, 88vw)** centered, but inside that column an **asymmetric 12-track grid** runs underneath. Tracks are unequal — the leftmost three are narrow (caption gutter), tracks 4–10 are the **plate field** (where the inflated-3d artifact sits), and tracks 11–12 are the **specimen-label gutter** at the right. This is the layout of a *Domus* photo essay rotated for screens. - **Vertical rhythm is candle-paced**: every plate is `100svh` tall on desktop, with the artifact occupying roughly the middle 64% of vertical space and the caption nesting in the lower-left or lower-right specimen-label gutter, alternating plate by plate. - The **candle widget** is a position-fixed element pinned to the upper-left at `top: clamp(28px, 4vw, 48px); left: clamp(28px, 4vw, 48px);` — it persists across every plate and is the **only fixed element on the page**. As the visitor scrolls, the candle stays. It is the reading lamp. **Plate sequence (each one a full-viewport editorial spread):** 1. **Plate I — *Wordmark and Wick.*** A two-line wordmark "**bada / city**" set vertically in condensed typography, centered, rendered as if **carved into matte obsidian** with the candle's light raking across its bevels. Below the wordmark, one specimen line: *"a catalogue of inflated public objects, rendered after midnight, lit by hand."* 2. **Plate II — *Object 01: Hydrant Pneumatica.*** A latex-pink fire hydrant inflated until its body is a bulbous gourd. Caption in the right gutter, hand-set in 11pt condensed all-caps with a **fractional drop-cap "01"** flush left. 3. **Plate III — *Object 02: Crosswalk Pilgrim.*** The "WALK" pictogram blown up into a Michelin-Man balloon figure stepping into the dark. Caption in the left gutter this time — alternation is the whole rhythm. 4. **Plate IV — *Object 03: Bench Cumulus.*** A municipal park bench whose slats have been inflated into white sausage-rolls floating an inch above the ground. 5. **Plate V — *Object 04: Lamppost Lantern.*** A lamppost head inflated into a Chinese-paper-lantern globe that **subtly responds to cursor heat** — when the visitor's pointer enters its proximity, the globe brightens 8% and exhales a slow micro-rotation. 6. **Plate VI — *Object 05: Manhole Cake.*** A cast-iron manhole cover bulged upward like a jelly mold, rim still circular, surface engraved with the bada.city wordmark in negative. 7. **Plate VII — *Colophon.*** A single quiet plate listing the typefaces, the candle's color temperature (1850 K), the noise-grain texture's name (*Vellum 13B, scanned 2024*), and the visitor's local cursor coordinates rendered live in the marginalia as proof that *they were here*. There is no horizontal navigation, no "Next" button, no progress bar. Reading is **a single downward gesture of the wheel or thumb**, lit by the candle. ## Typography and Palette **Typography — Google Fonts only, condensed-doctrine with one display foil and one mono whisper:** - **Display & wordmark — [`Oswald`](https://fonts.google.com/specimen/Oswald)** variable, weight 200–700, used for the masthead `bada / city`, plate numerals (`I` through `VII`), and object names (`HYDRANT PNEUMATICA`). Set at `clamp(4.4rem, 11vw, 9.6rem)` for the wordmark with **letter-spacing -2.0%**, all-caps with the small-caps trick disabled (true uppercase only). Oswald is the load-bearing **condensed** voice — its narrow proportions are what make the whole site feel **catalog-vertical** and exhibition-cool rather than dashboard-horizontal. - **Captions, specimen labels, body — [`Barlow Condensed`](https://fonts.google.com/specimen/Barlow+Condensed)** variable, weights 300/400/500, used for marginalia at `13px / 1.55` with **letter-spacing +5.0%** and **all-caps for labels**, sentence-case for caption prose. Barlow Condensed is the **second condensed register** — slightly humanist, with subtle terminals — used for everything that is not a title. - **Numerals & technical metadata — [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono)** at `11px`, only for: cursor-position readout in the colophon, color-temperature notation (`1850 K`), noise-texture serial number (`Vellum 13B`), and the fixed candle widget's flicker timestamp. Mono appears nowhere else — **it is reserved for instrumentation**. - No serif anywhere. No italics anywhere. The site is **typographically monastic** — three families, condensed-condensed-mono, deployed with discipline. **Palette — high-contrast, sub-zero blacks against a single warm candle hue:** | Role | Hex | Notes | |---|---|---| | `--obsidian` | `#0A0B0E` | The page background. Not pure black — there's a 4-point lift toward warm-blue-black so the candle doesn't look glued on. | | `--vitrine` | `#13151A` | Slightly raised plane for the artifact platform — used as a barely-perceptible vignette behind each inflated object. | | `--paper` | `#F4EFE4` | The vellum tone for body type. Off-white, with a warm cream cast — the color of an old catalog page lit by candle. | | `--candle` | `#FF7A1F` | The flame's primary orange. 1850 K. The single warm color. Used on the candle widget, the plate numerals' small accent dot, and active hover states only. | | `--ember` | `#B33A0E` | The candle's wick base — a single deeper-red point at the wick's root. Used on the smallest interactive details only (cursor coordinates background plate, link underlines on hover). | | `--latex` | `#E9DFC8` | The neutral subsurface tint shared by the inflated 3D objects when they sit in candle shadow. | | `--latex-lit` | `#FFE6BA` | The warm-lit edge of inflated objects where the candle's rim-light hits them. | The contrast ratio between `--obsidian` and `--paper` is roughly **18.7:1** — this is **deliberately extreme high-contrast**, an intentionally severe range that throws every inflated 3D object into theatrical relief. The candle's `--candle` orange is the **single chromatic anomaly** in an otherwise monochromatic black-and-cream world; everywhere it appears, it is doing dramaturgical work. ## Imagery and Motifs **Imagery is exclusively inflated-3d artifacts photographed in candlelight, with universal noise-texture overlay.** Five rules govern every image: 1. **No photography of real objects.** Every artifact is a rendered 3D sculpture (the production note in the colophon describes them as "blown in Blender, baked in Cycles, scanned through 1980s catalog noise"). Real photos are forbidden — the conceit is the *inflated double* of a real city object. 2. **Single light source: the candle, upper-left.** All artifacts are lit from a virtual point matching the on-screen candle's pixel position (`top: 4vw, left: 4vw`) with a 1850 K color temperature. The shadow falls down-and-to-the-right at a constant 30° angle across the entire site. **Lighting consistency is the law of the catalog.** 3. **Inflated geometry only.** All forms are smooth, swollen, latex-rubbery — silhouette tests must pass the "could be a Macy's parade balloon" test. No sharp edges, no hard creases, no metal highlights. Subsurface scattering on every material at 0.4–0.6 thickness. 4. **Noise-texture overlay across the whole canvas.** A 256×256 monochrome grain tile (`--noise-overlay.png`, ~6% opacity, screen-blend mode) is applied as a fixed-position pseudo-element above every layer. It catches the candle's `--candle` hue subtly and gives the site the **patina of a printed lithograph**. The noise does not move with scroll — it is a fixed grain on the screen, like film stock in the projector gate. 5. **Candle-atmospheric secondary motif.** A second, smaller motif lives in the margins: tiny **wax drip glyphs** — five hand-drawn SVG droplets, each 14px tall, semi-transparent `--latex-lit`, used as section dividers between plates. They appear to have **dripped from the candle widget down the page** — their vertical stagger across the seven plates traces the arc of the candle's slow burning over the visitor's reading time. **Per-plate artifact specifications (5 sculptures, plus a cold-open and a colophon, totaling seven plates):** - **Plate II — *Hydrant Pneumatica*:** A traditional fire hydrant whose two side caps have been inflated into pumpkin-bulbs, top cap puffed into a beret. Material: **latex-pink** (#E9B6B0) with **subsurface scatter 0.5**. Sits on `--vitrine` ground, casting a long soft shadow at 30°. Slow rotation: 0.6° per second around the vertical axis. - **Plate III — *Crosswalk Pilgrim*:** The white "WALK" pictogram inflated into a stocky Michelin-Man-ish figure mid-stride. Color: **paper-white** (#F4EFE4) with the candle rim-lighting his front shoulder at `--latex-lit`. He does not animate; he simply exists, frozen mid-step. - **Plate IV — *Bench Cumulus*:** A four-slat municipal bench whose slats are inflated into white pillow-sausages, hovering 18 pixels off the ground (no legs visible). Material: matte cream latex. Subtle bob: ±3px vertical sway over a 6-second sine cycle. - **Plate V — *Lamppost Lantern*:** A streetlamp pole, top inflated into a paper-lantern globe. The globe is **the one cursor-reactive element** on the page — when the cursor enters within `200px` of its center, its surface brightens by 8% and it emits a soft `--candle`-tinted bloom. (See *Cursor-Follow* in the next section.) - **Plate VI — *Manhole Cake*:** A cast-iron round manhole cover bulged upward like a baked bread dome, retaining its concentric ring engravings, with the bada.city wordmark engraved into the apex in negative. Material: a **dark vulcanized-rubber** finish — surface is matte black with `--latex-lit` rim-light along the upper-left curve. **Decorative micro-elements:** - A **single hand-rendered candle widget** (SVG, 80px tall) pinned upper-left, with an 8-frame `` flame cycle (frame duration 90ms each) that loops indefinitely. The flame casts a soft 240px-radius radial gradient onto the page background that **drifts ±4px** in sympathy with its flicker. The wick has a real `--ember` glow at its base. - **Wax drip dividers** (the secondary candle-atmospheric motif) — five SVG droplets between plates, each at a slightly different vertical drip-length, placed asymmetrically. - **Specimen-label corner ticks** — four 6px L-shaped corner rules in `--paper` at 30% opacity wrap each artifact's specimen label, mimicking the registration marks of a museum's vitrine label. ## Prompts for Implementation Build bada.city as a **single 7-plate vertical scroll, lit entirely by one candle, populated entirely by inflated-3d city artifacts, narrated entirely in condensed type.** It is one editorial broadside, not a website-with-pages. **Engineering blueprint:** 1. **HTML skeleton — single `index.html`, seven `
` elements, one `