95 lines
5.2 KiB
Markdown
95 lines
5.2 KiB
Markdown
# 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.
|