| name | mesh-design-tokens |
| description | Mesh UI code must use the MESH.* tokens and existing primitives (AppShell, Pill, Dot, NavIcon). Never hand-roll new colors, borders, or layout shells. |
| kind | pattern |
| allowed-tools | ["Read","Grep"] |
| paths | ["mesh/app/**/*.tsx","mesh/components/**/*.tsx"] |
| disable-model-invocation | false |
mesh-design-tokens
All visual surfaces inside the Mesh app share a single token palette defined
in mesh/components/mesh/tokens.ts and mirrored as CSS variables in
mesh/app/globals.css. When you add or edit a UI, consume those tokens.
How to apply
- Colors: import
MESH and use MESH.bg, MESH.bgElev, MESH.border,
MESH.fg, MESH.fgDim, MESH.fgMute, MESH.amber, MESH.green,
MESH.red, MESH.blue, MESH.purple. Never paste raw hex values.
- Layout shell: wrap pages in
<AppShell title=… subtitle=… topRight=…>.
Do not build ad-hoc sidebars or headers.
- Primitives:
<Pill tone="amber|green|red|dim|default">, <Dot color={MESH.green} />,
<NavIcon kind="connect|build|ship|skills|home|branch|..."> — reuse
before introducing new SVGs.
- Font: body is Inter by default; monospace via the
font-mono class
(JetBrains Mono). Don't set fontFamily inline.
- Accent is amber (
MESH.amber, #F5A524). Success is MESH.green,
destructive is MESH.red. Don't invent new meanings.
Checklist before writing JSX
- Can I reuse
AppShell instead of writing my own <main> + header?
- Can I reuse
<Pill> / <Dot> / <NavIcon> instead of a div with styles?
- Am I about to write a color value that isn't on
MESH.*? If yes, stop
and pick the nearest token.
- If a new primitive seems necessary, add it to
mesh/components/mesh/ so it joins the system — don't fork inline.
Reference
- Tokens:
mesh/components/mesh/tokens.ts
- Primitives:
mesh/components/mesh/{app-shell,sidebar,topbar,pill,icons,thinking-panel}.tsx
- CSS vars:
mesh/app/globals.css
