A rare book from a candlelit private library. Deep green or oxblood grounds, gilt hairline frames, old-style serifs, small caps and ornamental rules.
Dark Academia makes your site feel like a rare book from a candlelit private library. Deep green or oxblood grounds, gilt hairline frames, old-style serifs, small caps and ornamental rules. The page is laid out like a bound volume, from a frontispiece hero to a colophon footer.
Dark academia web design makes a site feel like a rare book from a private library. It uses deep green, oxblood or plum grounds, one flat gilt ink for rules and frames, old-style Garamond serifs, true small caps, drop capitals and ornamental rules with finials. The page borrows the structure of a bound volume: a frontispiece hero, numbered chapters, framed plates, a ledger for pricing and a colophon footer. The references are antique bookbinding, letterpress title pages, Gothic library arches and Victorian apothecary labels. It suits bookshops, publishers, writers, candle and tea shops, and classic venues. Bright, playful or tech-forward brands should choose a different style.
The hero is a frontispiece, sections are numbered chapters, cards are framed plates and the footer is a colophon. That book structure is what makes the style feel real.
One flat gold ink handles the rules, frames, display type and focus states. Body text stays in a soft ivory, and a sealing-wax red shows up only for the main action and errors.
Classic Garamond-style serifs, true small caps, drop capitals and italic pairs in the titles. Ornaments line up with an edge or a center line, so nothing feels scattered.
Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction. Then hand those references to Claude Code. It makes a big difference in the final output.
The design language of the 1920s — gold accents, geometric symmetry, bold vertical lines, and a sense of occasion that makes everything it touches feel more important.
Big serif headlines, lots of white space, and a quiet palette. It looks like a designer was involved, even when one wasn't.
Vibe coding UI design guide: why AI-built apps look generic, how to pick a design style, and how to give Claude, Cursor or Lovable real design direction.
AI coding tools fall back on the same safe, forgettable aesthetic when they don't have design direction. Here's how to fix it with SKILL.md and DESIGN.md.
Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.