YoBe Living Design System

Source Truth

This page is the human-readable reference. The durable source files remain in project context and prompt history.

1 Latest Houston prompt or correction

Use the newest explicit correction first. Recent examples: no duplicate page imagery, no arched product stages, use liked assets, never use disliked or queued assets, and use the GPT image pipeline for product scenes.

2 Codex + Claude v2 design system

The agent-facing consolidated spec at project-context/YOBE_DESIGN_SYSTEM--codex-claude-v2--2026-06-23-1726PDT.md.

3 DESIGN.md, STYLE_GUIDE.md, image docs

Use these for implementation details, token names, asset families, and production workflow.

4 Official refs beat inspiration refs

Official product, founder, packaging, Venice, and pouch-scale references outrank moodboards, mockups, generated drafts, and older photoshoots.

Brand Position

YoBe is not a generic green wellness brand. It is warm neutral ecommerce with product-led flavor color and real-life California energy.

North star

Real nutrition for real life. Venice-born, plant-based smoothie pouches with useful nutrition, clear product value, craveable flavor, and an easy repeat-purchase path.

What it should feel like

Warm, modern, simple, useful, California-native, product-led, and easy to trust.

Commerce job

Move shoppers toward Build your box, 12-pack, 16-pack, and Subscribe & save without dark-pattern pressure.

Visual mood

Natural light, warm cream surfaces, clear pouches, real routines, calm proof, and confident CTAs.

Do not become

Green-washed wellness, purple SaaS, bodybuilder supplement, over-polished influencer, or generic stock fitness.

Typography

The type system should feel crisp, premium, modern, and direct. Keep the hierarchy tighter than a marketing landing page.

Heading family DM Sans

Use for H1, H2, H3, nav, buttons, flavor names, and strong UI labels.

Body family Manrope

Use for paragraphs, descriptions, FAQ answers, support copy, and body UI.

Hero emphasis Real nutrition for real life.

Theme setting: type_accent_font = newsreader_n4. Base CSS maps H1/H2/H3 em to --font-heading-emphasis--family, italic, weight 400.

H1

DM Sans, bold, sentence case, compact leading.

Main homepage/Home2 hero model: Real nutrition for <em>real life</em>. Avoid small eyebrow text above it.

H2

DM Sans, smaller and tighter than early theme drafts.

Use the same Newsreader emphasis variable as H1 only where it improves rhythm.

Body

Manrope, open line-height, short paragraphs.

Keep copy plainspoken and specific. No generic wellness filler.

Labels

Small DM Sans or Manrope, restrained weight.

Utility labels are fine inside controls, cards, tables, and facts. Do not place kicker labels directly above main H1/H2 headings.

Never

No decorative display fonts, uppercase-heavy headlines, generic Georgia/Times samples, or general serif systems.

Title Case only when Shopify object titles force it. The only current serif is Newsreader italic through the theme emphasis variable.

Color System

Neutrals carry the site. Flavor color carries product choice, not generic decoration.

Core neutrals

Warm white#FAF7F3

Main page surface.

Soft cream#F2ECE2

Section bands and soft depth.

Cream deep#E9E0D2

Hairlines and grounded breaks.

Charcoal#1F1F1F

Primary text and dark CTAs.

Ink soft#2A2622

Warm near-black support text.

Muted gray#8D8A86

Secondary copy and meta.

Warm line#E4DCCF

Borders and dividers.

Sand shadow#D9CDBE

Soft shadows and tonal texture.

Flavor pairs

Vanilla blue spirulina#FFEBC2 / #31A8D2

Clean, uplifting, ocean-fresh.

Strawberry#F8ADA2 / #DD3E36

Bright, playful, approachable.

Ube#BEA5B3 / #46194F

Calm, creamy, comforting.

Chocolate energy#281E19 / #F7941D

Rich, energized, active.

Dark chocolate#281E19 / #AB7553

Deep, smooth, indulgent.

Milk chocolate#956043 / #1D1718

Classic, smooth, satisfying.

Matcha#A2B479 / #315025

Grounded, focused, balanced.

Mango#F9BC5F / #A8532C

Tropical, sunny, energizing.

Banana#FBE05B / #6A3F14

Soft, nourishing, mellow.

Pineapple#FAEE98 / #49371F

Bright, refreshing, juicy.

Chocolate energy orange#F7941D / #281E19

Bold, punchy, active.

Chocolate#BB8A71 / #4C2E20

Smooth, familiar, warm.

Buttons And Links

Buttons should be obvious and calm. Colorful product systems do not mean colorful CTA fills.

Primary

Charcoal pill, warm-white text. Use for the main conversion action in a section.

Secondary

Charcoal outline pill. Use next to a primary action when the path is valuable but not primary.

See the difference Text action

Inline action with subtle bottom border or arrow. Use when another pill would overload the section.

Do

Use sentence-case button labels.
Keep hover motion between 140 and 220ms.
Reserve flavor-gradient border treatment for rare moments like hero CTAs or review load-more.
Use compact labels on mobile when price or cadence would wrap.

