commit 7a31c7ed8df5d996c6b8935ade3dc3e87a52138a Author: larry Date: Sat Aug 15 21:37:48 2026 +0000 SMK Family style & branding kit: logo, palette, typography, per-app playbook diff --git a/README.md b/README.md new file mode 100644 index 0000000..0a72c4c --- /dev/null +++ b/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. diff --git a/apps/freshrss/README.md b/apps/freshrss/README.md new file mode 100644 index 0000000..583c323 --- /dev/null +++ b/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. diff --git a/apps/freshrss/smk-freshrss.css b/apps/freshrss/smk-freshrss.css new file mode 100644 index 0000000..2a22098 --- /dev/null +++ b/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); } diff --git a/apps/gitea/README.md b/apps/gitea/README.md new file mode 100644 index 0000000..fe01f87 --- /dev/null +++ b/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. diff --git a/apps/grafana/README.md b/apps/grafana/README.md new file mode 100644 index 0000000..9ff5c54 --- /dev/null +++ b/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. diff --git a/apps/home-assistant/smk-theme.yaml b/apps/home-assistant/smk-theme.yaml new file mode 100644 index 0000000..51e63af --- /dev/null +++ b/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" diff --git a/apps/immich/README.md b/apps/immich/README.md new file mode 100644 index 0000000..f14d7ca --- /dev/null +++ b/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. diff --git a/apps/paperless/README.md b/apps/paperless/README.md new file mode 100644 index 0000000..7c4ed9a --- /dev/null +++ b/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 +``` diff --git a/apps/uptime-kuma/README.md b/apps/uptime-kuma/README.md new file mode 100644 index 0000000..017d026 --- /dev/null +++ b/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. diff --git a/apps/uptime-kuma/smk-kuma.css b/apps/uptime-kuma/smk-kuma.css new file mode 100644 index 0000000..5fd95c4 --- /dev/null +++ b/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; +} diff --git a/assets/authentik-bg.svg b/assets/authentik-bg.svg new file mode 100644 index 0000000..860f839 --- /dev/null +++ b/assets/authentik-bg.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/assets/favicon.ico b/assets/favicon.ico new file mode 100644 index 0000000..4104e14 Binary files /dev/null and b/assets/favicon.ico differ diff --git a/assets/icon.png b/assets/icon.png new file mode 100644 index 0000000..88fff16 Binary files /dev/null and b/assets/icon.png differ diff --git a/assets/icon.svg b/assets/icon.svg new file mode 100644 index 0000000..7f1f542 --- /dev/null +++ b/assets/icon.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + diff --git a/assets/logo-light.png b/assets/logo-light.png new file mode 100644 index 0000000..618e2b7 Binary files /dev/null and b/assets/logo-light.png differ diff --git a/assets/logo-light.svg b/assets/logo-light.svg new file mode 100644 index 0000000..9e05773 --- /dev/null +++ b/assets/logo-light.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + SMK + SMK FAMILY + diff --git a/assets/logo.png b/assets/logo.png new file mode 100644 index 0000000..d968e1e Binary files /dev/null and b/assets/logo.png differ diff --git a/assets/logo.svg b/assets/logo.svg new file mode 100644 index 0000000..815dd9a --- /dev/null +++ b/assets/logo.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + SMK + SMK FAMILY + diff --git a/palette.md b/palette.md new file mode 100644 index 0000000..5453e35 --- /dev/null +++ b/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. diff --git a/typography.md b/typography.md new file mode 100644 index 0000000..2afe31a --- /dev/null +++ b/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.