88 lines
3.1 KiB
Markdown
88 lines
3.1 KiB
Markdown
# Porchlight Branding & Theme Design
|
|
|
|
## Summary
|
|
|
|
Create a logo, favicon, and redesigned CSS theme for the project, now branded as "Porchlight."
|
|
|
|
## Logo
|
|
|
|
**Concept:** Icon + wordmark combo. The icon is a minimal doorway/arch with a light element (filled circle) above it, suggesting an entrance illuminated by a porch light.
|
|
|
|
**Variants:**
|
|
- Full combo (icon + "Porchlight" text) — page header in `base.html`
|
|
- Icon only — favicon and tight spaces
|
|
|
|
**Files:**
|
|
- `static/logo.svg` — standalone icon SVG
|
|
- `static/favicon.png` — 32x32 PNG of the icon
|
|
|
|
## Color Palette
|
|
|
|
Warm amber/gold accent on neutral stone backgrounds. Automatic dark mode via `prefers-color-scheme`.
|
|
|
|
### Light Mode
|
|
| Variable | Value | Description |
|
|
|---|---|---|
|
|
| `--bg` | `#fafaf9` | Warm white (stone-50) |
|
|
| `--fg` | `#1c1917` | Warm black (stone-900) |
|
|
| `--fg-muted` | `#78716c` | Secondary text (stone-500) |
|
|
| `--accent` | `#d97706` | Amber-600 |
|
|
| `--accent-hover` | `#b45309` | Amber-700 |
|
|
| `--accent-fg` | `#ffffff` | White on accent |
|
|
| `--surface` | `#f5f5f4` | Card/input bg (stone-100) |
|
|
| `--border` | `#d6d3d1` | Stone-300 |
|
|
| `--error-bg` | `#fef2f2` | Red-50 |
|
|
| `--error-fg` | `#dc2626` | Red-600 |
|
|
| `--success-bg` | `#f0fdf4` | Green-50 |
|
|
| `--success-fg` | `#16a34a` | Green-600 |
|
|
|
|
### Dark Mode
|
|
| Variable | Value | Description |
|
|
|---|---|---|
|
|
| `--bg` | `#1c1917` | Stone-900 |
|
|
| `--fg` | `#fafaf9` | Stone-50 |
|
|
| `--fg-muted` | `#a8a29e` | Stone-400 |
|
|
| `--accent` | `#f59e0b` | Amber-500 |
|
|
| `--accent-hover` | `#fbbf24` | Amber-400 |
|
|
| `--accent-fg` | `#1c1917` | Dark text on bright accent |
|
|
| `--surface` | `#292524` | Stone-800 |
|
|
| `--border` | `#44403c` | Stone-700 |
|
|
| `--error-bg` | `#451a1a` | Dark red |
|
|
| `--error-fg` | `#f87171` | Red-400 |
|
|
| `--success-bg` | `#14532d` | Dark green |
|
|
| `--success-fg` | `#4ade80` | Green-400 |
|
|
|
|
## CSS Redesign
|
|
|
|
Full rewrite of `style.css` with a design system:
|
|
|
|
- **Custom properties** for colors, spacing (4px base), typography, and radius
|
|
- **System font stack** (no webfonts)
|
|
- **Centered single-column layout** (`max-width: 40rem`)
|
|
- **Header bar** with logo + wordmark
|
|
- **Button variants:** primary (amber), secondary (outlined), danger (red)
|
|
- **Form styling:** full-width inputs, labels, focus states, error display
|
|
- **Cards/sections:** surface background with border for grouping
|
|
- **Alerts:** error (`role="alert"`) and success (`role="status"`)
|
|
- **Typography scale:** h1-h3, body, small
|
|
- **Accessibility:** skip link, `:focus-visible`, `.sr-only`, `prefers-reduced-motion`
|
|
- **Dark mode** via `@media (prefers-color-scheme: dark)`
|
|
|
|
## Template Updates
|
|
|
|
- `base.html`: add header with logo, update `<title>` to "Porchlight", add favicon link
|
|
- `login.html`: update title to "Login — Porchlight"
|
|
- `manage/credentials.html`: update title to "Credentials — Porchlight"
|
|
- `app.py`: update FastAPI title to "Porchlight"
|
|
|
|
## Files Changed
|
|
|
|
| File | Action |
|
|
|---|---|
|
|
| `static/style.css` | Rewrite |
|
|
| `static/logo.svg` | Create |
|
|
| `static/favicon.png` | Create |
|
|
| `templates/base.html` | Update (header, favicon, title) |
|
|
| `templates/login.html` | Update (title) |
|
|
| `templates/manage/credentials.html` | Update (title) |
|
|
| `app.py` | Update (title) |
|