<!-- SPDX-License-Identifier: MIT -->
<!-- SPDX-FileCopyrightText: 2025-2026 Marcus Quinn -->

# Design System: Linear — Colour Palette & Roles

## Background Surfaces

| Name | Value | Role |
|------|-------|------|
| Marketing Black | `#010102` / `#08090a` | Hero/marketing pages — near-pure black, blue-cool undertone |
| Panel Dark | `#0f1011` | Sidebar and panel backgrounds |
| Level 3 Surface | `#191a1b` | Elevated surfaces, card backgrounds, dropdowns |
| Secondary Surface | `#28282c` | Hover states, slightly elevated components |

## Text & Content

| Name | Value | Role |
|------|-------|------|
| Primary Text | `#f7f8f8` | Default — near-white (not pure white) reduces eye strain |
| Secondary Text | `#d0d6e0` | Body text, descriptions, secondary content |
| Tertiary Text | `#8a8f98` | Placeholders, metadata, de-emphasized content |
| Quaternary Text | `#62666d` | Timestamps, disabled states, subtle labels |

## Brand & Accent

| Name | Value | Role |
|------|-------|------|
| Brand Indigo | `#5e6ad2` | CTA backgrounds, brand marks, key interactive surfaces |
| Accent Violet | `#7170ff` | Links, active states, selected items |
| Accent Hover | `#828fff` | Hover states on accent elements |
| Security Lavender | `#7a7fad` | Security-related UI elements only |

## Status

| Name | Value | Role |
|------|-------|------|
| Green | `#27a644` | Primary success/active — "In progress" indicators |
| Emerald | `#10b981` | Secondary success — pill badges, completion states |

## Border & Divider

| Name | Value | Role |
|------|-------|------|
| Border Primary | `#23252a` | Solid dark — prominent separations |
| Border Secondary | `#34343a` | Slightly lighter solid border |
| Border Tertiary | `#3e3e44` | Lightest solid border variant |
| Border Subtle | `rgba(255,255,255,0.05)` | Ultra-subtle semi-transparent — the default |
| Border Standard | `rgba(255,255,255,0.08)` | Cards, inputs, code blocks |
| Line Tint | `#141516` | Nearly invisible — subtlest divisions |
| Line Tertiary | `#18191a` | Slightly more visible divider line |

## Light Mode Neutrals

| Name | Value | Role |
|------|-------|------|
| Light Background | `#f7f8f8` | Page background in light mode |
| Light Surface | `#f3f4f5` / `#f5f6f7` | Subtle surface tinting |
| Light Border | `#d0d6e0` | Visible border in light contexts |
| Light Border Alt | `#e6e6e6` | Alternative lighter border |
| Pure White | `#ffffff` | Card surfaces, highlights |

## Overlay

| Name | Value | Role |
|------|-------|------|
| Overlay Primary | `rgba(0,0,0,0.85)` | Modal/dialog backdrop — extremely dark for focus isolation |
