# 12px Rebase Proposal

Shrink body text from 13px to 12px, override Tailwind v4's `@theme` font-size scale so standard classes (`text-xs`, `text-sm`, etc.) map to our custom pixel values. Maintain tool text < message text hierarchy throughout.

01 The @theme Override

Tailwind v4 lets you redefine what each text utility means via `--text-*` CSS variables in the `@theme {}` block. Each size gets a paired default line-height. Components still use explicit `leading-*` classes when they need prose (1.7) or code (1.55) line-height.

/* style.css — replace the current root font-size and add to @theme */ @layer base { html, body { /* ↓ changed from 13px */ font-size: 12px; line-height: 1.5; } } @theme { /* ── Font Size Scale ──────────────────────────────────── Override Tailwind defaults so standard classes map to our pixel values. Each size pairs with a default line-height that works for its most common context. ─────────────────────────────────────────────────────── */ --text-xs: 10px; --text-xs--line-height: 1.4; --text-sm: 11px; --text-sm--line-height: 1.4; --text-base: 12px; --text-base--line-height: 1.5; --text-lg: 15px; --text-lg--line-height: 1.4; --text-xl: 20px; --text-xl--line-height: 1.3; --text-2xl: 24px; --text-2xl--line-height: 1.2; /* text-3xl+ left at Tailwind defaults (rem-based), only used for decorative elements like the StepDone checkmark. At 12px root: text-3xl=22.5px, text-4xl=27px, text-5xl=36px */ /* ... rest of existing @theme tokens unchanged ... */ }
Every `text-[Npx]` arbitrary value in the codebase gets replaced with a standard class. No more `text-[13px]`, `text-[11px]`, `text-[10px]`, etc.
02 The New Scale

7 stops, all standard Tailwind class names. Specimens rendered at actual pixel sizes.

Current — 13px base, arbitrary classes
9.75px text-xs Tool stats, metadata, hints
10px text-[10px] Badges, version, context %
11px text-[11px] Section headers, gutters, role labels
11.375px text-sm Buttons, instructions, tabs
13px text-[13px] Body text, menus, sidebar actions
13px text-base Textarea (duplicate!)
15px text-[15px] Project name header
19.5px text-2xl Page title (dashboard)
22px text-[22px] Page title (setup/pin)
Proposed — 12px base, standard classes
10px text-xs Badges, tool output, tiny labels default lh 1.4
11px text-sm Metadata, section headers, tool labels default lh 1.4
12px text-base Body text, menus, sidebar, buttons, textarea default lh 1.5
15px text-lg Section headings, project name default lh 1.4
20px text-xl Page titles (secondary) default lh 1.3
24px text-2xl Page titles (primary) default lh 1.2
Zero arbitrary values. Every component uses a standard Tailwind class.
`text-3xl`+ left at Tailwind defaults for rare decorative use.
03 Tool vs Message Text Hierarchy

The key design requirement: tool text and code inside tool calls should be visibly smaller than text and code inside assistant messages. The new scale creates a cleaner 3-tier cascade with 1px steps instead of the current jagged jump from 13px to 9.75px.

Current — 3.25px jump
Assistant

I'll update the config file. Here's the change:

    const config = {
      port: 3000,
      host: "localhost"
    };

This sets the default port to 3000.

Prose: 13px / 1.7 · Code block: 13px / 1.55 · Inline code: 0.87em = 11.3px
⚙ Write src/config.ts 3 lines
const config = { port: 3000, host: "localhost" };
Tool label: text-xs (9.75px) · Tool result: text-xs (9.75px) · Jump from message: -3.25px
Proposed — 1px steps
Assistant

I'll update the config file. Here's the change:

    const config = {
      port: 3000,
      host: "localhost"
    };

This sets the default port to 3000.

Prose: text-base (12px) / 1.7 · Code block: text-base (12px) / 1.55 · Inline code: same size, just styled
⚙ Write src/config.ts 3 lines
const config = { port: 3000, host: "localhost" };
Tool label: text-sm (11px) · Tool result: text-xs (10px) / 1.55 · Tags: text-xs (10px)
The cascade:
Message prose 12px → Tool header 11px (-1px) → Tool output 10px (-1px).
Clean 1px steps vs the current jagged 13px → 9.75px (-3.25px) drop.
04 Markdown Content (em-based cascade)

The `.md-content` headings use `em` units (1.35em, 1.2em, 1.1em), so they automatically scale down with the body. Inline code used `0.87em` which at 12px yields 10.4px — too close to tool output. Recommendation: bump inline code to `1em` and differentiate purely via background/border styling.

Current — 13px base
Heading 1 ← 17.6px
Heading 2 ← 15.6px
Heading 3 ← 14.3px

