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

README.md

@@ -0,0 +1,94 @@
+# SMK Family — Style & Branding Kit
+
+Official visual identity for the SMK organization (smkfam.com homelab).
+Dark-first, warm, family-friendly. Rounded shapes, warm amber/coral accents, approachable type.
+
+**Contents**
+- `palette.md` — color tokens, gradients, dark-first rules
+- `typography.md` — font stack, scale, voice
+- `assets/` — logo.svg, icon.svg, logo-light.svg, authentik-bg.svg + PNG/ICO exports
+- `apps/` — per-app themed assets (see playbook below)
+
+---
+
+## Identity at a glance
+
+| Element | Value |
+|---------|-------|
+| Wordmark | **SMK** — Baloo 2 700, warm off-white `#F5F0E6` |
+| Tagline | **SMK FAMILY** — Nunito 700, +9px tracking, amber `#F2A65A` |
+| Icon mark | Heart + sparkle on amber→coral rounded squircle |
+| Primary accent | `#F2A65A` (amber) |
+| Secondary accent | `#E8755D` (coral) |
+| Background | `#14161B` (deep warm charcoal) |
+| Surface | `#232838` |
+
+Logo files:
+- `assets/logo.svg` — full lockup (icon + SMK + tagline), for dark surfaces. PNG export at 1200px.
+- `assets/logo-light.svg` — same lockup, dark text for light surfaces.
+- `assets/icon.svg` — icon mark only (heart + sparkle). Use at ≤180px wide or avatars/favicons.
+- `assets/favicon.ico` — 16/32/48 multi-size favicon.
+
+---
+
+## Per-app branding playbook
+
+How to apply SMK branding to each customizable homelab app. **Branding-only — never touch auth flows, policies, or providers.**
+
+### Authentik (auth.smkfam.com) — ✅ applied 2026-08-15
+- **Where**: Admin → Branding → Brands → `default` brand; Flow interface settings on default-authentication-flow.
+- **Fields**: logo = `assets/logo.svg` (hosted URL), background = `assets/authentik-bg.svg`, title = `SMK Family`, footer links (optional).
+- **Hosting**: logo/background served from this repo via Gitea raw URL (public repo):
+  - `https://git.smkfam.com/larry/smk-branding/raw/branch/main/assets/logo.svg`
+  - `https://git.smkfam.com/larry/smk-branding/raw/branch/main/assets/authentik-bg.svg`
+- **Theme**: dark mode is the SMK default — the brand background is dark; users pick theme via their own preference. No auth flows modified.
+- **Verify**: `curl -s https://auth.smkfam.com/if/flow/default-authentication-flow/ | grep -i logo` + screenshot.
+
+### Home Assistant (ha.smkfam.com) — asset ready, apply optional
+- **Supported**: frontend theme YAML (dark) + logo via theme.
+- **File**: `apps/home-assistant/smk-theme.yaml` → drop into `config/themes/smk/`, enable via profile → Appearance.
+- Accent color `#F2A65A`, background `#14161B`, card surface `#232838`, text `#F5F0E6`.
+
+### Gitea (git.smkfam.com) — asset ready, apply optional
+- **Supported**: Admin → Configuration → Appearance → custom logo & favicon URL (or place `logo.svg` in `custom/public/img/`).
+- **File**: `apps/gitea/` — use `assets/icon.svg` / `assets/favicon.ico`.
+- Dark theme ships with Gitea (`ui.theme.DEFAULT=auto-dark`); logo swap is the only change needed.
+
+### Paperless-ngx (docs.smkfam.com) — asset ready, apply optional
+- **Supported**: `PAPERLESS_APP_LOGO` env → static logo path (cosmetic only).
+- **File**: `apps/paperless/` — use `assets/icon.svg` + a dark background image.
+- Paperless ships its own dark mode; logo swap via compose env var.
+
+### Immich (photos.smkfam.com) — asset ready, apply optional
+- **Supported**: Admin → Settings → Appearance: dark theme is default; custom logo via server branding settings (server → settings → theme).
+- **File**: `apps/immich/` — use `assets/icon.svg`.
+- Keep default dark — matches SMK palette; only logo optional.
+
+### n8n (n8n.smkfam.com) — ⚠️ no supported theming path
+- **Reality**: n8n Community Edition has no logo/branding customization (Enterprise feature). Theme toggle (dark) exists only in user settings.
+- **Decision**: no config to touch — do not hack env vars. If n8n branding is required later, it needs the enterprise license — ask Larry before doing anything.
+
+### Grafana — asset ready, apply optional
+- **Supported**: Admin → General → Organization → "Logo" (URL) + default dark theme.
+- **File**: `apps/grafana/` — use `assets/icon.svg`.
+
+### Uptime Kuma — asset ready, apply optional
+- **Supported**: Settings → Appearance → custom CSS (theme) + custom logo via `config/icon.svg` (or reverse-proxy logo).
+- **File**: `apps/uptime-kuma/` — SMK dark theme CSS + logo.
+
+### FreshRSS (rss.smkfam.com) — asset ready, apply optional
+- **Supported**: user theme selection; SMK theme ships as a CSS theme file.
+- **File**: `apps/freshrss/` — SMK dark theme CSS (drop into FreshRSS themes dir, or apply via Admin → themes).
+
+### Apps with NO theming path (do not hack)
+- **n8n** (community) — no branding support. ✅ flagged above.
+- Anything else not listed: assume unsupported unless a documented cosmetic field exists. **Stop and ask Larry before touching configs.**
+
+---
+
+## Design language
+
+- **Dark-first**: deep charcoal `#14161B` grounds, warm amber glow. Light mode is never default.
+- **Family-friendly**: rounded squircle shapes, Baloo 2 display type, warm (not neon) accents.
+- **Warm over cold**: no corporate blues, no pure blacks/whites. Text is warm off-white `#F5F0E6`.
+- **Rounded, not childish**: geometry is simple (squircle + heart + sparkle); restraint over cartoon.

