# V7 Token Audit — Brand vs Product Classification

Date: 2026-04-29 · Source: `mvp2/src/index.css` + 17 V7-scoped CSS files.

The product accumulated ~80 `--v7-*` tokens across two declaration scopes:
1. **Global** (`mvp2/src/index.css :root`)
2. **Layout-scoped** (`.chats-layout`, `.lib2`, `.doc-detail-page`)

This audit classifies each into BRAND (extracted to `tokens.css`), PRODUCT (stays scoped), or AMBIGUOUS (flagged for review).

## BRAND — extracted to canonical tokens.css

These tokens express the Outlex visual identity. Any consumer (website, mobile, partner integrations) should use these.

| Token | Hex | Renamed to | Reason |
|---|---|---|---|
| `--v7-bg` | `#FAF8F5` | `--outlex-bg` | Page surface, cross-product |
| `--v7-bg-raised` | `#F5F2EE` | `--outlex-bg-raised` | Standard raised surface |
| `--v7-bg-hover` | `#F0EBE2` | `--outlex-bg-hover` | Standard hover state |
| `--v7-card` | `#FFFFFF` | `--outlex-card` | |
| `--v7-card-hover` | `#FAF7F2` | `--outlex-card-hover` | |
| `--v7-fg` | `#2D2A26` | `--outlex-fg` | Body text |
| `--v7-fg-ink` | `#231F20` | `--outlex-fg-ink` | CTA-on-sage WCAG |
| `--v7-fg-secondary` | `#4A4641` | `--outlex-fg-secondary` | |
| `--v7-fg-muted` | `#6B6460` | `--outlex-fg-muted` | |
| `--v7-meta` | `#8A847C` | `--outlex-meta` | |
| `--v7-meta-light` | `#ABA59D` | `--outlex-meta-light` | |
| `--v7-border` | `#E8E4DF` | `--outlex-border` | |
| `--v7-border-hover` | `#D5D0CA` | `--outlex-border-hover` | |
| `--v7-primary` | `#6B7EC2` | `--outlex-primary` | Warm blue |
| `--v7-primary-text` | `#5A6BA8` | `--outlex-primary-text` | AA text |
| `--v7-sage` | `#6B8F71` | `--outlex-sage` | Default primary CTA |
| `--v7-sage-deep` | `#5F8165` | `--outlex-sage-deep` | |
| `--v7-sage-text` | `#4A7050` | `--outlex-sage-text` | |
| `--v7-amber` | `#C49432` | `--outlex-amber` | Warning, focus ring |
| `--v7-amber-text` | `#7D5C0A` | `--outlex-amber-text` | |
| `--v7-terra` | `#C27256` | `--outlex-terra` | Risk |
| `--v7-terra-text` | `#8B3D20` | `--outlex-terra-text` | |
| `--v7-danger` | `#B03A2E` | `--outlex-danger` | |
| `--v7-danger-text` | `#B03A2E` | `--outlex-danger-text` | |
| `--v7-font-heading` | Fraunces | `--outlex-font-heading` | |
| `--v7-font-sans` | Inter | `--outlex-font-sans` | |
| `--v7-r-sm` (8px) | | `--outlex-radius-md` (renamed) | Standard inner radius |
| `--v7-r-md` (12px) | | `--outlex-radius-lg` (renamed) | Standard card radius |
| `--v7-s1` | shadow | `--outlex-shadow-1` | Warm-base shadow elevation |
| `--v7-s2` | shadow | `--outlex-shadow-2` | |
| `--v7-shadow-level-2` | shadow | `--outlex-shadow-3` | (consolidated) |
| `--v7-shadow-level-3` | shadow | `--outlex-shadow-4` | (consolidated) |
| `--v7-s-highlight` | inset | `--outlex-inset-highlight` | |
| `--v7-ease` | cubic-bezier | `--outlex-ease` | |
| `--v7-bounce` | cubic-bezier | `--outlex-bounce` | |
| `--v7-focus-ring-1` | shadow | `--outlex-focus-ring-1` | Amber trust ring |
| `--v7-focus-ring-2` | shadow | `--outlex-focus-ring-2` | |
| `--v7-focus-border` | rgba | `--outlex-focus-border` | |
| `--v7-sage-glow` | shadow | `--outlex-sage-glow` | |

**Total**: 38 tokens promoted to canonical.

## PRODUCT — stays in mvp2 scoped CSS

