Typography
The type families, scale, weight, and text treatments currently used in Woodstock.
Typography
This records the typography used in the Woodstock app. It does not introduce a new type scale.
Families and defaults
| Role | CSS or utility | Value | Used for |
|---|---|---|---|
| Interface text | Root font shorthand | 16px / 145% system-ui, "Segoe UI", Roboto, sans-serif | The whole app by default. It follows the operating system's UI typeface. |
| Interface text spacing | Root letter-spacing | 0 | The default spacing for ordinary app text. |
| Code and identifiers | font-mono | Tailwind's UI monospace stack | Tool names, repository identifiers, source payloads, and inline or block Markdown code. |
The documentation site is separate from the product app: it loads Inter. That font is not loaded by the app itself.
Type scale
Use only the even-size Tailwind steps below. text-[10px] is the one exception: Tailwind has no
built-in 10px token, and it is reserved for compact badges where text-xs would not fit.
| Utility | Size | Default line height | Uses |
|---|---|---|---|
text-[10px] | 10px | Inherited | Compact status and unread badges — the sole arbitrary-size exception. |
text-xs | 12px | 16px | Metadata, timestamps, table headers, secondary labels, and compact controls. |
text-sm | 14px | 20px | Supporting copy, buttons, menus, messages, and form labels. |
text-base | 16px | 24px | Inputs, channel names, and normal long-form app content. |
text-lg | 18px | 28px | Page titles, product name, and Markdown level-one headings. |
text-xl | 20px | 28px | Icons that are rendered as text and close controls. |
text-2xl | 24px | 32px | One-time-password input. |
text-4xl | 36px | 40px | Home-page headline. |
text-5xl | 48px | 48px | Large-screen home-page headline. |
Markdown
Markdown uses the same scale: inline code and tables inherit the surrounding text size; code blocks
use text-sm; and mention chips inherit the message size.
Weights
Use the default weight for ordinary text and font-semibold when stronger emphasis is needed.
| Utility | Weight | Uses |
|---|---|---|
Default / font-normal | 400 | Body copy, labels, metadata, and standard controls. |
font-semibold | 600 | Primary actions, headings, sender names, and emphasized values. |
Headings use the same text-content color as body copy. Weight and size provide hierarchy; there
is no separate “strong” text color.
Type-style recipes
These are reference combinations, not global HTML element styles. Apply them deliberately in the app; Markdown headings use the same hierarchy.
| Style | Classes |
|---|---|
| Display | text-5xl font-semibold tracking-tight leading-tight |
| H1 | text-2xl font-semibold tracking-tight |
| H2 | text-xl font-semibold |
| H3 | text-lg font-semibold |
| H4 | text-base font-semibold |
| H5 | text-sm font-semibold |
| H6 | text-xs font-semibold |
| Body | text-base |
| Small body | text-sm |
| Caption / metadata | text-xs text-muted |
| Overline | text-xs uppercase tracking-wide text-muted |
| Inline code | font-mono (inherits surrounding size) |
| Code block | font-mono text-sm leading-snug |
Spacing and line height
| Utility | Value | Used for |
|---|---|---|
tracking-tight | -0.025em | Wordmark and home-page headline. |
tracking-wide | 0.025em | Uppercase status, section, and table labels. |
tracking-[0.4em] | 0.4em | One-time-password digits. |
leading-none | 1 | Text-based icons and compact badges. |
leading-tight | 1.25 | Home-page headline. |
leading-snug | 1.375 | Markdown code blocks. |
leading-relaxed | 1.625 | Channel descriptions and other longer reading text. |
Use the default line height for normal UI copy. Add a line-height utility only when the content is intentionally more compact, is a display heading, or is long-form reading text.
Content conventions
| Content | Treatment |
|---|---|
| Chat and ordinary app copy | Default sans family; normally text-sm or text-base. |
| Message metadata | text-xs with text-muted. |
| Buttons and controls | text-sm by default; use font-semibold only for a primary or clearly emphasized action. |
| Section labels and table headers | text-xs uppercase tracking-wide; add font-semibold only when the label needs stronger hierarchy. |
| Markdown headings | text-lg, text-base, and text-sm, all font-semibold for levels one through three. |
| Code, tool names, and raw payloads | font-mono; inline code inherits its surrounding text size, while code blocks use text-sm leading-snug. |