apps/freshrss/README.md

@@ -0,0 +1,16 @@
+# FreshRSS branding — SMK
+
+## What's supported
+- Themes: CSS themes in the FreshRSS `themes/` dir (user-selectable in Settings → Appearance).
+- SMK theme file: `smk-freshrss.css` in this folder.
+
+## Assets
+- `smk-freshrss.css` — dark SMK theme (drop into `themes/SMK/` on the FreshRSS instance).
+
+## Apply (cosmetic only)
+1. Copy `smk-freshrss.css` to FreshRSS `themes/SMK/smk-freshrss.css` (compose bind mount or copy into CT).
+2. Settings → Appearance → Theme → select "SMK" → Save.
+3. FreshRSS login page logo: if a custom logo field exists in config, point to
+   `https://git.smkfam.com/larry/smk-branding/raw/branch/main/assets/icon.svg`.
+
+No feeds, users, or DB changes.

apps/freshrss/smk-freshrss.css

@@ -0,0 +1,19 @@
+/* SMK Family — FreshRSS dark theme
+   Drop into themes/SMK/smk-freshrss.css on the FreshRSS instance */
+:root {
+  --color-background: #14161B;
+  --color-panel: #1A1E28;
+  --color-card: #232838;
+  --color-border: #333A4A;
+  --color-text: #F5F0E6;
+  --color-text-dim: #B9B2A6;
+  --color-accent: #F2A65A;
+  --color-accent-2: #E8755D;
+  --color-success: #A3C585;
+  --color-danger: #D98A8A;
+}
+body { background: var(--color-background); color: var(--color-text); }
+.header, .nav_menu, .box, .post { background: var(--color-card); border-color: var(--color-border); }
+a { color: var(--color-accent); }
+a:hover { color: var(--color-accent-2); }
+input, textarea, select { background: var(--color-panel); color: var(--color-text); border-color: var(--color-border); }

