1.7 KiB
1.7 KiB
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.