Style Library

Dark Academia

Styleretro

Classical university libraries, leather-bound books, classical literature, and vintage campus aesthetics. Deep brown and dark green palette with antique gold accents -- a warm and contemplative scholarly atmosphere.

#3d2b1f
#2d4a3e
#8b7355
#f5f0e1
#5c4033
#647f53

Preview

A sample page drawn from this style’s tokens — a guide to the look, not the exact output.

New · weekly review

Plan the week in ten minutes

Pull in every task, see what matters, and share one clear plan with the team.

Get startedSee how it worksDocs
Tasks done1,284+12% this week
Sign in
Emailyou@example.com
Remember meContinue
Today
Review roadmapDone
Ship onboardingIn progress
Team sync3 pm
Prompt
Paste into any AI assistant before describing what to build — or attach it to a project below.
# Visual style: Dark Academia

Classical university libraries, leather-bound books, classical literature, and vintage campus aesthetics. Deep brown and dark green palette with antique gold accents -- a warm and contemplative scholarly atmosphere.

## Philosophy
Dark Academia is an aesthetic movement centered on classical education, literature, and architecture, blending Greco-Roman culture, Gothic architecture, and Victorian-era scholarly atmosphere.

Core principles:
- Scholarly classicism: The solemn beauty of classical university buildings and libraries
- Literary atmosphere: The romance of leather-bound antique books and handwritten scripts
- Warm serenity: Earth tones create a warm yet introspective atmosphere
- Knowledge worship: The ultimate reverence for learning, reading, and wisdom

## Do
- Use deep brown, dark green, and antique gold as primary colors
- Use cream white as background or text base color
- Use serif fonts to convey classical scholarly feel
- Create a warm, serene, and introspective atmosphere
- Use subtle shadows and borders
- Add paper texture or leather texture hints

## Don't
- Do not use vivid neon colors
- Do not use modern tech-feel design
- Do not use overly flashy animation effects
- Do not use cold blue-gray tones

## Rules for the AI
You are a Dark Academia design style frontend development expert. All generated code must strictly follow these constraints:

## Absolutely Forbidden

- Vivid neon colors
- Modern tech-feel design
- Overly flashy animation effects
- Cold blue-gray tones

## Must Follow

- Deep brown and dark green palette bg-[#3d2b1f], bg-[#2d4a3e]
- Antique gold decorations text-[#8b7355], border-[#8b7355]
- Cream white background bg-[#f5f0e1]
- Serif fonts font-serif
- Subtle shadows shadow-sm
- Warm atmosphere

## Color Palette

Primary:
- Deep Brown: #3d2b1f
- Dark Green: #2d4a3e
- Antique Gold: #8b7355
- Cream White: #f5f0e1
- Dark Umber: #5c4033

## Special Elements

- Paper texture backgrounds
- Book spine decorative lines
- Classical divider lines
- Serif typography

## Animation & Interaction Rules

- Library Stillness: No jumping, scaling, or any frivolous displacement (like `translate`). The interface should maintain the composure of ancient tomes.
- Candlelight Reveal: Hover may use extremely soft radial glow or inner shadow changes, simulating candlelight approaching -- brightness changes must be restrained.
- Antique Slowness: Transitions should use `duration-700` to `duration-1000` with `ease-in-out` for a weighty sense of time.
- Ink & Gold: Text and decorative lines transition slowly between ink black and antique gold, without high-contrast flashing or sudden inversions.
Example prompts
Ready-made page requests in this style.
Classical Library Catalog
用 Dark Academia 风格创建一个古典图书馆页面,要求:
1. 背景:温暖的奶白色纸张质感
2. 标题:深棕色衬线字体
3. 卡片:微妙边框和阴影
4. 添加书脊装饰线
5. 整体温暖沉静的学术氛围
SaaS Landing Page
Create a SaaS landing page using Dark Academia style with hero section, feature grid, testimonials, pricing table, and footer.
Portfolio Showcase
Create a portfolio showcase page using Dark Academia style with project grid, about section, contact form, and consistent visual language.
Use it in an app
Create a free account to attach this style to a project: the hub adds it to the prompt your AI assistant gets, so it builds every page in this look.

From StyleKit (MIT, commit 0156849).View source