Brand Guide

Color Palette

Primary Colors

5 brand colors. Green is exclusively for CTAs and functional accents — never as a dominant color.

Prohibited Colors

Never use: red (#FF0000), pure black (#000000) as background, or the Figma green (#00C64D) which fails WCAG.

Typography

Type Scale

Headlines: Helvetica Rounded LT Pro (brand) → Nunito (web). Body: GT Pressura (brand) → Inter (web).

Logo

Logo Usage

3 approved variants. Always use the correct version for the background. The logo is a custom wordmark — never recreate it with type.

Left: on navy. Center: on white/light. Right: on brand blue.

Usage Rules

Do's and Don'ts

Color

Typography

Logo

Photography and Imagery

Illustrations

Organic Shapes

Wave / Blob

The organic wave shape is a brand element that connects sections and adds visual movement. Used as a transition between backgrounds or as a clip-path on photography.

Waves always go from one brand color to another. The curve is smooth and organic — never geometric or angular.

Buttons

CTA Styles

Primary CTA — global canonical

The single source of truth for primary buttons across the entire theme. Rounded-rect (12px radius, NOT pill), accent green, Nunito 800. Defined as .btn-cta in assets/theme.css.

This is the same button used on the lander final CTA ("Quiero mis mañanas →"), homepage hero, buybox subscription card, "Agregar al carrito", cart checkout button, contact form, and 404 page. One button. Everywhere.

Spec

Use in code

Always render via the snippet (or use .btn-cta directly for the bare class). Never hardcode the green hex, padding, or border-radius at call sites.

{# As a link #}
{% render 'brand-button', text: 'Quiero mis mañanas →', href: '#buy' %}

{# As a button (for JS handlers like ProductForm.addToCart) #}
{% render 'brand-button', tag: 'button', text: 'Agregar al carrito',
   onclick: 'ProductForm.addToCart()', class_extra: 'flex-1' %}

{# Full-width inside a card #}
{% render 'brand-button', tag: 'button', text: 'Suscribirme ahora →',
   onclick: 'ProductForm.selectSubscription(...)', full_width: true %}

Secondary / Tertiary (not yet shipped)

Secondary (navy fill) and tertiary (outline) variants are not yet shipped as snippets or CSS classes. When a site genuinely needs them, add a .btn-secondary / .btn-ghost class to theme.css and extend brand-button with a variant param. Don't fork the snippet or hand-style call sites.

When to use which

Primary (green rounded-rect): The single main action on the page. Max 1-2 per screen.

Secondary (navy): Complementary actions (alternate add to cart, confirm).

Tertiary (outline): Low-priority actions (see more, expand, dismiss).

Brand Snippets

Snippet Library — Reference for engineers

Every brand-canonical pattern lives at snippets/brand-*.liquid (flat naming — Shopify rejects subfolders). Render via {% render 'brand-X', ... %}. Do not duplicate snippet markup at call sites — refactor to use the snippet instead.

Copy primitives

Visual primitives

Component primitives

brand-buybox component spec

The most complex snippet. Architecture: section file ("controller") does ALL Shopify-data work — selling plan lookups, subscription detection, price math in cents, per-serving calcs, variant filtering, i18n string resolution. The snippet ("view") receives only pre-shaped scalars + the variants collection.

Used by:

• sections/lander-buy-box.liquid — the lander purchase module (id_prefix: 'lander')
• (Pending) sections/product-hero.liquid — homepage / product page (will use default id_prefix)

JS contract:

• ProductForm.selectSubscription(variant_id, plan_id)
• ProductForm.selectOneTime(variant_id, button_el)
• ProductForm.addToCart()
• ProductForm.decrementQty() / .incrementQty() (via brand-quantity-stepper)

DOM ids emitted (with optional id_prefix):

{prefix-}product-form, {prefix-}subscription-card, {prefix-}variant-selector, {prefix-}onetime-cta, {prefix-}product-quantity, {prefix-}trust-badges

Live render

Real product data from buenacopa-bienestar-post-fiesta. Shaped above by the section-level {%- liquid -%} block, mirroring sections/lander-buy-box.liquid. Use id_prefix: 'brand-guide' to avoid DOM collisions if multiple buyboxes share a page.

Buttons wire to ProductForm.* on the page's global script. Clicking "Agregar al carrito" on this demo will actually add to cart — same as production.

Accessibility

WCAG 2.1 AA Contrast

All text combinations must meet a minimum contrast ratio for legibility.

Images

Product Photography

Product photography is the most important brand asset. Maintain consistency in backgrounds, lighting, and style.

Approved Backgrounds

Product Photography — Do vs. Don't

Product Photography Rules

Images

Lifestyle Photography

Lifestyle photography communicates the brand promise: celebrate without consequences. The narrative arc is night → product → morning.

The Narrative Arc

Lifestyle Photography — Do vs. Don't

Lifestyle Photography Rules

Images

Text on Photography

When placing brand copy over photos, readability comes from choosing the right photo and placement — not from adding effects.

Quality Control

Real-World Asset Review

Common issues we've identified in existing content. Use these as reference for what to fix and what to replicate.

✅ What Good Looks Like

⚠️ Needs Refinement

❌ Does Not Meet Standards

The #1 Recurring Issue

Images

Infographics and Science

Educational assets (ingredients, how it works, data) follow a specific visual style.

Infographics — Do vs. Don't

Infographic Rules

Technical Specifications

Formats and Dimensions

Optimization

• All web images must be optimized (TinyPNG, Squoosh, or similar)
• Images > 1MB should never be uploaded to the theme — Shopify serves them without additional compression
• Use srcset to serve responsive sizes (400w, 800w, 1200w)
• Hero images: include fetchpriority="high" and preload for LCP
• Everything else: loading="lazy" + decoding="async"

Product Usage

The 4-Step Consumption Flow

This is the core product narrative. Every touchpoint — website, social, ads, packaging, email — should reinforce these 4 steps in the same order, with the same icons and language.

Live render

This is the canonical brand-steps snippet rendered with real blocks. Resize the browser: it stacks at <768px and lays out horizontally at ≥768px. Source of truth for homepage, lander, and /pages/como-funciona.

The 4 Branded Icons

These are the only approved icons for the usage steps. Do not substitute with emojis, generic icons, or 3D renderings.

Step Copy Variations

Approved copy for each step. Use these exact phrasings — don't invent new ones.

Where to Use This Flow

Usage Step Rules

Illustrations

Brand Illustration System

Custom illustrations by Faena Studio. Monochrome blue palette only (navy + blue + light blue). Green appears exclusively on the product (sachet/capsule). These tell the brand story: Night → Product → Morning.

The Full Set

Individual Icons & Their Meaning

Illustration Rules

Quick Reference

Theme CSS Variables

--background:    #001D45  /* Navy — primary backgrounds */
--primary:       #0056D0  /* Blue — brand, cards */
--accent:        #00A33C  /* Green — CTAs only */
--light-blue:    #B8D4F0  /* Decorative */
--off-white:     #ECEEE8  /* Light sections */

/* Fonts */
font-display:    'Nunito', sans-serif  /* Headlines */
font-body:       'Inter', sans-serif   /* Body */