Body text with `inline code` at 0.87em ← 11.3px

pre code block ← 13px (explicit)
Proposed — 12px base
Heading 1 ← 16.2px
Heading 2 ← 14.4px
Heading 3 ← 13.2px

Body text with `inline code` at 1em ← 12px (matches body)

pre code block ← text-base (12px)
Headings scale automatically via `em`. No changes needed.
Inline code: change 0.87em → 1em — differentiate with bg/border only.
Pre code: change text-[13px] → text-base.
05 Sidebar at 12px

Sidebar action buttons and session items move from `text-[13px]` to `text-base` (12px). Session metadata moves from `text-[11px]` to `text-sm` (11px — same px, standard class).

Current — 13px
Proposed — 12px
Actions/sessions: text-base (12px). Brand name: text-sm (11px). Section header: text-sm (11px). Meta: text-sm (11px) — same px, now standard class. Version: text-xs (10px).
06 Buttons & Dropdowns at 12px

All button tiers and dropdown items shift to the new scale. Padding stays the same — the slightly smaller text creates a touch more breathing room without looking sparse.

Current
CTA buttons (setup)
text-sm (11.375px)
Modal buttons
text-[13px]
Inline buttons
text-xs (9.75px)
Dropdown items
/compact Toggle compact mode
claude-sonnet-4-20250514
text-[13px], mixed padding
Proposed
Tier 1 — CTA
text-base · font-semibold · px-6 py-3
Tier 2 — Secondary / Modal
text-base · font-medium · px-4 py-2
Tier 3 — Inline / Small
text-sm · font-medium · px-3 py-1.5
Dropdown items (unified)
/compact Toggle compact mode
claude-sonnet-4-20250514
text-base · py-2 px-3.5 · unified padding
07 Full Message Conversation at 12px

A realistic conversation showing the complete hierarchy: user message (12px) → assistant prose (12px) → thinking block (12px / 1.55 code lh) → tool header (11px) → tool result (10px) → assistant continuation (12px).

Proposed — 12px base, full conversation
You
Can you check what port the server is running on and update it to 8080?
Assistant

I'll check the current server configuration and update the port.

Thinking 1.2s
I need to find the server config file. It's likely in src/config.ts or a similar location...
🔍 Read src/config.ts 12 lines
export const config = { port: 3000, host: "0.0.0.0", cors: true, logLevel: "info", };
✎ Edit src/config.ts 1 change
- port: 3000, + port: 8080,

Done. The server was running on port `3000` and I've updated it to `8080` in `src/config.ts`.

You'll need to restart the server for the change to take effect.

Hierarchy clearly visible: 12px prose → 11px tool headers → 10px tool output.
All using standard classes: text-base, text-sm, text-xs.
08 Complete Cascading Impact

Every element that changes, organized by component area. "Same" means the pixel value doesn't change, just the class name becomes standard.

