Design foundations
Typography
Two typefaces and nine text styles. Body text is 14 px because the screens are dense tables; nothing is smaller than 12 px. Numbers in tables and tiles are tabular.
Source: web/shared/theme/tokens.css (typefaces), web/packages/crm/index.html (font loading), classes in web/packages/crm/src and web/shared/components.
Typefaces
Regular 400, Medium 500, Semibold 600, Bold 700. All interface text. Token --font-sans, fallbacks system-ui, sans-serif.
Regular 400 and Medium 500. The --font-mono token is declared and the font is loaded, but no class in the app's code uses font-mono yet.
Type scale
The styles the app is written in. "Size" is font size / line height · weight. "In code" is how many times the size class is used (counted 2026-10-05).
| Style | Size | Classes | Sample | In code |
|---|---|---|---|---|
| Page title | 24 / 32 · 500 | text-2xl font-medium |
Hatch Farm | 22 |
| Tile figure | 26 / 32 · 500 · tabular | text-[26px] leading-8 font-medium tabular-nums |
12 | 2 |
| Section title | 20 / 28 · 500 | text-xl font-medium |
Lead not found | 5 |
| Small figure, date | 18 / 28 · 600 · tabular | text-lg font-semibold tabular-nums |
16 Nov 2026 | 5 |
| Card title | 16 / 24 · 500 | text-base font-medium |
Deal clock | 2 |
| Body | 14 / 20 · 400 | text-sm |
It may have been removed, or the link is wrong. | 137 |
| Body strong | 14 / 20 · 600 | text-sm font-semibold |
Oak Lane Paddock | |
| Label | 13 / 20 · 400 | text-[13px] leading-5 text-gray-500 |
Last contact | 75 |
| Caption | 12 / 16 · 400 | text-xs text-gray-500 |
Hint text sits under the field. |
Card title: Card.tsx. Tile figure: Tile in overview-parts.tsx and ValuationCard.tsx. Small figure: the dates on the Deal clock and the stage counts on the Buyers and Contractors tabs. Label: table heads, Fact, a tile's label.
Weight
Titles, figures, buttons and chips are Medium, as in Apiko's design concept. Status pills, field labels and record links are still Semibold. Labels, table heads and menu items are Regular.
| Weight | Class | Where | In code |
|---|---|---|---|
| Regular 400 | font-normal, or no class | Body text; labels and table heads; the explanations in the health breakdown | 9 |
| Medium 500 | font-medium | Page, section and card titles, tile figures, buttons, chips and tags, the Deal Health score, inactive tab, a Legal task's name, the current menu item | 67 |
| Semibold 600 | font-semibold | Status pills, field labels, record links, small figures | 91 |
| Bold 700 | font-bold | Only the letter "V" in the Valere CRM mark | 2 |
Compared with the design board
The "Type, spacing and shape" board of the Design Foundations canvas.
- The typeface. The board sets IBM Plex Sans. Since 2026-10-07 the interface is in Inter, the closest match to Apiko's design concept (ADR-0042); the concept's own font is still to be confirmed. The monospace stays IBM Plex Mono.
- Smaller, lighter titles and figures. The board: page title 28 px and tile figure 32 px, both Semibold. Since 2026-10-07 they follow Apiko's design concept: the page title is 24 px (
text-2xl), the figure 26 px (text-[26px], an arbitrary value), both Medium; section and card titles are Medium too. - Labels in sentence case. The board's label is 12 px Semibold capitals with 0.06em tracking. Since 2026-10-07 labels and table heads are 13 px Regular in sentence case, on a
gray-50table head, as in the concept. - 18 px is not on the board. The app uses
text-lgfor the Deal clock dates, the stage counts and the name on the sign-in card. - "Mono ID" is not in the code. The board has a 13 / 16 Plex Mono style for record identifiers; the app's code doesn't use the monospace font.