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