Design Brand

Planted Design & Brand System

This skill codifies Planted's visual identity and brand voice. Use it whenever making design decisions, writing copy, or creating new UI components.

Brand Philosophy: The Planted Way

Planted follows a challenger brand approach inspired by John Schoolcraft's work at Oatly. We're not a faceless corporation with a logo - we're humans talking to humans about making food choices that are good for bodies and planet.

Core Principles

1. Be Human, Not a Logo

   • Write like a person, not a brand guideline
   • Self-deprecating humor > corporate polish
   • Transparency about imperfections builds trust

2. Consistently Inconsistent

   • There's consistency in our inconsistency
   • Oscillate between scientific facts and playful absurdity
   • Keep people engaged with the unexpected

3. Entertainment First, Preaching Never

   • Make sustainability the fun choice, not the guilt choice
   • Lead with entertainment, embed the message
   • 90% funny, 10% serious (the exact ratio is classified)

4. Show, Don't Tell

   • Prove things through action, not claims
   • Data and transparency > marketing speak
   • If we're not good at something, say it before critics do

Visual Design System

Color Palette

/* Primary Brand Colors */
--planted-purple: #61269E;      /* Trust, authority, premium feel */
--planted-purple-dark: #4A1D7A; /* Hover states, depth */
--planted-green: #8BC53F;       /* Action, growth, vitality */
--planted-cream: #FFF8F0;       /* Warmth, background, approachability */

/* Accent Colors */
--planted-pink: #FF69B4;        /* Playfulness, surprise */
--planted-orange: #FF8C42;      /* Energy, appetite appeal */

/* Neutral Colors */
--planted-charcoal: #2D2D2D;    /* Text on light backgrounds */
--planted-black: #1A1A1A;       /* Primary text */
--planted-white: #FFFFFF;       /* Cards, contrast */

/* Semantic Usage */
--planted-action: var(--planted-green);   /* CTAs, success states */
--planted-trust: var(--planted-purple);   /* Primary brand moments */
--planted-warmth: var(--planted-cream);   /* Backgrounds, approachability */

Typography

Display & Headlines: VC Henrietta (serif)

• Hero text: clamp(3rem, 12vw, 8rem), line-height: 0.88
• Page headers: clamp(3rem, 12vw, 6rem), line-height: 0.92
• Section titles: clamp(2rem, 8vw, 4rem)
• Weight: 700, letter-spacing: -0.02em to -0.03em

Body & UI: Galano Grotesque (sans-serif)

• Body: 1rem, line-height: 1.6
• Small text: 0.85rem
• Micro text: 0.75rem
• Weight: 400 for body, 700 for emphasis

Typography Rules:

• Headlines should feel like they're breaking out of the grid
• Body copy should be readable and warm
• Mix uppercase sparingly (badges, micro-labels only)

Spacing System (8-Point Grid)

--space-xs: 0.5rem;   /* 8px - tight spacing */
--space-sm: 1rem;     /* 16px - default gap */
--space-md: 1.25rem;  /* 20px - comfortable */
--space-lg: 1.5rem;   /* 24px - section padding */
--space-xl: 2rem;     /* 32px - major sections */
--space-2xl: 3rem;    /* 48px - hero spacing */
--space-3xl: 4rem;    /* 64px - page sections */
--space-4xl: 5rem;    /* 80px - major breaks */
--space-5xl: 6rem;    /* 96px - hero areas */

Border Radius

• Buttons: 100px (pill shape)
• Cards: 1.25rem (20px)
• Badges: 100px (pill)
• Images in cards: Match card radius or slightly less

Shadows

/* Card shadow (subtle) */
box-shadow: 0 4px 20px rgba(0,0,0,0.06);

/* Card hover shadow */
box-shadow: 0 16px 32px rgba(0,0,0,0.1);

/* Button shadow (purple) */
box-shadow: 0 8px 24px rgba(97, 38, 158, 0.3);

/* Button hover shadow */
box-shadow: 0 12px 32px rgba(97, 38, 158, 0.4);

/* Green button shadow */
box-shadow: 0 8px 24px rgba(107, 191, 89, 0.4);

Animation & Motion

/* Easing curves */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);  /* Primary - snappy, premium */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* Symmetrical transitions */
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Subtle deceleration */

/* Durations */
--duration-fast: 0.2s;    /* Micro-interactions */
--duration-normal: 0.3s;  /* Standard transitions */
--duration-slow: 0.5s;    /* Emphasis moments */

