---
version: alpha
name: "Youth to the People"
description: "High-contrast vegan skincare design system built on a stark white canvas, heavy grotesque type, and a protest-poster conviction that clean beauty should be both rigorous and accessible."

colors:
  background: "#ffffff"
  surface: "#f5f5f0"
  surface-elevated: "#ebebeb"
  ink: "#1a1a1a"
  ink-secondary: "#4a4a4a"
  ink-muted: "#767676"
  primary: "#1a1a1a"
  on-primary: "#ffffff"
  primary-container: "#ebebeb"
  # Brand green — YTTP's signature forest/herb tone
  accent: "#2d4a3e"
  on-accent: "#ffffff"
  accent-light: "#e8ede9"
  # was rgba(45, 74, 62, 0.08) — Google format requires hex; flattened on white
  accent-tint: "#f0f4f2"
  border: "#d9d9d9"
  border-subtle: "#efefef"
  focus-ring: "#1a1a1a"
  text-hover: "#000000"
  # was rgba(0, 0, 0, 0.06) — Google format requires hex; flattened on white
  shadow-soft: "#f0f0f0"
  error: "#c0392b"
  success: "#2d4a3e"

typography:
  display-hero:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -1px
  display:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.25px
  heading-sub:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  nav-link:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 1px
  label:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 1.5px
  caption:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 128px

rounded:
  none: 0px
  sm: 2px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-accent-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.accent-light}"
    textColor: "{colors.accent}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  badge-dark:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderBottom: "1px solid {colors.border}"
    padding: 16px 24px
---

# Youth to the People Design System

## Overview

Youth to the People builds its visual language on a founding tension: the urgency of a protest poster and the precision of a clinical product brief. The site opens on a near-pure white canvas (`{colors.background}`) and an earthy forest green (`{colors.accent}`) that together read as both activist and apothecary. The typography is Helvetica Neue, set at heavy weights with tight leading — the kind of typesetting borrowed from 1970s social-movement graphics and applied, here, to ingredient decks and serum collections. Every headline presses hard against the baseline. Every product name is set in caps or near-caps, in weight 700, as if demanding your attention rather than requesting it.

