# Veja · Design system migration spec

> Source: https://www.veja-store.com  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of a premium e-commerce brand using a minimalist, editorial design system to communicate sustainability and quality.

## 1. Identity DNA

Veja's design system operates like a well-curated gallery space: the architecture itself—monochrome, structured, minimal—exists to frame the photography as the primary content. The system is built on the principle that visual richness comes from imagery, not decoration, allowing the brand's sustainable footwear to speak through cinematic editorial presentation.

**One-liner:** A premium sustainable footwear brand utilizing a photography-forward, minimalist editorial design system.
**Keywords:** sustainable · premium · minimal · editorial · authentic
**Analogy:** A premium fashion brand that blends minimalist e-commerce with high-end editorial storytelling.

## 2. Color

The color system is deliberately austere: black, white, and gray form the entire palette, creating a high-contrast foundation that defers to photographic content. This restraint ensures the brand's visual communication never competes with the product imagery it exists to showcase.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#888888` | placeholder |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Monochrome palette with high-contrast black and white, relying on photography for visual richness.

The underlying principle is that color neutrality amplifies visual richness through photography rather than chromatic complexity.

## 3. Typography

Typography follows a strict hierarchical structure built on Helvetica and standard grotesque-sans fonts, with uppercase treatments reserved for navigation and major call-to-action elements. The system prioritizes bold, declarative headlines over decorative type choices, maintaining clarity through disciplined weight and case usage.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.2 | 700 | 0 | large impactful headlines |
| body | 16px | 1.15 | 400 | 0 | standard text and navigation |

**Type rules:**
- Use uppercase for navigation and major call-to-action text
- Maintain a strict typographic hierarchy using Helvetica and sans-serif fallbacks
- Ensure tight line-height for large display text and standard spacing for body copy

## 4. Spacing

Spacing follows a consistent 4px grid with generous padding applied to interactive elements, creating visual rhythm through measured emptiness.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 40 / 50 / 64 px
- **Rhythm:** Consistent 4px grid with generous padding for interactive elements and modal layouts.

## 5. Surfaces

Surface treatments are minimal but deliberate: subtle shadows provide depth for interactive states, while thin 1px borders define buttons and interactive elements without visual weight. The system avoids heavy surface decoration, relying on spatial relationships to communicate hierarchy.

- **Radius:** sm 2px · md 5px · lg 10px · pill 50px
- **Shadows:**
  - 0px 0px 18px 0px rgba(0, 0, 0, 0.2)
- **Borders:** 1px solid borders for buttons and interactive states.

## 6. Layout

The layout skeleton is photography-driven, built around a standard e-commerce grid that remains secondary to central modal presentations and persistent navigation elements. The structure prioritizes breathing room around imagery, with the grid serving content rather than dictating visual rhythm.

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

**Skeleton:** Photography-driven layout with a standard e-commerce grid hidden behind a central modal and bottom cookie banner.

## 7. Motion & Interaction

Motion is restrained and purposeful, using consistent 0.3s ease-in-out transitions for all state changes to maintain visual continuity. The system favors opacity and transform effects for hover states and modal reveals, creating feedback without calling attention to the interface itself.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Opacity and transform transitions for hover states and modal reveals.

- **Hover:** Subtle opacity or transform transitions on interactive elements.
- **Click:** Standard pointer cursor with transition feedback.
- **Transition:** Consistent 0.3s ease-in-out transitions for state changes.
- **Keyboard:** Standard browser focus states.

## 8. Voice & Don'ts

Voice is quietly confident, premium, and transparent—declarative headlines paired with direct, functional calls to action that use all-caps for clarity. The editorial tone avoids marketing excess, favoring restraint and substance over persuasive embellishment.

- **Tone:** Quietly confident, premium, and transparent.
- **Headline style:** Bold, uppercase, and declarative.
- **CTA style:** Direct and functional, using all-caps for clarity.
- **Avoid:** Excessive use of vibrant accent colors / Rounded, playful UI elements / Dense, cluttered typography

### Don'ts
- ❌ Don't use vibrant accent colors — screenshot shows a strict monochrome palette of black, white, and gray.
- ❌ Don't use rounded pill buttons — screenshot shows rectangular buttons with small border radii of 5px or less.
- ❌ Don't use playful, handwritten, or serif typefaces — screenshot shows strict Helvetica/grotesque-sans usage.
- ❌ Don't clutter the layout with multiple overlapping text elements — screenshot shows minimal text over large photographic areas.
- ❌ Don't hide the brand identity behind complex navigation — screenshot shows a persistent, clear logo placement.
- ❌ Don't use light, airy pastel backgrounds — screenshot shows deep blacks and stark whites for high contrast.

The system deliberately rejects vibrant accent colors, rounded playful UI elements, and dense typographic layouts to preserve its premium, photography-driven character.

## System Prompt (paste into AI tool)

```
This is a premium sustainable footwear e-commerce site that relies heavily on cinematic, photography-forward layouts. The visual system uses a strict monochrome palette (Black #000000, White #FFFFFF, Gray #888888) to let the editorial imagery stand out. Typography is driven by Helvetica and standard grotesque-sans fonts, with uppercase treatments for navigation and large, bold display text for headlines. Layouts are generous and minimal, prioritizing breathing room around imagery. Critical donts: avoid vibrant accent colors, avoid rounded/playful UI elements, and avoid cluttering the interface with dense text blocks. The design must remain restrained, premium, and photography-driven at all times.
```
