01
BBB brand / character
Black canvas, controlled Breaking Bad green, chemistry-noir characters, and a footer that feels like a final scene.
home · footer · storykeep original
visual working brief / v0.1 / 23.08.26
Black lab.
Green signal.
Zero menu friction.
A single BBB world assembled from the strongest evidence we found: CannaRoute’s operational clarity, StrainEase’s product intelligence, Highend’s confidence, Bangkok commerce touchpoints, Bamboo’s operator story, and Loyverse as the retail truth.
SELECTEDBBBanchor mascot
direction 01
direction 01
magenta disruption / Bangkoktrue-alpha cutout · original BBB mascot
01 / the recommendation
One brand, six useful worlds.
We are not making a collage of other people’s websites. We are taking one high-signal job from each source, then giving it a BBB visual rule so the customer experiences one coherent shop.
02
StrainEase product world
Editorial strain context, stable image loading, compare/finder depth, and a product page that answers the useful questions in order.
menu · PDP · compareborrow hierarchy
03
Bangkok commerce
Local atmosphere, Google Maps, WhatsApp, Instagram, pickup/delivery clarity, and real store photos where they help.
locations · handoffmake it truthful
04
Product intelligence
Effects, flavors, genetics, terpenes, COA/lab evidence, and progressive disclosure inspired by Leafly, Forest, and Terpene Explorer.
PDP · filters · growershow, don’t dump
05
Operator AI
Bamboo’s problem → conversation → proof → integration → compliance → handoff rhythm as a separate upsell, not consumer chrome.
/for-dispensariessell the service
06
Operations / truth
Loyverse items, variants, prices, stores, stock, receipts, customers, and webhooks behind a CannaRoute-shaped admin surface.
admin · grower · auditserver-side only
02 / the visual contract
BBB over a proven UI skeleton.
CannaRoute gives us the operational baseline: Inter, 16px/24px spacing, rounded-2xl cards, neutral borders, compact badges, and restrained shadows. BBB adds the black/green signal and warmer editorial moments around it.
Palette / controlled, not chaotic
Type / show the choice
DISPLAY / Space GroteskSignal in, smoke out.Current DISPO display face. Recommended for BBB hero headlines and selected editorial moments.
UI / InterInventory ready · 24 unitsCannaRoute baseline. Recommended for navigation, cards, forms, tables, admin, and dense product facts.
REFERENCE / LoraWhat it feels likeStrainEase-style editorial option. Use sparingly if the client wants a softer story layer.
DATA / IBM Plex MonoTHC 28.4% / COA 08-23Evidence, lab metadata, sync timestamps, and operator diagnostics.
Primitives / the boring stuff that makes it feel good
Card radius24pxrounded-2xl
Control radius14pxcomfortable thumb target
Body measure68chreadable copy max
Shadow0 12px 32pxlow contrast, never floaty
Mobile gutter20pxno cramped edge chrome
14812162432
Rule: black and green establish the brand; bone carries reading; amber and violet are signals, never competing primaries.
03 / component recipes
Borrow mechanics. Make the skin ours.
These are not decorative placeholders. Each mini-preview is a decision about hierarchy and responsive behavior that can become a production component in the existing Next/Tailwind app.
ABBB brief + CannaRoute
Short shell / one useful row
Cut the first viewport down to logo, search/menu, cart, location/status, then one context-aware filter row.
BBREAKING BAD BUDZ
Bangkok · open
Flower24 products
Keep: cart access, location, fulfillment.Remove: rating theatre, overlapping pill wall, unsupported trust claims.
BTerpene Explorer
Mobile filter sheet
One trigger → a clear sheet → result count → Apply. The user should not have to decode a control museum.
Filters
Flower24 results
Feeling▾
Potency18–30% ×
Price▾
Pickup / delivery▾
State: active count, result count, clear all, apply.
CStrainEase + HexaTerps
Product card / real image first
Product card shows specimen, name, type, one potency signal, price, and a deliberate fallback if the asset fails.
ASSET NEEDED
approved flower
macro / cutout
macro / cutout
HYBRID · 28.4% THC
Emerald Static
Bright citrus · calm finish
฿420 / 1g
Never ship the character as a fake flower photo.
DStrainEase + Leafly + Andaman
StrainEase-quality PDP / answer five questions
Hero specimen, “what it feels like”, strength, cost, and availability before the deeper terpene/genetics evidence.
SELECTED MASCOT / CUTOUT
SATIVA · PREMIUM FLOWER
Emerald Static
“Clear-headed lift, citrus on the first pull, calm enough to keep the day moving.”
28.4%THC0.8%CBD฿420from 1g
Mobile sticky CTA, branch stock, WhatsApp handoff, reviews, related products, and expandable evidence follow below the fold.
ECannaRoute
Operator shell / CannaRoute grammar
Keep portal clarity: dark nav, Inter, compact status, rounded cards, tables, audit states. Apply BBB green only where it helps.
Inventory● Live
Units live1,248Low stock12
ItemBranchStock
Emerald StaticThong Lo24
Night TrainRama IX3
Read-only first: sync health, branch truth, stock, receipt summary, reconciliation log.
FHighend + Redwood
Footer / the final scene
Large mark, real contact and locations, delivery/pickup, legal, social, and one controlled character moment.
Make the ending feel intentional, not like an afterthought after the products.
04 / the first proof slice
Three screens earn the right to scale.
Before we touch every route, we make one representative path client-wow quality: home/brand, one PDP, and one mobile menu/filter flow. Everything else inherits the decisions.
Home / front door
Short shell, original scene, one CTA, format rail, featured product rail, proof, and designed footer.
Gate: 390px + desktop / no fake claimsProduct / understand + buy
Approved image, feel statement, potency, cost, stock, price tiers, evidence, reviews, and sticky CTA.
Gate: no blank image / no dead PDP clickMobile / browse without friction
One filter trigger, a touch-friendly sheet, active count, result count, apply, and clean cards into a real PDP.
Gate: no overflow / filter state persists05 / page inventory
What stays, what changes, what waits.
This is the implementation map for the existing app. We preserve working commerce behavior where it is sound, then recompose the high-visibility surfaces around the proof slice.
| Surface | Decision | Take from | Build / verify |
|---|---|---|---|
| / home | recompose | BBB + Highend + StrainEase | short shell, hero scene, category rail, proof, footer |
| /shop menu | keep logic | DISPO + HexaTerps | one mobile filter sheet, real image states, tighter cards |
| /compare finder | add | StrainEase + Leafly | two-product signal comparison that routes into real PDPs |
| /shop/[slug] PDP | priority | StrainEase + Leafly + Andaman | hero media, feel/evidence hierarchy, stock, tiers, reviews |
| /cart checkout | keep + harden | DISPO + HexaTerps | fulfillment truth, branch confirmation, WhatsApp handoff |
| /locations trust | recompose | Bangkok references + Loyverse stores | Maps, hours, photos, stock/fulfillment status |
| /rewards account | after core | Uma / CannaVita / existing DISPO | show value, points catalog, activity; defer real auth |
| /ai shopper concierge | keep separate | existing AI Concierge + StrainEase finder | recommendation cards must route to real products |
| /for-dispensaries operator upsell | new lane | Bamboo After Hours / Calm Control | problem → transcript → proof → integration → handoff |
| /admin operator | new truth layer | CannaRoute + Loyverse + OpenTHC | read-only sync, inventory, orders, audit, health |
| /admin/grower farm / COA | scope preview | CannaRoute grower + Cannlytics | farm story, lab evidence, pesticide logs, provenance gates; live workflow pending |
06 / the visual evidence
Good ideas, with the bad bits labelled.
Click any capture to open it larger. Every image here is a research reference, not a production asset. The full audit and source links live in the repo.Open full audit ↗
07 / product asset review
Make the image pack pass the eye test.
The clean flower slice is the bar. The four new cutouts below are review candidates, not live catalog facts. Nothing graduates into production until Lee approves the look and the source data supplies the name, potency, and compliance evidence.
Rewards / Purple Orbit direction
Keep the value in HTML. Let the art carry the feeling.
These four illustrations are visual candidates for earn/redeem cards. Point totals, offer names, eligibility, and expiry must remain data-driven and approved.
Ship only clean imagery
Transparent cutouts or a consistent neutral macro set. No poster text, fake labels, invented packaging, or AI-generated lab facts.
Record the source
Each production image gets a filename, source, approval status, alt text, crop rule, and the real catalog item it represents.
Expand after the anchor
Once Lee picks the flower direction, generate the 12–20 product/rewards pack, then extend the original character system toward 40–50 assets.
08 / selected anchor + archived alternatives
One mascot leads. The rest stay backstage.
The magenta chemistry plush is the selected visual anchor from the client’s pink-bear correction. Earlier directions remain visible only as alternatives; they should not compete across the live storefront.
01
Chemistry Plush
Hero / footer / high-recall brand interruption
selected anchor
02
Night Courier
Delivery status / fulfillment / local Bangkok
utility mascot
03
Garden Rabbit
Playful browse states / greenhouse / education
soft energy
04
Purple Orbit
Rewards / perks / loyalty collectibles
violet accent
05
The Budtender
Human service / WhatsApp / consultation
human face
06
Lab Cat
Lab results / COA / data micro-moments
data guide07
Greenhouse Ghost
Empty state / loading / farm story
quiet helper
08
Ensemble lockup
Footer / campaign / brand sign-off
scene endingMust stay originalNo TV character likeness, logo recreation, exact show props, fake product photography, fake reviews, or invented lab claims.
Must earn its placeThe plush owns the hero and footer. Supporting characters remain off the storefront until a page has a real comprehension job for them.
Next approvalLee approves this anchor, requests one focused revision, or replaces it with supplied client-owned artwork.
09 / source map
Every borrow has a boundary.
The source material is a library of patterns and vocabulary. Production code stays in the BBB repo, uses our own tokens/assets, and keeps Loyverse credentials server-side.
StrainEase ↗
Product detail hierarchy, compare/finder depth, stable image fallback, strain context, reviews and saved actions.
do not copy brand/assets
Terpene Explorer ↗
Mobile filter accordion, effect chips, sortable table, Basic/Expert detail modal, optional radial visualization.
do not data-dump
CannaRoute ↗
Inter, Tailwind portal structure, dark nav, orders/inventory/drivers/compliance, grower farm/lab/pesticide surfaces, health metrics.
adapt for BBB + Loyverse
Bamboo AI Design Lab ↗
Three operator/AI art directions: After Hours, Sale in the Call, and Calm Control; problem → transcript → proof → integration → compliance → handoff.
BBB offer stays original
Loyverse API docs ↗
Retail truth: items, variants, prices, stores, inventory, receipts, customers, webhooks, and sync timestamps.
server-side adapter only
OpenTHC POS ↗ · Cannlytics ↗
Cannabis-specific vocabulary: lots, varieties, lab metrics, COA/PDF parsing, loyalty, delivery, vendors, and reporting.
not the legacy UI
BBB research package ↗
Highend, Andaman, Leafly, Forest, HexaTerps, Bamboo, CannaRoute, client feedback, current DISPO components, and the six-world composition plan.
update as we learn
10 / delivery order
The shortest route to something Lee can use.
The plan is deliberately staged. We prove taste and the core shopping path before spending time on a full admin universe or a 50-image asset library.
00
Approve the schema
nowChoose the font pairing, palette, anchor character, footer direction, and proof-slice order.
01
Asset + data contract
nextReplace fake product images with approved real macro/cutout assets; define the normalized product fields and Loyverse sync boundary.
02
Build the three-screen proof
client wowRecompose home, one PDP, and mobile filter flow in the existing Next/Tailwind foundation. Add browser evidence at 390px and desktop.
03
Harden commerce
usableExpand cards and route states to cart, fulfillment, locations, reviews, rewards, and shopper AI while keeping every click truthful.
04
Sell the operator lane
upsellBuild Bamboo-informed `/for-dispensaries`: menu/FAQ concierge, human handoff, conversation summaries, compliance guardrails, and clear service offer.
05
Connect operations
truthRead-only Loyverse adapter first, then admin inventory/orders/sync health, followed by grower/COA/compliance surfaces.
what we need from Lee
One visual yes beats another month of guessing.
Show the schema, get one anchor character and one hero/PDP direction approved, then create the production asset pack and wire the proven composition into the live app.