Conduit UI — 12px Rebase Proposal

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

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)

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