# TipSharks Design Mockup — System Notes

## Palette
- **Backgrounds**: Obsidian `#0B0E0C` with a 6px repeating-conic grain + radial accents for atmosphere.
- **Surfaces**: `#12161A` (base cards) and `#1A1F1B` (lifted cards). Keeps depth minimal but present.
- **Accent**: Antique gold `#C9A961` for keylines, monograms, primary actions, and top-pick markers. Used sparingly so it retains weight.
- **Racing type coding**: Thoroughbred = silver-blue `#8A9AA8`, Harness = deep purple `#5A4A6A`, Greyhound = sage `#6B8E6B`. Thin borders only—no loud chips.
- **Data signals**: Emerald for favourites, amber for roughies, oxblood for longshots. Muted backgrounds keep it sophisticated.

## Typography
- **Display / headlines**: `Georgia` stack. Elegant, high-contrast, editorial feel without external font requests.
- **Body / UI**: `system-ui` stack. Clean, fast, native.
- **Data (odds, Elo, %)**: `ui-monospace` with `tabular-nums`. Treats numbers like a luxury financial terminal.
- **Labels**: Small-caps + wide letter-spacing (`0.12em`) for section headers (RUNNERS, TIP, CONFIDENCE).

## Spacing & Shape
- **Radius**: 16px cards, 10px buttons/inputs, 44px phone frame. Soft but not bubbly.
- **Dividers**: 1px hairline gradients in `rgba(201,169,97,0.28)`. Gold-tinted so they feel premium, not clinical.
- **Shadows**: Deep, diffuse blacks. No colored shadows except a faint gold glow on highlighted cards.
- **Density**: Generous padding (18–22px) inside cards. Whitespace signals confidence.

## Component Rationale
- **Race cards**: Track name in serif dominates; meta in tabular sans underneath. Crest icon provides instant type recognition without color overload.
- **Confidence gauge**: Horizontal gold fill on pewter track. LOW / MEDIUM / HIGH anchors make it scannable.
- **Runner rows**: Barrier in gold-rimmed circle creates a vertical rhythm. Stats row uses tabular alignment so columns line up across rows.
- **Tip ticket**: Perforated dashed lines (`repeating-linear-gradient`) and gold border evoke a physical betting slip. Makes the tip feel tangible.
- **Tab bar**: Frosted blur with subtle border. Gold active state. Icons are thin-stroke SVGs to match the hairline aesthetic.

## Light variant (not mocked)
An ivory `#F4EFE6` background with charcoal text could invert the hierarchy for daytime use, retaining the same gold accent and serif/sans pairing.