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)

3.1 KiB Raw Blame History