# Zora · Design system migration spec

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

> This site exemplifies the 'less is more' philosophy, using extreme restraint in UI elements to ensure the creator's visual content remains the absolute focus.

## 1. Identity DNA

Zora's design system operates like a gallery with invisible architecture—a clean, white container engineered to make the digital art it houses the sole focal point. Its identity is built on a strict monochrome UI with a single neon accent, creating a minimalist social platform for creators and collectors that recalls the curated feed of a social app applied to the world of NFTs.

**One-liner:** A minimalist social platform for sharing and collecting digital art and NFTs.
**Keywords:** creators · trends · traders · NFTs · social
**Analogy:** Instagram for digital art and web3 collectors

## 2. Color

The palette is a study in high-contrast restraint: a pure white background meets deep ink and neutral greys for text, creating a neutral canvas. Action is signaled only by a vibrant neon green, a deliberate and singular accent for interactive states.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--ink` | `#121212` | body text |
| `--ink-soft` | `#4D4D4D` | secondary text |
| `--muted` | `#878787` | placeholder |
| `--accent` | `#00DF00` | single accent |
| `--line` | `rgba(77,77,77,1.0)` | divider |

**Color principle:** Monochrome UI with high-contrast text and neon accent for action states.

This chromatic discipline ensures the UI recedes, allowing the colorful media of creators to command all visual attention.

## 3. Typography

All interface text is rendered in Monument Grotesk, a Grotesque Sans whose clean, neutral geometry provides a consistent voice. Its tight tracking and limited weight usage—410 for body, 500 for emphasis—create a focused typographic hierarchy that feels direct and functional.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 34px | 1.18 | 500 | -0.84px | Headlines |
| h2 | 21px | 1.33 | 500 | -0.84px | Section Titles |
| body | 15px | 1.33 | 410 | -0.225px | Body Text |
| small | 13px | 1.23 | 410 | -0.195px | Metadata |

**Type rules:**
- Use Monument Grotesk for all interface text.
- Maintain tight tracking for display and body sizes.
- Use 410 weight for body, 500 for emphasis.

## 4. Spacing

A consistent 4px grid underpins all spatial relationships, establishing a predictable and rhythmic layout for every element on the page.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid-based spacing.

## 5. Surfaces

Depth is communicated through minimal, flat elevation using soft, neutral shadows on a white ground. Borders are defined by a single, consistent 1px rule in dark grey, maintaining the interface's crisp, graphic quality.

- **Radius:** sm 4px · md 8px · lg 12px · pill 9999px
- **Shadows:**
  - rgba(0, 0, 0, 0.05) 0px 5px 10px 0px
  - rgba(0, 0, 0, 0.07) 0px 15px 25px 0px
- **Borders:** 1px solid #4D4D4D

## 6. Layout

The desktop skeleton is a structured 3-column layout: a thin, icon-based sidebar, a central content feed, and a right-hand discovery rail. This grid collapses to a single, focused column on mobile, preserving the primacy of the content stream.

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

**Skeleton:** 3-column desktop layout: thin sidebar, central feed, right rail. Single-column mobile feed.

## 7. Motion & Interaction

Motion is minimal and utility-focused, optimized for micro-interactions with a fast 120ms duration. The philosophy is to use fade, scale, and smooth color transitions as responsive feedback, not as decoration.

- **Durations:** micro 120ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.65, 0, 0.35, 1)`
- **Patterns:**
  - Fade and scale on hover/interaction.
  - Smooth color and background transitions.

- **Hover:** Opacity or color shift on interactive elements.
- **Click:** Subtle scale or shadow change.
- **Transition:** Fast 120ms cubic-bezier transitions for responsiveness.
- **Keyboard:** Standard focus ring behavior.

## 8. Voice & Don'ts

The editorial voice is neutral and platform-oriented, using direct, functional headlines and simple verb-based CTAs. It avoids clutter and decorative text to keep communication as clear as the interface itself.

- **Tone:** Neutral, platform-oriented, and creator-focused.
- **Headline style:** Direct and functional (e.g., 'Suggested follows').
- **CTA style:** Simple verbs (Login, Sign up, Follow, Buy).
- **Avoid:** Excessive decorative text / Cluttered UI / Heavy branding elements

### Don'ts
- ❌ don't use warm color palettes — screenshot shows a strict monochrome UI with green accents
- ❌ don't use decorative serif fonts — screenshot shows only sans-serif typography (Monument Grotesk)
- ❌ don't use complex shadows — screenshot shows minimal, flat elevation
- ❌ don't use rounded-square buttons for primary CTAs — screenshot shows pill-shaped 'Sign up' buttons
- ❌ don't use dark mode for the default state — screenshot shows a white background theme
- ❌ don't use multi-column text layouts — screenshot shows a single central feed column for content

By design, it deliberately avoids warm palettes, decorative serifs, and complex UI ornamentation.

## System Prompt (paste into AI tool)

```
Zora is a minimalist, creator-focused social platform for digital art and NFTs. The design DNA features a clean, white (#FFFFFF) background with dark ink (#121212) and neutral grey (#878787) for text, accented by a vibrant neon green (#00DF00). Typography is exclusively Grotesque Sans (Monument Grotesk), using a 410 weight for body text and 500 for emphasis, with tight negative letter-spacing. The layout follows a 3-column desktop structure with a central feed and 1280px max-width container. Critical constraints: never use decorative serifs, avoid warm color palettes, and maintain the 4px grid spacing. Interactions are fast (120ms) with cubic-bezier easing.
```
