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 <noreply@anthropic.com>
This commit is contained in:
parent
c1d0f0a346
commit
ff4ff7645c
1 changed files with 200 additions and 0 deletions
200
docs/superpowers/specs/2026-05-31-bloombase-redesign-design.md
Normal file
200
docs/superpowers/specs/2026-05-31-bloombase-redesign-design.md
Normal file
|
|
@ -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/<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
|
||||||
Loading…
Add table
Reference in a new issue