CURATED · OPEN · FREE

Poppi

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

beveragedtc

↓ Download design system (19 MB)Open in OpenDesign

Visit: https://www.drinkpoppi.com

📦 Browse pack contents →

Identity DNA

playfulenergetichealth-focusedretro-modernapproachable

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

Color

#EC008CAccent

#000000Ink

#FFF200BG

rgba(236, 0, 140, 1.0)Line

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

Typography

grotesque-sans

display60px · 700
h128px · 700
body16px · 400

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.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

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

Surfaces

sm · 10px

md · 20px

lg · 40px

pill · 9999px

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

None: None · None: None · None: None

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Standard centered single-column layout for this modal view.

Motion & Interaction

250msmicro

400mssmall

800msmedium

cubic-bezier(0.42, 0, 0.58, 1)easing

Smooth transitions for background-color, color, and box-shadow. · Opacity fades for element visibility.

Subtle changes in background-color or box-shadow, often with a transition. · Immediate visual feedback, potentially through color shifts or transform.

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.

Voice & Don'ts

Tone Playful, enthusiastic, and conversational.
Headlines Bold, lowercase, and punchy, often using brand-specific retro fonts.
CTAs Direct, friendly, and action-oriented (e.g., 'stay in touch').

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.
Avoid: Formal language
Avoid: Complex jargon
Avoid: Overly serious tone

Inside the pack — real screenshots

Poppi — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko