# Afresh Design System

> A high-contrast botanical grid system pairing deep avocado greens with bright lime washes and light-weight geometric sans-serif headlines.

**Source:** https://afresh.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Afresh utilizes a "monochrome-plus" palette anchored by **Avocado 700** (#005900) and **Granite 900** (#121212). The system is defined by large-scale typography using **MNKY Banana Grotesk**, specifically at a signature weight of 300 for display headlines. Layouts rely on high-contrast color blocking—alternating between pure white (#ffffff), soft lime (#e1ffb4), and deep green (#005900) surfaces. Component geometry is remarkably soft, featuring a standard **32px border radius** for cards and full pill shapes for interactive elements, creating a friendly yet structured "fresh produce" aesthetic.

## Signature DNA
1. **The Avocado/Lime Contrast** (The primary brand voltage comes from pairing the deep #005900 with the vibrant #e1ffb4 background washes, seen in the "Afresh Advantage" and "Fresh Innovation" sections).
2. **Weight-300 Display Type** (Headlines are consistently set in MNKY Banana Grotesk at weight 300, even at sizes up to 90px, creating an airy, modern editorial feel).
3. **Soft-Panel Geometry** (A consistent 32px radius is applied to all container cards and section surfaces, softening the high-contrast color transitions).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--color-granite-900` | `#121212` | Primary text, high-contrast headings | 12 | 1 | `css_variable` |
| `--color-granite-050` | `#ffffff` | Page background, primary surface | 54 | 1 | `css_variable` |
| `--granite-700` | `#313131` | Secondary text, borders | 66 | 1 | `css_variable` |
| `--granite-200` | `#dadada` | Subtle dividers | 12 | 1 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--color-avocado-700` | `#005900` | Primary CTA bg, feature text, dark surfaces | 93 | 1 | `css_variable` |
| `--color-avocado-100` | `#e1ffb4` | Secondary CTA bg, section backgrounds | 22 | 1 | `css_variable` |
| `--avocado-050` | `#efffe9` | Filter backgrounds, soft card surfaces | 12 | 1 | `css_variable` |
| `--avocado-400` | `#8ec669` | Accent text (decorative_only) | 22 | 1 | `computed_style` |
| `--blueberry-700` | `#3d3da9` | Tertiary accent (rare) | 4 | 1 | `css_variable` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| MNKY Banana Grotesk | 300, 400, 600, 700 | Display, Headings, Body | Montserrat | Proprietary |
| MNKY Banana Grotesk Mono | 400 | Eyebrows, Technical | JetBrains Mono | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `display-mega` | 90px | 96.3px | -0.45px | 300 | Hero H1 | `h1#w-node-c60f8104...` |
| `display-xl` | 80px | 80px | -0.4px | 400 | Stat Numbers | `h2.stat-number` |
| `display-lg` | 50px | 57.5px | -0.4px | 700 | Stat Suffixes | `span.stat-number-hanging` |
| `display-md` | 42px | 47px | -0.208px | 300 | Section Heads | `h2.text-d1-lite` |
| `heading-lg` | 36px | 41.4px | -0.18px | 600 | Card Titles | `h3.text-h2-bold` |
| `heading-md` | 25px | 28.75px | 0.11px | 700 | Sub-headings | `div.text-h3-bold` |
| `body-lg` | 18px | 24.3px | 0.09px | 400 | Intro Paragraphs | `p.text-body-2` |
| `body-md` | 16px | 21.6px | 0.08px | 400 | Default Body | `div.text-body-3` |
| `eyebrow` | 13px | 17.55px | 1px | 400 | Section Labels | `div.text-eyebrow` |

### Principles
1. **Display weight stays at 300.** The signature "lite" look is achieved by using weight 300 for the largest page headlines.
2. **Tight display tracking.** Negative letter spacing (-0.45px) is applied to display sizes to maintain tension.
3. **Monospace for hierarchy.** MNKY Banana Grotesk Mono is used exclusively for eyebrows and small labels at 13px.

## Spacing
**Base unit:** 8px (approximate)
| Token | Value | Occurrences |
|------|-------|-------------|
| `space-xs` | 8px | 3 |
| `space-sm` | 16px | 3 |
| `space-md` | 24px | 10 |
| `space-lg` | 32px | 16 |
| `space-xl` | 48px | 5 |
| `section-gap` | 56px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `radius-none` | 0px | Full-width sections | 185 occurrences |
| `radius-lg` | 32px | Standard Cards, Panels | `radius: 32px` |
| `radius-xl` | 35px | Primary Buttons | `radius: 35px` |
| `radius-pill` | 9999px | Secondary Buttons, Tags | `radius: 101px` |

## Elevation
Not captured in source. The system is entirely flat, relying on color blocks and 1px borders for depth.

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (Request a demo)
**Pages observed:** https://afresh.com
**Spec:** Background: #005900 | Text: #ffffff | Radius: 35px | Padding: 23px 32px | Typography: 18px/700
**States observed:** Default: Captured | Hover: Not captured

#### Secondary Button
**Role:** Alternative action (See customer stories)
**Pages observed:** https://afresh.com
**Spec:** Background: #e1ffb4 | Text: #005900 | Radius: 32px | Padding: 23px 32px | Typography: 18px/700
**States observed:** Default: Captured

### Tier 2: Patterns
#### Feature Card
**Role:** Benefit grid items
**Pages observed:** https://afresh.com
**Spec:** Background: #ffffff | Text: #313131 | Radius: 32px | Padding: 45px 19px 38px | Border: 0px
**States observed:** Default: Captured

#### Lime Surface Panel
**Role:** High-contrast section background
**Pages observed:** https://afresh.com
**Spec:** Background: #efffe9 | Text: #313131 | Radius: 32px | Padding: 48px 56px
**States observed:** Default: Captured

### Tier 3: Surface-specific
#### Dark Feature Card
**Role:** Emphasis content on dark backgrounds
**Pages observed:** https://afresh.com
**Spec:** Background: #005900 | Text: #ffffff | Radius: 32px | Padding: 0px
**States observed:** Default: Captured

#### Resource Card
**Role:** Blog and news items
**Pages observed:** https://afresh.com
**Spec:** Background: #efffe9 | Text: #313131 | Radius: 32px | Padding: 32px 32px 24px
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max content width | 1440px |
| Column grid | 12-column desktop |
| Section padding | 56px vertical |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Stat grids stack 1-up; Typography scales down (H1 to ~48px). |

## Imagery & decoration
Afresh uses high-saturation, top-down photography of fresh produce (peppers, citrus, greens) often arranged in grids or patterns. It avoids abstract illustrations, favoring photographic evidence of "freshness."

## Do's
- Use **MNKY Banana Grotesk 300** for all headlines above 40px.
- Pair **#005900** backgrounds with **#ffffff** text for primary sections.
- Apply a **32px radius** to all content containers.
- Use **MNKY Banana Grotesk Mono** for all-caps eyebrow labels.
- Maintain a high-contrast ratio (18.7:1) between **#121212** and **#ffffff**.

## Don'ts
- **Wrong:** Using a bold weight (700) for hero headlines. **Right:** Use weight 300. **Reason:** The brand identity relies on the "lite" editorial feel of the Grotesk.
- **Wrong:** Using sharp corners for cards. **Right:** Use 32px radius. **Reason:** Sharp corners conflict with the organic "fresh" brand motif.
- **Wrong:** Introducing saturated blues or reds as primary UI colors. **Right:** Stick to the Avocado/Lime palette. **Reason:** The brand is strictly botanical-monochrome.

## Similar brands
- Whole Foods (botanical focus)
- Oatly (playful grotesk type)
- Chobani (soft geometry, editorial type)

## Quick start

```css
/* CSS Variables */
:root {
  --color-avocado-700: #005900;
  --color-avocado-100: #e1ffb4;
  --color-granite-900: #121212;
  --color-granite-050: #ffffff;
  --radius-card: 32px;
  --font-display: "MNKY Banana Grotesk", sans-serif;
}
```

## Agent prompt examples
- "Generate a feature section with a 12-column grid using #efffe9 background and cards with 32px border radius."
- "Create a hero H1 using MNKY Banana Grotesk at 90px, weight 300, and -0.45px letter spacing."
- "Design a primary button with #005900 background, 35px radius, and 18px bold white text."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Shadow tokens were not present in the CSS variable list or computed styles.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://afresh.com | 1440px | 2026-06-06 |
| Mobile Home | https://afresh.com | 390px | 2026-06-06 |