Skip to content
Hypertask Docs

Sidebar & Modal Visual Standard

This page defines the visual standard for modals and transient surfaces in Hypertask. It ensures matching icon strokes, sizing, and typography scale across Sheet modals, switches, select triggers, and floating panels.

Overview

Section titled “Overview”

Modals and transient surfaces should use the controlled icon scale (uniform strokeWidth: 1.75 across all icons) and modal-level typography tokens. By applying these rules consistently, the app remains cohesive whether users open a modal for settings, a quick filter, or an inline find.

Icon stroke width

Section titled “Icon stroke width”

All icons in modals, transient surfaces, and full-screen pull-downs use:

Typeface        Size      Weight      Opacity
────────────────────────────────────────────
Title           16px      600         normal
Label           14px      500         normal
Destructive    14px      600         normal
Section titled “Modal typography scale”

Use these tokens for title, labels, primary actions, and destructive actions:

Font          Size      Weight      Opacity
────────────────────────────────────────────
Title         16px      600         normal
Label         14px      500         normal
Primary      14px      600         normal (default)
Destructive  14px      600         normal

Corner rounding

Section titled “Corner rounding”

Corner rounding is defined in the design token. Values are:

  • Base (e.g., cornerRadiusSmall): –

Preserved term list

Section titled “Preserved term list”

These terms (with punctuation, spacing, capitalization, etc.) must not be altered, even when displayed in different UI surfaces:

  • Sections, timelines, statuses
Section titled “Navigation to related”