The palette is deliberately spare. `{colors.ink}` and `{colors.background}` handle the structural load; `{colors.accent}` (a deep herb green drawn from the brand's superfood sourcing story) appears on select CTAs, badges, and highlight surfaces. It reads as earned rather than decorative — a pigment lifted from kale and kelp, not an art-director's mood board. Secondary surfaces in warm off-white (`{colors.surface}`) give editorial layout zones a breath of warmth without introducing any of the saccharine pastels that clean-beauty competitors lean on. The result is a system that looks simultaneously credible and committed.

What distinguishes YTTP from other prestige skincare systems is the complete absence of ornamentation. No gradients. No soft-focus photography vignettes. No decorative borders or icon flourishes. The brand invests all of its visual weight into three things: typographic mass, high-resolution product photography shot against flat grounds, and the hard-edged geometry of zero-radius shapes. Where a competitor might soften a button to `8px` radius, YTTP draws a perfectly square black rectangle — a mark, not a capsule. Every flat edge is a conviction.

**Key Characteristics:**
- Helvetica Neue at weight 700 for all display and heading text — impact without novelty, zero decoration
- Pure white (`{colors.background}`) primary canvas, warm off-white (`{colors.surface}`) for editorial zones and feature panels
- Forest herb green (`{colors.accent}`) as the sole chromatic accent — CTAs, highlight badges, ingredient callouts
- Zero-radius sharp corners on every button, card, modal, and input — `{rounded.none}` by default
- Uppercase or tracked labels as a system-wide convention for product categories and UI chrome
- Product photography on flat grounds — no environmental backdrops, no prop-heavy styling
- Generous vertical spacing between sections (64–128px) paired with tight internal grid gutters (8–16px)
- Button-as-stamp: black fills, all-caps text, wide letter-spacing (`1px`) — command, not invitation
- Ingredient-forward copy set at 15px body weight 400 — legible, not performatively small
- No soft shadows, no glows; depth is implied by photography, not by UI elevation

## Colors

### Primary
- **White** (`{colors.background}`): The dominant canvas. Clinical and clean, slightly warmer than pure #ffffff. Default surface for all product and content pages.
- **Off-White** (`{colors.surface}`): Editorial panels, feature sections, footer. Provides a subtle shift from pure white without introducing a colorful tone.
- **Light Gray** (`{colors.surface-elevated}`): Tertiary surface for hover states, filter chips, input backgrounds in dark contexts.
- **Near Black** (`{colors.ink}`): All primary text, headings, button fills, icon strokes. A warm dark tone rather than cold pure black — the brand warmth without softness.

### Brand Accent
- **Herb Green** (`{colors.accent}`): YTTP's signature. Applied to primary CTAs in select contexts, ingredient highlight badges, "Shop Now" moments, and success semantic states. Derived from the kale-and-spirulina visual identity — never used as a background fill for large canvas areas.
- **Accent Light** (`{colors.accent-light}`): Tinted surface for badge backgrounds and highlight panels where green needs to appear without saturating the canvas.
- **Accent Tint** (`{colors.accent-tint}`): Barely-there green wash for section backgrounds or hover zones where a hint of the brand color reinforces ingredient credibility.

### Text Hierarchy
- **Secondary Ink** (`{colors.ink-secondary}`): Supporting descriptive copy, form labels, product metadata.
- **Muted Ink** (`{colors.ink-muted}`): Captions, timestamps, ingredient list sub-text, legal copy.
- **Hover Text** (`{colors.text-hover}`): Pure black on link hover — a fractional intensification of the near-black ink.

### Structure & Interaction
- **Border** (`{colors.border}`): Input outlines, horizontal dividers, card separators. Warm medium gray.
- **Border Subtle** (`{colors.border-subtle}`): Section hairlines, list separators. Near invisible.
- **Focus Ring** (`{colors.focus-ring}`): High-contrast black outline for keyboard focus states — WCAG AA by design.
- **Shadow Soft** (`{colors.shadow-soft}`): Was `rgba(0, 0, 0, 0.06)` — Google format requires hex; flattened on white. Used as an ultra-light atmospheric wash for modal overlays only.

### Semantic
- **Error** (`{colors.error}`): Destructive form validation. Warm red that sits within the earthy palette register.
- **Success** (`{colors.success}`): Same as `{colors.accent}` — the green does double duty as a semantic positive signal.

## Typography

### Font Family
- **Primary**: `Helvetica Neue`, with fallbacks: `Helvetica`, `Arial`, `sans-serif`
- **OpenType Features**: Standard metrics only. No stylistic sets. The font is used at face value — weight and size do all the work. The 700 weight at large display sizes approaches the black optical weight without requiring a separate font file.

*Note: For external implementations, `Inter` at weight 700 is the closest modern web-safe substitute. `DM Sans` 700 offers a warmer grotesque alternative. `Outfit` Bold gives a slightly more expressive register. All work in the protest-poster grotesque tradition YTTP draws from.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero headings, campaign banner headlines, homepage "what we stand for" moments |
| `display` | Collection page titles, large brand statements, ingredient feature headings |
| `heading-section` | Section headers, product group labels, editorial sub-headings |
| `heading-sub` | Product detail names, sidebar titles, feature card headings |
| `body-large` | Ingredient overviews, About page body copy, longer editorial passages |
| `body` | Product descriptions, routine copy, FAQ answers, standard UI text |
| `nav-link` | Header navigation links, footer links — 0.5px tracking, Medium weight |
| `button-ui` | CTA labels — all-caps, 1px letter-spacing, weight 700 |
| `label` | Product category tags, badge text, form field labels — uppercase, tracked |
| `caption` | Legal copy, pricing footnotes, metadata |

### Principles
- Weight 700 is the default for all display text — the brand does not whisper
- Regular weight 400 carries body copy; 500 appears only in nav links and select sub-labels
- Letter-spacing on CTAs (`1px`) and labels (`1.5px`) extends the uppercase convention consistently
- Tight line-heights on display text (0.95–1.0) create the compressed protest-poster block
- No serif typefaces anywhere; no script or display oddities — grotesque austerity is the voice

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

YTTP's spacing personality is asymmetrical generosity: product grids stay tight (8–16px gutters, dense information), while section transitions breathe expansively at 64–128px. The effect is a cadence of intensity and relief — dense ingredient facts, then white air, then the next dense product moment.

### Grid & Container
- Max content width: approximately 1200–1280px
- Product grid: 4 columns at desktop, 2 at tablet, 1 at mobile; 16px gutters
- Hero zones: full-bleed photography with typographic overlay — no container constraints
- Editorial sections: contained 2-column (copy left, visual right) on desktop, stacked on mobile
- Footer: 4-column link grid on `{colors.surface}`, full-bleed

### Whitespace Philosophy
- Large vertical gaps (64–128px) between major sections reinforce the protest-poster structure: each panel is its own statement
- Tight horizontal grids (8–16px gutters) inside product listings maintain the density of a well-designed zine
- Product imagery bleeds card edges with no offset padding — photography earns its full frame

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Product cards, buttons, all default surfaces |
| Hairline (Level 1) | `1px solid {colors.border}` | Form inputs, section dividers, nav bottom border |
| Surface Shift (Level 2) | `{colors.surface}` background panel | Feature zones, editorial panels, footer — chromatic separation, not elevation |
| Atmospheric (Level 3) | `rgba(0, 0, 0, 0.06) 0px 4px 16px` | Modal dialogs and cart drawers only |
| Focus Ring | `2px solid {colors.focus-ring}` on `outline: none` | Keyboard-accessible interactive elements |

**Shadow Philosophy**: YTTP runs almost completely flat. The brand's visual authority comes from typographic weight and hard geometry, not from lighting effects or surfacing metaphors. Product photography provides all the depth the eye needs; the UI chrome refuses to compete. When shadows appear at all — modal overlays, cart drawers — they are minimal ambient washes (6% opacity). The system's version of "elevated" is a surface color shift from white to off-white, not a drop shadow.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, product cards, inputs, modals, containers — the entire system's default |
| `sm` | 2px | Near-sharp edge for select UI elements where a 0px radius would create pixel-level aliasing artifacts |
| `pill` | 9999px | Circular icon buttons, close buttons, quantity selectors only |

The shape philosophy is aggressively binary: everything interactive is a hard rectangle. The protest-poster visual logic requires sharp-edged stamps, not pill capsules or soft cards. `{rounded.none}` is applied at scale — it is not a secondary or edge-case choice, it is the default. The rare 2px value (`{rounded.sm}`) exists as a practical antialiasing concession, not as a design preference.

## Components

The complete component spec lives in the `components:` token block above.

### Button variants

- **`button-primary`** — Solid near-black fill, white uppercase text, 1px letter-spacing, 0px radius. The dominant CTA shape. Used for "Add to Bag," checkout, "Shop Now." Hover shifts fill to herb green (`{colors.accent}`).
- **`button-secondary`** — White fill with 1px black border. Used for secondary actions (wishlist, "Learn More," filter apply). Hover inverts: black fill, white text.
- **`button-accent`** — Herb green fill, white uppercase text. Used sparingly for ingredient-led feature sections and promotional CTAs that should carry an "earth-positive" register.

### Cards

Product cards are photography-first: zero border, zero radius, zero shadow. The image bleeds to all edges. Below the photograph: product name in `{typography.heading-sub}`, skin type or category label in `{typography.label}` (uppercase, tracked), price in `{typography.body}`. On hover, the card background shifts from `{colors.background}` to `{colors.surface}` over a short ease — a warmth signal, not a lift.

### Inputs

Form inputs use `{colors.border}` as the default outline, snapping to `1px solid {colors.focus-ring}` (black) on focus. Radius is `{rounded.none}`. Placeholder text uses `{colors.ink-muted}`. The input's sharp corners and black focus border align visually with the button stamp language — the entire form feels like a product label.

### Badges / Tags

YTTP uses two badge types. The **herb badge** places uppercase label text on `{colors.accent-light}` background with `{colors.accent}` text — used for "VEGAN," "REFILLABLE," ingredient highlights. The **dark badge** places the same typography on `{colors.primary}` fill with white text — used for "NEW," "BESTSELLER," limited-edition flags. Both are zero-radius stamps. No pill shapes anywhere in the badge system.

### Navigation

The fixed-top navigation runs `{colors.background}` with a `1px solid {colors.border}` bottom hairline. Left zone: wordmark in `{typography.heading-sub}` weight 700. Center: category links in `{typography.nav-link}` (13px, 0.5px tracking). Right: search, account, cart glyphs. On mobile, center links collapse behind a hamburger toggle; the wordmark centers. No flyout mega-menu — navigation keeps its promise of simplicity.

## Do's and Don'ts

### Do
- Use Helvetica Neue weight 700 for all display and heading text — the heaviness is deliberate, not aggressive
- Default to `{rounded.none}` on every button, card, input, and modal — sharp corners are the brand signature
- Apply `{colors.accent}` for primary CTAs in ingredient-led contexts; default to `{colors.primary}` (near-black) everywhere else
- Set button and label text in uppercase with tracked letter-spacing — the stamp language is non-negotiable
- Let product photography fill card frames with no padding, no border, no offset
- Use `{colors.surface}` (warm off-white) to create section variety; resist introducing any other background tones
- Keep form inputs sharp-edged — 0px radius, 1px border, black focus state
- Employ 64–128px section breaks between major content zones — the protest-poster structure needs breathing room
- Use `{colors.accent-light}` badge surfaces for ingredient or sustainability claims — green as a semantic truth-teller
- Reference ingredient names and brand values in copy at product-description weight (`{typography.body-large}`) — the brand earns trust through specificity

### Don't
- Don't soften buttons with radius above `{rounded.sm}` (2px) — pill shapes and even 4px radii break the stamp language
- Don't introduce gradients, glows, or drop shadows on any primary surface element
- Don't use `{colors.accent}` (herb green) as a canvas background — it reads as decorative when large; its power is in small high-contrast moments
- Don't use lowercase or sentence-case for CTA button labels — the all-caps register is brand-essential
- Don't add a serif typeface for any visual purpose — Helvetica's neutrality is the voice
- Don't add decorative illustration or icon sets as content — photography and typography carry all visual load
- Don't use pure `#000000` black for page canvas text — `{colors.ink}` (`#1a1a1a`) is warmer and sits in the brand's earthy register
- Don't over-track body copy — letter-spacing belongs on labels and CTAs, not on 15px paragraphs
- Don't compress section spacing below 40px at desktop — density is for grid gutters, not section breaks
- Don't use `{colors.ink-muted}` for anything interactive — muted text signals non-interactive content only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single-column product grid, wordmark only in nav, hero headline drops to 36px |
| Mobile | 375–600px | Single-column layout, stacked editorial, nav collapses to hamburger |
| Tablet | 600–1024px | 2-column product grid, side-by-side product detail layout begins |
| Desktop | 1024–1280px | 4-column product grid, full horizontal nav, editorial 2-column unlocks |
| Large Desktop | >1280px | Max container 1280px, generous section padding at 4xl (128px) |

### Touch Targets
- Primary CTAs: minimum 44px tap height; 14px 28px padding on standard buttons yields ~46px at 13px type
- Product cards: full card area is tappable — naturally oversized tap targets on mobile
- Navigation links: 44px in vertical extent on mobile menu
- Form inputs: minimum 44px tap height; 12px 16px padding on 15px type

### Collapsing Strategy
- Product grid collapses 4 → 2 → 1 columns at each breakpoint step; gutters maintain 8–16px regardless
- Navigation horizontal links collapse behind hamburger below 768px; cart and account persist right
- Product detail: side-by-side (photography | info panel) stacks vertically below 768px
- Hero typography: display-hero scales down from 72px toward 36–40px on mobile; tight line-height maintained
- Section vertical spacing compresses from `{spacing.3xl}` (96px) down to `{spacing.xl}` (40px) at mobile

### Image Behavior
- Product photography fills card frames with `object-fit: cover` — no offset, no border, no padding
- Hero images maintain a 4:5 portrait orientation on mobile; wider 16:9 or 3:2 on desktop
- Ingredient and lifestyle photography maintained at full-bleed on all breakpoints
- Wordmark never replaced by icon mark — full text wordmark scales down proportionally

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Secondary text: `{colors.ink-secondary}`
- Muted text: `{colors.ink-muted}`
- Brand accent (herb green): `{colors.accent}`
- Accent light surface: `{colors.accent-light}`
- CTA (primary): `{colors.primary}`
- Border: `{colors.border}`
- Focus ring: `{colors.focus-ring}`
- Off-white surface: `{colors.surface}`

### Example Component Prompts

- "Build a Youth to the People hero section on pure white (`{colors.background}`). Full-bleed product or lifestyle photograph at 80vh. Overlaid headline in Helvetica Neue 72px weight 700 (`{typography.display-hero}`), line-height 0.95, letter-spacing -1px, color `{colors.ink}`. Below the photo: a CTA button — background `{colors.primary}`, text `{colors.on-primary}`, font `{typography.button-ui}` (Helvetica Neue 13px weight 700 uppercase 1px tracking), 0px radius, 14px 28px padding. No shadow, no gradient, no rounded edges anywhere."
- "Design a YTTP product card on `{colors.background}`. No border, no shadow, 0px radius. Product photograph bleeds to all edges at 3:4 aspect ratio. Below: category label in `{typography.label}` (11px weight 700 uppercase 1.5px tracking), product name in `{typography.heading-sub}` (Helvetica Neue 18px weight 700), price in `{typography.body}` (15px weight 400). Hover shifts card background to `{colors.surface}` over 0.25s ease. No lift, no shadow change."
- "Create a herb-green ingredient badge for 'SUPERFOOD COMPLEX'. Background: `{colors.accent-light}`. Text: `{colors.accent}`, Helvetica Neue 11px weight 700 uppercase 1.5px tracking (`{typography.label}`). Padding: 4px 8px. Radius: 0px. No border, no shadow. Size stamp, not pill."
- "Build a YTTP-style full-width navigation bar on `{colors.background}`. Bottom border: 1px solid `{colors.border}`. Left: wordmark in Helvetica Neue 14px weight 700, color `{colors.ink}`. Center: category links in `{typography.nav-link}` (13px weight 500, 0.5px tracking, `{colors.ink}`, no underline). Right: search, account, cart icon glyphs in `{colors.ink}`. Padding: 16px 24px. Height ~56px. Hover on links: color transitions to `{colors.text-hover}` over 0.2s ease."
- "Style an email capture form in a `{colors.surface}` section. Input: `{colors.background}` fill, `1px solid {colors.border}`, 0px radius, Helvetica Neue 15px weight 400 (`{typography.body}`), padding 12px 16px, placeholder in `{colors.ink-muted}`. Focus: border becomes `1px solid {colors.focus-ring}`. Submit button right-aligned: `{colors.primary}` fill, `{colors.on-primary}` text, `{typography.button-ui}`, 0px radius, 14px 28px padding."
- "Generate a product ingredient highlight section on `{colors.accent-tint}` background. Section header in `{typography.heading-section}` (Helvetica Neue 28px weight 700, `{colors.ink}`). Three ingredient cards side-by-side on `{colors.background}`, 0px radius, 1px `{colors.border}` border. Each card: ingredient photo at top, ingredient name badge in `{colors.accent-light}` with `{colors.accent}` text (`{typography.label}`), benefit copy in `{typography.body-large}`. No shadows. 40px vertical padding within section, 64px above and below."

### Iteration Guide

1. Start with `{colors.background}` (white) as the full canvas; use `{colors.surface}` (off-white) only for editorial feature sections and footer.
2. Set all headlines in Helvetica Neue weight 700 with tight leading (0.95–1.1). The compressed headline block is the first visible signal of the protest-poster brand voice.
3. Keep all corners at `{rounded.none}` (0px) — this is the non-negotiable shape rule. Every rectangle is a stamp.
4. Use `{colors.primary}` (near-black) as the default CTA fill; reserve `{colors.accent}` (herb green) for ingredient-forward contexts where the brand's earth-sourcing story is being told directly.
5. Button and label text must be uppercase with tracked letter-spacing — `1px` on buttons (`{typography.button-ui}`), `1.5px` on labels (`{typography.label}`).
6. No shadows, gradients, or elevation on primary surfaces. Modal-level shadows are `rgba(0,0,0,0.06)` atmospheric washes only.
7. Let product photography carry visual weight — high-resolution, flat-ground product shots, no decorative illustration or icon sets.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Youth to the People. Brand names and trademarks belong to their respective owners.