# Spindrift · Design system migration spec

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

> This site is worth including as a prime example of how to effectively blend premium, rustic photography with a modern, clean UI to create a compelling DTC brand experience.

## 1. Identity DNA

Spindrift's design system operates like a high-end organic juice bar: a rustic-modern aesthetic where natural, earthy elements meet clean, contemporary construction. The result is a premium DTC beverage identity that feels both fresh and grounded, built on a foundation of organic materials and crisp, uncluttered form.

**One-liner:** A premium DTC beverage brand blending rustic photography with clean, modern typography.
**Keywords:** organic · fresh · natural · crisp · premium beverage
**Analogy:** A high-end organic juice bar with a rustic-modern aesthetic.

## 2. Color

The palette is anchored by a deep forest green, establishing a dominant, natural presence. This earthy core is balanced against warm, creamy off-whites and punctuated by a vibrant lime accent, creating a visual language that feels organic yet energetic.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#215212` | main background |
| `--bg-soft` | `#f5f5f5` | card background |
| `--bg-quiet` | `#f9f6f0` | quiet area |
| `--ink` | `#ffffff` | body text |
| `--ink-soft` | `#363638` | secondary text |
| `--muted` | `#6bbc37` | placeholder |
| `--accent` | `#6bbc37` | single accent |
| `--line` | `rgba(33, 82, 18, 1.0)` | divider |

**Color principle:** Earthy, organic palette dominated by deep greens and crisp whites.

Every color choice reinforces the principle of earthy, organic warmth, deliberately avoiding cold, clinical tones.

## 3. Typography

Typography employs a disciplined pairing of geometric-sans and humanist-sans categories, creating a voice that is clean, modern, and approachable. Headlines use tight tracking for a compact, contemporary feel, establishing hierarchy through scale rather than heavy bold weights.

- **Display:** geometric-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 400 | -1px | Hero headlines |
| h1 | 36px | 1.1 | 400 | -0.96px | Page titles |
| h2 | 28px | 1.1 | 400 | -0.3px | Section headers |
| body | 16px | 1.5 | 400 | -0.32px | General text |
| small | 14px | 1.0 | 400 | -0.28px | Captions and labels |

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

## 4. Spacing

The system is built on a clean 4px base grid, establishing a reliable vertical rhythm. Generous vertical spacing between elements fosters an editorial flow, allowing content and imagery room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Clean 4px base grid with generous vertical spacing for editorial flow.

## 5. Surfaces

Surface treatments are minimal and intentional, relying on subtle shadows and clean borders to define depth. The system favors light, airy surfaces, using the primary green sparingly for subtle accent borders rather than heavy visual weight.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - 0px 1px 2px 0px rgba(0, 0, 0, 0.24)
  - 0px 0px 2px 2px rgb(204, 204, 204)
- **Borders:** Clean and minimal, often using the primary green color for subtle accents.

## 6. Layout

The layout skeleton is a centered, single-column focus that prioritizes large, high-quality photography. This structure maximizes whitespace, allowing imagery to command attention while text content remains clear and readable.

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

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

## 7. Motion & Interaction

Motion is applied with purpose and restraint, designed to enhance usability rather than decorate. Smooth transitions for UI state changes and subtle entrance animations create a sense of fluid, logical progression through the experience.

- **Durations:** micro 300ms · small 400ms · medium 600ms
- **Easing:** `cubic-bezier(0.77, 0, 0.175, 1)`
- **Patterns:**
  - Smooth transitions for UI element state changes.
  - Subtle entrance animations for page sections.

- **Hover:** Subtle color shifts or opacity changes on interactive elements.
- **Click:** Immediate visual feedback via state changes.
- **Transition:** Smooth transitions (0.3s-0.6s) using cubic-bezier easing.
- **Keyboard:** Standard tab navigation with visible focus states.

## 8. Voice & Don'ts

The editorial voice is friendly and naturally enthusiastic, adopting a conversational tone that avoids jargon and complex structures. It is a deliberately clear and approachable communication style, focused on benefit-oriented direction.

- **Tone:** Friendly, approachable, and naturally enthusiastic.
- **Headline style:** Conversational, sometimes playful (e.g., 'Hello, Blueberry Lemonade').
- **CTA style:** Direct and benefit-oriented (e.g., 'Sign Me Up').
- **Avoid:** Overly technical jargon / Aggressive sales language / Complex sentence structures

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

The system consciously avoids aggressive sales language, heavy visual effects, and complex technical language, maintaining a crisp and uncluttered presence.

## System Prompt (paste into AI tool)

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