apps/gitea/README.md

@@ -0,0 +1,20 @@
+# Gitea branding — SMK
+
+## What's supported
+- Custom logo & favicon: Admin Panel → Configuration → Appearance → logo URL / favicon URL.
+- Dark theme: `ui.theme.DEFAULT = auto-dark` in `app.ini` (already standard in this homelab).
+
+## Assets
+- Logo: use `../../assets/logo.svg` (dark lockup) or `../../assets/icon.svg` (mark only) for the login logo.
+- Favicon: `../../assets/favicon.ico`.
+
+## Apply
+Option A (admin UI, zero risk): Admin → Configuration → Appearance →
+  - Logo URL: `https://git.smkfam.com/larry/smk-branding/raw/branch/main/assets/logo.svg`
+  - Favicon URL: `https://git.smkfam.com/larry/smk-branding/raw/branch/main/assets/favicon.ico`
+
+Option B (custom assets dir, GitOps): place `logo.svg`/`favicon.ico` in Gitea's `custom/public/img/`
+(custom files override defaults; survives UI edits).
+
+## Cosmetic-only check
+No auth sources, OAuth config, or security settings are touched by this.

apps/grafana/README.md

@@ -0,0 +1,18 @@
+# Grafana branding — SMK
+
+## What's supported
+- Custom logo: Administration → General → Organization → "Logo" (image URL) — UI-set, cosmetic.
+- Dark theme is Grafana's default.
+
+## Assets
+- Logo: `../../assets/icon.svg` (mark) or `../../assets/logo-light.svg` (lockup for light areas).
+
+## Apply (cosmetic only)
+Administration → General → Organization → Logo:
+```
+https://git.smkfam.com/larry/smk-branding/raw/branch/main/assets/icon.svg
+```
+
+## Note
+Grafana 9.x may not expose org logo in the UI; in that case branding needs `custom.ini`
+(`[server] app_title` etc.) — flag back if this instance can't set it via UI.

apps/home-assistant/smk-theme.yaml

@@ -0,0 +1,68 @@
+# SMK Home Assistant theme
+# Dark-first, warm amber accent. Drop into config/themes/smk/ as smk.yaml
+# Enable: Profile → Appearance → Theme → "SMK Family"
+
+SMK Family:
+  # Header / top bar
+  primary-color: "#F2A65A"
+  accent-color: "#E8755D"
+  dark-primary-color: "#B35A2E"
+  light-primary-color: "#F7C58C"
+
+  # Backgrounds
+  primary-background-color: "#14161B"
+  secondary-background-color: "#1A1E28"
+  app-header-background-color: "#1A1E28"
+  app-header-text-color: "#F5F0E6"
+  sidebar-background-color: "#1A1E28"
+  sidebar-text-color: "#F5F0E6"
+  sidebar-icon-color: "#F2A65A"
+
+  # Cards & surfaces
+  card-background-color: "#232838"
+  card-mod-background-color: "#232838"
+  ha-card-background: "#232838"
+  card-border-color: "#333A4A"
+  divider-color: "#333A4A"
+
+  # Text
+  text-primary-color: "#F5F0E6"
+  text-secondary-color: "#B9B2A6"
+  primary-text-color: "#F5F0E6"
+  secondary-text-color: "#B9B2A6"
+
+  # States
+  state-icon-color: "#F2A65A"
+  state-icon-active-color: "#F2A65A"
+  state-icon-unavailable-color: "#8A8579"
+  label-badge-background-color: "#232838"
+  label-badge-text-color: "#F2A65A"
+  switch-unchecked-color: "#333A4A"
+  switch-unchecked-track-color: "#2A3040"
+  switch-checked-color: "#F2A65A"
+  switch-checked-track-color: "#B35A2E"
+
+  # Buttons
+  button-background-color: "#F2A65A"
+  button-text-color: "#14161B"
+  paper-button-background-color: "#F2A65A"
+  paper-button-text-color: "#14161B"
+
+  # Inputs
+  input-fill-color: "#2A3040"
+  input-ink-color: "#F5F0E6"
+  input-dropdown-item-color: "#2A3040"
+  input-dropdown-item-text-color: "#F5F0E6"
+
+  # Chips & badges
+  chip-background-color: "#2A3040"
+  chip-text-color: "#F5F0E6"
+  chip-icon-color: "#F2A65A"
+
+  # Misc
+  markdown-code-background-color: "#1A1E28"
+  markdown-code-color: "#F2A65A"
+  table-row-background-color: "#1A1E28"
+  table-row-alternative-background-color: "#232838"
+  background-color: "#14161B"
+  card-mod-card-color: "#232838"