Avoid

No flavor-color CTA fills.
No sparkline or scribble pseudo-elements.
No competing button stacks where a text link is enough.
No hidden subscription intent or confusing one-time versus subscription copy.

Layout And Surfaces

YoBe should feel premium and warm, not boxed-in. Depth comes from rhythm, color fields, media, and texture.

No boxes within boxes

Do not default to nested cards, bordered panels inside bordered panels, or stacked framed containers. Use cards only for product cards, repeated items, modals, tables, and real utility panels.

Prefer bands and rows

Use full-width cream or warm-white bands, edge-to-edge flavor fields, clean rows, clear typography, and section spacing.

Use subtle branded texture

Approved palm shadows, paper textures, rough cream gradients, and tonal background layers can add dimension when they do not obscure content.

Keep sections focused

One primary message, one primary action, one support idea. Do not cram product proof, story, subscription, and FAQ into the same visual block.

Cards

Product cards, review cards, repeated tiles, drawers, modals, utility panels.

A section becomes nested panels instead of one clean composition.

Texture

Palm shadows, paper grain, soft cream roughness, low-contrast gradients.

It reads as blobs, bokeh, generic SaaS gradients, or visual noise.

Hero and media sections

Full-bleed or strongly anchored image surfaces with copy-safe zones.

The product or person sits behind text, crops awkwardly, or repeats another page image.

Component Rules

Components should inherit the brand system and still work hard for commerce.

Product and flavor selection

Use flavor-color product stages with stable pouch scale, clear flavor name, short details, and obvious add/build action. Avoid separate image-card plus copy-card stacks when a single flavor field can do the job.

Build-a-Box builder

More functional than the homepage. Keep pack selection, flavor progress, cadence, subscription/one-time controls, summary, and CTA compact and scannable. Cart behavior must preserve real variants, selling plans, and flavor-count properties.

Reviews and proof

Use real customer proof, Judge.me widgets, quiet proof chips, and clear return-to-builder CTAs. Avoid image-heavy review walls that delay the next shopping action.

FAQ

FAQ sections should be clean and useful, not a leftover image slot. Do not repeat an image already used on the page just to fill the side.

Forms and inputs

Inputs and textareas get outline-none on the inner field. Focus rings and focus borders belong on the parent wrapper through focus-within, never the input itself.

Icons

Use thin-line SVGs around 1.5px stroke, rounded caps, and one visual weight. Use Lucide-like icons when exact brand icons do not exist. Never use emoji as icons.

Lifestyle And Product Imagery

Imagery is where the brand becomes believable. Product scale, packaging truth, and asset source rules are hard gates.

Hero lifestyle: real California energy, copy-safe composition.

Real-life use: product should feel palm-sized and useful.

Ingredient story: warm, product-led, not clinical.

Subscription: restock convenience, not freezer storage cliche.

Hero lifestyle

Venice, beach path, warm kitchen, movement, product visible, negative space.

Subject and product cannot sit behind text. Mobile crop must pass first-viewport QA.

Product-only

Official pouches, consistent silhouette, clean shadow, flavor-color truth.

Use isolated transparent render pipeline only for isolated product renders.

Lifestyle with pouch

Real hand/object ratios, candid movement, natural skin, neutral wardrobe.

Pouch scale is a stop-ship gate. Physical scale beats logo readability.

Founder

Official Hawkins Golden likeness refs only, warm Venice context, direct but relaxed.

Do not invent founder likeness. Generated founder images need human QA before public use.

Backgrounds and accents

Palm shadows, paper texture, cream gradients, ingredient silhouettes.

No decorative blobs, gradient orbs, fake UI, or busy patterns.

Use

Natural light, warm but not orange.
Real routines: kitchen, beach path, tote, fridge, desk, car, farmers market, post-workout reset.
Neutral wardrobe: cream, sage, charcoal, soft brown, muted blush, washed black, olive, white.
Aspirational but relatable people. Across lifestyle sets, target roughly 70 percent female and 30 percent male representation.

Reject

Oversized pouches, giant caps, impossible grip, or product covering face/chest/forearm.
Old packaging used as current package truth.
AI-looking hands, melted caps, warped seams, misspelled YoBe, or hallucinated label text.
Medical/lab supplement visuals, bodybuilder intensity, beauty-retouch skin, fake influencer poses.

AI Image Generation Rules

Every non-transparent YoBe product scene is a reference-image generation job. No post-generation compositing.

Never again

Do not replace real lifestyle or properly generated product scenes with arched window product stages, fake product render collages, or composite pouch overlays. If a scene needs products, run the GPT image pipeline with reference images and scale lock.

1

Choose the asset family: hero, lifestyle, product-only, recipe, fridge/shelf, box, all-flavor, founder, support, or background.

2

Attach official product refs for packaging truth. The latest 260612 production pouch mockups supersede old product refs once cropped/promoted.

3

Attach old photoshoot scale refs for hand/object ratio when a pouch appears in real life.

4

Add founder/model/brand refs only when the scene requires person or character consistency.

5

