Product typefaces and scale
Learn about our app typeface and scale considerations for TimeNode workforce products.
Our typefaces
We use Inter for headings, body copy, labels, and inputs in product UI. Code snippets in the docs site use the same stack unless a framework default is shown.
Inter
Inter (400–800) is our UI typeface for TimeNode - optimized for mobile dashboards with strong hierarchy, uppercase
section labels, and extrabold metrics. Use utility classes such as .tn-heading-2 and
.tn-label, or pair font.size.* with font.lineHeight.* tokens from
tokens/semantic/typography.json.
OpenType features
We use a select set of type features to improve legibility in workforce UIs. Most labels apply built-in tracking; numeric features are optional and case-specific.
| Preview | Description | Notes |
|---|---|---|
| 124 8 56 | Tabular figures | For metric grids and tables |
| W-10480 | Slashed zero | Use selectively on badge and ID fields |
| Daily summary | Label tracking (+0.1em) and uppercase | Use always via .tn-label |
| On shift | Micro tracking (+0.2em) and uppercase | Use via .tn-micro |
Scale
Typescale
Our scale is anchored at a 16px (1rem) base and tuned for the workforce preview - display through micro styles. Sizes and line heights align to the 4px grid used by spacing and iconography.
TimeNode
Welcome, User
Peak performance detected across all active teams.
Daily summary
| Preview | Style | Utility | Size | Line height | Weight |
|---|---|---|---|---|---|
| Display & headings | |||||
| TimeNode | Display | .tn-display |
36px | 40px | 800 |
| Page title | Heading 1 | .tn-heading-1 |
30px | 36px | 800 |
| Welcome, User | Heading 2 | .tn-heading-2 |
24px | 32px | 800 |
| Card group | Heading 3 | .tn-heading-3 |
20px | 28px | 700 |
| List item | Heading 4 | .tn-heading-4 |
16px | 24px | 700 |
| Body | |||||
| Description | Body large | .tn-body-lg |
18px | 29px | 400 |
| Body text | Body | .tn-body |
16px | 24px | 500 |
| Secondary line | Body small | .tn-body-sm |
14px | 20px | 400 |
| Supporting | |||||
| 07:00 AM | Caption | .tn-caption |
12px | 16px | 700 |
| Daily summary | Label | .tn-label |
10px | 15px | 700 |
| Shift | Micro | .tn-micro |
10px | 15px | 600 |
Token IDs follow font.size.* and font.lineHeight.* (for example
font.size.heading.2 → --tn-font-size-heading-2).
Line height
To determine line heights in headings, we multiply font sizes by ~1.2×; for body we use ~1.5×. Values are rounded to the nearest multiple of 4px to align with spacing and iconography. Labels use a fixed 15px line on 10px type with positive letter-spacing.
Workforce preview
Typography from the reference mobile shell - same utility classes as production.
Welcome, User
Daily summary
124
8
Picking team
Applying typography
<h2 class="tn-heading-2">Welcome, User</h2> <p class="tn-label">Daily summary</p> <p class="tn-body-sm">Peak performance detected</p>
Legacy aliases (.tn-heading-lg, .tn-heading-md, .tn-label-md) map to the
current scale. Source: foundations/typography/tokens.css,
foundations/typography/utilities.css.