CURATED · OPEN · FREE

Spindrift

A premium DTC beverage brand blending rustic photography with clean, modern typography.

beveragedtc

↓ Download design system (23 MB)Open in OpenDesign

Visit: https://www.drinkspindrift.com

📦 Browse pack contents →

Identity DNA

organicfreshnaturalcrisppremium beverage

A high-end organic juice bar with a rustic-modern aesthetic.

Color

#6bbc37Accent

#ffffffInk

#363638Ink soft

#215212BG

#f5f5f5BG soft

#f9f6f0BG quiet

rgba(33, 82, 18, 1.0)Line

Earthy, organic palette dominated by deep greens and crisp whites.

Typography

geometric-sans · humanist-sans

display56px · 400
h136px · 400
h228px · 400
body16px · 400
small14px · 400

Display and body typography use geometric-sans and humanist-sans categories. · Headlines use tight tracking for a modern, compact feel. · Bold weights are rarely used, relying on size for hierarchy.

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Clean 4px base grid with generous vertical spacing for editorial flow.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 9999px

Clean and minimal, often using the primary green color for subtle accents.

0px 1px 2px 0px rgba(0, 0, 0, 0.24) · 0px 0px 2px 2px rgb(204, 204, 204)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Centered, single-column focused layout that prioritizes imagery and whitespace.

Motion & Interaction

300msmicro

400mssmall

600msmedium

cubic-bezier(0.77, 0, 0.175, 1)easing

Smooth transitions for UI element state changes. · Subtle entrance animations for page sections.

Subtle color shifts or opacity changes on interactive elements. · Immediate visual feedback via state changes.

Components

button Pill-shaped primary buttons with high contrast against dark backgrounds.
card Clean cards with minimal borders, relying on typography and spacing for structure.
chip Not prominent; navigation uses simple text links.
input Full-width inputs with white backgrounds and rounded corners.
hero Full-bleed photographic background with centered, overlaying text.

Voice & Don'ts

Tone Friendly, approachable, and naturally enthusiastic.
Headlines Conversational, sometimes playful (e.g., 'Hello, Blueberry Lemonade').
CTAs Direct and benefit-oriented (e.g., 'Sign Me Up').

Don't use cold, clinical whites — screenshot shows warm, creamy off-whites (#f9f6f0).
Don't use a wide variety of typefaces — screenshot shows strict use of geometric and humanist sans categories.
Don't use heavy drop shadows or bevels — screenshot shows minimal, subtle shadows.
Don't use right angles everywhere — screenshot shows pill-shaped buttons (#9999px radius).
Don't use thin, spindly fonts — screenshot shows sturdy, medium-weight typography.
Don't use high-contrast neon accents — screenshot uses a natural, vibrant green (#6bbc37).
Avoid: Overly technical jargon
Avoid: Aggressive sales language
Avoid: Complex sentence structures

Inside the pack — real screenshots

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

Captured from the live site · real computed styles

System prompt

Spindrift is a premium DTC beverage brand with a natural, organic aesthetic. The visual language is defined by a dominant deep green (#215212) palette paired with warm off-whites (#f9f6f0) and a vibrant lime accent (#6bbc37). Typography is clean and modern, using geometric-sans and humanist-sans categories with tight tracking. Key elements include full-bleed photographic backgrounds, pill-shaped buttons, and generous whitespace. Critical rules: do not use cold, clinical whites; avoid heavy, complex drop shadows; and never use sharp, right-angle buttons for primary actions.

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