--- version: alpha name: "Poppi" description: "Token-first design system reference for Poppi — a playful prebiotic soda brand built on hot pink, neon yellow, and a bold serif-meets-geometric-sans pairing." colors: # Surface / canvas background: "#ffffff" surface: "#000000" surface-warm: "#ffe6d1" # peach blush surface, low-use surface-yellow: "#fff200" # neon yellow — dominant promo/accent band # Text / ink ink: "#000000" on-background: "#000000" on-surface: "#ffffff" # Brand accent primary: "#ec008c" # Poppi hot pink — signature hero color, primary CTA on-primary: "#000000" # was rgba-derived — Google format requires hex; black reads on hot pink primary-container: "#ffc7df" # light pink tint for badge/chip backgrounds # Flavor / SKU palette (each flavor has its own surface) flavor-punch: "#ec008c" # Punch Pop — hot pink flavor-shirley: "#e15505" # Shirley Temple — burnt orange flavor-orange: "#fe7a02" # Orange Cream — vivid orange flavor-strawberry: "#fd303a" # Strawberry Lemon — signal red flavor-cream: "#0031a7" # Cream Soda — deep cobalt # State / interaction text-hover: "#c90077" # was rgb(201, 0, 119) — hover state on pink elements focus-ring: "#ec008c" # Semantic success: "#45ce0d" warning: "#fed455" error: "#fd303a" # Borders border: "#e5e7eb" # Shadow tints shadow-stamp: "#fff200" # neon yellow offset shadow — Poppi's signature hard stamp shadow-pink: "#ec008c" # pink offset shadow variant shadow-dark: "#8e0011" # dark red offset shadow variant typography: display-hero: fontFamily: "Recoleta, Georgia, 'Times New Roman', serif" fontSize: 72px fontWeight: 400 lineHeight: 1.1 letterSpacing: -1.2px display: fontFamily: "Recoleta, Georgia, 'Times New Roman', serif" fontSize: 60px fontWeight: 400 lineHeight: 1.2 letterSpacing: -1.2px heading-section: fontFamily: "Recoleta, Georgia, 'Times New Roman', serif" fontSize: 28px fontWeight: 400 lineHeight: 1.21 letterSpacing: -0.56px heading-sub: fontFamily: "ITC Avant Garde Gothic, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 1.25 letterSpacing: 0px body-large: fontFamily: "ITC Avant Garde Gothic, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body: fontFamily: "ITC Avant Garde Gothic, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px nav-link: fontFamily: "ITC Avant Garde Gothic, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px button-ui: fontFamily: "ITC Avant Garde Gothic, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px caption: fontFamily: "ITC Avant Garde Gothic, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 80px rounded: none: 0px sm: 4px md: 10px lg: 20px pill: 9999px components: button-primary: backgroundColor: "{colors.surface-yellow}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px boxShadow: "5px 5px 0px 0px {colors.ink}" button-primary-hover: backgroundColor: "{colors.surface-yellow}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px boxShadow: "3px 3px 0px 0px {colors.ink}" transform: "translate(2px, 2px)" button-secondary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px boxShadow: "5px 5px 0px 0px {colors.shadow-stamp}" button-secondary-hover: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px boxShadow: "3px 3px 0px 0px {colors.shadow-stamp}" transform: "translate(2px, 2px)" button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px boxShadow: "5px 5px 0px 0px {colors.ink}" card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px boxShadow: "5px 5px 0px 0px {colors.ink}" card-hover: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px boxShadow: "3px 3px 0px 0px {colors.ink}" transform: "translate(2px, 2px)" input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 12px 20px borderColor: "{colors.ink}" input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.focus-ring}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 12px 20px boxShadow: "3px 3px 0px 0px {colors.primary}" badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px badge-promo: backgroundColor: "{colors.surface-yellow}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px boxShadow: "3px 3px 0px 0px {colors.ink}" --- # Poppi Design System ## Overview Poppi's site is an explosion of retro-candy-shop energy translated into a DTC beverage storefront. The page hits immediately with hot pink (`{colors.primary}`) hero sections, neon yellow (`{colors.surface-yellow}`) accents, and bold flat shadows — offset `5px 5px 0px` in black or yellow that give every button, card, and image the physical weight of a sticker stamped onto cardboard. It's maximalist on purpose: a prebiotic soda brand that competes in the same functional-beverage aisle as Olipop and Recess, but leans harder into pop-art bravado than either wellness-first peer. The typeface pairing is the signature move. `Recoleta` — a fat, slightly retro serif with round ball terminals and gentle slab echoes — handles every display headline, lending a friendly vintage authority to the product names and section heads ("Punch Pop", "Shirley Temple", "Orange Cream"). ITC Avant Garde Gothic handles all UI, navigation, body, and button text: geometric, lowercase-friendly, compact — the clean modernist foil to Recoleta's warmth. Together they read like a 1960s soda can label with a contemporary Shopify storefront behind it. What makes Poppi's system distinctive is its **flavor-first color logic**. Each SKU — Punch Pop (hot pink), Shirley Temple (burnt orange), Orange Cream (vivid orange), Strawberry Lemon (signal red), Cream Soda (deep cobalt) — has its own dominant color, and those can colors *are* the palette. The brand doesn't impose a neutral system on a product line; it lets the product line generate the brand. The only constants are black (`{colors.ink}`) for type and borders, neon yellow (`{colors.surface-yellow}`) for the highest-emphasis CTA moments, and the hard stamp shadow that connects every interactive element to the same graphic idiom. **Key Characteristics:** - Hot pink (`{colors.primary}`) as the hero anchor — aggressive brand ownership, not a pastel - Neon yellow (`{colors.surface-yellow}`) for primary CTAs ("shop all") and promo bands — maximum contrast on black - Hard 5px flat offset shadow (`{colors.shadow-stamp}`) on buttons, cards, and images — the brand's tactile signature - `Recoleta` at weight 400 for all display — ball-terminal serif warmth, retro without kitsch - ITC Avant Garde Gothic for UI, body, buttons — geometric lowercase clean contrast to Recoleta - Flavor-driven SKU palette (pink, orange, red, cobalt) — the can is the design system - Pill radius (`{rounded.pill}`) on all buttons and badges — softness against the hard shadows - `10px` card radius — just enough softening without losing the hard-stamp aesthetic - Uppercase nav in Avant Garde at small sizes — the one place geometric formality is applied - Vivid "add to cart" buttons match their host can's color — no universal CTA color in product contexts ## Colors ### Primary - **Poppi Hot Pink** (`{colors.primary}`): Hero surface and brand signature. The homepage opens on hot pink; it's used for the Punch Pop can surface, hero backgrounds, and brand moments where the brand is speaking at maximum volume. - **Neon Yellow** (`{colors.surface-yellow}`): The highest-emphasis CTA and promo band color. "Shop all" and primary site-level CTAs use neon yellow for maximum contrast on black type with a hard shadow. - **Pure Black** (`{colors.ink}`): All type, button outlines, shadow offsets, and borders. Black is the structural workhorse — it grounds the saturated palette. - **Pure White** (`{colors.background}`): Page canvas. Neutral breathing room between the chromatic flavor sections. ### Brand Accent & Flavor Palette - **Punch Pop Pink** (`{colors.flavor-punch}`): Punch Pop SKU surface — identical to primary; the hero flavor defines the brand's lead color. - **Shirley Temple Orange** (`{colors.flavor-shirley}`): Burnt orange for Shirley Temple product surfaces and accent moments. - **Orange Cream** (`{colors.flavor-orange}`): Vivid warm orange for the orange cream SKU — slightly lighter and more yellow-shifted than the Shirley orange. - **Strawberry Lemon Red** (`{colors.flavor-strawberry}`): Signal red for the strawberry lemon SKU — high-energy, close to a warning red in other systems. - **Cream Soda Cobalt** (`{colors.flavor-cream}`): Deep cobalt for Cream Soda — the coolest color in the palette, creates maximum contrast against the warm reds and oranges. - **Peach Blush** (`{colors.surface-warm}`): Soft peach used on product detail pages and secondary panels — the warmest and most muted surface in the system. ### State & Interaction - **Hover Pink** (`{colors.text-hover}`): Deepened hot pink for hover states on primary elements. - **Focus Ring** (`{colors.focus-ring}`): Hot pink ring for keyboard focus — maintains the brand palette in accessibility states. ### Shadow System - **Yellow Stamp Shadow** (`{colors.shadow-stamp}`): Neon yellow offset shadow — the signature. Used on hot-pink buttons to create a yellow glow-stamp effect. - **Pink Stamp Shadow** (`{colors.shadow-pink}`): Hot pink offset shadow — used on yellow or black elements for inversion contrast. - **Dark Red Shadow** (`{colors.shadow-dark}`): Deep red-black shadow on Strawberry Lemon product surfaces — maintains the hard shadow idiom in the warm zone. ### Semantic Colors - **Success Green** (`{colors.success}`): Vivid lime green for confirmation states. - **Warning Yellow** (`{colors.warning}`): Golden yellow for stock or shipping notices. - **Error Red** (`{colors.error}`): Strawberry red for form errors — matches the brand's red SKU by coincidence. ## Typography ### Font Family - **Display**: `Recoleta` — a custom-licensed commercial serif. Self-hosted on the Poppi site (RecoletaBlack.otf). Fat ball terminals, round bowls, gentle slab characteristics. Weight 400 (Black cut). Closest Google Font substitute: **Playfair Display** or **DM Serif Display** (Round/DM — similar ball-terminal warmth at large sizes). Fallback stack: `Georgia, 'Times New Roman', serif`. - **UI / Body**: `ITC Avant Garde Gothic` — the original geometric sans designed by Herb Lubalin in 1970. Self-hosted as `ITC_-_ITCAvantGardeStd-Md.otf`. Clean, optically circular letterforms, very short descenders. Closest Google Font substitute: **Nunito** (comparable circular-o geometry) or **DM Sans**. Fallback stack: `'Helvetica Neue', Helvetica, Arial, sans-serif`. - **OpenType Features**: Standard ligatures; no `font-feature-settings` declarations detected. Recoleta at large sizes relies on its letterform geometry — no optical sizing needed. ### Hierarchy | Token | Use | |---|---| | `display-hero` | Hero section headlines ("Punch Pop", "Shop All Flavors") — Recoleta 72px | | `display` | Section display heads ("Why Poppi?", "Find Your Flavor") — Recoleta 60px | | `heading-section` | Card titles, flavor names, pull-quote heads — Recoleta 28px | | `heading-sub` | Sub-section titles, feature callouts — ITC Avant Garde 24px | | `body-large` | Hero subheadlines, intro paragraphs — ITC Avant Garde 20px | | `body` | Standard reading text, product descriptions — ITC Avant Garde 18px | | `nav-link` | Navigation links, footer links — ITC Avant Garde 16px | | `button-ui` | Button labels, CTA text — ITC Avant Garde 16px weight 700 | | `caption` | Metadata, legal, footnotes — ITC Avant Garde 12px | ### Principles - **Recoleta only for display**: The serif face handles flavor names, section heads, and hero titles. It never descends into body or UI copy — the whole character of the site depends on the Recoleta-at-large-sizes-only rule. - **Avant Garde for everything functional**: Navigation, body, buttons, captions — all ITC Avant Garde. Its geometric circles and tight metrics work from 12px captions to 24px subheadings without strain. - **Tight tracking on display**: Recoleta headlines run at `-0.56px` to `-1.2px` letter-spacing. At 60–72px, natural tracking is slightly too open; the negative setting locks the letters into a confident poster block. - **No display text in uppercase**: Recoleta is never uppercased. The brand voice is warm and approachable — full caps would read as shouting, not fun. Upper-case moments are reserved for nav links and small UI chrome in Avant Garde. - **Weight 400 throughout Recoleta**: The Black cut of the face (which is the file on the server) renders at a visual weight that matches most brand "Bold" choices — no additional font-weight manipulation is needed. ## Layout ### Spacing System Base unit: 8px. Common values: 4px, 8px, 16px, 32px, 40px, 48px, 64px, 80px. Poppi uses a tight component-scale (4–16px) for internal padding and a generous section-scale (48–80px) for vertical rhythm. The hard shadows create apparent depth that the spacing can comfortably contrast — no need for the 100–162px meditative breathing of Recess. The product grid is generous enough to let the cans breathe without losing the can-market energy. ### Grid & Container - Max content width: approximately 1280px - Hero: full-width hot pink band, single-column with centered product carousel - Flavor grid: 5-across carousel on desktop, touch-draggable on mobile - Feature sections: alternating 2-column (text + can image) left/right layouts - Blog / press: 3-column card grid with hard stamp shadows on each card - Container horizontal padding: 32px desktop → 16px mobile ### Whitespace Philosophy - **Color bands pace the page**: Like Olipop, Poppi alternates full-bleed color blocks rather than relying on whitespace alone. Hot pink → white → yellow → white creates rhythm. - **Compact within sections**: Internal component padding stays tight (16–24px); the hard shadows create visual breathing via contrast, not literal space. - **No mid-range neutral stretches**: The page never rests on a large gray or off-white section — neutral white canvas is always brief, a bridge between two colored bands. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Body copy, nav background, footer plain text | | Stamp Default (Level 1) | `5px 5px 0px 0px {colors.ink}` | Primary buttons (yellow+black stamp), product cards | | Stamp Pink (Level 1b) | `5px 5px 0px 0px {colors.shadow-pink}` | Hot pink CTAs on light surfaces | | Stamp Yellow (Level 1c) | `5px 5px 0px 0px {colors.shadow-stamp}` | Black or dark buttons where yellow contrast is needed | | Stamp Pressed (Level 2) | `3px 3px 0px 0px {colors.ink}` + `translate(2px, 2px)` | Hover/active — button drops into the shadow, feels pressed | | Focus Ring | `0 0 0 3px {colors.focus-ring}` | Keyboard accessibility — hot pink glow ring | **Shadow Philosophy**: Poppi's depth system is the hard flat offset shadow — a direct-light comic-book effect rather than a soft Gaussian blur. The 5px/5px offset makes every interactive element look like it's sitting 5 pixels above the page, waiting to be pushed down. When pressed (hover state), the shadow shrinks to 3px and the element translates 2px down-right, physically mimicking the action. This is the opposite of material elevation — there's no blur, no ambient light, no soft fall-off. It's a stamp design, borrowed from letterpress printing and 1970s graphic design — a perfect match for ITC Avant Garde (also from the same era) and Recoleta's retro warmth. ## Shapes The complete radius scale is declared in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Rarely used — full-bleed bands only | | `sm` | 4px | Small tag pills, swiper indicators | | `md` | 10px | Product image containers, small cards | | `lg` | 20px | Larger content cards, modals, info panels | | `pill` | 9999px | All buttons, badges, input fields, selector chips | Poppi's radius system is permissive in the middle range (10px, 20px for cards) but unambiguous on CTAs — every button is a full pill. The 9999px pill on buttons paired with the hard 5px offset shadow creates a distinctive "oval stamp" form: softer than a rectangle, but with the graphic weight of a die-cut sticker. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them. ### Button variants - **`button-primary`** — Neon yellow fill (`{colors.surface-yellow}`), black text, pill shape, 5px hard black shadow. Site-level primary action ("shop all"). Maximum contrast, maximum fun. - **`button-secondary`** — Hot pink fill (`{colors.primary}`), black text, pill shape, 5px yellow shadow. In-product CTAs and flavor-adjacent actions. - **`button-ghost`** — White background, black border and text, pill shape, 5px black shadow. "Learn more" type actions and tertiary moments. - **`button-primary-hover`** / **`button-secondary-hover`** — Shadow reduces to 3px + `translate(2px, 2px)` so the element visually drops into its shadow on hover. ### Cards **Product Flavor Card** - Background: Flavor-specific SKU color (hot pink, orange, red, cobalt) - Radius: `{rounded.lg}` (20px) - Padding: `{spacing.lg}` (24px) - Shadow: `5px 5px 0px 0px {colors.ink}` hard stamp - Internal: Recoleta heading for flavor name, Avant Garde for sub-label, full-width can photography - Hover: shadow shrinks, card translates 2px down-right — same press-down mechanic as buttons **Content / Blog Card** - Background: `{colors.background}` (white) - Border: `1px solid {colors.border}` - Radius: `{rounded.lg}` - Shadow: `5px 5px 0px 0px {colors.ink}` - Use: Press coverage cards, recipe cards, editorial content sections ### Inputs & Forms - Background: `{colors.background}` (white) - Border: `1.5px solid {colors.ink}` (black) — maintains the brand's graphic directness - Radius: `{rounded.pill}` (9999px) — full pill inputs, matches button vocabulary - Font: `{typography.body}` (18px Avant Garde) - Padding: 12px 20px - Focus: `{components.input-focus}` — border switches to hot pink, small pink shadow appears ### Badges / Tags **Promo Badge** — Neon yellow, black text, hard 3px stamp shadow. Used for "NEW", "SALE", promotional callouts. **Flavor Badge** — Light pink container (`{colors.primary-container}`), black text, no shadow. SKU metadata, dietary labels. **Cart/Quantity Badge** — Hot pink background, black text, pill shape. Quantity indicators on cart icon. ### Navigation - Top promo bar: thin neon yellow band with black Avant Garde copy at 14px — promotional messages - Main nav: white background, black Poppi wordmark left-aligned, centered links in Avant Garde 16px uppercase, right-side cart + account - Links: Avant Garde lowercase (or uppercase per placement) — no underline default, `text-decoration: underline` on hover - Mobile: hamburger collapse, full-screen white menu with large Recoleta section heads ## Do's and Don'ts ### Do - Use hard 5px flat offset shadows (`5px 5px 0px 0px {colors.ink}`) on every interactive element — this is the brand's defining depth idiom - Apply `{rounded.pill}` to all buttons and inputs — the oval-stamp shape is non-negotiable - Use `{colors.surface-yellow}` for site-level CTAs where the brand needs maximum urgency - Use `{colors.primary}` for in-product/brand-moment CTAs — preserve the brand color hierarchy - Let each SKU's can color drive its section palette — never normalize to a single product CTA color - Use Recoleta for all display and product names, Avant Garde for all UI — the contrast pairing IS the system - Apply the press-down hover mechanic (shadow shrink + 2px translate) to all stamped elements for tactile consistency - Use `{colors.ink}` (pure black) for type and borders — the graphic-design era quality requires full black, not near-black - Keep `{colors.surface-yellow}` reserved for the highest-emphasis CTA moments — don't dilute it ### Don't - Don't use soft Gaussian blur shadows (`box-shadow` with blur radius > 0) — Poppi's shadow is always hard/flat offset - Don't use Recoleta below 24px — its ball terminals lose definition; use Avant Garde for body copy - Don't introduce mid-weight display styles — Recoleta Black (file weight) is the only display cut - Don't substitute a different sans-serif for UI/body — Avant Garde's geometric circles are the counterpoint to Recoleta's warm curves - Don't introduce pastel or muted versions of the SKU colors in UI surfaces — the palette is always vivid - Don't use gradients on button surfaces — the system is flat solid color, hard shadow, never gradient - Don't create buttons with rectangular corners — every CTA is full pill, even if it looks unusual at wide sizes - Don't use the SKU flavors interchangeably as generic accent colors — each is tied to a specific product identity - Don't drop the hard shadow for a hover-only treatment — the shadow is the default resting state --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <375px | Single-column, hero display drops to 36px, stacked CTAs | | Mobile | 375–640px | Single-column, 44px hero, product carousel single-up | | Tablet | 640–1024px | 2-up carousel, 56px hero, 2-column feature sections | | Desktop | 1024–1280px | 5-up flavor carousel, 72px hero, full multi-column | | Large Desktop | ≥1280px | 1280px container, 72–80px hero, full carousel visible | ### Touch Targets - Pill buttons: min 48px height (14px padding top + bottom + 16px type + natural) - Flavor carousel cards: full card is tap target — no nested small tap zones - Nav links: 44px minimum tap height with padding - Cart badge: minimum 44×44px tap zone on icon ### Collapsing Strategy - **Nav**: Horizontal nav collapses to hamburger below 768px; full-screen white menu - **Hero**: Hot pink band stays full-bleed at every breakpoint; can photography scales fluidly - **Flavor carousel**: 5-across → 3-across → 2-across → 1.5-across (peek) → single swipe on mobile - **Feature sections**: 2-column (text + image) stacks to single-column on mobile; image always below text - **Hard shadows**: Maintained at all breakpoints — never reduced to soft shadow for mobile - **Section spacing**: 80px desktop vertical padding → 48px mobile ### Image Behavior - Can product photography scales with container; aspect ratio always preserved - No art direction changes — same can photography, different sizing - Hero can images may be clipped at very narrow mobile viewports (below 375px) - Flavor cards maintain their SKU background color at every size --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (white) - Brand Anchor: `{colors.primary}` (hot pink) - Primary CTA: `{colors.surface-yellow}` (neon yellow) - Primary Text: `{colors.ink}` (black) - Stamp Shadow (default): `5px 5px 0px 0px {colors.ink}` - Stamp Shadow (yellow): `5px 5px 0px 0px {colors.shadow-stamp}` - Focus Ring: `0 0 0 3px {colors.focus-ring}` - Border: `1.5px solid {colors.ink}` ### Example Component Prompts - "Build a hero section on Poppi hot pink (`{colors.primary}`). Center a large Recoleta headline at 72px weight 400, letter-spacing -1.2px, color `{colors.ink}`. Below it, a neon yellow (`{colors.surface-yellow}`) pill button — `9999px` border-radius, 14px 28px padding, 16px ITC Avant Garde weight 700, `box-shadow: 5px 5px 0px 0px {colors.ink}`. On hover, reduce shadow to `3px 3px 0px 0px` and apply `transform: translate(2px, 2px)`." - "Design a flavor product card at 20px border-radius. Background: the SKU color (e.g., hot pink `{colors.primary}`). Hard stamp shadow: `5px 5px 0px 0px {colors.ink}`. Flavor name in Recoleta 28px weight 400, tracking -0.56px. Sub-label in Avant Garde 16px. Can image centered. An 'add to cart' pill button in `{colors.surface-yellow}` with the same hard shadow." - "Create a promo badge — `{colors.surface-yellow}` background, `{colors.ink}` text, `9999px` radius, 4px 10px padding, `box-shadow: 3px 3px 0px 0px {colors.ink}`. Avant Garde 12px weight 700. Use for 'NEW' or 'SALE' labels." - "Build a pill input field — white background, `1.5px solid {colors.ink}` border, `9999px` radius, 12px 20px padding, Avant Garde 18px. Focus state: border changes to `{colors.primary}`, add `box-shadow: 3px 3px 0px 0px {colors.primary}` pink stamp." - "Design a feature section with 2-column layout — left: Recoleta heading 60px on white canvas, Avant Garde body at 18px line-height 1.5; right: flavor can photography floating on white. Alternate left/right on subsequent sections. Section vertical padding: 64px." - "Create a navigation bar — white background, Poppi wordmark (Recoleta display style) left; center: Avant Garde 16px nav links in black; right: cart icon with a hot pink badge. Neon yellow promo bar above the main nav in Avant Garde 14px black text." ### Iteration Guide 1. Start with white canvas — the SKU colors are for flavor sections and hero moments, not the default page color 2. Every interactive element gets the hard flat stamp shadow: `5px 5px 0px 0px {colors.ink}` at rest, `3px 3px + translate(2px,2px)` on hover 3. Recoleta for display headlines, Avant Garde for everything else — never mix the roles 4. Buttons and inputs are always full pill (`9999px`) — the oval-stamp form is the brand 5. Neon yellow (`{colors.surface-yellow}`) for primary site-level CTAs; hot pink (`{colors.primary}`) for brand/product CTAs — respect the hierarchy 6. Let SKU colors dominate flavor sections — don't try to normalize them to a neutral card background 7. Black (`{colors.ink}`) is structural — type, borders, shadow offsets. Never near-black or charcoal. 8. Hard shadows always flat (0 blur) — a blurred shadow signals a different brand entirely --- ## 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 Poppi. Brand names and trademarks belong to their respective owners.