# ConniXT Color Palette

Canonical color tokens from the platform design system, as actually
shipped in `apps/connixt-web/apps/app/lib/industry-theme.ts`. Tailwind
class names + hex + RGB form for tooling that does not consume
Tailwind directly.

## Industry accents

Each industry has a single accent color. The accent paints: the mark
stroke, the "X" letter in the wordmark, primary CTAs, link hover state,
KPI value emphasis, and key data-driven indicators (e.g. the "Live"
sample-data toggle pill).

### Construction -- BuildConniXT

| Token        | Tailwind            | Hex       | RGB                  |
|--------------|---------------------|-----------|----------------------|
| accent       | `text-amber-400`    | `#fbbf24` | `rgb(251, 191, 36)`  |
| accentBg     | `bg-amber-500`      | `#f59e0b` | `rgb(245, 158, 11)`  |
| accentBgHover| `hover:bg-amber-400`| `#fbbf24` | `rgb(251, 191, 36)`  |
| accentBorder | `border-amber-500/30` | `#f59e0b4d` | `rgba(245, 158, 11, 0.30)` |

### Insurance -- InsureConniXT

| Token        | Tailwind              | Hex       | RGB                  |
|--------------|-----------------------|-----------|----------------------|
| accent       | `text-emerald-400`    | `#34d399` | `rgb(52, 211, 153)`  |
| accentBg     | `bg-emerald-500`      | `#10b981` | `rgb(16, 185, 129)`  |
| accentBgHover| `hover:bg-emerald-400`| `#34d399` | `rgb(52, 211, 153)`  |
| accentBorder | `border-emerald-500/30` | `#10b9814d` | `rgba(16, 185, 129, 0.30)` |

### Finance -- FinanceConniXT

| Token        | Tailwind            | Hex       | RGB                  |
|--------------|---------------------|-----------|----------------------|
| accent       | `text-blue-400`     | `#60a5fa` | `rgb(96, 165, 250)`  |
| accentBg     | `bg-blue-500`       | `#3b82f6` | `rgb(59, 130, 246)`  |
| accentBgHover| `hover:bg-blue-400` | `#60a5fa` | `rgb(96, 165, 250)`  |
| accentBorder | `border-blue-500/30` | `#3b82f64d` | `rgba(59, 130, 246, 0.30)` |

### PayConniXT

PayConniXT is the sub-product domain rather than an industry. It adopts
the **visitor's industry accent** via the cross-origin theme primitive
(query param `?from=construction` / `insurance` / `finance` or cookie).
On a fresh / no-context visit it defaults to **amber** (construction).

## Dark-theme background scale

The platform uses a single dark-theme scale across all industries. The
accent is the only color that swaps; the structural surface is shared.

| Token             | Tailwind            | Hex       | Role                                  |
|-------------------|---------------------|-----------|---------------------------------------|
| background-deep   | `bg-zinc-950`       | `#09090b` | Page background                       |
| background-elevated | `bg-zinc-900`     | `#18181b` | Cards, panels, modal surfaces         |
| background-surface | `bg-zinc-800`      | `#27272a` | Hover state, secondary surfaces       |
| border-1          | `border-white/5`    | `#ffffff0d` | Surface-on-surface separation         |
| border-2          | `border-white/10`   | `#ffffff1a` | CTA borders, panel outlines           |

## Text scale

| Token   | Tailwind            | Hex       | Role                                  |
|---------|---------------------|-----------|---------------------------------------|
| text-1  | `text-zinc-50`      | `#fafafa` | Body copy, primary headings           |
| text-2  | `text-zinc-300`     | `#d4d4d8` | Secondary copy, nav links             |
| text-3  | `text-zinc-400`     | `#a1a1aa` | Captions, muted descriptors           |
| text-4  | `text-zinc-500`     | `#71717a` | Footnotes, copyright, legal           |
| text-5  | `text-zinc-600`     | `#52525b` | Decorative / placeholder text         |

## Where these come from

These values are not invented in this document -- they are the actual
Tailwind classes used in production. Source of truth:

- `apps/connixt-web/apps/app/lib/industry-theme.ts` -- industry accent
  token assignments.
- Tailwind 4 / `apps/connixt-web/apps/app/app/globals.css` -- the dark-
  theme structural scale.