# Design Language for dilemma.studio ## Aesthetics and Tone dilemma.studio is the digital antechamber of an **ethics studio that only accepts impossible commissions** — a quiet, candlelit corridor between two doors marked A and B, where the air still trembles from the last person who hesitated. The aesthetic is **dopamine filtered through elegant sophistication**: the unmistakable rush of saturated, coral-and-amber dopamine pleasure — but recomposed as a low-lit drawing-room confession rather than a confetti cannon. Picture an oxblood velvet study at dusk, where someone has just stopped typing mid-sentence; the cursor still blinks, the cream paper still glows, and a faint aurora — the colour of a slow blush — moves silently along the upper coving. Every dopamine site in the corpus reads as a confetti shop; dilemma.studio reads as a perfumed library where the wallpaper is *itself* glowing with restrained euphoria, and the only confetti is a single comma the typewriter abandoned. The studio's worldview: a dilemma is not a problem to be solved but a **room to be furnished**. Visitors are not converted; they are *seated*. The tone is unhurried, slightly conspiratorial, and devastatingly polite — the hush of a maître d' who has already chosen the wine and is only awaiting your nod. Nothing pulses, nothing nags, nothing pops a modal. The dopamine here is the dopamine of *being given a difficult sentence to finish* — the small electric pleasure of a typewriter striking a key the moment your eye lands on the next word. We trade the candy-bright optimism of conventional dopamine for **burgundy-cream warmth, aurora hush, and the pleasure of consequence**. Inspirations: a single Edward Hopper window at 7pm; the soft-cornered title cards of Wes Anderson's *Asteroid City*; the bound dossier-aesthetics of *The Grand Budapest Hotel* concierge slips; a Rothko in oxblood and oat; the plate VII illustration in an old leather-bound *Ethics* by Spinoza, where the ink has gone sepia at the gutter. ## Layout Motifs and Structure The site is a single, continuous **editorial-flow column** — composed and read as a magazine spread that has been rotated to vertical and printed on **one cream-coloured galley**, 720px wide on the desktop, 92vw on mobile, drifting through a centred reading rule. **No card grid. No bento. No full-bleed hero. No sidebar. No dashboard. No diagonal sections.** The entire site is one *galley proof*, the way a literary quarterly looks twenty seconds before it goes to press: justified text, drop caps, run-arounds, sidenotes pulled into the right margin, a typewriter cursor blinking in the active paragraph. **The Galley (the single composed surface):** - **Outer field — the desk.** Beyond the galley, the viewport is a **deep oxblood-burgundy desk-leather field** (#3A0E18), grain texture rendered with two layered SVG turbulence filters at 4% opacity. No vignette. No drop-shadow halo. Just a steady deep weight that makes the cream column feel like a single sheet of laid paper resting on velvet. - **The galley sheet.** A **cream column** (#F6EBD7) running edge-to-edge in height, 720px wide, with a 1.25mm hairline cream-on-cream watermark border (`#EFE2C8`) that only appears at the moment of paper rest. The sheet has a **deckled-edge top and bottom** drawn as a single 12-vertex SVG path, irregular by 2–4px, never repeating. - **The reading rule.** A **0.4px burgundy-ink hairline** runs the entire vertical length of the galley, offset 56px from the left edge of the column. Every paragraph hangs from this rule. Every sidenote pulls right of it. Every drop cap kisses it. Nothing crosses it except the cursor. - **The aurora coving.** A **220px-tall aurora band** sits fixed at the top of the viewport, behind the galley but above the desk. It is a slow horizontal gradient sweep — coral → champagne → oxblood → champagne → coral — drifting at 0.04hz, never repeating exactly, masked through a 3-octave perlin field so its edges feel like **breath on glass**. The aurora is the only thing that moves of its own accord. It is the room's pulse. **Chapter Sequence — seven movements, no page breaks, all on one galley:** I — *Colophon.* The wordmark `dilemma.studio` is set in 64px geometric-sans with the period rendered as a single solid burgundy disk; under it, a single typewritten line that types itself: `a studio for impossible commissions.` II — *The Two Doors.* Body paragraph in 18px geometric-sans, justified, with a 96pt drop cap **A** in oxblood. Mid-paragraph, the word "or" is set in italic burgundy and bears a tiny right-margin sidenote: *the hinge.* Below the paragraph, two **doorway-pictograms** — A and B — float side by side at 280px each, drawn as geometric-abstract apertures (see Imagery). III — *Manifesto.* A six-line manifesto, each line typewritten in sequence, the carriage returning audibly (visually) at the right margin and dropping a half-line. The cursor moves only when the reader's scroll position holds the line in the centred reading band; if the reader scrolls past, the line remains finished — never re-typed. IV — *Recent Commissions.* A justified column of three commission entries, each set as: **Roman numeral · short title · single-clause description · burgundy hairline rule beneath**. No images. No dates. The entries are: *I — A board meeting that cannot end. · II — A confession that arrives addressed to the wrong person. · III — The third option, refused.* V — *On the Method.* A two-page editorial spread compressed to a single column with a **right-margin sidenote channel** (172px wide), offset right of the reading rule. Sidenotes are set in 13px italic burgundy and pull from the body via a small superscript dagger †. VI — *The Visitor's Slip.* A single fillable line — `if I had to choose, I would choose ____` — rendered as a printed form-line where the underscore is a 1px burgundy rule. Clicking the line places a typewriter cursor at the start; typing produces typewriter strokes (no email collection, no submission, no localStorage — the slip is purely contemplative). Below the line: *(this slip is not collected. only inscribed.)* VII — *The Mark.* The closing mark — a single burgundy fleuron `❦` set 96pt in the geometric-sans's display weight — followed by the colophon line: *set in galleys at the dilemma studio · MMXXVI · cream № 7 · oxblood № 12*. **Editorial-flow specifics (the layout pattern):** - **Drop caps** open every chapter. Six chapters, six drop caps: A, T, F, R, O, T. Each drop cap is **3-line-deep**, 96pt, in oxblood, with a 0.4px champagne hairline running through its descender. - **Run-arounds** are honoured. When a doorway-pictogram appears mid-galley, the body text is shaped around it with a 14px optical inset and a true 9-point bezier curve, never a rectangular text-wrap. - **Sidenotes** live in the right margin, pulled by superscript dagger references. They are set 1pt smaller than body, in burgundy italic, and never longer than two lines. - **Folio numerals** at the bottom-right of each chapter, set in a small-caps geometric-sans at 11pt, oxblood, prefixed by a hairline rule of 24px: `———— vii`. - **Widows and orphans** are forbidden. The galley pre-balances each chapter at composition time so no paragraph ends with a single hanging word and no chapter opens with one. ## Typography and Palette **Type system (Google Fonts only — three faces, each with one job):** - **`Outfit` (variable, weights 200–800)** — the **geometric-sans** primary face. Used for all body, drop caps, the wordmark, sidenotes (italic), folio numerals, and form-lines. Outfit is the geometric-sans of choice here because its perfectly circular `o`, geometric `g` (single-storey), and clean Eurostile-adjacent shoulders give it the *furniture* feel of mid-century Swiss editorial — but its variable axis lets the drop caps go to 800 weight without ever looking blocky. Set the body at 18px / 1.55 / weight 380, justified, with `hyphens: auto` and `text-wrap: pretty`. Letter-spacing is `-0.005em` at body, `0.0em` at drop caps, `0.06em` uppercase at folio numerals and small-caps colophon line. - **`JetBrains Mono` (Regular, Italic)** — the **typewriter face**, used **only** in the typewriter-effect lines: the colophon tagline, the manifesto, and the visitor's slip. Set at 16px / 1.7 / weight 400. Letter-spacing is `+0.012em`, simulating a slightly worn carriage. The cursor is a 1.5×16px solid oxblood block that blinks at exactly 0.85hz — slower than the system default — to feel *sleepy* rather than urgent. - **`Cormorant Garamond` (Italic only)** — the **whisper face**, used only for two glyphs in the entire site: the italic word "or" in Chapter II, and the closing fleuron `❦` in Chapter VII. The Cormorant italic, with its calligraphic ductus and its long swash terminals, is the only voice in the design that dares to lean. Reserved exclusively for moments of *consequence*. 12pt for the italic "or"; 96pt for the fleuron. **Type rhythms and details:** - The **wordmark** `dilemma.studio` is set in Outfit weight 600 at 64px, letter-spacing `-0.012em`, with the period replaced by a 7×7px solid oxblood disk. The disk is **the only round element** in the entire wordmark — it is the dilemma itself, the hinge, the moment. - **Drop caps** are set in Outfit weight 800 at 96pt, oxblood (#3A0E18), with a 0.4px champagne hairline (#E9D8B0) running horizontally across the descender. The hairline is a quiet visual rhyme with the reading rule. - **Folio numerals** use Outfit small-caps tracking at 11pt with `font-feature-settings: "smcp", "onum"`, ensuring oldstyle figures so the numerals sit *into* the line rather than on top of it. - **The manifesto's typewriter cursor** types each line at 22 characters per second (deliberately legible), pausing 600ms at line-end before the carriage return swings the cursor to the next line down. It does **not** delete; once typed, the line is permanent. **Palette — burgundy-cream, eight stops, no gradients except the aurora:** | Token | Hex | Role | |---|---|---| | `oxblood-12` | `#3A0E18` | Outer desk-leather field, drop caps, wordmark, all primary type | | `oxblood-09` | `#5C1A28` | Burgundy-italic accents (the word "or", sidenote ink, fleuron) | | `oxblood-06` | `#7E2E3E` | Hairline rules, reading rule, doorway-pictogram strokes | | `cream-07` | `#F6EBD7` | The galley sheet (primary surface) | | `cream-04` | `#EFE2C8` | Watermark deckle-edge highlight, paper grain mid-tone | | `champagne-05` | `#E9D8B0` | Drop-cap hairline accent, aurora highlight stop | | `coral-blush` | `#E89A7E` | Aurora coral stop (top of band, dawn end) | | `dusk-amber` | `#C56A4E` | Aurora amber stop (band middle, embers) | **Strict colour rules:** the cream column is the only large bright surface; the desk-leather is the only large dark surface; the aurora is the *only* gradient; everything else is a hairline rule or a typed letter. **No drop-shadows on type. No glows. No coloured text except sidenote-burgundy and the italic "or".** ## Imagery and Motifs **Every image on dilemma.studio is geometric-abstract**, drawn in-line as SVG with no photography, no AI generators, no 3D, no stock vector. The geometry is severe and editorial — plate-illustration geometry, not infographic geometry. Five custom plates total. **Plate I — The Two Doors (Chapter II, the centrepiece):** Two adjacent doorway-pictograms, 280×420px each, drawn as **pure geometric-abstract apertures**: each is a tall rectangle composed of *only* its threshold lines — left jamb, right jamb, lintel, sill — rendered as 1.25px oxblood-06 strokes, with the door surface itself **completely absent** (just cream column showing through). Inside Door A floats a single **5×5px solid oxblood disk** at exact centre. Inside Door B floats a single **5px oxblood square**, 30° rotated, at exact centre. The disk and square are the *only* solid shapes in either door. The viewer's eye is asked, very gently, which of the two is the choice. There is no caption. **Plate II — The Aurora Coving (site-wide, fixed-top band):** The aurora is a 220px-tall horizontal sweep at the top of the viewport, drawn as an **animated SVG gradient with three stops** (coral-blush → champagne-05 → oxblood-09), masked through a `feTurbulence` 3-octave perlin field set to `baseFrequency 0.012, numOctaves 3, seed 7`. The aurora drifts laterally at 0.04hz (one full sweep every 25 seconds), never repeating its exact mask state. **This is the only animated decoration in the design** — and it does not respond to scroll, hover, cursor, or click. It simply *is*, the way the room's evening light simply *is*. On `prefers-reduced-motion`, the aurora freezes to its mid-state. **Plate III — The Hinge (Chapter II, sidenote vignette):** A 64×64px geometric-abstract glyph of **two right angles meeting at a single oxblood pivot-disk**, set in the right margin beside the italic "or". The two angles are 1px hairlines; the pivot is 4px solid oxblood. The plate is a perfect functional diagram of the word *or*: two outcomes, hinged by a single moment of choice. **Plate IV — The Roman Numerals (Chapter IV, beside each commission entry):** Hand-set geometric-abstract Roman numerals (I, II, III) drawn as **pure stroke geometry** — never the system font. Each numeral is 56pt, 1.5px oxblood stroke, with the I rendered as a single vertical line crowned by 8px serif-bars, the II as two adjacent verticals, the III as three. They are **typographic plates**, not text. They sit on the reading rule, not above it. **Plate V — The Fleuron `❦` (Chapter VII, the closing mark):** A custom-drawn fleuron in oxblood-09 at 96pt, rendered as a 7-curve SVG path. Unlike the Unicode fleuron (which renders inconsistently across systems), this is a single hand-tuned bezier ornament: three lobes meeting at a central bud, with two trailing flourishes that **mirror the curvature of the aurora's drift**. It is the site's signature, its watermark, and its terminal punctuation — the burgundy seal at the foot of the galley. **Decorative motifs (atmospheric, repeating):** - **The deckle edge.** The galley's top and bottom are not cut straight; they are 12-vertex bezier deckles, redrawn fresh on every page-load with a deterministic seed (so the deckle is consistent within a session but *novel* across sessions). - **The aurora-coving's relationship to type.** The aurora's coral stop is the only colour on the entire site that does **not** appear in any text or rule — it lives only in the aurora. This makes the aurora feel *atmospheric* rather than illustrative; it is light, not pigment. - **Hairline punctuation.** Every chapter break is marked by a single 24px-wide oxblood-06 hairline, indented to align with the reading rule. ## Prompts for Implementation Build dilemma.studio as **one HTML document, one CSS file, one ES module** — no framework, no router, no service worker, no build step required, no analytics, no cookie banner. The page is a single galley-proof read, top to bottom, taking approximately 90–110 seconds at unhurried reading pace. Implementation must privilege **storytelling, atmosphere, and the experience of being-seated** over conversion idioms. **Forbidden patterns (do not implement, do not propose adding, do not even sketch):** - No "Get Started" or "Book a Call" CTAs. Anywhere. - No pricing block. No tiers. No "from $X" markers. - No statistics grid (no "127 commissions delivered" counters). - No testimonials carousel. No client logos. - No FAQ accordion. No newsletter capture (the visitor's slip is *not* a newsletter signup; it is a contemplative typewriter line that does not transmit). - No contact form. No email field. No "Hire us" button. - No social-share buttons, no like/heart counters, no comment threads. - No modal dialogs. No tooltips. No popovers. - No card-grid of services. No "What We Do" section. No portfolio thumbnails. - No live chat widget. No chatbot. No assistant. - No scroll-triggered counters, no number-rollups, no progress bars. **The single composition target:** a galley sheet that reads like a literary quarterly's centerfold. The reader scrolls; the typewriter types; the aurora drifts; the fleuron arrives. Nothing else is asked of them. **Storytelling structure (seven chapters, vertical scroll, typewriter-effect for three of them):** 1. **Chapter I — Colophon.** Wordmark `dilemma.studio` mounts at 22vh from top, in Outfit-600 64px. After 800ms, the typewriter line `a studio for impossible commissions.` types beneath at 22cps in JetBrains Mono. Cursor blinks at 0.85hz. Stays. 2. **Chapter II — The Two Doors.** A 96pt drop-cap `A` in oxblood opens the body. The body is justified Outfit-380 at 18px. Mid-paragraph, the word "or" is rendered in Cormorant Garamond Italic 18px oxblood-09, with a superscript dagger † linking to a right-margin sidenote labeled `the hinge.` Below the paragraph, the two doorway-pictograms (Plate I) appear side by side, 280px each, with 64px gutter between them. 3. **Chapter III — Manifesto.** Six lines, each typed via typewriter-effect, triggered as the reader reaches the chapter's centred reading band. Lines: *(1) we accept commissions that admit no good answer. (2) we charge by the consequence, not the deliverable. (3) we will not solve your dilemma. (4) we will furnish it. (5) we will sit with you in it. (6) and then we will leave you the chair.* Each line types at 22cps; carriage return drops half a line; cursor remains at the end of line six, blinking forever. 4. **Chapter IV — Recent Commissions.** Three commission entries, each on its own line of justified Outfit body, prefixed with a custom-drawn Roman numeral SVG (Plate IV), each followed by a 24px hairline rule beneath. Entries: - **I — A board meeting that cannot end.** *Commissioned by a holding company in May. The meeting is now a permanent residency on the seventh floor.* - **II — A confession that arrives addressed to the wrong person.** *We did not advise the sender. We advised the addressee.* - **III — The third option, refused.** *The client requested a third door. We delivered, instead, a chair.* 5. **Chapter V — On the Method.** A 240-word essay on the studio's working philosophy, set as a justified Outfit body column with three sidenote daggers in the right margin. Sidenotes (set in 13pt Outfit-italic, oxblood-09): - † *the dilemma is the client; the visitor is the guest.* - † *we have never sent an invoice in fewer than six months.* - † *the chair is the deliverable.* 6. **Chapter VI — The Visitor's Slip.** A single justified line: `if I had to choose, I would choose ____`. The blank is a 1.5px oxblood-06 rule, 280px long. Clicking the line places a JetBrains Mono cursor at the start of the blank; the visitor may type into it. **The typed text is never collected, never sent, never stored in localStorage, never even read by JavaScript except for input rendering.** Below the line, in 13pt italic oxblood-09: *(this slip is not collected. only inscribed.)* 7. **Chapter VII — The Mark.** The fleuron `❦` (Plate V) in oxblood-09 at 96pt, centred. Beneath it, in 11pt small-caps Outfit oldstyle figures: *set in galleys at the dilemma studio · MMXXVI · cream № 7 · oxblood № 12*. **Animation choreography (three motions only):** - **Aurora drift.** Site-wide, fixed top, perpetual, 0.04hz horizontal sweep through perlin mask. Never stops. Frozen on `prefers-reduced-motion`. - **Typewriter-effect.** Three locations: Chapter I tagline (auto-fires on load), Chapter III manifesto (fires per-line as reader's scroll holds line in centre band), Chapter VI visitor's slip (fires on click, driven by user keystroke). Cursor blinks at 0.85hz everywhere it appears. Use a real character-by-character substring with a `requestAnimationFrame` loop and a `cps` parameter; do **not** use CSS `width` step animations (they look fake on variable-width fonts). - **Drop-cap fade-in.** Each chapter's drop cap fades from `oxblood-12` at opacity 0 → 1 over 600ms with `cubic-bezier(0.2, 0, 0, 1)` as the chapter enters viewport. Once visible, never fades again. **No other animations. No scroll-jacking. No parallax. No magnetic cursor. No spring physics. No tilt-3d. No card-flip. No stagger entrances. The galley is still — and that stillness is the whole point.** **Microcopy voice rules:** - Lowercase by default. The studio is *quiet*, not loud. - Roman numerals for chapters and commissions; Arabic only for years and folios. - En-dashes for date ranges (`MMXXIII–MMXXVI`); em-dashes only inside body sentences, never at line-ends. - The wordmark `dilemma.studio` always carries its dot. The dot is the studio. **Scroll feel:** native, smooth-scroll disabled, no snap, no momentum hijack. The reader controls the page; the page does not seduce the reader. The aurora is the only thing that moves on its own. **Visitor exits:** there is no exit-intent modal, no "before you go" prompt, no farewell toast. When the visitor closes the tab, the typewriter cursor in Chapter VI continues to blink in their imagination, and that is sufficient. ## Uniqueness Notes This design's seven differentiators, each a deliberate departure from the patterns documented in the frequency analysis (150 designs): 1. **Dopamine recomposed as elegant-sophisticated rather than as candy-bright.** Dopamine sits at 14% in the aesthetic frequency analysis, and the canonical treatment is candy-bright + dopamine-neon palette + bounce-enter + confetti. dilemma.studio collapses dopamine into the **2% elegant-sophisticated tone** by retuning the rush: the dopamine here is the slow blush of being seated for a difficult conversation, not the fizz of a notification. The colours are oxblood and cream, not magenta and lime; the only "burst" on the page is a fleuron at the end. Every other dopamine site reads as a confetti shop; this reads as a perfumed library where the wallpaper is the dopamine. 2. **Editorial-flow as the layout primitive — entering at 0% in the frequency analysis.** The corpus is dominated by full-bleed (92%), centered (81%), card-grid (79%), and asymmetric (52%). dilemma.studio is the **first editorial-flow site in the corpus**, treating the entire page as a single composed galley sheet — drop caps, sidenotes, run-arounds, folio numerals, deckled edges, widow control. This is not a layout *style*; it is a **typographic discipline** brought from the print quarterly into the browser, and the design's identity is wholly inseparable from it. 3. **Burgundy-cream as the only large-surface palette — entering at 0% in the frequency analysis.** The corpus is 96% warm and 97% gradient, with no recorded burgundy-cream pairings. dilemma.studio uses two surfaces only — oxblood-leather (#3A0E18) for the desk and cream-paper (#F6EBD7) for the galley — and reserves all other colour for hairlines and italics. The palette is **fewer colours than any dopamine site has ever used**, which is itself the dopamine of restraint. 4. **Aurora-lights as a fixed atmospheric coving rather than as a hero gradient.** Aurora-lights sits at 1% in the motifs frequency analysis, and the existing few reads as a hero-section gradient sweep. dilemma.studio fixes the aurora to the **top 220px of the viewport at all times**, behind the galley but above the desk, drifting laterally at 0.04hz through a perlin mask. It is the *room's evening light*, not a hero treatment. The aurora is the only animated decoration in the design and never responds to user input. 5. **Geometric-sans (Outfit) as a print-galley face, not as a tech-startup face.** Geometric-sans sits at 2% in the typography frequency analysis, and the canonical treatment is the SaaS landing page (Eurostile, Futura PT, geometric headings on a card grid). dilemma.studio uses Outfit as the **body face for justified, hyphenated, drop-capped editorial running text**, with Cormorant Italic reserved for two glyphs and JetBrains Mono reserved for typewriter sequences. Geometric-sans here serves the **literary quarterly**, not the product page. 6. **Typewriter-effect at 22cps with 0.85hz blink and no deletion — a slowness manifesto.** Typewriter-effect sits at 10% in the patterns frequency analysis, and the canonical treatment is the "we build {dynamic-noun}" hero loop, fast (typically 60+cps) and self-deleting. dilemma.studio's typewriter is **deliberately sleepy** (22cps, 0.85hz cursor, never deletes), with permanent printed lines, simulating a real ribbon-and-platen mechanism rather than a CSS gimmick. Once a line types, it is *printed*. This rejects the "engagement" use of typewriter-effect entirely. 7. **A visitor's slip that is not collected.** The frequency analysis encodes (implicitly) the universal expectation that every input field on a website transmits data somewhere. dilemma.studio's visitor slip — `if I had to choose, I would choose ____` — has **no submit, no fetch, no localStorage, no analytics, no event handler beyond input rendering**. It exists purely as a contemplative interaction. This is the most counter-conventional element of the design: an input that *only* listens, and only to itself. 8. **Forbidden conversion patterns, total.** No CTA, no pricing, no testimonials, no stats grid, no FAQ, no contact form, no logo wall, no newsletter, no social-share. The entire site exists at the **opposite pole from the corpus average**, which is heavy with conversion idioms. The design's worldview is: a studio worth commissioning does not need to ask. The visitor either pulls the chair toward them, or they leave — and the chair waits. **Chosen seed:** *aesthetic: dopamine, layout: editorial-flow, typography: geometric-sans, palette: burgundy-cream, patterns: typewriter-effect, imagery: geometric-abstract, motifs: aurora-lights, tone: elegant-sophisticated.* **Avoided patterns (from frequency analysis):** hand-drawn aesthetic (96% — avoided), photography imagery (98% — avoided), full-bleed layout (92% — avoided), card-grid layout (79% — avoided), warm palette as conventionally rendered (96% — avoided in favour of burgundy-cream specifically), gradient palettes (97% — avoided except for the single aurora band), parallax (95% — not used), cursor-follow (80% — not used), spring (80% — not used), stagger (75% — not used), magnetic (70% — not used), mono as primary face (96% — relegated to typewriter sequences only), pastoral-romantic tone (29% — replaced with elegant-sophisticated). The design uses precisely **one** pattern from the top-five-most-common in any single category: typewriter-effect, and that one is recomposed against its own conventions.