apps/immich/README.md

@@ -0,0 +1,18 @@
+# Immich branding — SMK
+
+## What's supported
+- Appearance/theme: Admin → Settings → Appearance. Dark theme is default.
+- Custom logo: server settings → branding (logo URL) in recent Immich versions.
+
+## Assets
+- Logo: `../../assets/icon.svg` or `../../assets/logo-light.svg` (light surfaces).
+
+## Apply (cosmetic only)
+Admin → Settings → Appearance:
+- Theme: Dark (default) — already matches SMK.
+- Logo: set to `https://git.smkfam.com/larry/smk-branding/raw/branch/main/assets/icon.svg` if the
+  version exposes a branding/logo field.
+
+## Note
+If the running Immich version has no logo field in Settings, do NOT edit the DB or frontend bundles.
+Report back — the asset is ready and the playbook is documented.

apps/paperless/README.md

@@ -0,0 +1,22 @@
+# Paperless-ngx branding — SMK
+
+## What's supported
+- Custom logo: `PAPERLESS_APP_LOGO` env var → path to a logo image served as static.
+- Paperless ships its own dark mode (matches SMK dark-first).
+
+## Assets
+- Logo: `../../assets/icon.svg` → serve as static file; reference in `PAPERLESS_APP_LOGO`.
+
+## Apply (cosmetic only)
+In the paperless compose `.env`:
+```
+PAPERLESS_APP_LOGO=/usr/src/paperless/static/logo/icon.svg
+```
+And bind-mount `assets/icon.svg` into the container's static dir.
+Then `docker compose up -d paperless-webserver` (env change → recreate container; no DB/auth changes).
+
+## Note
+Logo path must be inside the container. If mount friction, host via Gitea raw URL instead:
+```
+PAPERLESS_APP_LOGO=https://git.smkfam.com/larry/smk-branding/raw/branch/main/assets/icon.svg
+```

apps/uptime-kuma/README.md

@@ -0,0 +1,15 @@
+# Uptime Kuma branding — SMK
+
+## What's supported
+- Custom theme CSS: Settings → Appearance → Custom CSS (or drop theme in `/app/data/themes/`).
+- Custom logo: replace `config/icon.svg` in the Uptime Kuma data dir.
+
+## Assets
+- `smk-kuma.css` — dark SMK theme CSS (paste into Settings → Appearance → Custom CSS).
+- Logo: `../../assets/icon.svg`.
+
+## Apply (cosmetic only)
+1. Settings → Appearance → check "Dark" theme, paste `smk-kuma.css` into Custom CSS box → Save.
+2. Replace logo: copy `assets/icon.svg` to Kuma's `config/icon.svg` (or via compose bind mount).
+
+No monitors, notifications, or auth configs are touched.

apps/uptime-kuma/smk-kuma.css

@@ -0,0 +1,18 @@
+/* SMK Family — Uptime Kuma dark theme
+   Paste into Settings → Appearance → Custom CSS */
+:root {
+  --color-background: #14161B;
+  --color-card: #232838;
+  --color-card-hover: #2A3040;
+  --color-text: #F5F0E6;
+  --color-text-secondary: #B9B2A6;
+  --color-border: #333A4A;
+  --color-primary: #F2A65A;
+  --color-primary-hover: #E8755D;
+  --color-success: #A3C585;
+  --color-danger: #D98A8A;
+}
+body {
+  background: var(--color-background) !important;
+  color: var(--color-text) !important;
+}

