StyleKit — Design System Showcase

Dark Academia

❧

Lux et Veritas — Light and Truth

Classical libraries. Leather-bound tomes. Knowledge as a form of reverence. Warm, still, solemn — an interface as stable as an ancient folio.

Scroll

The Reading Room

Course of Study

❧

Apology · 399 BC

Nosce te ipsum

“The unexamined life is not worth living. In the quiet of the library, one confronts the eternal questions that no age has yet answered.”

Socrates

The Workshop

Component Gallery

❧

Primary Actions

Ghost Variants

Icon Variants

The Stacks

Library Card Catalog

❧

Select an entry to examine its cataloguing record. Each volume is classified according to the Dewey-adjacent system adopted by the Academy in its founding charter.

Call Number

Title & Author

Subject

Status

The Palette

Ink Samples

❧

Leather & bark

Deep Brown

#3d2b1f

Primary

Patina & moss

Forest Green

#2d4a3e

Secondary

Gilt & candle

Antique Gold

#8b7355

Accent I

Aged vellum

Parchment

#f5f0e1

Background

Tobacco & ash

Dark Brown

#5c4033

Accent II

Colour Doctrine

The Dark Academia palette draws exclusively from the warm, aged tones of a Victorian library — leather spines, candle wax, aged vellum, and verdigris-touched ironwork. No cool, clinical, or neon hue may enter this chromatic vocabulary.

The Curriculum

Design Rules

❧

Commandments — Faciendum

✓Use deep brown, forest green, and antique gold exclusively
✓Employ serif fonts throughout — body, headings, captions alike
✓Allow duration-700 to duration-1000 for all transitions
✓Introduce candlelight glow on hover via radial gradient
✓Expanding gold underlines signal interactivity
✓Parchment cream as the resting surface color
✓Inset shadows suggest paper depth, not harsh drop shadows

Prohibitions — Vitandum

✗Never use neon, high-saturation, or cool-toned colors
✗No playful scale(), bounce, or jump animations
✗Avoid modern sans-serif fonts — they break the atmosphere
✗Do not apply rapid transitions (below duration-500)
✗No hard drop-shadows or glowing outlines
✗Avoid cold gray or blue backgrounds at any saturation
✗Never stack many bright decorative elements — keep it still

The Written Word

Typography

❧

Display

Carpe Diem

Seize the Day

In Pursuit of Beauty

Dum spiro, spero — While I breathe, I hope

Body & Detail

Dark Academia typography draws from the great printed traditions — classical serifs with generous tracking, evoking leather-bound volumes and the gravity of the written word.

DisplayAa Bb Cc

HeadingAa Bb Cc

BodyAa Bb Cc

CaptionAa Bb Cc

Inscriptiones — Classical Mottos

Lux et Veritas

Light and Truth

Veritas Vos Liberabit

The Truth Shall Set You Free

Scientia Potentia Est

Knowledge is Power

Per Aspera Ad Astra

Through Hardship to the Stars

Dum Spiro Spero

While I Breathe, I Hope

Carpe Diem

Seize the Day

From the Commonplace Book

❧

“The love of learning, the sequestered nooks,
And all the sweet serenity of books.”

Henry Wadsworth Longfellow

Morituri Salutamus, 1875

“Ignorance is the curse of God; knowledge is the wing wherewith we fly to heaven.”

William Shakespeare

Henry VI, Part 2

“The more that you read, the more things you will know. The more that you learn, the more places you will go.”

Dr. Seuss

I Can Read with My Eyes Shut

“Education is the kindling of a flame, not the filling of a vessel.”

Socrates

Via Plutarch

The Behaviour

Interaction States

❧

Candlelight Reveal

Hover to see a warm radial glow emerge from the corner, as if a candle were drawn near the page.

Expanding Underline

A Study in Gold

Antique Slowness

Ink and gold transitions at duration-700 to 1000 — the calm pace of turning a hand-written page.

Leather

Vellum

Verdigris

Tobacco

The Scriptorium

Manuscript Borders

❧

Illuminated Folio — Anno Domini

De Arte Studendi

On the Art of Study

✦

The scholar who masters this art shall find the library a second home, the lamp a second sun, and the quill a second voice for thoughts too great to hold in silence.

Library Spine Collection

Historia Naturalis

Pliny the Elder

The Anatomy of Melancholy

Robert Burton

Meditations

Marcus Aurelius

