wiki-tcg/frontend/DESIGN.md

Design Language

Aesthetic

Dark fantasy TCG aesthetic. Warm golds and bronzes on near-black brown backgrounds. Cinzel for headings/labels/buttons, Crimson Text for body/prose/inputs.

Colors

All core colors are available as CSS custom properties on :root in app.css (e.g. var(--color-bg), var(--color-bronze)).

Role	Value
Page background	#0d0a04
Header background	#1a1008
Modal / dark surface	#110d04
Raised surface	#3d2507
Primary text / accent	#f0d080 (gold)
Secondary text	rgba(240, 180, 80, 0.6)
Placeholder text	rgba(240, 180, 80, 0.3–0.4)
Interactive accent (buttons, borders, hover)	#c8861a (bronze-orange)
Interactive accent hover	#e09820
Border / divider	#6b4c1e
Subtle border	rgba(107, 76, 30, 0.3–0.5)
Button text	#fff8e0
Error / delete	#c84040
Success / positive	#6aaa6a
Energy cost indicator	#6ea0ec

Typography

• Headings / labels / buttons: Cinzel (Google Fonts), weights 400/700/900
• Body / prose / inputs: Crimson Text (Google Fonts), weights 400/600; italic for flavor/secondary text
• Button and label text: uppercase, letter-spacing: 0.06–0.1em
• Form labels: uppercase, letter-spacing: 0.08em

Type Scale

All type scale tokens are CSS custom properties on :root in app.css.

Token	Value	Use for
--text-xs	9px	Fine print, badges, metadata labels
--text-sm	11px	Secondary text, captions, small labels
--text-base	13px	Default body text, buttons, card details
--text-md	15px	Form inputs, emphasized body text
--text-lg	18px	Section headings, card titles
--text-xl	22px	Page headings, prominent labels
--text-2xl	28px	Large display headings
--text-3xl	36px	Hero headings, splash text

Buttons

Variant	Background	Border	Text
Primary	#c8861a	none	#fff8e0
Secondary	#3d2507	1px solid rgba(107,76,30,0.4)	#f0d080
Destructive	rgba(180,40,40,0.8)	none	#fff

Sizes

All button size tokens are CSS custom properties on :root in app.css.

Size	Padding	Font-size	Border-radius	Use for
Small	4px 10px	10px	var(--radius-sm)	Toolbar filters, sort toggles, inline actions, edit/delete
Medium	8px 18px	12px	var(--radius-md)	Card actions, done/choose, friend, secondary, cancel
Large	10px 32px	13px	var(--radius-md)	Primary CTAs, auth submit, play, buy, accept trade

• Font: Cinzel 700 uppercase, letter-spacing 0.06–0.1em
• Disabled: opacity 0.5; hover: lighten background or brighten border + text

Inputs / Forms

• Background: #1a1008; border-radius: 6px; color: #f0d080; font: Crimson Text 15px
• Text inputs: 1.5px solid #6b4c1e; focus border: #c8861a
• Selects: 1.5px solid #6b4c1e
• Placeholder: rgba(240, 180, 80, 0.4); accent-color (checkboxes, ranges): #c8861a

Containers / Panels

Border-radius, shadows, z-index layers, and spacing are available as CSS custom properties on :root in app.css (e.g. var(--radius-lg), var(--shadow-card), var(--z-modal), var(--space-md)).

• Border-radius: 10–12px; box-shadow: 0 4px 24px rgba(0,0,0,0.5)
• Borders: 1–2px solid #6b4c1e standard, #c8861a for emphasis
• Backgrounds: #1a1008 (surface), #3d2507 (raised)
• Card hover lift: translateY(-4px) scale(1.02), shadow 0 12px 40px rgba(0,0,0,0.6)

Transitions

• Default: 0.15s ease on background, border-color, color, transform
• Card hover: 0.2s ease

Card Type Colors (CSS vars --bg / --header)

Type	Background	Header
person	#f0e0c8	#b87830
location	#d8e8d4	#4a7a50
artwork	#e4d4e8	#7a5090
life_form	#ccdce8	#3a6878
event	#e8d4d4	#8b2020
group	#e8e4d0	#748c12
science_thing	#c7c5c1	#060c17
vehicle	#c7c1c4	#801953
organization	#b7c1c4	#3c5251

Rarity Badge Colors

Rarity	Background	Text
common	#c8c8c8	#333
uncommon	#4a7a50	#fff
rare	#2a5a9b	#fff
super_rare	#7a3a9b	#fff
epic	#9b3a3a	#fff
legendary	#b87820	#fff

Card Component

• Outer border and internal borders: #000 (pure black) — these are structural borders within the card face, distinct from the themed #6b4c1e borders on containers/panels.
• Card background: #111; border-radius: 12px; padding: 7px

Spacing

• Page padding: 2rem; section gap: 1–1.5rem; component internal gap: 0.4–0.75rem