assets/authentik-bg.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080" preserveAspectRatio="xMidYMid slice" aria-label="SMK dark background">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#14161B"/>
+      <stop offset="0.55" stop-color="#1A1E28"/>
+      <stop offset="1" stop-color="#232838"/>
+    </linearGradient>
+    <radialGradient id="glow" cx="0.82" cy="0.18" r="0.55">
+      <stop offset="0" stop-color="#F2A65A" stop-opacity="0.16"/>
+      <stop offset="1" stop-color="#F2A65A" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="1920" height="1080" fill="url(#bg)"/>
+  <rect width="1920" height="1080" fill="url(#glow)"/>
+  <!-- Soft decorative blobs -->
+  <circle cx="260" cy="860" r="240" fill="#E8755D" opacity="0.05"/>
+  <circle cx="1680" cy="240" r="300" fill="#F2A65A" opacity="0.05"/>
+  <circle cx="1620" cy="920" r="180" fill="#E8755D" opacity="0.04"/>
+</svg>

assets/icon.svg

@@ -0,0 +1,26 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="SMK Family icon mark">
+  <defs>
+    <linearGradient id="warm" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#F2A65A"/>
+      <stop offset="1" stop-color="#E8755D"/>
+    </linearGradient>
+  </defs>
+  <!-- Rounded squircle badge -->
+  <rect x="0" y="0" width="512" height="512" rx="120" fill="url(#warm)"/>
+  <!-- Subtle inner highlight -->
+  <rect x="8" y="8" width="496" height="496" rx="114" fill="none" stroke="#FFFFFF" stroke-opacity="0.14" stroke-width="6"/>
+  <!-- Heart -->
+  <path d="M 256 340
+           C 220 306 180 280 180 240
+           A 52 52 0 0 1 256 206
+           A 52 52 0 0 1 332 240
+           C 332 280 292 306 256 340 Z"
+        fill="#FBF6EC"/>
+  <!-- Sparkle -->
+  <path d="M 352 104
+           C 356 122 366 132 384 136
+           C 366 140 356 150 352 168
+           C 348 150 338 140 320 136
+           C 338 132 348 122 352 104 Z"
+        fill="#FBF6EC"/>
+</svg>

assets/logo-light.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 260" width="900" height="260" role="img" aria-label="SMK Family logo (light)">
+  <defs>
+    <linearGradient id="warm3" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#F2A65A"/>
+      <stop offset="1" stop-color="#E8755D"/>
+    </linearGradient>
+  </defs>
+  <g transform="translate(8,10) scale(0.47)">
+    <rect x="0" y="0" width="512" height="512" rx="120" fill="url(#warm3)"/>
+    <rect x="8" y="8" width="496" height="496" rx="114" fill="none" stroke="#FFFFFF" stroke-opacity="0.14" stroke-width="6"/>
+    <path d="M 256 340 C 220 306 180 280 180 240 A 52 52 0 0 1 256 206 A 52 52 0 0 1 332 240 C 332 280 292 306 256 340 Z" fill="#FBF6EC"/>
+    <path d="M 352 104 C 356 122 366 132 384 136 C 366 140 356 150 352 168 C 348 150 338 140 320 136 C 338 132 348 122 352 104 Z" fill="#FBF6EC"/>
+  </g>
+  <text x="290" y="158" font-family="'Baloo 2','Baloo 2 VF',ui-rounded,system-ui,sans-serif"
+        font-size="130" font-weight="700" fill="#1A1E28">SMK</text>
+  <text x="294" y="216" font-family="'Nunito','Nunito VF',ui-rounded,system-ui,sans-serif"
+        font-size="30" font-weight="700" letter-spacing="9" fill="#B35A2E">SMK FAMILY</text>
+</svg>

