---
name: Poppi
description: "This site is a strong example of a bold, personality-driven consumer brand using color, typography, and playful geometry to create a memorable and approachable identity."
version: alpha

colors:
  background: "#FFF200"
  primary: "#000000"
  tertiary: "#EC008C"
  line: "rgba(236, 0, 140, 1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 60px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1.2px"
  h1:
    fontFamily: grotesque-sans
    fontSize: 28px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-0.56px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 10px
  md: 20px
  lg: 40px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Energetic, pop-art-inspired DTC beverage brand using bold colors and playful geometry.

*A vibrant, retro-inspired juice bar meets modern wellness brand.*

## Colors

High-contrast, saturated palette built on a vibrant yellow base with a punchy hot pink accent.

- **Background (`#FFF200`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#EC008C`)** — uses `accent` token
- **Borders (`rgba(236, 0, 140, 1.0)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- Use lowercase textTransform for a casual, friendly tone.
- Apply tight negative letter-spacing to display sizes for impact.
- Maintain high contrast between text and vibrant background colors.

## Layout

Standard centered single-column layout for this modal view.

*Rhythm:* Flexible padding, often 16px or 32px, with larger vertical gaps between major sections.

## Elevation & Depth

- None: None
- None: None
- None: None
- Borders: 2px solid rgb(229, 231, 235) used frequently for inputs and cards.

## Shapes

- `sm`: 10px
- `md`: 20px
- `lg`: 40px
- `pill`: 9999px

## Components

- **button:** Wide, pill-shaped buttons with solid backgrounds (e.g., pink) and white text.
- **card:** Components often feature solid, bright background colors and rounded corners.
- **chip:** Not prominently featured in the analyzed screenshots.
- **input:** Standard rounded input fields with solid backgrounds and subtle borders.
- **hero:** Full-width, vibrant gradient backgrounds with large typography and prominent product imagery.

## Do's and Don'ts

**Don't:**
- Don't use muted, desaturated colors — screenshot shows vibrant, high-chroma yellow and pink.
- Don't use uppercase text for headlines — screenshot shows all-lowercase typography.
- Don't use sharp, rectangular corners for primary components — screenshot shows large border-radius (10px to 9999px).
- Don't use subtle, diffused shadows — screenshot shows hard, solid offset shadows (5px 5px 0px).
- Don't use dark mode — screenshot shows a bright, light-mode dominant palette.
- Don't use complex grid layouts for this type of focused modal — screenshot shows a centered, single-column layout.

---

## System Prompt (paste into AI agent)

```
Poppi is a playful, consumer-focused beverage brand with a bold, retro-modern aesthetic. The design system uses a vibrant yellow (#FFF200) as its primary background color, contrasted with a punchy hot pink (#EC008C) accent. Typography relies heavily on a bold grotesque sans-serif (ITCAvantGarde) used predominantly in lowercase to maintain a friendly, approachable tone. A critical design rule is the use of hard, solid offset box shadows rather than soft diffusions. Avoid formal language, uppercase headlines, and sharp, unrounded corners. The overall feel is energetic, pop-art inspired, and highly approachable.
```