# Poppi · Design system migration spec

> Source: https://www.drinkpoppi.com  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

The identity of Poppi is rooted in a playful, energetic DNA that merges retro-modern aesthetics with a health-focused mission. It operates like a vibrant, retro-inspired juice bar reinterpreted for the digital wellness consumer, balancing bold pop-art references with an approachable, consumer-centric sensibility.

**One-liner:** Energetic, pop-art-inspired DTC beverage brand using bold colors and playful geometry.
**Keywords:** playful · energetic · health-focused · retro-modern · approachable
**Analogy:** A vibrant, retro-inspired juice bar meets modern wellness brand.

## 2. Color

The color system is built on a high-contrast, saturated palette with a vibrant yellow base and a punchy hot pink accent, establishing immediate visual energy. This chromatic foundation is used unapologetically across backgrounds and components to create a memorable, high-chroma presence.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFF200` | main background |
| `--ink` | `#000000` | body text |
| `--accent` | `#EC008C` | single accent |
| `--line` | `rgba(236, 0, 140, 1.0)` | divider |

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

The guiding principle is to maintain high contrast between text and these vibrant background colors, ensuring both accessibility and visual punch.

## 3. Typography

Typography is anchored by a bold grotesque sans-serif, deployed predominantly in a lowercase text-transform to foster a casual, friendly tone. Tight, negative letter-spacing is applied at display sizes for impactful headlines, creating a distinct and consistent brand voice.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.0 | 700 | -1.2px | Headlines and primary brand statements |
| h1 | 28px | 1.0 | 700 | -0.56px | Section headings |
| body | 16px | 1.5 | 400 | 0px | Standard body copy and UI text |

**Type rules:**
- 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.

## 4. Spacing

Spacing follows a flexible rhythm, employing consistent padding (often 16px or 32px) with generous vertical gaps to define sections and let the bold design elements breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Flexible padding, often 16px or 32px, with larger vertical gaps between major sections.

## 5. Surfaces

Surfaces are defined by a playful use of depth, featuring hard, solid offset shadows in the brand's core colors rather than subtle diffusions. This is paired with a frequent use of a 2px solid border on inputs and cards, reinforcing the graphic, retro-modern feel.

- **Radius:** sm 10px · md 20px · lg 40px · pill 9999px
- **Shadows:**
  - None: None
  - None: None
  - None: None
- **Borders:** 2px solid rgb(229, 231, 235) used frequently for inputs and cards.

## 6. Layout

The layout skeleton is intentionally simple: a standard, centered single-column structure for focused views. This framework provides a clear, distraction-free canvas that allows the vibrant color and bold typography to take precedence.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Standard centered single-column layout for this modal view.

## 7. Motion & Interaction

Motion philosophy is one of subtle enhancement, relying on smooth, cohesive CSS transitions for properties like background-color, color, and box-shadow. These short-duration animations provide immediate, clear feedback for interactions without introducing complex choreography.

- **Durations:** micro 250ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.42, 0, 0.58, 1)`
- **Patterns:**
  - Smooth transitions for background-color, color, and box-shadow.
  - Opacity fades for element visibility.

- **Hover:** Subtle changes in background-color or box-shadow, often with a transition.
- **Click:** Immediate visual feedback, potentially through color shifts or transform.
- **Transition:** Default transition applied broadly (all 0.25s) for cohesive feel.
- **Keyboard:** Standard focus states likely applied for accessibility.

## 8. Voice & Don'ts

The editorial voice is playful, enthusiastic, and conversational, with headlines that are bold, lowercase, and punchy. Call-to-action language is direct and friendly, maintaining the brand's approachable persona throughout.

- **Tone:** Playful, enthusiastic, and conversational.
- **Headline style:** Bold, lowercase, and punchy, often using brand-specific retro fonts.
- **CTA style:** Direct, friendly, and action-oriented (e.g., 'stay in touch').
- **Avoid:** Formal language / Complex jargon / Overly serious tone

### Don'ts
- ❌ 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.

The system deliberately avoids muted, desaturated colors, uppercase headlines, sharp rectangular corners, soft shadows, and complex grid layouts in its focused contexts.

## System Prompt (paste into AI tool)

```
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.
```
