The Force Design Spec / Typography

Typography

Font family, size, weight, line height, and letter spacing tokens. All text in Force UI uses the Noto Sans typeface via --force-font-family-default.

Font Family

--force-font-family-default Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif

Default font family for all UI text. Do NOT override per-component.

The quick brown fox jumps over the lazy dog
--force-font-family-code Noto Sans Mono, SF Mono, Monaco, Cascadia Code, Consolas, monospace

Monospace font for code blocks, technical data, version numbers.

The quick brown fox jumps over the lazy dog

Font Size

--force-font-size-xs 0.75rem

12px. Captions, labels, badges, helper text. Minimum readable size.

The quick brown fox jumps over the lazy dog
--force-font-size-sm 0.875rem

14px. DEFAULT body text for most UI elements. Do NOT use base (16px) as the default body size.

The quick brown fox jumps over the lazy dog
--force-font-size-base 1rem

16px. Large body text, page descriptions, marketing content.

The quick brown fox jumps over the lazy dog
--force-font-size-lg 1.125rem

18px. Subsection headers.

The quick brown fox jumps over the lazy dog
--force-font-size-xl 1.25rem

20px. Card titles, H2 headings.

The quick brown fox jumps over the lazy dog
--force-font-size-2xl 1.5rem

24px. Section headers.

The quick brown fox jumps over the lazy dog
--force-font-size-3xl 1.875rem

30px. Page titles (PageHeader component).

The quick brown fox jumps over the lazy dog
--force-font-size-4xl 2.25rem

36px. Dashboard display headings. Use sparingly.

The quick brown fox jumps over the lazy dog

Font Weight

--force-font-weight-regular 400

400. Body text, descriptions. Canonical name; use this unless you need the Tailwind alias.

The quick brown fox jumps over the lazy dog
--force-font-weight-normal 400

Alias for regular (400). Aligns with Tailwind's font-normal utility naming. Prefer `regular` as the canonical name.

The quick brown fox jumps over the lazy dog
--force-font-weight-medium 500

500. Buttons, nav items, labels, badges, table headers.

The quick brown fox jumps over the lazy dog
--force-font-weight-semibold 600

600. Card titles, section headings.

The quick brown fox jumps over the lazy dog
--force-font-weight-bold 700

700. Page titles, strong emphasis.

The quick brown fox jumps over the lazy dog

Line Height

--force-font-lineHeight-tight 1.25

1.25. Headings, single-line labels.

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump!
--force-font-lineHeight-snug 1.375

1.375. Subheadings, medium text.

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump!
--force-font-lineHeight-normal 1.5

1.5. Default for body text.

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump!
--force-font-lineHeight-relaxed 1.75

1.75. Long-form content, descriptions.

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump!

Letter Spacing

--force-font-letterSpacing-tight -0.01em

Negative tracking for large headings (3xl+).

The quick brown fox jumps over the lazy dog
--force-font-letterSpacing-normal 0em

Default tracking for body text.

The quick brown fox jumps over the lazy dog
--force-font-letterSpacing-wide 0.025em

Wide tracking (0.025em) for uppercase labels and badge text.

The quick brown fox jumps over the lazy dog
--force-font-letterSpacing-wider 0.05em

Extra-wide tracking (0.05em) for small uppercase KPI labels (Callout Card labels). Do NOT use for general badge/label text — use wide instead.

The quick brown fox jumps over the lazy dog