LEGO-Themed Visual Refresh

Date: 2026-01-05 Project: lego-instructions-manager Status: resolved Tags: ui, bootstrap, design, templates, css

Context

The app was functionally complete but looked like a stock Bootstrap admin panel. Jess wanted it to feel like a LEGO product — brand colours and playful styling — while staying clean and usable.

Key Decisions

Keep Bootstrap 5, restyle on top rather than switching frameworks — lowest risk to working pages.
LEGO brand identity + modern patterns — brand colours with gradients, card-based layout, subtle animations; avoided novelty that hurts readability.
Base template first so every page inherits the new fonts, icons and alert behaviour, then dashboard and home page.
Auto-hiding flash messages and loading states — small UX wins bundled with the visual work.

Technical Details

base.html — fonts, alert icons, auto-hide messages, loading states.
Dashboard — redesigned stat cards, layout, getting-started guide.
Home page — hero section, feature cards, benefits, call to action.

Code Changes

Global stylesheet — LEGO-themed colours, gradients, card styles, animations.
app/templates/base.html — enhanced base template.
Dashboard template — improved stat cards and layout.
Home template — new hero, feature cards and CTA.

Open Questions / Next Steps

PostgreSQL is planned for production (currently SQLite).

Artifacts

689147d — Visual enhancement: Modern LEGO-themed design
9de38df — Enhanced base template
7f783f1 — Enhanced dashboard
62acef9 — Enhanced home page

1.6 KiB Raw Blame History