Animation Principles:

• Prefer transform and opacity for performance
• Hover states: translateY(-3px to -6px) lift effect
• Active states: scale(0.97) press effect
• Reveals: translateY(24px) to translateY(0) with fade

Component Patterns

Buttons

<!-- Primary (purple, for main CTAs) -->
<a class="btn btn-primary">Find Products</a>

<!-- Secondary (outlined, for secondary actions) -->
<a class="btn btn-secondary">Learn More</a>

<!-- Green (for positive actions, sustainability) -->
<a class="btn btn-green">Calculate Your Impact</a>

Button Behavior:

• Hover: Lift up 3px, enhance shadow
• Active: Scale down to 97%
• Always use 100px border-radius (pill shape)
• Minimum touch target: 44px

Cards

Product Cards: Dual-state reveal (packaging to dish on hover) Recipe Cards: Image zoom on hover, subtle lift Content Cards: White background, rounded corners, soft shadow

Product Card Colors

Each product has an assigned color that creates gradient backgrounds:

• terracotta: #E8C4B8 to #D4A894
• yellow: #F5E6B8 to #E8D494
• purple: #C4B8E8 to #A894D4
• olive: #C8D4B8 to #B4C494
• burgundy: #D4B8C4 to #C494A8
• teal: #B8D4D4 to #94C4C4
• coral: #F5D4C8 to #E8B8A4
• navy: #B8C4D4 to #94A8C4
• green: #C4E8C4 to #94D494
• orange: #F5D4B8 to #E8B894
• red: #F5C4C4 to #E8A4A4

Brand Voice & Copy Guidelines

The Planted Tone

We oscillate between two modes:

Mode A: Scientific-Factual

• Data-driven statements
• Specific numbers (not vague claims)
• Transparency about process
• "Our chicken contains 24g of protein per 100g"

Mode B: Playful-Human

• Self-aware, occasionally absurd
• Acknowledges its own marketing
• Speaks like a friend, not a brand
• "You're still reading? We're flattered."

Copy Principles

1. Question Everything (Including Yourself)

   • "Is this the best plant-based chicken? We think so. But we're biased."
   • Self-deprecation disarms skepticism

2. Make Them Complicit

   • "You actually read the fine print? Total success."
   • Create a sense of shared secret/intelligence

3. Be Specific, Never Vague

   • NOT: "Made with quality ingredients"
   • YES: "Made with pea protein from farms in France"

4. Embrace Imperfection

   • "We're working on making this better. Here's where we're at."
   • Transparency about limitations builds more trust than claims of perfection

5. Entertainment as Entry Point

   • Lead with the joke, embed the message
   • Sustainability should feel exciting, not like homework

Headlines

Headlines should feel unexpected:

• Bold statements: "Plants That Wanted To Be Chicken"
• Questions: "What If Dinner Didn't Have Drawbacks?"
• Self-aware: "This Is Marketing (But Also True)"
• Conversational: "Hi. We Make Food From Plants."

CTAs

CTAs should be active and clear:

• "Find Planted" (not "Store Locator")
• "See All Products" (not "Browse Our Range")
• "Get Cooking" (not "View Recipes")
• "Tell Us What You Think" (not "Submit Feedback")

Forbidden Phrases

Never use:

• "Premium quality" (show it, don't say it)
• "Delicious" (subjective, let them decide)
• "Revolutionary" (let others say it)
• "100% natural" (vague and overused)
• "For a better planet" (preachy)
• "Guilt-free" (implies guilt exists)

Instead:

• Show the quality through specifics
• Describe taste with sensory details
• Explain what makes it different
• State environmental facts with data
• Frame choices as positive, not avoiding negative

Accessibility Requirements

• Touch targets: Minimum 44px
• Color contrast: Meet WCAG AA minimum
• Focus states: Visible and clear
• Motion: Respect prefers-reduced-motion
• Images: Always include meaningful alt text

Implementation Checklist

When creating new components or pages:

• Colors match the defined palette
• Typography uses correct font families and sizes
• Spacing follows the 8-point grid
• Buttons use correct styles and behaviors
• Animations use defined easing curves
• Copy follows voice guidelines
• Accessibility requirements met
• Mobile-first responsive approach

Reference Files

• planted-astro/src/styles/global.css - CSS variables and shared styles
• planted-astro/src/layouts/Layout.astro - Font declarations
• This document for brand voice and design rationale