# AI FIN Steven — Brand Spec

Source: STEVEN logo description (gold + matte black, fintech trading platform). App name: **AI FIN Steven**.

## Color tokens (dark-mode primary)

| Token | OKLch | Role |
|-------|-------|------|
| `--bg` | `oklch(14% 0.006 250)` | Matte black canvas — never pure #000 |
| `--surface` | `oklch(21% 0.008 250)` | Cards, modals, raised areas |
| `--fg` | `oklch(96% 0.004 96)` | Primary text — warm white, never pure #fff |
| `--muted` | `oklch(62% 0.010 96)` | Secondary text, captions |
| `--border` | `oklch(28% 0.008 250)` | Hairlines, dividers — visible on dark |
| `--accent` | `oklch(78% 0.13 82)` | AI gold — "vàng ánh kim" |
| `--accent-2` | `oklch(48% 0.04 250)` | Subtle blue-grey secondary signal |

Derived:
- `--accent-soft`: `color-mix(in oklch, var(--accent) 16%, transparent)`
- `--fg-soft`: `color-mix(in oklch, var(--fg) 6%, transparent)`

Status colors (fintech standard):
- `--up`: `oklch(68% 0.16 145)` — profit / bullish
- `--down`: `oklch(62% 0.18 25)` — loss / bearish
- `--warn`: `oklch(72% 0.14 90)` — caution

## Typography

- **Display**: `'Inter', 'SF Pro Display', system-ui, sans-serif` — geometric, modern, matches the 3D gold/black logo lockup. AI = gold, FIN = black contrast.
- **Body**: `-apple-system, 'SF Pro Text', system-ui, sans-serif` — native feel on iOS.
- **Mono**: `'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace` — for prices, PnL, percentages.

## Layout posture

- **Gold used sparingly** — accent appears at most twice per screen (e.g. positive PnL number + one active tab dot). Robot gold is precious; don't spray it.
- **Dark surfaces read as depth** — cards float 1–2 stops above `--bg`, separated by hairline `--border`. No heavy shadows (matte aesthetic).
- **Numerics dominate** — tabular-nums everywhere, mono, right-aligned. Prices, PnL, allocation %, portfolio value are the heroes.
- **Up/down color convention** — green always profit/bullish, red always loss/bearish, no brand-gold ambiguity on numbers.
- **Rounded, soft** — radii 12–16px on cards (robot is "friendly, soft 3D"), 999px on pills/tags.
- **Candlestick / chart motifs** — inline SVG sparklines and mini-charts, not external images.