# Regrocery · Design system migration spec

> Source: https://regrocery.co  ·  Curated by OpenDesign  ·  en

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

## 1. Identity DNA

Regrocery operates as a high-end editorial magazine for eco-conscious consumers, treating grocery as a subject worthy of typographic and photographic attention. The system marries a premium zero-waste ethos with the confidence of print design, using expressive type and warm photography to make sustainability feel both effortless and refined.

**One-liner:** A premium zero-waste grocery platform that uses expressive typography and warm photography to make sustainability feel effortless and elevated.
**Keywords:** zero-waste · sustainability · packaging-free · premium · clean
**Analogy:** A high-end editorial magazine for eco-conscious consumers

## 2. Color

A warm, organic palette is anchored by off-whites and light grays, providing a clean, organic foundation for content. A single high-energy orange-red drives action, functioning as the system's sole punctuation mark for calls-to-action and interactive highlights.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F7F6F2` | main background |
| `--bg-soft` | `#EFEDF7` | card background |
| `--ink` | `#211D1C` | body text |
| `--muted` | `#EFEDF7` | placeholder |
| `--accent` | `#F74C25` | single accent |
| `--line` | `rgba(247, 76, 37, 1.0)` | divider |

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

The principle is restraint: let the warmth of the neutrals carry the atmosphere, and let the accent speak only when it must.

## 3. Typography

Typography is split between two distinct roles: a humanist sans-serif handles all functional and navigational text with clean legibility, while a large, expressive didone-serif is reserved exclusively for impactful, large-scale headlines. Tight letter-spacing on display levels creates a refined, modern feel, establishing a clear hierarchy between utility and expression.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 100px | 0.8 | 400 | -5.949px | Hero headlines and large display text |
| heading | 30px | 0.66 | 400 | -2.175px | Section headings |
| body | 20px | 1.25 | 400 | -0.4px | Primary body text and navigation links |

**Type rules:**
- 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

## 4. Spacing

Generous whitespace establishes a generous, breathing rhythm, allowing photography and typography to exist without competition.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 10 / 16 / 20 / 30 / 40 / 95 px
- **Rhythm:** Generous whitespace is used to let photography and typography breathe

## 5. Surfaces

Surfaces are defined by subtle depth and precise linear definition, not heavy elevation. Thin, 1px solid borders in the primary accent color provide crisp delineation, while soft shadows add a whisper of lift.

- **Radius:** sm 4px · md 8px · lg 999px · pill 999px
- **Shadows:**
  - 0px 0px 20px 0px rgba(0,0,0,0.05)
- **Borders:** Thin 1px solid lines in the primary accent color

## 6. Layout

The layout skeleton is built on asymmetric splits, pairing large photographic hero areas with centered or left-aligned text blocks. This creates a dynamic, editorial composition that prioritizes visual storytelling over rigid grid conformity.

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

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

## 7. Motion & Interaction

Motion is refined and purposeful, using smooth, organic transitions to suggest physicality and high-end craftsmanship. Background-color transitions with custom cubic-bezier easing create fluid, non-mechanical hover states.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.22, 1, 0.36, 1)`
- **Patterns:**
  - Smooth, organic transitions on hover states
  - Background-color transitions with custom easing

- **Hover:** Subtle color shifts and background transitions on interactive elements
- **Click:** Immediate visual response with pointer cursor on all clickable items
- **Transition:** All properties transition smoothly, emphasizing background-color changes
- **Keyboard:** Standard sequential focus navigation

## 8. Voice & Don'ts

The editorial voice is confident, refined, and sustainability-focused, using short, impactful phrases for headlines and direct, action-oriented copy for CTAs. It deliberately avoids aggressive marketing jargon, cluttered layouts, and generic corporate language.

- **Tone:** Confident, refined, and sustainability-focused
- **Headline style:** Short, impactful phrases with expressive serif typography
- **CTA style:** Direct and action-oriented, often using pill-shaped outline buttons
- **Avoid:** Aggressive marketing jargon / Cluttered layouts / Generic corporate language / Overly complex interfaces

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

The system deliberately does not use cluttered layouts, generic sans-serif headlines, harsh primary colors, square-cornered buttons, hidden navigation, or cold, clinical backgrounds.

## System Prompt (paste into AI tool)

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