Element | Current | Proposed | Notes
--- | --- | --- | ---
Root
html, body font-size | 13px | 12px | Root change. All inherited sizes shift.
Chat Messages
Role labels (You / Assistant) | text-[11px] | text-sm (11px) | Same px, standard class
Message body prose | text-[13px] leading-[1.7] | text-base leading-[1.7] | 13px → 12px
Message body code blocks | text-[13px] leading-[1.55] | text-base leading-[1.55] | 13px → 12px, matches surrounding prose
Inline code (md-content) | text-[0.87em] (11.3px) | text-[1em] (12px) | Matches body. Differentiate via bg/border only.
md-content headings (h1/h2/h3) | 1.35em / 1.2em / 1.1em | unchanged (auto-scales) | 16.2 / 14.4 / 13.2px (was 17.6 / 15.6 / 14.3)
md-content table | text-[13px] | text-base | 13px → 12px
Thinking Blocks
Label ("Thinking...") | text-xs (9.75px) | text-sm (11px) | Bumped for readability at new scale
Thinking text (streaming + expanded) | text-[13px] leading-[1.55] / [1.7] | text-base leading-[1.55] | Unified to code line-height in both states
Duration text | text-[11px] | text-xs (10px) | De-emphasized, 11 → 10px
Tool / Skill Items
Tool header (name, description) | text-xs (9.75px) | text-sm (11px) | Bigger but still smaller than messages
Tool name (font-medium) | font-medium | unchanged |
Tool tags | text-[11px] | text-xs (10px) | 11 → 10px
Tool subtitle row | text-xs (9.75px) | text-xs (10px) | Same class, new meaning: 9.75 → 10px
Tool result content | text-xs (9.75px) + mixed padding | text-xs leading-[1.55] (10px) | Unified: py-2 px-2.5 max-h-[300px]
Sidebar
Brand name ("conduit") | text-sm (11.375px) | text-sm (11px) | 11.375 → 11px, negligible visual change
Action buttons | text-[13px] | text-base | 13 → 12px
Session items | text-[13px] | text-base | 13 → 12px
Session metadata | text-[11px] | text-sm (11px) | Same px, standard class
Section headers (SESSIONS, etc.) | text-[11px] | text-sm (11px) | Same px, standard class
Version text | text-[10px] | text-xs (10px) | Same px, standard class
Header
Project name | text-[15px] | text-lg (15px) | Same px, standard class
Instance badge | text-[10px] | text-xs (10px) | Same px, standard class
Right section (status) | text-xs (9.75px) | text-xs (10px) | Slight bump: 9.75 → 10px
Input Area
Textarea | text-base (13px) | text-base (12px) | Same class, new size: 13 → 12px
Context % label | text-[10px] | text-xs (10px) | Same px, standard class
Attach menu items | text-sm (11.375px) | text-base (12px) | Bumped to body tier: 11.375 → 12px
Dropdowns
All dropdown items | text-[13px] (mixed padding) | text-base py-2 px-3.5 | 13 → 12px, unified padding
Provider / section headers in dropdowns | text-[11px] | text-sm (11px) | Same px, standard class
Buttons
Tier 1 — CTA / Primary | text-sm (11.375px) | text-base font-semibold px-6 py-3 | 11.375 → 12px
Tier 2 — Secondary / Modal | text-[13px] | text-base font-medium px-4 py-2 | 13 → 12px
Tier 3 — Inline / Small | text-xs (9.75px) | text-sm font-medium px-3 py-1.5 | 9.75 → 11px
Pages
Dashboard title | text-2xl (19.5px) | text-2xl (24px) | 19.5 → 24px (more prominent)
Setup / Pin titles | text-[22px] | text-2xl (24px) | 22 → 24px, standard class
Settings panel title | text-lg (14.625px) | text-lg (15px) | 14.625 → 15px
Step titles | text-lg (14.625px) | text-lg (15px) | 14.625 → 15px
Dashboard project name | text-[16px] | text-lg (15px) | 16 → 15px, standard class
Diff View / File Viewer
Diff body text | 0.75rem (9.75px at 13px root) | text-xs (10px) | 9.75 → 10px
Diff gutters | text-[11px] / 0.6875rem | text-xs (10px) | Mixed 11px/8.94px → unified 10px
File viewer code | dynamic {fontSize}px | unchanged (user-adjustable) | Default 13 → 12, but user can override
Modals / Overlays
Modal body text | text-sm (11.375px) | text-base (12px) | 11.375 → 12px
Modal title | text-base (13px) | text-lg (15px) | Clearer hierarchy: title vs body
Modal buttons | text-[13px] | text-base (Tier 2) | 13 → 12px
Info panel data rows | text-xs (9.75px) | text-xs (10px) | 9.75 → 10px
Toast notifications | text-sm (11.375px) | text-base (12px) | 11.375 → 12px
Plan Mode (CSS)
Plan banner / card title / buttons | 0.875rem (14px at 13px root; 11.375px at 13px root... wait — rem is root-relative) | text-base or rem auto-adjusts | 0.875rem at 12px root = 10.5px. Needs explicit override to text-base (12px).
Inline Style Cleanup
font-family: var(--font-brand) | 30+ inline style= attrs | font-brand class | Use Tailwind utility everywhere
AgentSelector portal (innerHTML) | inline font-size:13px etc | Tailwind classes | Migrate to Svelte component
ThemePicker scoped CSS | scoped font-size:10/12/14px | text-xs / text-base / text-lg | Migrate to Tailwind utilities

Watch out — plan-mode.css: The plan mode styles use `0.875rem` which is root-relative. At 12px root this becomes 10.5px (was 11.375px at 13px root). These should be migrated from rem to explicit `text-base` (12px) or `text-sm` (11px) classes.
09 Summary

Metric | Current | Proposed
--- | --- | ---
Root font-size | 13px | 12px
Distinct font sizes | 18 values (6 arbitrary) | 7 values (0 arbitrary)
Arbitrary text-[Npx] classes | ~80 instances across codebase | 0
Message → tool size gap | 13px → 9.75px (-3.25px jump) | 12 → 11 → 10px (1px steps)
Inline font-family styles | 30+ instances | 0 (font-brand class)
Plan mode rem breakage risk | n/a | plan-mode.css rem values need migration to Tailwind classes
md-content em-based headings | Auto-scaled (no change needed) | Auto-scales: h1=16.2, h2=14.4, h3=13.2
md-content inline code | 0.87em (11.3px) | 1em (12px) — style-only differentiation