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
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