# 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

```css
@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 `h1` through `h6`.
- Keep dashboard headings compact. A 20px page `h1` is 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.