SMK Family style & branding kit: logo, palette, typography, per-app playbook
This commit is contained in:
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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); }
|
||||
@@ -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.
|
||||
@@ -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.
|
||||
@@ -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"
|
||||
@@ -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.
|
||||
@@ -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
|
||||
```
|
||||
@@ -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.
|
||||
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" width="1920" height="1080" preserveAspectRatio="xMidYMid slice" aria-label="SMK dark background">
|
||||
<defs>
|
||||
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#14161B"/>
|
||||
<stop offset="0.55" stop-color="#1A1E28"/>
|
||||
<stop offset="1" stop-color="#232838"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="glow" cx="0.82" cy="0.18" r="0.55">
|
||||
<stop offset="0" stop-color="#F2A65A" stop-opacity="0.16"/>
|
||||
<stop offset="1" stop-color="#F2A65A" stop-opacity="0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<rect width="1920" height="1080" fill="url(#bg)"/>
|
||||
<rect width="1920" height="1080" fill="url(#glow)"/>
|
||||
<!-- Soft decorative blobs -->
|
||||
<circle cx="260" cy="860" r="240" fill="#E8755D" opacity="0.05"/>
|
||||
<circle cx="1680" cy="240" r="300" fill="#F2A65A" opacity="0.05"/>
|
||||
<circle cx="1620" cy="920" r="180" fill="#E8755D" opacity="0.04"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 966 B |
Binary file not shown.
|
After Width: | Height: | Size: 459 B |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
@@ -0,0 +1,26 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="SMK Family icon mark">
|
||||
<defs>
|
||||
<linearGradient id="warm" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#F2A65A"/>
|
||||
<stop offset="1" stop-color="#E8755D"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Rounded squircle badge -->
|
||||
<rect x="0" y="0" width="512" height="512" rx="120" fill="url(#warm)"/>
|
||||
<!-- Subtle inner highlight -->
|
||||
<rect x="8" y="8" width="496" height="496" rx="114" fill="none" stroke="#FFFFFF" stroke-opacity="0.14" stroke-width="6"/>
|
||||
<!-- Heart -->
|
||||
<path d="M 256 340
|
||||
C 220 306 180 280 180 240
|
||||
A 52 52 0 0 1 256 206
|
||||
A 52 52 0 0 1 332 240
|
||||
C 332 280 292 306 256 340 Z"
|
||||
fill="#FBF6EC"/>
|
||||
<!-- Sparkle -->
|
||||
<path d="M 352 104
|
||||
C 356 122 366 132 384 136
|
||||
C 366 140 356 150 352 168
|
||||
C 348 150 338 140 320 136
|
||||
C 338 132 348 122 352 104 Z"
|
||||
fill="#FBF6EC"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1020 B |
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
@@ -0,0 +1,18 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 260" width="900" height="260" role="img" aria-label="SMK Family logo (light)">
|
||||
<defs>
|
||||
<linearGradient id="warm3" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#F2A65A"/>
|
||||
<stop offset="1" stop-color="#E8755D"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="translate(8,10) scale(0.47)">
|
||||
<rect x="0" y="0" width="512" height="512" rx="120" fill="url(#warm3)"/>
|
||||
<rect x="8" y="8" width="496" height="496" rx="114" fill="none" stroke="#FFFFFF" stroke-opacity="0.14" stroke-width="6"/>
|
||||
<path d="M 256 340 C 220 306 180 280 180 240 A 52 52 0 0 1 256 206 A 52 52 0 0 1 332 240 C 332 280 292 306 256 340 Z" fill="#FBF6EC"/>
|
||||
<path d="M 352 104 C 356 122 366 132 384 136 C 366 140 356 150 352 168 C 348 150 338 140 320 136 C 338 132 348 122 352 104 Z" fill="#FBF6EC"/>
|
||||
</g>
|
||||
<text x="290" y="158" font-family="'Baloo 2','Baloo 2 VF',ui-rounded,system-ui,sans-serif"
|
||||
font-size="130" font-weight="700" fill="#1A1E28">SMK</text>
|
||||
<text x="294" y="216" font-family="'Nunito','Nunito VF',ui-rounded,system-ui,sans-serif"
|
||||
font-size="30" font-weight="700" letter-spacing="9" fill="#B35A2E">SMK FAMILY</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
@@ -0,0 +1,20 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 260" width="900" height="260" role="img" aria-label="SMK Family logo">
|
||||
<defs>
|
||||
<linearGradient id="warm2" x1="0" y1="0" x2="1" y2="1">
|
||||
<stop offset="0" stop-color="#F2A65A"/>
|
||||
<stop offset="1" stop-color="#E8755D"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Icon mark -->
|
||||
<g transform="translate(8,10) scale(0.47)">
|
||||
<rect x="0" y="0" width="512" height="512" rx="120" fill="url(#warm2)"/>
|
||||
<rect x="8" y="8" width="496" height="496" rx="114" fill="none" stroke="#FFFFFF" stroke-opacity="0.14" stroke-width="6"/>
|
||||
<path d="M 256 340 C 220 306 180 280 180 240 A 52 52 0 0 1 256 206 A 52 52 0 0 1 332 240 C 332 280 292 306 256 340 Z" fill="#FBF6EC"/>
|
||||
<path d="M 352 104 C 356 122 366 132 384 136 C 366 140 356 150 352 168 C 348 150 338 140 320 136 C 338 132 348 122 352 104 Z" fill="#FBF6EC"/>
|
||||
</g>
|
||||
<!-- Wordmark -->
|
||||
<text x="290" y="158" font-family="'Baloo 2','Baloo 2 VF',ui-rounded,system-ui,sans-serif"
|
||||
font-size="130" font-weight="700" fill="#F5F0E6">SMK</text>
|
||||
<text x="294" y="216" font-family="'Nunito','Nunito VF',ui-rounded,system-ui,sans-serif"
|
||||
font-size="30" font-weight="700" letter-spacing="9" fill="#F2A65A">SMK FAMILY</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
+40
@@ -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.
|
||||
@@ -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.
|
||||
Reference in New Issue
Block a user