Generate one final image with npm run image:generate / gpt-image-2. The returned image is the product-scene asset.

6

Run scale, crop, packaging, mobile/desktop, and asset-rating QA before wiring.

Required scale language

The YoBe pouch is a real single-serve palm-sized 5.8 oz spouted pouch: body width about one adult palm/knuckle width, height about a compact hand-held pouch, cap small, hand-to-pouch ratio matching real YoBe photoshoot references, not oversized, not carton-sized, not prop-scale.

Required scale ledger

Scale lock: - Interaction type: - Real photoshoot refs checked: - Intended pouch ratio: - QA result: - If failed, action:

Isolated transparent pouch

npm run image:pouch:render from official artboards.

GPT lifestyle scene or manual crop from a scene.

Lifestyle/product scene

npm run image:generate with refs attached, prompt, and scale ledger.

Transparent pouch overlay, Photoshop assembly, fake stage render, or composite script.

Founder/person scene

Official person refs plus product/brand/scale refs as needed.

Text-only likeness prompt or unapproved generated face.

Layout placeholder

Use a clearly temporary approved or liked image when layout must move fast.

A disliked, queued, old official, or composite-derived image.

Asset Selection Rules

The asset gallery is part of the design system. Image ratings and trash state are binding unless Houston overrides an exact file.

Use liked assets first

Before wiring a YoBe content image, check the internal asset gallery or recovered rating state. Prioritize assets marked Liked.

Never use disliked or queued assets

Do not wire assets marked Disliked or queued for removal unless Houston explicitly names that exact file in the current request.

No duplicate section imagery

Do not repeat the same editorial, lifestyle, background, proof, FAQ, or CTA image on the same page. Product pouch renders can repeat inside commerce UI where needed.

Old product refs are not current truth

Old pouch renders and old official refs must move to or remain in clearly labeled DO NOT USE - OLD backup folders. Use the latest 260612 production pouch files after extraction/cropping/promotion.

Voice And Copy

YoBe copy should sell clearly without hype. Plain beats clever when purchase clarity is at stake.

Core phrases

Real nutrition for real life. Good for you. Good for real life. Plant-based smoothies with 20g protein and nothing artificial. Flavors that hit different. Build your box. Subscribe & save. Fuel what moves you. That's YoBe.

Rules

Use short sentence-case headlines.
Use "you" for customer copy and "I" only for founder notes.
Favor real, clean, functional, plant-based, effortless, fuel, moments, craveable, 20g protein, nothing artificial.
Avoid hype, diet guilt, medical claims, fake science, corporate wellness jargon, exclamation marks, emoji, and overbuilt benefit language.
Use verified claims only. Keep nutrition values source-backed.

Commerce Page Guidance

Each page has a different job. Do not make every surface as dense as the builder.

Homepage

Editorial and emotional selling that routes to Build-a-Box.

Use homepage hero copy/layout/typography as the benchmark. Keep it lighter than the builder.

Home2 experiment

Build-a-Box subscription entry page.

Primary CTA: Build Your Box. Secondary CTA: Explore Flavors. Flavor CTAs route to Build-a-Box.

Build-a-Box PDP

Functional purchase configurator.

Use real current variants, Recharge selling plans, stable summary, compact proof, no fake product controls.

Product detail pages

Preserve native Shopify purchase controls while adding YoBe reassurance and story.

Keep right-panel typography tight. Product images should remain visible in cart and purchase contexts.

Support and subscription

Reduce friction and make management routes honest.

Do not fake Recharge actions in theme-only UI. Route to real account, Recharge, WhatsApp, and email paths.

Internal tools

Help Houston and agents make correct decisions faster.

Use YoBe fonts/colors, Notion-like density, clear lists/boards, and minimal chrome.

QA Gates

Do not call design work done until it passes the rule that could have caught the mistake.

Visual QA

Check every changed section on desktop, tablet, and phone.
No horizontal overflow, clipped copy, bad crop, hidden CTA, or repeated section image.
Use real browser surfaces first for Shopify previews and visual debugging.

Product image QA

Pouch scale matches matching photoshoot refs.
Flavor color and package likeness match official refs.
No old packaging, warped text, fake claims, or composite artifacts.

Theme QA

Use singleton Shopify dev-server protocol before preview work.
Run shopify theme check before declaring section work done when possible.
Push meaningful changes to dev theme with guarded wrappers, never live publish.

Accessibility QA

Buttons are real buttons or links with clear labels.
Custom controls preserve ARIA state and keyboard access.
Input focus styling belongs on parent wrappers via focus-within.

Reference Links

Use these files before making design, image, or Shopify section decisions.

Canonical design system v2Agent-facing brand source. DESIGN.mdWorking art direction and image brief. STYLE_GUIDE.mdImplementation-facing style rules. Pouch scale ruleHard gate for all product scenes. Image asset planAsset families, source policy, output lanes. Asset galleryLiked, disliked, queued, source truth, and usage state. Reference galleryOfficial refs, inspo refs, scale refs. Prompt managerReference-aware prompt templates.