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.

5.2 KiB Raw Permalink Blame History