Bug Description

Switching between dashboard themes causes noticeable changes in font size and overall layout density. Content reflows, the number of items visible in a fixed viewport changes, and the reading experience shifts — making theme switching feel unstable rather than cosmetic. This appears to have been introduced by PR #14725 which added per-theme font/layout/density controls.

User impact: A user switching themes expects a color/font-family change, not a layout reflow. Having the number of visible items on a page change when switching themes is disorienting and suggests the app is not in control of its own layout.

Steps to Reproduce

1. Open the Hermes dashboard (hermes dashboard).
2. Go to Skills page and note how many skill rows are visible.
3. Go to Settings → Theme and switch between themes (default, midnight, ember, mono, cyberpunk, rose).
4. Return to Skills — the number of visible rows changes across themes, particularly noticeable between mono/cyberpunk (compact) and rose (spacious).
5. Font sizes also shift — largest gap is between mono (13px) and rose (16px).

Expected Behavior

Switching themes should be a purely cosmetic change. Font size, spacing, and the number of items visible in a fixed viewport should remain constant across all themes. Visual differentiation should come from color palette, font family, border-radius, and typographic style — not from size or density.

Actual Behavior

Four independent properties diverge across themes:

1. baseSize — 3px spread

Each theme defines its own root font size independently in web/src/themes/presets.ts:

2. density — spacing multiplier diverges

density maps to a --theme-spacing-mul CSS variable (compact = 0.85×, comfortable = 1.0×, spacious = 1.2×). In Tailwind v4, this scales the entire spacing scale — --spacing: calc(0.25rem * var(--theme-spacing-mul)). Every p-N, gap-N, w-56 (sidebar), and py-3/px-4 (card padding) changes, directly affecting how much viewport height the chrome consumes and how many items fit on screen.

3. lineHeight: "1.7" on rose — taller nav items

The sidebar nav links have no fixed height; their rendered height is fontSize × lineHeight + padding. Rose's 1.7 vs the default 1.55 adds ~2px per nav item, making the sidebar header container visibly taller and causing pixel-level layout differences on every page.

This was originally paired with density: spacious to create an "airy" feel — once density was normalized, the elevated lineHeight became an orphaned artefact that just creates height drift.

4. letterSpacing: "0.02em" on cyberpunk — text wraps earlier

Cyberpunk uses a monospace font (Share Tech Mono) for body text (fontSans). Monospace glyphs are inherently wider than proportional glyphs at the same baseSize. The additional 0.02em tracking compounds this: badge labels and skill descriptions that fit on one line in other themes wrap to a second line in cyberpunk.

Affected Component

Configuration (config.yaml, .env, hermes setup)

Messaging Platform (if gateway-related)

No response

Debug Report

N.A.

Operating System

MacOS 26.4

Python Version

No response

Hermes Version

No response

Additional Logs / Traceback (optional)

Root Cause Analysis (optional)

PR #14725 introduced baseSize, density, lineHeight, and letterSpacing as per-theme properties to give themes full typographic and layout control. No design constraint was enforced to keep layout-affecting values consistent, so each theme author set their own values independently — the intent was customisation, but the effect is layout instability.

density is the most impactful: even a 0.15× spacing change is enough to change the visible item count on any fixed-height page. lineHeight and letterSpacing are subtler but cause real element-height and text-wrapping differences that a user notices when switching themes.

Proposed Fix (optional)

Four coordinated data-only changes in web/src/themes/presets.ts. No logic changes, no CSS changes.

1. Normalize baseSize — spread DEFAULT_TYPOGRAPHY

Have all per-theme typography objects spread DEFAULT_TYPOGRAPHY and omit baseSize. The shared 15px default is inherited automatically; a future theme author must make an explicit, visible decision to deviate.

// Before — each theme hardcodes its own baseSize, divergence inevitable
typography: {
  fontSans: `"Inter", ${SYSTEM_SANS}`,
  baseSize: "14px",   // ← diverges from DEFAULT_TYPOGRAPHY silently
  lineHeight: "1.6",
  letterSpacing: "-0.005em",
},

// After — spread the shared base, override only what the theme actually needs
typography: {
  ...DEFAULT_TYPOGRAPHY,
  fontSans: `"Inter", ${SYSTEM_SANS}`,
  lineHeight: "1.6",
  letterSpacing: "-0.005em",
  // baseSize intentionally absent — inherits DEFAULT_TYPOGRAPHY.baseSize (15px)
},

Note: index.css is unchanged. rem is already anchored to html { font-size: var(--theme-base-size) }, so small and code scale proportionally. A rem → em change would be incorrect.

2. Normalize density — set all built-in themes to "comfortable"

Remove compact and spacious from all built-in theme layout objects. density remains a valid property for user-created custom themes that explicitly want the spacing shift; built-in themes should not impose it.

3. Normalize lineHeight on rose — remove the 1.7 override

Rose's explicit lineHeight: "1.7" was paired with density: spacious for an "airy" feel. Now that density is normalized, the elevated line-height is an orphaned artefact causing nav item height drift. Removing it lets it fall back to DEFAULT_TYPOGRAPHY's 1.55 via the spread.

4. Normalize letterSpacing on cyberpunk — change 0.02em to "0"

Cyberpunk already uses a monospace font (Share Tech Mono) for body text, which is inherently wider than proportional fonts. The additional 0.02em tracking compounds the width increase and causes text to wrap earlier than in other themes. Setting it to "0" brings text wrapping in line with the other themes while preserving the monospace aesthetic.

Result

Why this is the right approach

• Fixes all four symptoms: font-size, item-count shift, nav height drift, and text-wrapping all resolved.
• Right mental model: palette, font family, radius, and stylistic letter-spacing are the axes of theme identity. Base size, spacing density, and line-height are not — they are accessibility/preference controls and should not vary silently between themes.
• Prevents recurrence: spreads and shared defaults mean future theme authors can't accidentally diverge on these axes without a visible, intentional override.
• Self-documenting: ...DEFAULT_TYPOGRAPHY makes the inheritance relationship explicit. A reviewer immediately understands the contract.
• No new abstraction: no enforcement logic, no runtime guard, no TypeScript trickery.

Are you willing to submit a PR for this?

• I'd like to fix this myself and submit a PR