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