These are interaction states, surface variants, or layout-specific tokens that do NOT belong in a cross-product brand system. They reference product-internal grammars (`.chats-layout`, `.lib2-*`, `.doc-detail-page`) and can drift between layouts without breaking the brand.

| Token | Why it stays product-internal |
|---|---|
| `--v7-sage-soft` (3 different alphas across scopes: 0.06, 0.08, 0.10) | Layout-specific opacity tuning |
| `--v7-sage-mid`, `--v7-sage-glow` | Layout-specific |
| `--v7-primary-soft` (3 scopes, different alphas) | Layout-specific opacity |
| `--v7-primary-mid` (2 alphas) | Layout-specific |
| `--v7-amber-soft`, `--v7-amber-mid` | Layout-specific |
| `--v7-terra-soft` | Layout-specific |
| `--v7-danger-soft`, `--v7-danger-border`, `--v7-danger-border-hover` | Layout-specific |
| `--v7-destructive-text`, `--v7-destructive-border` | Component-internal |
| `--v7-bg-soft`, `--v7-fg-soft` | Layout-specific alpha |
| `--v7-meta-faint` | Layout-specific |
| `--v7-border-hairline`, `--v7-border-soft`, `--v7-border-strong`, `--v7-border-subtle`, `--v7-hairline` | Layout-specific border treatments |
| `--v7-r-md` (when 12px in `.chats-layout`) | Could be brand — keep one canonical, drop scoped |
| `--v7-surface-primary` | Already aliased to `#FFFFFF` — redundant with canonical `--outlex-card` |

**Total**: ~30 tokens stay in scoped CSS files.

## AMBIGUOUS — flagged for review

| Token | Question |
|---|---|
| `--v7-blue` (aliases `--v7-primary`) | Redundant alias — drop in favor of `--outlex-primary`? |
| `--v7-fg-ink` vs `--v7-fg` | Two charcoal variants. Keep both? Yes — `fg-ink` is darker for CTA-on-sage WCAG. Promoted both. |

## Brand-level tokens NOT currently in V7 namespace

Extracted from `mvp2/src/index.css :root` (non-V7 tokens that ARE brand-level):

- `--mark-gradient-blue` (#306aef) — promoted to `--outlex-mark-blue`
- `--mark-gradient-teal` (#54d6a4) — promoted to `--outlex-mark-teal`
- `--shadow-warm-base` (40, 35, 30) — promoted to `--outlex-shadow-warm-base`
- Type scale (hero, display-lg, display, title, section, item, body, meta, chip, 2xs) — promoted to `--outlex-text-*`
- Radius scale (xs, sm, md, lg, xl) — promoted to `--outlex-radius-*`

## Sage hex divergence (D BLOCKER #3)

- `mvp2`: `--accent-sage: 125 15% 49%` (HSL) annotated as `#6B8F71`
- `outlex-corporate-website`: `--secondary: 125 15% 49%` (same HSL) annotated as `#7A9E7E`

Same HSL value → same rendered color. The hex annotation drift is a comment lie. Canonical `--outlex-sage: #6B8F71` is correct.

**Action**: when wiring `outlex-corporate-website` (Phase 0d), update its CSS comment to match `#6B8F71`.

## Tailwind config additions

`mvp2/tailwind.config.ts` defines tokens that are also brand-level but NOT currently as CSS vars:
- Container max-widths (`content: 1280px`, `sidebar: 360px`, `inspector: 520px`, etc.) — these are layout, not brand. NOT promoted.
- Z-index scale (dropdown: 50, modal: 70, toast: 90, etc.) — layout/UX, not brand. NOT promoted.
- Animation keyframes (40+) — product-internal. NOT promoted.

## Open questions

1. **Should `--outlex-bg-hover` ship to brand?** It's an interaction state. Decision: yes — same hover color across products keeps the brand consistent. Different layouts can override locally if needed.
2. **Insight category colors** (`--insight-compliance-*`, `--insight-risk-*`, etc.) — product-feature-specific. NOT promoted.
3. **Sidebar tokens** (`--sidebar-background`, `--sidebar-primary`, etc.) — product-feature-specific. NOT promoted.

## Next steps

- mvp2 imports canonical `tokens.css` from this repo (Phase 0d). Existing `--v7-*` declarations stay as aliases pointing at canonical: `--v7-fg: var(--outlex-fg);`.
- Scoped V7 CSS files retain their layout-specific tokens.
- `outlex-corporate-website` adopts canonical and removes its divergent hex annotations.