---
name: design-system
description: LynkedUp Pro design tokens sampled from the live dashboard (defaults for this app)
metadata:
  type: reference
---

Tokens sampled live from `https://lynkeduppro-crmnew.vercel.app/dashboard` (computed styles),
used as the **default theme**. All are overridable via `NEXT_PUBLIC_THEME_*` or the in-app
Appearance panel. Source of truth in code: `packages/messaging-inbox-sdk/src/config.ts`.

**Accent:** `#FDA913` (golden amber). Solid usage ~0.92 opacity; soft tints at 0.12
(`rgba(253,169,19,0.12)`).

**Dark surfaces:** app bg `#060608`, sidebar `#08080b`, panel/card `#0e0e13`, elevated
`#15151c`. Borders `rgba(255,255,255,0.08)`. Text: ink `#ededf1`, muted `#8c8c94`, dim `#63636b`.

**Light surfaces:** app bg `#f6f7f9`, surface/panel `#ffffff`, borders `rgba(9,10,14,0.10)`,
ink `#14151a`, muted `#5c6069`. Accent nudged to `#e8920a` for contrast on white.

**Radii:** cards **20px**, controls/buttons **10px**, pills 999px.
**Font:** Inter (system-ui fallback). **Layout:** dark sectioned sidebar + user card footer;
top header with search, theme toggle, notifications, user menu (matches the reference exactly).

**Brand gradient:** `linear-gradient(135deg,#FDA913,#ff7a3d,#ff4d6d)`.

If the reference site restyles, re-sample with the browser devtools/`getComputedStyle` and
update the token blocks in `config.ts` + defaults in `app/globals.css`.