Koodle design system

Every token below is wired into Tailwind v4’s @theme block in apps/web/src/app/globals.css. Theme flips via next-themes on the toggle in the topbar.

Color tokens

@theme inline → CSS vars → tailwind utilities

background

--background

foreground

--foreground

card

--card

muted

--muted

primary

--primary

agent

--agent

agent-bg

--agent-bg

ai-bg

--ai-bg

bubble

--bubble

diff-bg

--diff-bg

warning

--warning

info

--info

destructive

--destructive

border

--border

input

--input

ring

--ring

Text scale

prototype --t1..t4

The quick brown fox

t1 — foreground

The quick brown fox

t2 — body

The quick brown fox

t3 — secondary

The quick brown fox

t4 — tertiary

Typography scale

Inter Variable · prototype uses 9–18px throughout

koodle

18px · 600 · -0.5px

AAPL thesis

17px · 600 · -0.3px

Section heading

14px · 500 · 0

Default body copy

13px · 400 · 0

Project name · sidebar

12px · 500 · 0

Secondary meta · 156 entries

11px · 500 · 0

LABEL · UPPERCASE

10px · 600 · 0.5px

MICRO LABEL

9px · 600 · 0.4px

Button variants

cva variants from @/components/ui/button — added lazily as features need them

Anchor styled as button

Sample primitives

patterns downstream issues (#48–#64) will reuse

Koodle

Sample agent message using bg-agent-bg and a 2.5px border-agent left edge. This is the shape every assistant reply will use in #50.

Sample user message using bg-bubble and an asymmetric border radius (4px on the bottom-right corner).

✎

file-update notification

uses bg-diff-bg + border-warning

Saved

Inline claim with citation — the chip is a real <button>, not a span with role.

AAPL thesis7 inbound47,832 NexusKoodle active

⚠ Conflict warning

Sample destructive surface — uses bg-destructive/5 with a 3px border-destructive left edge.