SMK Family style & branding kit: logo, palette, typography, per-app playbook

2026-08-15 21:37:48 +00:00
commit 7a31c7ed8d
20 changed files with 475 additions and 0 deletions
@@ -0,0 +1,44 @@
+# 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.