Component Showcase

Every visual element on Subplot, organized by category. Toggle dark mode in the nav.

Sprint 0–8 — Living Style Guide

Colors, typography, spacing, shadows, animations, borders

Color Palette

globals.css @theme

Semantic colors from the design system. Every color has a purpose — never borrow a semantic color for decoration.

Core

bg-warm

bg-card

accent

gold

border

border-light

Text Hierarchy

text

text-secondary

text-muted

Rule: Never skip a level. Primary → muted, not primary → secondary → muted.

Tier Colors

tier-S

tier-A

tier-B

tier-C

tier-D

tier-F

Rating displays ONLY. Never use for status indicators, progress bars, or generic badges.

Tag Layer Colors

genre (violet)

mood (coral)

trope (sky)

structural (slate)

Compass Quadrants

page-turn

comfort

intense

slow-burn

Patron Colors

patron

patron-bg

founder-gold

founder-bg

Typography

globals.css @font-face

Three fonts, three purposes. Fraunces (headings), DM Sans (body), JetBrains Mono (data). No exceptions.

Fraunces — headings, book titles

Marginalia

The Goldfinch

Chapter Twelve

“A Novel by Donna Tartt”

Sub-heading level

Card meta title

DM Sans — body, UI, everything else

DM Sans Semibold

Body text. The default for UI elements, reviews, and descriptions.

Secondary text — timestamps, metadata.

Muted caption — fine print and labels.

LABEL / OVERLINE

JetBrains Mono — numbers, stats, data

JetBrains Mono

142 reviews · 4.2 avg · 89% completed

S:24 A:45 B:31 C:12 D:3 F:1

page 312 of 688 · 45%

Heading Hierarchy Quick Ref

Page title font-serif text-3xl sm:text-[48px]

Section heading font-serif text-xl

Sub-heading font-serif text-lg

“Quick take” font-serif text-xl italic

Metadata text text-[13px] text-text-muted

Spacing & Rhythm

Consistent spacing creates visual rhythm. Tailwind spacing scale, demonstrated at common values.

Gap Scale

4pxgap-1

8pxgap-2

12pxgap-3

16pxgap-4

20pxgap-5

24pxgap-6

32pxgap-8

40pxgap-10

48pxgap-12

64pxgap-16

Section Card Padding

p-3 (12px) — compact cards

p-4 (16px) — list items, stacking cards

p-5 sm:p-6 — section cards

Shadows

Warm-toned shadows with the Halfmoon Elegant DNA. Use sparingly — cards default to border, not shadow.

shadow-xs

shadow-sm

shadow

shadow-lg

Borders & Dividers

Two border weights: border (section cards) and border-light (inner dividers, stacking cards).

border border-border

Section cards, modals, dropdowns

border border-border-light

Stacking cards, list items, inner elements

Inner dividers: border-t border-border-light

Item 1

Item 2 (with top border)

Item 3 (with top border)

Animations

Subtle and purposeful. Hover to preview each animation.

slide-up

fade-in

sunburst-pulse

Transition Classes

transition-colors

transition-shadow

transition-all

transition-transform