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:

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