---
name: Regrocery
description: "This site is a perfect example of how to elevate a functional e-commerce platform into a premium, editorial experience through intentional typography and restrained color."
version: alpha

colors:
  background: "#F7F6F2"
  primary: "#211D1C"
  tertiary: "#F74C25"
  neutral: "#EFEDF7"
  bg-soft: "#EFEDF7"
  line: "rgba(247, 76, 37, 1.0)"

typography:
  display:
    fontFamily: didone-serif
    fontSize: 100px
    lineHeight: 0.8
    fontWeight: 400
    letterSpacing: "-5.949px"
  heading:
    fontFamily: humanist-sans
    fontSize: 30px
    lineHeight: 0.66
    fontWeight: 400
    letterSpacing: "-2.175px"
  body:
    fontFamily: humanist-sans
    fontSize: 20px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "-0.4px"

rounded:
  sm: 4px
  md: 8px
  lg: 999px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 16px
  xl: 20px
  2xl: 30px
  3xl: 40px

---

## Overview

A premium zero-waste grocery platform that uses expressive typography and warm photography to make sustainability feel effortless and elevated.

*A high-end editorial magazine for eco-conscious consumers*

## Colors

Warm neutrals provide a clean, organic foundation, while a single high-energy orange-red drives action.

- **Background (`#F7F6F2`)** — uses `bg` token
- **Primary text (`#211D1C`)** — uses `ink` token
- **Accent (`#F74C25`)** — uses `accent` token
- **Muted (`#EFEDF7`)** — uses `muted` token
- **Borders (`rgba(247, 76, 37, 1.0)`)** — uses `line` token

## Typography

- **Display:** didone-serif
- **Body:** humanist-sans

- Tight letter-spacing on display and heading levels for a refined, modern feel
- Serif fonts are reserved exclusively for large, expressive headlines
- Sans-serif handles all functional and navigational text

## Layout

Asymmetric splits with large photographic hero areas paired with centered or left-aligned text blocks

*Rhythm:* Generous whitespace is used to let photography and typography breathe

## Elevation & Depth

- 0px 0px 20px 0px rgba(0,0,0,0.05)
- Borders: Thin 1px solid lines in the primary accent color

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 999px
- `pill`: 999px

## Components

- **button:** Pill-shaped buttons with thin borders and high contrast accent colors
- **card:** Rounded image containers that break the grid with organic shapes
- **hero:** Full-bleed immersive photography overlaid with massive display typography

## Do's and Don'ts

**Don't:**
- Don't use a cluttered layout — screenshot shows generous whitespace and large imagery
- Don't use purely geometric sans-serif for headlines — screenshot shows expressive didone-serif
- Don't use harsh primary colors — screenshot shows a specific warm orange-red accent
- Don't use square corners for buttons — screenshot shows pill-shaped rounded borders
- Don't hide the navigation — screenshot shows a clean, persistent top bar
- Don't use flat, clinical backgrounds — screenshot shows warm off-white and subtle gradients

---

## System Prompt (paste into AI agent)

```
Regrocery is a premium zero-waste grocery platform with a refined, editorial aesthetic. It uses warm off-white (#F7F6F2) and light gray (#EFEDF7) backgrounds contrasted with a bold orange-red (#F74C25) accent and deep brown-black (#211D1C) ink. Typography combines a humanist-sans for clean navigation and body text with a large, expressive didone-serif for impactful headlines. The layout emphasizes generous whitespace and full-bleed photography. Critical constraints: Never use cluttered layouts; avoid using sans-serif for display headlines; do not replace the signature warm orange-red accent with generic colors; never use square corners for interactive buttons; avoid cold, clinical white backgrounds; and do not use generic corporate typography or language.
```