45 lines
1.7 KiB
Markdown
45 lines
1.7 KiB
Markdown
# SMK Family — Typography
|
||
|
||
Warm, approachable, rounded — welcoming without being childish.
|
||
|
||
## Font stack
|
||
|
||
| Role | Family | Weights | Fallback |
|
||
|------|--------|---------|----------|
|
||
| Display / logo | **Baloo 2** | 600, 700, 800 | `ui-rounded`, system-ui |
|
||
| Body / UI | **Nunito** | 400, 600, 700, 800 | `system-ui`, sans-serif |
|
||
| Monospace (logs, code) | **JetBrains Mono** (or system mono) | 400, 700 | `ui-monospace` |
|
||
|
||
Google Fonts URLs:
|
||
```
|
||
https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@400;600;700;800&display=swap
|
||
```
|
||
|
||
## Scale (desktop)
|
||
|
||
| Token | Size / weight | Usage |
|
||
|-------|---------------|-------|
|
||
| Display | 48–64px / Baloo 2 700–800 | Page hero, login title |
|
||
| Heading 1 | 32px / Baloo 2 700 | Page title |
|
||
| Heading 2 | 24px / Baloo 2 700 | Section title |
|
||
| Heading 3 | 19px / Nunito 800 | Card title |
|
||
| Body | 16px / Nunito 400 | Default text |
|
||
| Body small | 14px / Nunito 400 | Secondary text |
|
||
| Caption | 12px / Nunito 600 | Labels, badges, footers |
|
||
| Button | 15px / Nunito 800 | Buttons, links |
|
||
|
||
## Voice & rhythm
|
||
|
||
- Line height: 1.5 body, 1.2 display/headings.
|
||
- Letter spacing: +0.5px on all-caps labels/captions (e.g. `SMK FAMILY`).
|
||
- Headings: sentence case. All-caps reserved for micro-labels only.
|
||
- Rounded feel comes from the font itself — don't add artificial rounding to text.
|
||
- Keep body copy ≤ 65ch. Friendly, but legible and calm.
|
||
|
||
## Logo lockup
|
||
|
||
- Wordmark "SMK" in **Baloo 2 700** with the heart-and-spark badge to the left.
|
||
- Tagline "SMK FAMILY" in **Nunito 700**, all-caps, +9px letter-spacing, amber `#F2A65A`.
|
||
- Clear space: at least 0.25× icon height on all sides.
|
||
- Minimum width: 180px (lockup). Below that use icon mark only.
|