# Recess · Design system migration spec

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

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

## 1. Identity DNA

The system is architected around a core analogy: a calm, sophisticated beverage brand that blends modern minimalism with playful, whimsical elements. This identity is less a rigid grid and more a curated atmosphere, where every component choice reinforces a feeling of refreshing, playful calm. The result is a premium yet approachable digital environment.

**One-liner:** A premium beverage brand website blending playful whimsy with modern minimalism.
**Keywords:** calm · modern · playful · refreshing · minimalist
**Analogy:** A calm, sophisticated beverage brand that blends modern minimalism with playful, whimsical elements.

## 2. Color

The color system is built on a foundation of soft, airy pastels paired with deep, authoritative ink. This duality ensures readability and establishes a bright, optimistic atmosphere.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#C8D8FF` | main background |
| `--bg-soft` | `#E8F0FF` | card background |
| `--ink` | `#25385B` | body text |
| `--ink-soft` | `#394A6A` | secondary text |
| `--line` | `rgba(37, 56, 91, 1)` | divider |

**Color principle:** Soft, pastel backgrounds with high-contrast dark navy text for readability.

The principle is clear contrast for clarity, maintaining a palette of soft pastels and deep navy.

## 3. Typography

Typography employs a **characterful grotesque-sans** family, chosen for its bold, modern voice. The rules prioritize solid typographic blocks through tight letter spacing on headlines and consistent line heights for rhythmic, effortless reading.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.05 | 700 | -0.02em | Hero headlines |
| h1 | 40px | 1.1 | 700 | -0.01em | Section titles |
| body | 16px | 1.5 | 400 | 0 | Paragraphs |
| caption | 14px | 1.4 | 400 | 0 | Small text and labels |

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

## 4. Spacing

Spacing is governed by a consistent 4px base scale, creating a predictable and harmonious rhythm across all components.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 4px base scale providing standard web spacing.

## 5. Surfaces

Surfaces are defined by flat planes of color, using solid dark navy borders rather than shadows to establish structure and interactive affordances. Depth is suggested through color relationships and shape, not elevation.

- **Radius:** sm 0px · md 4px · lg 12px · pill 999px
- **Borders:** Solid 2px dark navy borders on buttons and inputs.

## 6. Layout

The primary layout skeleton is an **asymmetric hero section**, with text anchored on the left and dominant, colorful imagery occupying the right. This split creates immediate visual interest and a clear hierarchy.

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

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

## 7. Motion & Interaction

Motion philosophy is one of subtle reinforcement, using smooth opacity and transform transitions to guide focus without demanding attention. Background parallax-like effects are employed sparingly to enhance the design's inherent airy quality.

- **Durations:** micro 150ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.175, 0.885, 0.32, 1.275)`
- **Patterns:**
  - Smooth opacity and transform transitions on hover.
  - Parallax-like effects on background elements.

- **Hover:** Subtle color or opacity shifts.
- **Click:** No visible custom click animations.
- **Transition:** Smooth, subtle transitions for state changes.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is playful, casual, and confident, mirroring the brand's relaxed energy. Headlines are short, punchy, and conversational, while calls to action remain direct and action-oriented.

- **Tone:** Playful, casual, and confident.
- **Headline style:** Short, punchy, and conversational.
- **CTA style:** Direct and action-oriented.
- **Avoid:** Overly technical or clinical language. / Aggressive or high-pressure sales tactics. / Dense, complex paragraphs.

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

The system deliberately avoids dark mode, complex grids, heavy shadows, neon accents, serif typography, and clinical language, reinforcing its specific brand character.

## System Prompt (paste into AI tool)

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