Typography & Sidebar Visuals

This page defines the controlled typographic style and sidebar visual layout for Hypertask. It ensures consistent visual translation for Announcements, Navigation, and Settings sidebars, with specific sizing and weight rules.

Overview

Hypertask uses a consistent visual scale across its primary sidebars. This scale applies to titles, section labels, item text, and action labels, anchoring those surfaces in a controlled token system rather than raw CSS classes.

Tip

These rules ship to production; modals and other containers are audited separately (see Sidebar & Modal Visual Standard).

Sidebar typography

All main sidebars (Announcements, Navigation, Settings) follow these rules:

Title: 18px, weight 600

Section labels: 12px, weight 600, uppercase, muted

Item text: 14px, weight 400

Quiet action labels (e.g., Delete, Edit): 12px, left-aligned, muted, weight 400

Announcements titles: 14px, weight 600, on their own line; body text 14px, weight 400, muted; Delete/Edit 12px, left-aligned, muted.

Note

If a surface deviates from this scale, it’s considered a future improvement candidate. Open a discussion on the boundary case.

Design token mapping

• No raw lucide icons with default 24px size elsewhere in production
• Modals use the icon scale defined in Sidebar & Modal Visual Standard

Adhering to this scale keeps titles legible and reduces visual jank when switching contexts across Navigation, Settings, and Announcements.

Navigation to related

• Sidebar & Modal Visual Standard — icon strokes, modal typography, and modal-level tokens
• Core Concepts — high-level style guidelines (applies broadly)

Typographic fixes (2026-08-31)

The following surface elements include cached references to shared content typefaces (14px) to align with the documented type scale:

• Board names in the sidebar now use 14px (exact copy of content-size type).
• Inbox split tabs at the bottom of any Inbox page now render at 14px (resulting from PR #36).

Previously, these elements rendered at an inconsistent 14.5px size aligned to raw CSS rules rather than the design-token-specified type size. This shift removes the cached local rule in favor of the shared content-size token. Production health checks confirm the sidebar and all six inbox tabs are now at exact 14px, while sidebar counts and other auxiliary text remain on their own token scale (11px).