# RoloMob — Colour

Dark-first, fun and high-energy, high-contrast. A near-black canvas lit by a
bright orange + green brand, warm accents used to add playfulness.

![Palette](palette.png)

## Brand

| Token         | Hex        | RGB              | Use                                  |
|---------------|------------|------------------|--------------------------------------|
| Flame         | `#FF8C42`  | 255, 140, 66     | Primary brand, start of the gradient |
| Gold          | `#FFC24A`  | 255, 194, 74     | Warm yellow, mid-gradient, highlights|
| Green         | `#3FE592`  | 63, 229, 146     | Secondary brand, links, gradient end |
| Green Bright  | `#84F4C2`  | 132, 244, 194    | Lit edge, hover, glow                |
| Lime          | `#BDF24A`  | 189, 242, 74     | Acid spark, 4-stop gradient stop     |
| Coral         | `#FF6B6B`  | 255, 107, 107    | Warm hot accent                      |
| Amber         | `#FFD23C`  | 255, 210, 60     | Warm highlight accent                |

**Signature gradient:** `linear-gradient(110deg, #FF8C42 0%, #FFC24A 45%, #3FE592 100%)`
(flame to gold to green).

**4-stop gradient:** `#FF8C42 → #FFC24A → #BDF24A → #3FE592`

## Accent (use sparingly)

| Token    | Hex        | Use                                   |
|----------|------------|---------------------------------------|
| Lime     | `#BDF24A`  | Rare "live"/success spark, status dot |
| Coral    | `#FF6B6B`  | Rare hot accent in multi-stop gradients|
| Amber    | `#FFD23C`  | Rare warm highlight                   |

## Surfaces (never pure black)

| Token     | Hex        | Use                              |
|-----------|------------|----------------------------------|
| Void      | `#070A0E`  | Deepest backdrop                 |
| Base      | `#0B0E13`  | Page background                  |
| Subtle    | `#10141B`  | Slightly raised background       |
| Surface   | `#182029`  | Cards, panels                    |
| Elevated  | `#232C38`  | Hover/active surfaces            |
| Inset     | `#06090D`  | Recessed wells, inset shadows    |

## Text

| Token   | Hex        | Use                          |
|---------|------------|------------------------------|
| Ink     | `#EFF3F8`  | Primary text                 |
| Muted   | `#B6C0CE`  | Secondary text               |
| Faint   | `#8590A0`  | Tertiary / disabled          |

## Status

| Token    | Hex        |
|----------|------------|
| Success  | `#3CE08A`  |
| Warning  | `#FFCE3A`  |
| Danger   | `#FF5470`  |

---

## Usage rules

- **Backgrounds are dark by default.** Light/white layouts (invoices, formal
  documents) are allowed: use Base/Ink inverted (dark ink on white), brand
  colours unchanged for accents.
- **Brights are an accent, not a fill.** Large flat areas of neon read cheap;
  use them for the logo, edges, links, glows, and small emphasis.
- **Contrast:** Ink on Base passes AA. The bright greens and gold need a dark
  surface behind them. On a white or light background, body text uses a readable
  dark green/ink (not the bright neons); the brights are for dark backgrounds,
  edges, glows and accents.

These are the same tokens defined in the website at
`src/styles/global.css` (`@theme`, `--color-*`). Keep them in sync.
