Dark Academia
Generates UI with the aesthetic of a university library at midnight — dark wood tones, parchment cream, burgundy accents, serif typography, and the quiet intensity of candlelit scholarship.
Added February 11, 2026 by unslop.dev
Example output
Library card
On the Consolation of Reading in Dark Hours
There exists in every library a particular hour when the shelves seem to lean inward, conspiratorial, offering exactly the volume one needs without knowing one needed it.
View code
<div style="padding: 2rem; background: #1a1410;">
<div style="background: #252017; border: 1px solid rgba(196,184,154,0.15); padding: 1.75rem; max-width: 24rem;">
<div style="font-variant: small-caps; font-family: 'Georgia', serif; font-size: 0.75rem; letter-spacing: 0.08em; color: #7a1f1f; margin-bottom: 0.75rem;">§ Philosophy</div>
<h3 style="font-family: 'Georgia', serif; font-size: 1.25rem; font-weight: 700; color: #f0e8d8; margin: 0 0 0.625rem 0; line-height: 1.3;">On the Consolation of Reading in Dark Hours</h3>
<p style="font-family: 'Georgia', serif; font-size: 0.875rem; color: #c4b89a; line-height: 1.7; margin: 0 0 1.25rem 0;">There exists in every library a particular hour when the shelves seem to lean inward, conspiratorial, offering exactly the volume one needs without knowing one needed it.</p>
<div style="border-top: 1px solid rgba(196,184,154,0.12); padding-top: 0.75rem; display: flex; justify-content: space-between; align-items: baseline;">
<span style="font-family: 'Georgia', serif; font-style: italic; font-size: 0.8125rem; color: #8a7e6a;">E. Blackwood</span>
<span style="font-family: 'Georgia', serif; font-style: italic; font-size: 0.75rem; color: #6a5e4a;">14 February 2026</span>
</div>
</div>
</div>Quote block
"A room without books is like a body without a soul. But a room with too many books is like a soul that has forgotten its body."
—Marcus Tullius Cicero, adapted
View code
<div style="padding: 2rem; background: #1a1410;">
<div style="max-width: 30rem; padding: 1.5rem 2rem;">
<div style="border-left: 2px solid rgba(122,31,31,0.4); padding-left: 1.5rem;">
<p style="font-family: 'Georgia', serif; font-size: 1.1875rem; font-style: italic; color: #f0e8d8; line-height: 1.65; margin: 0 0 1rem 0;">"A room without books is like a body without a soul. But a room with too many books is like a soul that has forgotten its body."</p>
<p style="font-family: 'Georgia', serif; font-size: 0.8125rem; color: #8a7e6a; margin: 0;">—Marcus Tullius Cicero, <em>adapted</em></p>
</div>
</div>
</div>Navigation and masthead
The Athenaeum
Letters on Art, Literature & the Examined Life
View code
<div style="background: #1a1410; border-bottom: 1px solid rgba(196,184,154,0.12);">
<div style="max-width: 44rem; margin: 0 auto; padding: 1.25rem 2rem;">
<div style="text-align: center; margin-bottom: 0.75rem;">
<h1 style="font-family: 'Georgia', serif; font-size: 1.375rem; font-weight: 700; color: #f0e8d8; margin: 0; letter-spacing: 0.02em;">The Athenaeum</h1>
<p style="font-family: 'Georgia', serif; font-style: italic; font-size: 0.75rem; color: #8a7e6a; margin: 0.25rem 0 0 0;">Letters on Art, Literature & the Examined Life</p>
</div>
<div style="border-top: 1px solid rgba(196,184,154,0.12); padding-top: 0.625rem; display: flex; justify-content: center; gap: 1.5rem;">
<a href="#" style="font-family: 'Georgia', serif; font-variant: small-caps; font-size: 0.8125rem; color: #f0e8d8; text-decoration: none; letter-spacing: 0.05em;">Essays</a>
<span style="color: rgba(196,184,154,0.25);">·</span>
<a href="#" style="font-family: 'Georgia', serif; font-variant: small-caps; font-size: 0.8125rem; color: #c4b89a; text-decoration: none; letter-spacing: 0.05em;">Reviews</a>
<span style="color: rgba(196,184,154,0.25);">·</span>
<a href="#" style="font-family: 'Georgia', serif; font-variant: small-caps; font-size: 0.8125rem; color: #c4b89a; text-decoration: none; letter-spacing: 0.05em;">Marginalia</a>
<span style="color: rgba(196,184,154,0.25);">·</span>
<a href="#" style="font-family: 'Georgia', serif; font-variant: small-caps; font-size: 0.8125rem; color: #c4b89a; text-decoration: none; letter-spacing: 0.05em;">Archive</a>
</div>
</div>
</div>System prompt
You generate UI in a dark academia style — the digital equivalent of a leather-bound journal in a dimly lit library. Rich, warm, intellectual. Dark wood and mahogany tones, parchment surfaces, burgundy accents, and serif typography that demands to be read slowly. Think: Oxford common room meets modern web app. VISUAL RULES: - Background: Deep warm brown (#1a1410) or dark charcoal with warm undertone (#1c1917). Cards/panels: slightly lighter (#252017 or #2a241c). Never cold gray or blue-tinted dark. - Parchment color: Warm cream (#f0e8d8) for text, headings, high-emphasis elements. Muted parchment (#c4b89a) for body text. Dim (#8a7e6a) for secondary text. - Accent: Deep burgundy (#7a1f1f) or muted wine (#8b2f2f). Used for links, active states, important markers. Sparingly — like a wax seal. - Typography: Serif everywhere. `font-family: 'Libre Baskerville', 'Baskerville', 'Georgia', serif`. Headings: larger weight, tight leading. Body: relaxed leading for readability. Italic for emphasis and quotes. Small caps for labels: `font-variant: small-caps`. - Borders: Thin, warm. `border: 1px solid rgba(196,184,154,0.15)`. Gold-tinted dividers. No cold grays. - Decorative elements: Thin rules, small fleurons (❧), section marks (§), em dashes for punctuation. Subtle, typographic ornament — never illustrative. - Spacing: Generous but not modern-generous. Think book margins — 1.5-2rem padding, classical proportions. - Border radius: Very small (2-4px) or none. Nothing playful or rounded. SPECIFIC PATTERNS: - Cards: Dark warm bg, thin parchment/15 border, p-6. Heading in cream serif. Body in muted parchment. Bottom metadata in dim serif italic. - Buttons: Border 1px parchment/30, transparent bg, cream text. Hover: bg burgundy/10. Small caps lettering. - Section headers: Large serif heading in cream, with small-caps label above in burgundy. Thin rule below. - Quotes/excerpts: Italic serif, larger size, parchment color. Indented with em dash attribution. `—Author, Work Title` - Navigation: Serif links in muted parchment. Active: cream with burgundy underline (text-decoration-color). - Metadata: Date formats like "XIV February MMXXVI" or traditional "14 February 2026". Small, dim, italic. ANTI-PATTERNS: - No bright colors. No blues, greens, pinks, oranges. Only browns, creams, and burgundy. - No sans-serif fonts. Everything is serif. - No emoji or icons. Use typographic ornaments only (§, ❧, ¶, •, —). - No modern UI patterns like pills, chips, or toggle switches. - No white backgrounds. This aesthetic lives in darkness and warmth. - No playful or casual tone. Everything is scholarly and considered.
Related prompts
Editorial
The Art of Interface Typography
How the best digital products use type scale, measure, and rhythm to create reading experiences that feel effortless.
Subscribe
Stay in the loop
A short email when we publish something worth reading. No spam, no filler.
Join 2,400 designers and developers.
Warm Editorial
Generates UI with the feel of a well-designed independent magazine — off-white backgrounds, terracotta accents, generous whitespace, and typography that breathes. Serif headings optional.
The Quiet Revolution in How We Build Software
A new generation of tools is changing the relationship between developers and their code. The implications extend far beyond Silicon Valley.
Markets Rally on Rate Decision as Fed Signals Patience
The central bank held rates steady, citing progress on inflation while acknowledging persistent uncertainty.
3 hours agoEuropean Parliament Approves Landmark Climate Accord
The sweeping legislation sets binding targets for carbon reduction across all 27 member states through 2040.
5 hours agoNewspaper Print
Generates UI that channels broadsheet newspapers — serif headlines in large point sizes, columnar layouts, thin rule lines, dateline metadata, and the authoritative feel of print journalism.
Helleborus orientalis
Lenten Rose
A hardy evergreen that blooms in late winter, producing nodding flowers in shades of cream, green, and plum. Prefers partial shade and humus-rich soil. Remarkably tolerant of neglect.
Plants for Shade & Dappled Light
The species catalogued in this section thrive beneath the canopy — in the filtered light and rich, moist soils of the forest floor. Many bloom before the trees leaf out in spring.
Organic Naturalist
Generates UI inspired by the natural world — forest greens, warm terracotta, botanical line art, natural paper textures, and the grounded warmth of a field guide or herbarium catalog.