Arcane Ledger Design System -- Full Spec

Arcane Ledger is the canonical dark design system for all grim ecosystem apps.

Color Tokens

:root {
  --al-bg:           #06080a;
  --al-bg-surface:   #0c1018;
  --al-bg-elevated:  #111820;
  --al-bg-hover:     #1a2230;
  --al-border:       #1e2a3a;
  --al-text:         #c8bfa8;
  --al-text-heading: #e8dcc8;
  --al-accent:       #c8973a;
  --al-accent-hover: #dba84a;
  --al-success:      #34d399;
  --al-warning:      #fbbf24;
  --al-error:        #f87171;
}

Typography

Heading Font: Cinzel

• Use for: page titles, section headers, card titles, logo text
• Weights: 400, 600, 700
• Letter spacing: 0.02em-0.05em

Body Font: JetBrains Mono

• Use for: all body text, UI labels, nav items, inputs
• Weights: 300, 400, 500, 600
• Line height: 1.7 for prose, 1.5 for UI

Icon Language

Do / Don't

Do:

• Use gold sparingly -- accents only
• Prefer borders and transparency to solid fills

Don't:

• Use bright whites (#fff) -- use parchment (#e8dcc8)
• Use rounded corners >12px