> ## Documentation Index
> Fetch the complete documentation index at: https://docs.brainstormer.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Neo Foundations

> Color palette, typography, spacing, border radius, and iconography tokens for the Neo design system.

## Color Palette

Neo uses a curated set of color tokens across brand, semantic, and neutral categories. Every color has a specific role -- never use raw hex values outside these tokens.

### Brand Colors

| Token                  | Hex       | Role                                            |
| ---------------------- | --------- | ----------------------------------------------- |
| `--color-brand-blue`   | `#3B39A7` | Primary brand accent, links, selected states    |
| `--color-brand-orange` | `#E47037` | Secondary brand accent, highlights, CTAs        |
| `--color-brand-salmon` | `#E4AD8C` | Tertiary accent, illustrations, warm UI touches |

### Core UI Colors

| Token                   | Hex       | Role                                                      |
| ----------------------- | --------- | --------------------------------------------------------- |
| `--color-navy`          | `#0E172A` | Primary button backgrounds, headings, high-emphasis text  |
| `--color-purple`        | `#6B5EF8` | Interactive focus rings (inputs), AI/intelligence accents |
| `--color-progress-blue` | `#3B50E2` | Progress bars, loading indicators, active states          |

### Semantic Colors

| Token                 | Hex       | Role                                                  |
| --------------------- | --------- | ----------------------------------------------------- |
| `--color-destructive` | `#E53835` | Destructive actions, error states, overage indicators |
| `--color-success`     | `#2E7D52` | Success confirmations, positive status, completion    |

### Neutral / Surface Colors

| Token              | Hex       | Role                                                   |
| ------------------ | --------- | ------------------------------------------------------ |
| `--color-bg-light` | `#F4F4F8` | Page background, card surfaces                         |
| `--color-white`    | `#FFFFFF` | Card backgrounds, input backgrounds, overlays          |
| `--color-border`   | `#E2E2EA` | Dividers, card borders, input borders                  |
| `--color-disabled` | `#C4C4CF` | Disabled text, disabled button fills, placeholder text |

<Check>
  Use semantic tokens (`--color-destructive`, `--color-success`) for status communication -- they carry meaning independent of theme.
</Check>

<Danger>
  Never use `--color-destructive` (red) for non-destructive actions or decorative purposes. Red always signals danger or error.
</Danger>

***

## Typography

Neo uses **Inter** as its sole typeface across all weights and sizes. All type tokens are defined as combinations of size, weight, and line-height.

### Type Scale

| Token               | Size | Weight         | Line Height | Use Case                                |
| ------------------- | ---- | -------------- | ----------- | --------------------------------------- |
| `--type-display`    | 36px | 700 (Bold)     | 44px        | Hero sections, landing page titles      |
| `--type-heading-xl` | 28px | 700 (Bold)     | 36px        | Page titles                             |
| `--type-heading-lg` | 22px | 600 (Semibold) | 28px        | Section headings                        |
| `--type-heading-sm` | 18px | 600 (Semibold) | 24px        | Card titles, subsection headings        |
| `--type-label-lg`   | 15px | 600 (Semibold) | 20px        | Button text, tab labels, form labels    |
| `--type-label-sm`   | 13px | 500 (Medium)   | 18px        | Badges, small labels, metadata          |
| `--type-body`       | 15px | 400 (Regular)  | 22px        | Body copy, descriptions, form help text |
| `--type-caption`    | 12px | 400 (Regular)  | 16px        | Timestamps, footnotes, secondary info   |

<Tip>
  Use `--type-label-lg` for interactive elements (buttons, tabs) and `--type-body` for readable content. Never use display or heading tokens inside components.
</Tip>

***

## Spacing Scale

Spacing follows a 4px base unit. Use these tokens for all margin, padding, and gap values.

| Token        | Value | Common Use                                         |
| ------------ | ----- | -------------------------------------------------- |
| `--space-1`  | 4px   | Tight inline spacing, icon-to-text gap             |
| `--space-2`  | 8px   | Related element grouping, input padding (vertical) |
| `--space-3`  | 12px  | Standard component internal padding                |
| `--space-4`  | 16px  | Card padding, form field spacing                   |
| `--space-5`  | 20px  | Section sub-spacing                                |
| `--space-6`  | 24px  | Section padding, modal padding                     |
| `--space-8`  | 32px  | Section gaps, large card padding                   |
| `--space-10` | 40px  | Page-level vertical rhythm                         |
| `--space-12` | 48px  | Major section dividers                             |
| `--space-16` | 64px  | Page top/bottom padding, hero spacing              |

<Note>
  The scale skips values at 7, 9, 11, 13-15 intentionally. If you find yourself needing an in-between value, reconsider whether you are grouping content correctly.
</Note>

***

## Border Radius Scale

| Token           | Value   | Use Case                                     |
| --------------- | ------- | -------------------------------------------- |
| `--radius-sm`   | 3-4px   | Small chips, badges, inline tags             |
| `--radius-md`   | 5-6px   | Buttons, inputs, dropdowns, cards            |
| `--radius-lg`   | 8px     | Modals, dialogs, larger cards                |
| `--radius-xl`   | 10-12px | Image containers, feature cards              |
| `--radius-full` | 9999px  | Avatars, pills, toggle knobs, circular icons |

<Check>
  Use `--radius-md` (5-6px) as the default for all interactive elements -- buttons, inputs, and dropdowns share this radius.
</Check>

<Danger>
  Do not mix radius tokens within the same component. A card with `--radius-lg` corners should not contain elements with `--radius-xl`.
</Danger>

***

## Iconography

All icons in Neo follow a consistent sizing and style specification.

| Property           | Value                          |
| ------------------ | ------------------------------ |
| Standard dimension | 20 x 20px                      |
| Stroke width       | 1.5px                          |
| Corner rounding    | 1px                            |
| Optical padding    | 2px (within 20px bounding box) |

### Key Icon Types

| Category          | Examples                                      | Context                                    |
| ----------------- | --------------------------------------------- | ------------------------------------------ |
| Navigation        | Arrow-left, Chevron-down, Menu                | Top bar, breadcrumbs, dropdowns            |
| Action            | Plus, Edit, Trash, Download, Upload           | Buttons, table row actions                 |
| Status            | Check-circle, X-circle, Alert-triangle, Clock | Toasts, badges, upload cards               |
| AI / Intelligence | Sparkle, Brain, Wand                          | Optimise prompts button, AI features       |
| Media             | Image, File, Mic, Volume                      | Upload cards, knowledge base, voice config |

<Tip>
  Icons always sit at 20x20 regardless of the component size. Scale the component, not the icon. The only exception is decorative hero illustrations.
</Tip>