Typography
Payd Labs uses a three-font system: Space Grotesk, Nunito, and JetBrains Mono. This combination gives product surfaces a technical but friendly tone without making dense dashboards feel heavy.
Fonts
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Nunito:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");| Family | Role |
|---|---|
| Space Grotesk | Page headings, section titles, metric values, badge text, nav labels |
| Nunito | Body copy, form labels, table cells, helper text |
| JetBrains Mono | Code, IDs, addresses, references, amounts when tabular clarity matters |
Product UI Scale
| Element | Size | Weight | Notes |
|---|---|---|---|
| App page title | 20px | 700 | Common dashboard title size |
| Section title | 16-18px | 600 | Use inside panels and detail pages |
| Card metric value | 24px | 700 | Use Space Grotesk |
| Card label | 11px | 600 | Uppercase, tracking only when label is very short |
| Body copy | 14-15px | 400-500 | Use Nunito |
| Table body | 12-14px | 400-500 | Use 12px for dense operational records |
| Table header | 12px | 600 | Uppercase Space Grotesk |
| Nav item | 13px | 500 | Icon plus label |
| Badge | 10-12px | 600 | Space Grotesk for compact status |
| Form label | 12px | 600 | Secondary text color |
| Button | 14px | 600-700 | Larger only for public checkout actions |
| Code/reference | 12-13px | 500 | JetBrains Mono |
Heading Rules
- Use Space Grotesk for all
h1throughh6. - Keep dashboard headings compact. A 20px page
h1is the normal admin size. - Avoid oversized hero typography in apps and tools.
- Use title case for page titles and sentence case for helper copy.
- Do not use negative letter spacing. Current projects use normal spacing.
Labels And Metadata
Small labels are a core part of the system. Use them for operational context:
- Metric labels: 11px, uppercase, medium tracking.
- Table headers: 12px, uppercase, Space Grotesk.
- Hints and timestamps: 10-12px, tertiary text.
- Product pills: 10px, Space Grotesk, 600, 4-6px radius.
Monospace Usage
Use JetBrains Mono for values that benefit from shape consistency:
- Payment references.
- Wallet addresses.
- Session IDs.
- API paths.
- Environment names.
- OTP fields.
- Code examples.
Do not use monospace for whole pages or general body copy.