Novum Organum

Francis Bacon

The Prince

Machiavelli

Essays

Michel de Montaigne

Dark Academia

StyleKit — Design System Showcase

Dark Academia

❧

Lux et Veritas — Light and Truth

Classical libraries. Leather-bound tomes. Knowledge as a form of reverence. Warm, still, solemn — an interface as stable as an ancient folio.

Scroll

The Reading Room

Course of Study

❧

Apology · 399 BC

Nosce te ipsum

“The unexamined life is not worth living. In the quiet of the library, one confronts the eternal questions that no age has yet answered.”

Socrates

The Workshop

Component Gallery

❧

Primary Actions

Ghost Variants

Icon Variants

The Stacks

Library Card Catalog

❧

Select an entry to examine its cataloguing record. Each volume is classified according to the Dewey-adjacent system adopted by the Academy in its founding charter.

Call Number

Title & Author

Subject

Status

The Palette

Ink Samples

❧

Leather & bark

Deep Brown

#3d2b1f

Primary

Patina & moss

Forest Green

#2d4a3e

Secondary

Gilt & candle

Antique Gold

#8b7355

Accent I

Aged vellum

Parchment

#f5f0e1

Background

Tobacco & ash

Dark Brown

#5c4033

Accent II

Colour Doctrine

The Curriculum

Design Rules

❧

Commandments — Faciendum

✓Use deep brown, forest green, and antique gold exclusively
✓Employ serif fonts throughout — body, headings, captions alike
✓Allow duration-700 to duration-1000 for all transitions
✓Introduce candlelight glow on hover via radial gradient
✓Expanding gold underlines signal interactivity
✓Parchment cream as the resting surface color
✓Inset shadows suggest paper depth, not harsh drop shadows

Prohibitions — Vitandum

✗Never use neon, high-saturation, or cool-toned colors
✗No playful scale(), bounce, or jump animations
✗Avoid modern sans-serif fonts — they break the atmosphere
✗Do not apply rapid transitions (below duration-500)
✗No hard drop-shadows or glowing outlines
✗Avoid cold gray or blue backgrounds at any saturation
✗Never stack many bright decorative elements — keep it still

The Written Word

Typography

❧

Display

Carpe Diem

Seize the Day

In Pursuit of Beauty

Dum spiro, spero — While I breathe, I hope

Body & Detail

Dark Academia typography draws from the great printed traditions — classical serifs with generous tracking, evoking leather-bound volumes and the gravity of the written word.

DisplayAa Bb Cc

HeadingAa Bb Cc

BodyAa Bb Cc

CaptionAa Bb Cc

Inscriptiones — Classical Mottos

Lux et Veritas

Light and Truth

Veritas Vos Liberabit

The Truth Shall Set You Free

Scientia Potentia Est

Knowledge is Power

Per Aspera Ad Astra

Through Hardship to the Stars

Dum Spiro Spero

While I Breathe, I Hope

Carpe Diem

Seize the Day

From the Commonplace Book

❧

“The love of learning, the sequestered nooks,
And all the sweet serenity of books.”

Henry Wadsworth Longfellow

Morituri Salutamus, 1875

“Ignorance is the curse of God; knowledge is the wing wherewith we fly to heaven.”

William Shakespeare

Henry VI, Part 2

“The more that you read, the more things you will know. The more that you learn, the more places you will go.”

Dr. Seuss

I Can Read with My Eyes Shut

“Education is the kindling of a flame, not the filling of a vessel.”

Socrates

Via Plutarch

The Behaviour

Interaction States

❧

Candlelight Reveal

Hover to see a warm radial glow emerge from the corner, as if a candle were drawn near the page.

Expanding Underline

A Study in Gold

Antique Slowness

Ink and gold transitions at duration-700 to 1000 — the calm pace of turning a hand-written page.

Leather

Vellum

Verdigris

Tobacco

The Scriptorium

Manuscript Borders

❧

Illuminated Folio — Anno Domini

De Arte Studendi

On the Art of Study

✦

The scholar who masters this art shall find the library a second home, the lamp a second sun, and the quill a second voice for thoughts too great to hold in silence.

Library Spine Collection

Historia Naturalis

Pliny the Elder

The Anatomy of Melancholy

Robert Burton

Meditations

Marcus Aurelius

Novum Organum

Francis Bacon

The Prince

Machiavelli

Essays

Michel de Montaigne