# Design Language for dilemma.quest ## Aesthetics and Tone dilemma.quest is **a glass museum vitrine sliding across a sheet of polished Carrara marble at 6:18 in the morning** — imagine the moment when frutiger-aero's optimistic glossy-bubble UI of the mid-2000s is set, irreverently and beautifully, on top of a 2,400-year-old broken caryatid. The site is a desktop wallpaper from Windows Vista's "Dream Scene" era that has somehow drifted into the Glyptothek in Munich at dawn, where translucent frosted panels float in front of fluted columns and the crackle of high-bit-depth glass lensing meets the cool veined silence of cut marble. The aesthetic seed is **frutiger-aero (used in only 3% of the corpus)** — a deliberately under-explored direction — and it is here pinned to **marble-classical motifs (7%)**, **marble-texture imagery (2%)**, and a **translucent-frost palette (3%)**. None of the corpus sites currently combine these four elements; this is, by design analysis, a unique collision. The tone is **approachable-casual (3% of corpus)** — but rendered through frosted glass rather than through hand-drawn doodles, which is the usual register for casual. Casual here means the courteous, slightly amused way a curator at a small museum greets you on a Saturday morning while still wearing their gardening shoes. It is **not** the tech-bro casual of "hey, friend!" CTA buttons. It is a glass-clear voice with a dry sense of timing, the verbal equivalent of a perfectly chilled drink served on a hot tile floor. The site addresses dilemmas — choices, forks, twin-pronged questions — and it does so without dramatizing them. The mood is **lucid, buoyant, faintly nostalgic** (for 2007 desktop chrome) **and faintly antique** (for Praxitelean drapery), but never solemn. A dilemma is treated as a clear glass object you can pick up and turn over: heavy, beautiful, with two faces visible at once depending on the light. The site rejects: dopamine-neon urgency, brutalist shouting, hand-drawn whimsy, dark-mode crypto-dashboard severity, glassmorphism's now-cliché blur-on-purple. It is glassy without being glassmorphism — the difference being that frutiger-aero glass has weight, refractive index, internal reflection, water droplets, lens-flare halos, and a kind of optimistic plumpness that the flat blur-translucency of 2020s glassmorphism deliberately abandoned. We are bringing back the fat photon. ## Layout Motifs and Structure The page uses an **F-pattern layout (only 3% of the corpus)** — chosen because the F-pattern is the natural reading topography of a person scanning a museum placard or a Vista-era tooltip cluster: a horizontal sweep across the top, a shorter horizontal sweep mid-page, then a long vertical descent on the left margin. The F is here treated as a **literal architectural motif**: the horizontal bars become **frosted-glass shelves jutting out from a marble pilaster**, and the vertical descender becomes **a fluted column of stacked glass cards** running down the left third of the viewport. The right two-thirds breathe — most of the time empty marble veining, occasionally inhabited by a single Lottie-animated glass orb that drifts in, hovers, and resolves into a sentence. **Spatial system:** - **The Pilaster (left vertical, 33vw):** a single column of Ionic flutes rendered in CSS conic-gradients, ranging from #E8EBF0 (cold marble white) to #C9D4DD (cooled shadow). Frosted-glass cards (the navigational F-bar entry points) clip onto the column at varying heights, like museum labels pinned to a real plinth. Each card uses backdrop-filter: blur(18px) saturate(140%) and carries a thin 1px outline of #FFFFFF at 0.55 alpha, plus an inner highlight stroke at #FFFFFF at 0.85 alpha — frutiger-aero's signature double-stroke glass edge. - **The Top Bar (horizontal, full width, 14vh):** a long shelf of glass at the very top, holding the dilemma-of-the-day in three registers (question, two horns, and a soft Lottie of a coin spinning between them). The shelf casts a real CSS box-shadow onto the marble below: 0 18px 40px -12px rgba(31, 56, 84, 0.22). - **The Mid Bar (horizontal, ~52vh down, 70% width, anchored left):** the second arm of the F. A wider, lower glass shelf holding three to four "case files" — historical or hypothetical dilemmas, each presented as a small glass slab. - **The Marble Field (right two-thirds, full height):** mostly empty. Carries the marble-texture imagery as a slow Ken Burns vertical pan (translateY over 80s ease-linear infinite). Occasionally a Lottie animation of a glass droplet, a slowly rotating dodecahedron, or a breathing orb appears in this field, anchored to grid intersections that the user does not see but feels. The layout is **NOT card-grid (79%)**, **NOT bento-box (15%)**, **NOT centered (81%)**, **NOT full-bleed in the dominant sense (92%)** — it deliberately uses an off-center, asymmetric F that leaves the right plane breathable. Composition reads top-left to bottom-left, like a museum visitor walking the perimeter of a room before approaching the central plinth. The "central plinth" is implied but never built — the site refuses the hero CTA. There is no "Get Started" button in primary position. The grid is **8 columns / 5 rows of asymmetric height**, with a baseline rhythm of 13.5px (an unusual prime-feeling baseline that prevents accidental Bootstrap-vibe). Vertical rhythm collides with horizontal rhythm at the F-corners; at those corners, glass meets glass at a 0.5px frosted seam. ## Typography and Palette **Fonts (Google Fonts only — confirmed available):** - **JetBrains Mono** — the primary mono typeface, set at 0.9375rem / 1.55 line-height for body, and at clamp(2.4rem, 6vw, 5.6rem) for the display dilemma question at the top of the F. Mono is chosen because dilemmas are propositional — they read like code, like premises before a logical fork. Letter-spacing -0.012em on display, +0.018em on small body. Variable axis: weight 400 for body, 600 for display. Italic rare; used only for the second horn of a dilemma, to typographically embody the fork. - **Inter** — used for the curatorial caption text under each glass-shelf card, set at 0.8125rem / 1.7 line-height, weight 500, tracking +0.04em. Inter's open apertures soften the technicality of the mono. Caption color #5B6F84 against frosted glass — readable but airy. - **Cormorant Garamond** — used **once per page**, for a single pulled epigraph carved into the marble field. Set at clamp(1.6rem, 3.4vw, 2.8rem), italic, weight 300, color #1F3955 at 0.62 alpha so it appears engraved into the marble rather than floating above it. This is the only serif allowed on the page; it functions like a museum's brass plaque. **Palette — Translucent Frost (in 3% of corpus):** - `#F2F4F7` — Frost White (background marble, dominant 55%) - `#E8EBF0` — Cold Marble Highlight (column flutes, 12%) - `#C9D4DD` — Cool Marble Vein (mid-tone marble, 10%) - `#A6BACB` — Glacier Glass (translucent fill of glass shelves, applied at 0.42 alpha) - `#7BA4D0` — Aero Sky (the only saturated hue — used for Lottie orbs, glass-edge highlights, and the small caustic dot that follows the cursor) - `#1F3955` — Carved Indigo (text, marble shadow, engraved epigraph) - `#FFFFFF` — Pure Glass Edge (1px / 0.85 alpha highlight stroke, frutiger-aero's signature) - `#0E1922` — Deep Pilaster Shadow (used only inside the deepest flute groove, never on text) The palette behaves like polarized light through frosted glass: cold blues, neutralized whites, no warmth except the faint pearl glow on glass edges. Saturation is deliberately low except for the single Aero Sky accent, which functions like the one teal pixel on a Windows Vista wallpaper. ## Imagery and Motifs The visual vocabulary of dilemma.quest layers **four uncommon imagery and motif categories** that, per the frequency analysis, almost never co-occur: - **Marble-texture imagery (2% of corpus)** — full-resolution photographic plates of Carrara, Calacatta Oro, and Greek Pentelic marble. Veining is treated as a *background narrative*: the right two-thirds of the viewport are a slow vertical pan across a 6000px tall tiled marble image. Veining is NOT used decoratively as borders; it is the floor of the whole page. Marble is sourced as if from museum object photography — slightly cool color cast, raking light at 22° from upper left. - **Marble-classical motifs (7%)** — fluted Ionic shafts, fragmentary acanthus volutes at column capitals, the faint shadow of a draped Praxitelean fold visible behind the bottom-left Lottie orb. No full statues; only fragments and architectural members. The classical references are *quiet* — they are the architecture of the museum, not the exhibition. - **Lottie-animation patterns (3%)** — three to five Lottie animations placed at exact F-pattern grid intersections: - A glass coin spinning 360° on Y-axis (frutiger-aero style: glossy, with a moving caustic spot), positioned at the top of the F next to the dilemma question. - A dodecahedron of frosted glass slowly rotating, used at the right end of the mid-bar. - A soft lensflare-halo blooming and dissolving every 11 seconds in the marble field. - A vertical chain of three glass droplets falling, hitting the marble, and dispersing into sub-pixel ripples — anchored at the foot of the pilaster. - An optional final-frame Lottie of a marble fragment (a fluted shard) tumbling end-over-end into deep pilaster shadow when the user reaches the page bottom. - **Frutiger-aero photographic motifs** — water droplets, lens flares, refraction caustics, glossy acrylic bubbles. These are rendered in CSS where possible (radial-gradients with mix-blend-mode: screen) and as 32-bit PNG sprites where photographic fidelity is required. Bubbles are rare, never overlapping, never chained — one bubble per visible region, like a single pearl on velvet. The motif principle: **glass touches marble exactly twice per visible scroll-section** — once where a shelf clips into the pilaster, once where a Lottie orb hovers in front of the marble field. Glass and marble never blend; their boundary is always crisp at the pixel level, which is the entire visual joke of frutiger-aero meeting classical sculpture. No icons in the conventional UI sense. No SF Symbols. No Lucide. The only iconographic figures are the Lottie objects above, treated as **objets** rather than **icons**. ## Prompts for Implementation Build this site as **a single, slow, museum-walk narrative experience** — not a SaaS landing page, not a CTA-driven funnel, not a stat-grid pitch. The visitor moves laterally and downward through a small glass-and-marble gallery that never tries to convert them. There are no pricing blocks. There are no testimonials in card grids. There are no "Get Started" or "Sign Up" buttons in primary positions. If a user wants to subscribe, the site offers a single small mailto link in the bottom-left flute groove — barely visible, like a museum guest book. **Implementation scaffold:** - **HTML structure** — semantic, with `
` containing exactly four landmark regions: `
`, `