Design
Typography
Cowdi type families, weights, scale, and usage guidance.
Families
| Role | Family | Use |
|---|---|---|
| Primary | Inter | Body copy, interfaces, navigation, and labels |
| Display | DM Sans Bold | Marketing headlines and campaign titles |
| Accent | Caveat | Occasional handwritten annotations in marketing material |
Inter, DM Sans, and Caveat are available from Google Fonts. In Next.js, load
them with next/font:
import { Inter, DM_Sans, Caveat } from "next/font/google";Use Inter as the default in all new work. Reserve Caveat for short decorative annotations; do not use it for body copy, controls, or product interfaces.
The Cowdi wordmark is custom artwork, not typeset text. Always use an approved logo asset rather than recreating it with a font.
Scale
Use this scale as the default for Cowdi communications and digital experiences.
| Step | Size | Line height | Weight | Use |
|---|---|---|---|---|
| Display | 60px / 3.75rem | 1.1 | 600 | Hero, one per page |
| H1 | 36px / 2.25rem | 1.2 | 600 | Page title |
| H2 | 24px / 1.5rem | 1.3 | 600 | Section |
| H3 | 18px / 1.125rem | 1.4 | 600 | Subsection |
| Body | 16px / 1rem | 1.6 | 400 | Default |
| Small | 14px / 0.875rem | 1.5 | 400 | Secondary, captions |
| Mono | 14px / 0.875rem | 1.5 | 400 | Code, IDs, amounts |
- Weights: use 400 for body copy, 500 for emphasis, and 600 for headings.
- Tracking: use
-0.02emat 36px and above; keep body copy at the default. - Line length: keep body copy to approximately 70 characters per line.
Numbers
Use tabular figures for amounts, reference numbers, and other values that need to align in columns:
font-variant-numeric: tabular-nums;Use the mono step for values intended to be copied, such as IDs and codes.