120 lines
4.7 KiB
Markdown
120 lines
4.7 KiB
Markdown
# 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`
|