From ff4ff7645c87a3fd5585ee073bcc06c06e066f72 Mon Sep 17 00:00:00 2001 From: Stephan Kerkman Date: Sun, 31 May 2026 20:59:47 +0200 Subject: [PATCH] docs: add BloomBase UI redesign spec Covers visual system (Tailwind, Great Vibes/Timeless font, coral palette), 5-tab bottom nav, all screen designs, Location.cover_photo model change, and file change summary. Co-Authored-By: Claude Sonnet 4.6 --- .../2026-05-31-bloombase-redesign-design.md | 200 ++++++++++++++++++ 1 file changed, 200 insertions(+) create mode 100644 docs/superpowers/specs/2026-05-31-bloombase-redesign-design.md diff --git a/docs/superpowers/specs/2026-05-31-bloombase-redesign-design.md b/docs/superpowers/specs/2026-05-31-bloombase-redesign-design.md new file mode 100644 index 0000000..808c980 --- /dev/null +++ b/docs/superpowers/specs/2026-05-31-bloombase-redesign-design.md @@ -0,0 +1,200 @@ +# BloomBase UI Redesign — Design Spec + +**Date:** 2026-05-31 +**Project:** plantdb (BloomBase) +**Primary user:** Naomi (plant owner, photographer, Dutch Farmhouse content creator) +**Inspired by:** Naomi's own design mockup — vibrant organic poster aesthetic + +--- + +## 1. Scope + +Full visual redesign of the BloomBase Django app, replacing Bootstrap 5 with Tailwind CSS. New bottom navigation. Location model extended with cover photo. All existing screens restyled. One new screen (Area Detail). + +**In scope:** +- Replace Bootstrap 5 with Tailwind CSS (CDN play/JIT acceptable; production: CLI build) +- Rewrite `base.html` with bottom navigation +- Restyle all existing templates: dashboard, plant list, plant detail, locations, identify flow +- New Area Detail page (cover photo header + plant grid) +- `Location.cover_photo` ImageField + migration + upload UI + +**Out of scope:** +- Care tab new features (stub tab only) +- Profile tab (stub tab only) +- Authentication / multi-user + +--- + +## 2. Visual System + +### Color Palette +| Role | Value | +|---|---| +| Page background | `#FFF8F2` (warm cream) | +| Primary / CTA | `#F07040` coral-orange | +| CTA gradient | `linear-gradient(135deg, #F58040, #E84020)` | +| Accent / nature | `#52B788` green | +| Dark text | `#1A1208` | +| Muted text | `#B0A090` | +| Card background | `#FFFFFF` | +| Card border / subtle | `#F0E4D4` | +| Tint background | `#FFF8F2` | + +### Typography +| Usage | Font | Weight | Size | +|---|---|---|---| +| Brand name "Bloombase" | Great Vibes (approximates Timeless) | 400 | 32–46px | +| Page headlines | Nunito | 900 | 21–28px | +| Section titles | Nunito | 800 | 16–19px | +| Body / labels | Nunito | 600–700 | 9–12px | +| Tagline / CTA sub | Pacifico | 400 | 14–16px | + +Google Fonts import: +``` +Nunito:wght@400;600;700;800;900 | Great Vibes | Pacifico +``` + +Note: "Timeless" (Naomi's preferred font) is a commercial script font. Great Vibes is the closest free equivalent; swap for Timeless font file if provided. + +### Decorative Elements +- Page canvas: two fixed-position CSS blob shapes (coral top-left, amber bottom-right) at ~20% opacity +- Canvas SVG flowers: hibiscus (top-right), daisy (bottom-right), small pink flower (mid-left), leaf cluster (bottom-left) — fixed-position, pointer-events: none +- These decorations live on the **page canvas only**, never inside phone/card content areas +- Card interiors: clean white, no decorations + +--- + +## 3. Navigation + +Bottom navigation bar — 5 tabs, height 62px, stays within `overflow: hidden`. + +| Tab | Icon | Active state | Target | +|---|---|---|---| +| Home | house SVG | coral fill | `/` | +| My Garden | circle/plant SVG | coral stroke | `/locations/` | +| + (FAB) | gradient circle 44px | always orange | `/identify/` | +| Care | mic/leaf SVG | coral stroke | Stub (future) | +| Profile | person SVG | coral stroke | Stub (future) | + +FAB: `background: linear-gradient(145deg, #F58040, #E84020)`, `box-shadow: 0 4px 16px rgba(240,80,40,0.5)`, sits **within** nav bar height (no negative margin needed). + +--- + +## 4. Screens + +### 4.1 Home (dashboard.html) +Camera-first layout. Replaces existing stats cards. + +- Top bar: hamburger icon (left) + bell icon (right) +- Greeting: "Hello, Plant Lover! 🌿" (small, muted) +- Headline: "What are we **growing** today?" (Nunito 900, "growing" in coral) +- Sub: "Identify a plant and add it to Bloombase." +- Camera viewfinder: dark rounded card (~114px tall), corner brackets, shutter button (gradient) + gallery button +- My Garden pill: icon + "My Garden" + plant/area count + chevron → links to `/locations/` +- Bottom nav: Home tab active + +### 4.2 My Garden (locations.html) +List of areas/locations. + +- Header: "My Garden" (Nunito 900) + "Edit" link (coral, right) +- Search bar: pill shape, gray tint background +- Area rows: cover photo thumbnail (68×60px, `object-fit: cover`) + area name + plant count + chevron + - If no cover photo: CSS gradient placeholder (each area gets a different hue) +- No extra + FAB on this screen — + in bottom nav handles adding +- Bottom nav: My Garden tab active + +### 4.3 Area Detail (new: `/locations//`) +- Cover photo header: full-width, ~180px tall, `object-fit: cover`, gradient overlay at bottom +- Back button (top-left), edit button (top-right) — white pill buttons +- Area name + plant count below hero +- Plant grid: 2 columns, white cards, plant photo thumbnail + common name + species +- Empty state: friendly message + link to identify +- Bottom nav: My Garden tab active + +### 4.4 Plant Detail (plant_detail.html) +- Hero image: full-width top section +- Back + favorite buttons overlaid (white pill) +- Plant name (Nunito 900) + Latin name (coral) +- Match confidence bar (if from identification) +- Care icons row: light · water · temp +- Action buttons: "Add to my garden" (gradient CTA) + "Save to identify later" (outline) +- Photo gallery below fold + +### 4.5 Identify / Camera (identify flow) +- Viewfinder as primary element +- Gallery picker button + shutter button +- Post-identification: Plant Detail screen (#4.4) with confidence bar visible + +### 4.6 Plant List (plant_list.html) +- Search bar at top +- Location filter chips (horizontal scroll, coral when active) +- Plant cards: thumbnail + name + area tag +- Matches vibrant palette + +--- + +## 5. Data Model Change + +**`Location` model** — add one field: + +```python +cover_photo = models.ImageField(upload_to='locations/', blank=True, null=True) +``` + +Migration: `python manage.py makemigrations && migrate` + +**Location edit/create form:** add `cover_photo` file field. Display current photo with replace option. Use same upload pattern as plant photos (multipart form). + +--- + +## 6. Implementation Approach + +### Tailwind Setup +Use Tailwind CSS CDN (Play CDN) for development: one `