---
name: Recess
description: "The site is a strong example of modern DTC branding, using whimsical shapes and a soft color palette to create a premium yet approachable identity."
version: alpha

colors:
  background: "#C8D8FF"
  primary: "#25385B"
  secondary: "#394A6A"
  bg-soft: "#E8F0FF"
  line: "rgba(37, 56, 91, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 60px
    lineHeight: 1.05
    fontWeight: 700
    letterSpacing: "-0.02em"
  h1:
    fontFamily: grotesque-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.01em"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0"
  caption:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 0px
  md: 4px
  lg: 12px
  pill: 999px

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

---

## Overview

A premium beverage brand website blending playful whimsy with modern minimalism.

*A calm, sophisticated beverage brand that blends modern minimalism with playful, whimsical elements.*

## Colors

Soft, pastel backgrounds with high-contrast dark navy text for readability.

- **Background (`#C8D8FF`)** — uses `bg` token
- **Primary text (`#25385B`)** — uses `ink` token
- **Secondary text (`#394A6A`)** — uses `ink-soft` token
- **Borders (`rgba(37, 56, 91, 1)`)** — uses `line` token

## Typography

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

- Use tight letter spacing for large headlines to create a solid typographic block.
- Maintain consistent line heights across different font sizes for rhythmic reading.

## Layout

Asymmetric hero layout with text on the left and imagery on the right.

*Rhythm:* A consistent 4px base scale providing standard web spacing.

## Elevation & Depth

- Borders: Solid 2px dark navy borders on buttons and inputs.

## Shapes

- `sm`: 0px
- `md`: 4px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** A high-contrast solid navy button with white text, or a navy outline button.
- **card:** Not prominently visible; imagery is placed directly on background shapes.
- **chip:** Not visible in the screenshot.
- **input:** Standard rectangular inputs with solid dark navy borders.
- **hero:** A large, asymmetric hero section with a bright sky background and a prominent green curved shape.

## Do's and Don'ts

**Don't:**
- Don't use a generic sans-serif font — the site relies on a specific, characterful grotesque-sans family.
- Don't use dark mode — the site's identity is built on bright, airy, pastel backgrounds.
- Don't use complex grid layouts — the hero section uses a clear, asymmetric split.
- Don't use heavy drop shadows — the design is flat and relies on color contrast for depth.
- Don't use bright neon accents — the palette is composed of soft pastels and deep navy.
- Don't use serif typography — the entire site uses a consistent sans-serif system.

---

## System Prompt (paste into AI agent)

```
Positioning: A premium, playful beverage brand targeting a modern, health-conscious consumer. Key hex colors: #C8D8FF (background), #25385B (ink), #163BF3 (accent blue), #A8B2FF (soft background). Font categories: Characterful grotesque-sans for a bold, modern look. Critical donts: Do not use dark mode, avoid complex grids, and do not use heavy shadows. Keep the voice casual and punchy, mirroring the brand's relaxed energy.
```