# Robertaspizza · Design system migration spec

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

> Worth including for its successful execution of a bold, photography-driven editorial style with high-contrast typography.

## 1. Identity DNA

The design system for Roberta's Pizza is built on the tangible warmth of a Brooklyn pizza box wrapper — that crinkled, high-contrast, unapologetically bold artifact. It treats the digital space not as a gallery, but as a direct, confident expression of a rustic, artisanal brand.

**One-liner:** A bold, high-contrast editorial layout for an artisanal pizza brand.
**Keywords:** artisanal · bold · rustic · playful
**Analogy:** A Brooklyn pizza box wrapper

## 2. Color

The palette is a stark, high-contrast trio: pure white, dark grey (#2B3036), and a dominant, energetic red accent (#ED2023). This creates immediate visual impact and a sense of warmth against dark or light backgrounds.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#2B3036` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#2B3036` | placeholder |
| `--accent` | `#ED2023` | single accent |
| `--line` | `rgba(43, 47, 54, 1.0)` | divider |

**Color principle:** High contrast with a dominant, energetic red accent against dark and white backgrounds.

The principle is direct and assertive: high contrast and a confident red accent establish the system's energetic, appetizing presence.

## 3. Typography

Typography is the system's most forceful voice, anchored by the heavy display serif Offset TM for headlines and the utilitarian Source Sans 3 for body text. Almost all interface text is rendered in uppercase, reinforcing the bold, editorial character.

- **Display:** display-serif
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 80px | 1.0 | 400 | 0px | Hero headlines |
| headline | 34px | 1.3 | 400 | 0px | Section titles |
| body | 22px | 1.36 | 400 | 0px | Button labels and navigation |
| small | 14px | 1.36 | 400 | 0px | Footnotes or small UI text |

**Type rules:**
- Use Offset TM for all headlines and buttons.
- Use Source Sans 3 for body text if available.
- Ensure strong contrast between white text and dark/red backgrounds.

## 4. Spacing

The vertical rhythm is deliberately generous, with major sections set apart by expansive padding of 96px or 128px.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 / 128 px
- **Rhythm:** Generous vertical padding (96px, 128px) for major sections.

## 5. Surfaces

Depth is handled with literal, physical cues: a single, soft drop shadow defines cards, and a solid 2px border gives buttons and active elements tangible weight.

- **Radius:** sm 4px · md 8px · lg 10px · pill 16000px
- **Shadows:**
  - 0px 4px 4px 0px rgba(0, 0, 0, 0.25)
- **Borders:** 2px solid for buttons and active elements.

## 6. Layout

The structural skeleton is photography-first, beginning with a full-viewport hero image. Below this, content stacks in clear, generous blocks, maintaining the editorial feel.

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

**Skeleton:** Full-width photographic hero with stacked content blocks below.

## 7. Motion & Interaction

Motion philosophy is restrained and functional, using smooth transitions (0.25s ease) for color changes and shadow appearances. The goal is subtle physical feedback, not spectacle.

- **Durations:** micro 100ms · small 250ms · medium 300ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Smooth fade-in transitions for background color and text color.
  - Box shadow transitions on hover.

- **Hover:** Subtle box shadow appearance and color transitions.
- **Click:** Immediate visual feedback via state change.
- **Transition:** 0.25s ease for background-color and color changes.
- **Keyboard:** Standard tab navigation with focus states.

## 8. Voice & Don'ts

The editorial voice is bold, confident, and slightly playful, matching the visual system's high-impact typographic choices. Calls to action are direct and impossible to miss.

- **Tone:** Bold, confident, and slightly playful.
- **Headline style:** ALL CAPS display serif, high impact.
- **CTA style:** Direct, action-oriented, and highly visible.
- **Avoid:** Subtle gradients / Muted color palettes / Small, delicate typography

### Don'ts
- ❌ Don't use delicate, thin fonts — screenshot shows bold, heavy display serifs.
- ❌ Don't use a light or pastel background — screenshot shows a dark (#2B3036) or pure white background.
- ❌ Don't avoid uppercase text — screenshot shows almost all UI text is uppercase.
- ❌ Don't use sharp corners for buttons — screenshot shows large border-radius (pill or large radius).
- ❌ Don't use subtle colors for calls to action — screenshot uses a dominant, high-chroma red (#ED2023).
- ❌ Don't use a minimal amount of padding — screenshot shows generous vertical spacing (128px).

The system deliberately rejects subtlety, muted palettes, and delicate typography in favor of straightforward, high-contrast communication.

## System Prompt (paste into AI tool)

```
A bold, high-contrast editorial design for an artisanal pizza brand. Key colors: pure white, dark grey (#2B3036), and a vibrant red (#ED2023). Typography features heavy display serifs (Offset TM) for headlines and sans-serif (Source Sans 3) for UI elements. Critical donts: Avoid delicate typography, muted color palettes, or minimal vertical spacing. The design uses full-bleed photography, large uppercase text, and generous padding to create a high-impact, warm, and confident brand presence.
```