bloombase/docs/superpowers/specs/2026-05-31-bloombase-redesign-design.md

# 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/<id>/`)
- 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 `<script>` tag in `base.html`. For production build: add `tailwindcss` to npm devDependencies, generate `output.css`, serve as static file.

### Template Strategy
- `base.html`: remove Bootstrap, add Tailwind CDN, add bottom nav, add page blob/flower decorations
- All other templates: inherit from new `base.html`, rewrite content blocks using Tailwind utility classes
- Keep HTMX — no changes to behavior
- Keep Django form handling — only CSS changes for form widgets

### Custom CSS
Small `bloombase.css` for:
- Great Vibes / Nunito font imports
- CSS blob shapes (can't trivially do in Tailwind)
- SVG canvas flowers (fixed-position)
- Phone-specific patterns if needed in mockup/splash

### Static Files
- `/static/css/bloombase.css` — custom styles
- `/static/images/` — no new images needed (all CSS/SVG)

---

## 7. File Change Summary

| File | Change |
|---|---|
| `plants/models.py` | Add `cover_photo` to `Location` |
| `plants/migrations/XXXX_add_location_cover_photo.py` | New migration |
| `plants/views.py` | Location edit/create views handle `cover_photo` |
| `plants/forms.py` | `LocationForm` includes `cover_photo` |
| `plants/templates/plants/base.html` | Full rewrite: Tailwind, bottom nav, decorations |
| `plants/templates/plants/dashboard.html` | Camera-first home |
| `plants/templates/plants/plant_list.html` | Tailwind restyle |
| `plants/templates/plants/plant_detail.html` | Tailwind restyle |
| `plants/templates/plants/locations.html` | My Garden with cover photos |
| `plants/templates/plants/location_detail.html` | **New** — area detail page |
| `plants/templates/plants/location_form.html` | Add cover photo upload |
| `static/css/bloombase.css` | **New** — fonts, blobs, canvas flowers |
| `plants/urls.py` | Add route for `location_detail` |

---

## 8. Out-of-Scope Notes

- Care tab: render a stub "Coming soon" page
- Profile tab: render a stub or redirect to plant stats
- Dark mode: not in scope
- PWA / offline: not in scope
- Multi-user / auth: not in scope