assets/logo.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 260" width="900" height="260" role="img" aria-label="SMK Family logo">
+  <defs>
+    <linearGradient id="warm2" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#F2A65A"/>
+      <stop offset="1" stop-color="#E8755D"/>
+    </linearGradient>
+  </defs>
+  <!-- Icon mark -->
+  <g transform="translate(8,10) scale(0.47)">
+    <rect x="0" y="0" width="512" height="512" rx="120" fill="url(#warm2)"/>
+    <rect x="8" y="8" width="496" height="496" rx="114" fill="none" stroke="#FFFFFF" stroke-opacity="0.14" stroke-width="6"/>
+    <path d="M 256 340 C 220 306 180 280 180 240 A 52 52 0 0 1 256 206 A 52 52 0 0 1 332 240 C 332 280 292 306 256 340 Z" fill="#FBF6EC"/>
+    <path d="M 352 104 C 356 122 366 132 384 136 C 366 140 356 150 352 168 C 348 150 338 140 320 136 C 338 132 348 122 352 104 Z" fill="#FBF6EC"/>
+  </g>
+  <!-- Wordmark -->
+  <text x="290" y="158" font-family="'Baloo 2','Baloo 2 VF',ui-rounded,system-ui,sans-serif"
+        font-size="130" font-weight="700" fill="#F5F0E6">SMK</text>
+  <text x="294" y="216" font-family="'Nunito','Nunito VF',ui-rounded,system-ui,sans-serif"
+        font-size="30" font-weight="700" letter-spacing="9" fill="#F2A65A">SMK FAMILY</text>
+</svg>

palette.md

@@ -0,0 +1,40 @@
+# SMK Family — Color Palette
+
+Dark-first, warm, family-friendly. Deep charcoal/navy grounds with warm amber & coral accents.
+No harsh neon, no cold corporate blues.
+
+## Semantic tokens
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| `smk-bg` | `#14161B` | App background (deep warm charcoal) |
+| `smk-bg-alt` | `#1A1E28` | Raised background / panels |
+| `smk-surface` | `#232838` | Cards, nav, dialogs |
+| `smk-surface-2` | `#2A3040` | Hover, input fills |
+| `smk-border` | `#333A4A` | Hairlines, dividers |
+| `smk-text` | `#F5F0E6` | Primary text (warm off-white) |
+| `smk-text-dim` | `#B9B2A6` | Secondary text (warm taupe) |
+| `smk-text-faint` | `#8A8579` | Muted / disabled text |
+| `smk-amber` | `#F2A65A` | **Primary accent** — friendly warmth |
+| `smk-coral` | `#E8755D` | Secondary accent — sunset energy |
+| `smk-sage` | `#A3C585` | Success / positive (soft green) |
+| `smk-rose` | `#D98A8A` | Warning / destructive (warm, not red-alarm) |
+
+## Gradients
+
+- **Primary logo gradient**: `#F2A65A` (amber) → `#E8755D` (coral), top-left → bottom-right.
+- **Background wash**: `#14161B` → `#1A1E28` → `#232838`, with a low-opacity amber radial glow top-right and coral blobs at low opacity for depth.
+
+## Dark-first rules
+
+1. Default surface is always dark. Light mode is an explicit opt-in, never default.
+2. Never use pure black (`#000000`) — `#14161B` reads softer and keeps warm undertone.
+3. Never use pure white — `#F5F0E6` keeps text warm and reduces glare.
+4. Accent usage: amber for interactive/primary, coral for highlights/brand moments, sage for success states only.
+5. Contrast: `smk-text` on `smk-bg` = ~12.4:1. `smk-text-dim` on `smk-bg` = ~6.3:1 (AA OK for body).
+6. 3:1 minimum contrast for large text / UI components with accents.
+
+## Accessibility
+
+- Don't rely on color alone — pair amber with icons/shapes.
+- Focus rings: 2px `smk-amber` outline with 2px `smk-bg` gap.

typography.md

@@ -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.