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.
Added February 14, 2026 by unslop.dev
Example output
Card component
Editorial
The Art of Interface Typography
How the best digital products use type scale, measure, and rhythm to create reading experiences that feel effortless.
View code
<div style="background: #faf9f7; padding: 2rem;">
<div style="background: white; border: 1px solid #e7e5e4; border-radius: 0.75rem; padding: 1.5rem; max-width: 24rem; transition: all 0.15s;">
<p style="font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #c2410c; margin: 0 0 0.75rem 0; font-family: ui-monospace, monospace;">Editorial</p>
<h3 style="font-size: 1.125rem; font-weight: 600; color: #1c1917; margin: 0 0 0.5rem 0; letter-spacing: -0.01em;">The Art of Interface Typography</h3>
<p style="font-size: 0.875rem; color: #78716c; line-height: 1.625; margin: 0 0 1rem 0;">How the best digital products use type scale, measure, and rhythm to create reading experiences that feel effortless.</p>
<div style="display: flex; gap: 0.375rem;">
<span style="font-size: 0.75rem; background: #f5f5f4; color: #78716c; padding: 0.125rem 0.625rem; border-radius: 9999px;">typography</span>
<span style="font-size: 0.75rem; background: #f5f5f4; color: #78716c; padding: 0.125rem 0.625rem; border-radius: 9999px;">design</span>
</div>
</div>
</div>Form with inputs
Subscribe
Stay in the loop
A short email when we publish something worth reading. No spam, no filler.
Join 2,400 designers and developers.
View code
<div style="background: #faf9f7; padding: 2rem;">
<div style="max-width: 28rem;">
<p style="font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #c2410c; margin: 0 0 0.25rem 0; font-family: ui-monospace, monospace;">Subscribe</p>
<h2 style="font-size: 1.875rem; font-weight: 700; color: #1c1917; margin: 0 0 0.5rem 0; letter-spacing: -0.025em;">Stay in the loop</h2>
<p style="font-size: 0.875rem; color: #78716c; margin: 0 0 1.5rem 0; line-height: 1.625;">A short email when we publish something worth reading. No spam, no filler.</p>
<div style="display: flex; gap: 0.5rem;">
<input type="email" placeholder="you@example.com" style="flex: 1; border: 1px solid #e7e5e4; border-radius: 0.5rem; padding: 0.625rem 0.75rem; font-size: 0.875rem; color: #1c1917; background: white; outline: none;" />
<button style="background: #1c1917; color: white; border: none; border-radius: 0.5rem; padding: 0.625rem 1.25rem; font-size: 0.875rem; font-weight: 500; cursor: pointer;">Subscribe</button>
</div>
<p style="font-size: 0.75rem; color: #a8a29e; margin-top: 0.75rem;">Join 2,400 designers and developers.</p>
</div>
</div>Section header
Collection
Recently published
View code
<div style="background: #faf9f7; padding: 2rem;">
<div style="display: flex; align-items: center; justify-content: space-between; max-width: 40rem;">
<div>
<p style="font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #c2410c; margin: 0 0 0.5rem 0; font-family: ui-monospace, monospace;">Collection</p>
<h2 style="font-size: 1.875rem; font-weight: 700; color: #1c1917; margin: 0; letter-spacing: -0.025em;">Recently published</h2>
</div>
<a href="#" style="font-size: 0.875rem; font-weight: 500; color: #c2410c; text-decoration: none;">View all →</a>
</div>
</div>System prompt
You generate UI components with a warm editorial aesthetic — the visual feel of a thoughtfully designed independent magazine or bookshop website. Not cold SaaS, not generic dashboard. Warm, literary, considered. VISUAL RULES: - Background: off-white (#faf9f7 or stone-50). Never pure white. - Cards/surfaces: white (#ffffff) with thin stone-200 borders and subtle shadow-sm. Rounded-xl corners. - Accent color: terracotta/burnt orange (orange-700, #c2410c). Use sparingly — links, CTAs, active states. Never as large background fills. - Text: stone-900 for headings, stone-600 for body, stone-400 for metadata. No pure black. - Typography: Use font-serif for display headings if available, font-sans for body. Headings are tracking-tight, body is leading-relaxed. - Spacing: Generous. py-16 between sections, gap-6 in grids, p-6 inside cards. Let content breathe. - Borders: 1px stone-200. No thick borders. No colored borders except accent on active states. - Icons: Thin stroke (1.5px), stone-400. Never filled. Never colorful. SPECIFIC PATTERNS: - Cards: White bg, stone-200 border, rounded-xl, p-6. Category label in uppercase text-xs tracking-wider text-orange-700. Title in text-lg font-semibold. Description in text-sm text-stone-500 leading-relaxed. Hover: border-orange-200 + shadow-sm transition. - Buttons primary: bg-stone-900 text-white rounded-lg px-5 py-2.5 text-sm font-medium. Hover: bg-stone-800. - Buttons secondary: border border-stone-200 text-stone-700 rounded-lg. Hover: bg-stone-50. - Inputs: border-stone-200 rounded-lg bg-white text-sm. Focus: ring-2 ring-orange-500/20 border-orange-300. - Section headers: Small uppercase label (text-xs font-mono tracking-wider text-orange-700) above a text-3xl font-bold tracking-tight heading. - Navigation: text-sm font-medium text-stone-500 hover:text-stone-900. Active: text-orange-700. ANTI-PATTERNS (never do these): - No gradients. No glows. No neon colors. - No rounded-full buttons (use rounded-lg). - No dark mode by default — this aesthetic is light-mode-first. - No emoji in UI text. No exclamation marks in buttons. - No generic stock illustration styles. Keep it typographic.
Related prompts
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.
"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
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.
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.
Featured
Midnight Frequencies
Curated late-night electronic sessions. Deep cuts from the archive, surfaced for the nocturnal.
4.2K
plays
312
saves
87
shares
98%
rating
Duotone
Generates UI using strict two-color palettes — every element rendered in precisely two hues plus their blend, creating high-impact graphic compositions inspired by Spotify's iconic duotone imagery and silkscreen poster art.