---
name: Spindrift
description: "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."
version: alpha

colors:
  background: "#215212"
  primary: "#ffffff"
  secondary: "#363638"
  tertiary: "#6bbc37"
  neutral: "#6bbc37"
  bg-soft: "#f5f5f5"
  bg-quiet: "#f9f6f0"
  line: "rgba(33, 82, 18, 1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  h1:
    fontFamily: humanist-sans
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.96px"
  h2:
    fontFamily: humanist-sans
    fontSize: 28px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.3px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "-0.32px"
  small:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.28px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

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

---

## Overview

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

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

## Colors

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

- **Background (`#215212`)** — uses `bg` token
- **Primary text (`#ffffff`)** — uses `ink` token
- **Secondary text (`#363638`)** — uses `ink-soft` token
- **Accent (`#6bbc37`)** — uses `accent` token
- **Muted (`#6bbc37`)** — uses `muted` token
- **Borders (`rgba(33, 82, 18, 1.0)`)** — uses `line` token

## Typography

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

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

## Layout

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

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

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 9999px

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

## Do's and Don'ts

**Don't:**
- 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).

---

## System Prompt (paste into AI agent)

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