---
title: "Recess design system"
variant: extended
source: https://takearecess.com/
captured_at: 2026-10-12
theme: dark
industry: food-beverage
generator: Design DNA (https://four.wiralomi.com/style/takearecess-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Recess · Design System

> Calm green canvas, bright products, unhurried rhythm

**Theme:** dark · **Industry:** food-beverage · **Source:** https://takearecess.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Recess pairs an almost-black forest-green canvas with crisp white typography and bright beverage imagery. A spacious, editorial storefront introduces products through large centered category moments and restrained shopping calls to action.

## North star

Keep the evergreen canvas and white type dominant, using color and product imagery as deliberate, limited focal points.

## Overview

The page is anchored by a near-black evergreen canvas (#00140c), repeated across the hero and long product-category sections to make the site feel calm and continuous. White (#ffffff) carries the navigation, headings, supporting copy, and links, maintaining clear contrast without introducing extra interface colour. Lavender (#c2caff) appears as a small, high-visibility shop CTA accent; deep blue (#25385b) and navy (#1d2a58) are supporting accents, most notably in the announcement strip, button edging, and occasional graphic details. Sharp Grotesk Web supplies a clean, rounded sans-serif voice: a prominent hero headline contrasts with small, quiet descriptions and uppercase bold buttons. The opening hero is a two-part composition, with copy and CTA on the left and framed product photography on the right. Farther down, centered headings and generous dark intervals give product categories room to breathe. Pastel gradients, colorful cans, and cloud graphics belong to product imagery and illustrations, rather than replacing the dark brand canvas.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Evergreen Night | `#00140c` | `--color-evergreen-night` | brand | Dominant page canvas and continuous background across the hero and product-category sections. |
| Cloud White | `#ffffff` | `--color-cloud-white` | neutral | Navigation, headlines, supporting copy, links, and high-contrast button text. |
| Midnight Slate | `#25385b` | `--color-midnight-slate` | accent | Announcement-band details and button edging; a supporting blue accent, not a section canvas. |
| Lavender Signal | `#c2caff` | `--color-lavender-signal` | accent | A compact shop-button fill and restrained highlight against the dark green canvas. |
| Indigo Shade | `#1d2a58` | `--color-indigo-shade` | accent | Minor blue detail and supporting accent; keep it subordinate to the evergreen and white. |

### Semantic aliases

`--color-canvas` → `#00140c` (Evergreen Night) · `--color-text` → `#ffffff` (Cloud White) · `--color-border` → `#25385b` (Midnight Slate) · `--color-accent` → `#c2caff` (Lavender Signal) · `--color-accent-2` → `#25385b` (Midnight Slate) · `--color-accent-3` → `#1d2a58` (Indigo Shade) · `--color-on-accent` → `#ffffff` (Cloud White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#00140c` | 19:1 | AAA |
| `#c2caff` | `#00140c` | 11.93:1 | AAA |

### Gradients

- `linear-gradient(rgb(0, 20, 12) 30%, rgb(0, 20, 12) 50%, rgb(0, 20, 12) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Sharp Grotesk Web | `--font-body` | webfont | 400, 500, 700 | Site-wide typography for display headings, body copy, navigation, links, and buttons. | Outfit |

- **Sharp Grotesk Web:** Use regular to bold weights; headlines stay sentence case, while bold buttons are uppercase. Keep tracking neutral.

### Type scale — Golden Ratio (ratio ≈ 1.624, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 500 | 1.25 | 0 | — | Sharp Grotesk Web | Large, prominent campaign or hero headline. |
| h1 | 24px | 400 | 1.38 | 0 | — | Sharp Grotesk Web | Primary section heading and major category title. |
| h2 | 20px | 400 | 1.63 | 0 | — | Sharp Grotesk Web | Secondary heading or supporting section statement. |
| body | 14px | 500 | normal | 0 | — | Sharp Grotesk Web | Compact product and explanatory copy. |
| button | 16px | 700 | 1.13 | 0 | uppercase | Sharp Grotesk Web | Bold uppercase shopping CTA label. |
| nav | 16px | 400 | 1 | 0 | — | Sharp Grotesk Web | Header navigation and announcement links. |
| link | 14px | 500 | normal | 0 | — | Sharp Grotesk Web | Product, sampler, and promotional text links. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 4, 8, 12, 16, 24, 32, 36, 40, 48, 64, 84, 107, 144 px.
- Section rhythm 64px · element gap 32px · card padding — · max content width 1024px.

The measured content max width is 1024px, set within a much wider dark canvas. The opening hero uses a left text-and-button column beside a large framed product image; later sections shift to centered headings and product-category layouts. Spacious density is reinforced by a 64px section gap and 32px element gap, with generous empty stretches between category moments. Maintain a clear, deliberate reading order and avoid filling every dark interval with interface elements.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s ease` on interactive elements.

The interface is mostly flat: no measured shadows, and section backgrounds remain continuous. The hero image gains definition from a fine light outline and rounded corners. Buttons use square corners, with a visible border; use spacing and contrast rather than card shadows to establish hierarchy.

## Imagery

Lead with tactile product photography: cans held in hands, cropped into a large rounded rectangular frame beside the hero copy. Product collections use colorful package images against a soft pastel gradient, visibly distinct from the evergreen site canvas. Small cloud illustrations float through later dark sections as decorative atmosphere; treat these as illustration assets, not as a new brand color system.

## Components

### Announcement strip

A narrow repeating top band uses blue-toned contrast, small white promotional links, and shipping messages above the main navigation.

### Header navigation

White script-style Recess logo sits at left with shop navigation; subscription, login, and cart links align to the right.

### Hero feature

Left-aligned campaign heading, short supporting sentence, and uppercase shop button sit beside a large, bordered product photograph.

### Shop CTA

Bold 16px uppercase Sharp Grotesk Web label; measured button padding is 24px 36px, with square corners and a visible 2px border.

### Product category intro

Centered white heading and concise description introduce product families against the uninterrupted green canvas.

### Sampler and product links

Product imagery and compact white links provide routes into the samplers, zero-proof drinks, and Recess ranges.

### Measured component styles

- **Primary button** (“SHOP ALL PRODUCTS”): background #c2caff · text #ffffff · border 2px solid #ffffff · radius 0px · padding 24px 36px · 700 16px Sharp Grotesk Web · uppercase
- **Secondary button** (“SHOP 'TINIS”): background #fffcef · text #25385b · border 2px solid #25385b · radius 0px · padding 24px 36px · 700 16px Sharp Grotesk Web · uppercase
- **Link** (“the new Mood sampler”): transparent background · text #ffffff · radius 0px · padding 0px · 500 14px Sharp Grotesk Web
- **Navigation item** (“Go to home page”): transparent background · text #ffffff · radius 0px · padding 12px · 400 16px Sharp Grotesk Web

## Do

- Use #00140c as the dominant continuous canvas.
- Set primary text and navigation in #ffffff.
- Reserve #c2caff for a small, prominent shopping action.
- Give the hero product photo a clear frame beside the copy.
- Center later category headings and keep their descriptions concise.
- Preserve spacious gaps between sections and product moments.

## Don't

- Do not replace the dark evergreen canvas with a light page background.
- Do not spread accent blue across large interface areas.
- Do not use shadows to create card-heavy elevation.
- Do not crowd the long category sections with extra UI.
- Do not treat colorful product packaging or cloud art as the site palette.
- Do not use rounded pill buttons; measured CTA corners are square.

## Agent prompt

Build a new Recess-style storefront page with a continuous #00140c Evergreen Night canvas and crisp #ffffff Cloud White typography. Use Sharp Grotesk Web, or Outfit when unavailable; keep headings clean and confident, supporting copy compact, and shopping buttons bold and uppercase. Structure the first view as a spacious split hero with copy and CTA beside a framed product photograph. Follow it with centered category introductions and generous dark intervals. Use #c2caff Lavender Signal sparingly for a CTA, and keep #25385b Midnight Slate and #1d2a58 Indigo Shade as minor accents. Let bright packaging, pastel product backdrops, and cloud illustrations remain inside their imagery. Prefer flat surfaces, square button corners, and fine borders over shadows or decorative card stacks.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Split hero: left-aligned campaign copy and CTA beside a large framed product photograph. | Campaign introduction, Shop CTA | White display heading, Square button, Outlined image frame |
| 2 | product-showcase | Full-width pastel product scene interrupts the dark canvas as a single visual band. | Browse all products, Brand overview | Colorful product lineup, Centered heading, Shop button |
| 3 | other | Centered heading and short paragraph within a spacious evergreen section. | Brand explanation | White centered type, Decorative cloud art |
| 4 | product-grid | Centered section intro above a product-link and sampler collection. | Explore sampler options, Compare flavors | Centered heading, Product imagery, Compact links |
| 5 | product-grid | Centered category introduction followed by a product collection. | Browse drink varieties | White heading, Product imagery, Linked flavors |
| 6 | product-showcase | Long evergreen product-story section with widely separated centered category moments. | Discover product families | Cloud illustrations, Centered category headings |
| 7 | product-grid | Centered heading and description above a linked sparkling-water product range. | Browse flavors | Centered white type, Product imagery, Flavor links |
| 8 | other | Centered press heading above a multi-column grid of publication and review content. | Read press coverage | Centered heading, Publication marks, Review links |

## Source CSS custom properties (selected)

```css
--light-color: #0a0a3a;
--dark-color: #fff;
--link-color: #0f0f92;
--ui-color: #25385b;
--color-white: #fff;
--color-titan: #e9ecff;
--color-light-gray: #f0f0f0;
--color-linen: #fbf4eb;
--color-spanish-white: #fef2df;
--color-apricot: #fedab3;
--color-peach: #ffc8a0;
--color-gray: #dedede;
--color-dark-gray: #b1b1b1;
--color-waterloo: #84849c;
--color-cloud-burst: #25385b;
--color-midnight-blue: #0a0a3a;
--color-ultramarine: #0f0f92;
--color-blue: #163bf3;
--color-melrose: #a8b2ff;
--color-lavender: #c2caff;
--color-black: #000;
--color-red: #ff5a5a;
--color-dark-red: #c51d1d;
--color-pink: #ffb8b8;
--color-focus-outline: #163bf3;
--font-antidote: Antidote Display Web;
--text-xs: .75rem;
--text-sm: .875rem;
--text-base: 1rem;
--text-lg: 1.125rem;
--text-xl: 1.25rem;
--pill-bg: transparent;
--pill-border: 1.5px solid #000;
--color-scheme-background-gradient: linear-gradient(to bottom,rgb(0, 20, 12) 900px,rgb(0, 20, 12) 900px,rgb(0, 20, 12) 900px);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/takearecess-com