---
title: "Zora design system"
variant: extended
source: https://zora.co/
captured_at: 2026-10-12
theme: light
industry: crypto
generator: Design DNA (https://four.wiralomi.com/style/zora-co)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Zora · Design System

> A quiet canvas for a fast-moving token market

**Theme:** light · **Industry:** crypto · **Source:** https://zora.co/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Zora presents a long, searchable token market in a restrained white interface, with compact rows and creator-focused navigation. Bright green and occasional magenta provide the key signals amid mostly monochrome data.

## North star

Keep the market table visually quiet and let compact, aligned data rows and selective movement colors carry the experience.

## Overview

The page is built on a near-white canvas, keeping attention on a dense market table rather than decorative sections. Ink-colored text establishes a clear reading hierarchy, while muted gray labels and faint hairlines separate column headings and token rows with little visual weight. Signal green marks positive market movement and appears as a highly selective text accent; vivid magenta distinguishes negative movement. These colors are functional indicators, not broad background treatments. DiatypeRounded supplies a consistent rounded sans-serif voice across navigation, controls, and compact data. The layout pairs a persistent narrow icon rail with a wider centered market area, then stacks category navigation, table controls, column labels, and many repeated token rows. Small token logos add varied color and texture, but remain contained within the otherwise orderly grid. Spacing is comfortable at the page level while row content stays information-dense. Borders, rather than shadows or cards, define the structure.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and navigation background; preserves an open, low-distraction field. |
| Market Ink | `#121212` | `--color-market-ink` | brand | Primary text, icons, and the filled Sign up button. |
| Quiet Rule | `#f2f2f2` | `--color-quiet-rule` | neutral | Very faint borders and separators that organize controls and market rows. |
| Ticker Gray | `#878787` | `--color-ticker-gray` | neutral | Muted labels, secondary token names, and subdued table headings. |
| Signal Green | `#00df00` | `--color-signal-green` | semantic | Positive 24-hour movement figures and a selective market-performance indicator. |
| Soft Gray | `#e5e5e5` | `--color-soft-gray` | surface | Subtle control and surface treatment; supporting UI, not a major section band. |
| Alert Magenta | `#ff00f0` | `--color-alert-magenta` | semantic | Negative market movement values, contrasting with the green positive figures. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#e5e5e5` (Soft Gray) · `--color-text` → `#121212` (Market Ink) · `--color-text-muted` → `#878787` (Ticker Gray) · `--color-border` → `#f2f2f2` (Quiet Rule) · `--color-accent` → `#00df00` (Signal Green) · `--color-accent-2` → `#ff00f0` (Alert Magenta)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#121212` | `#ffffff` | 18.73:1 | AAA |
| `#121212` | `#e5e5e5` | 14.87:1 | AAA |
| `#878787` | `#ffffff` | 3.59:1 | AA-large |
| `#878787` | `#e5e5e5` | 2.85:1 | fail |
| `#00df00` | `#ffffff` | 1.82:1 | fail |
| `#00df00` | `#e5e5e5` | 1.44:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| DiatypeRounded | `--font-body` | webfont | 420, 595, 505, 700 | Used throughout the interface for navigation, search, token labels, buttons, and market data. | Nunito Sans |

- **DiatypeRounded:** Rounded sans-serif with compact, slightly tight tracking; regular body text, heavier navigation and CTA, sentence case.

### Type scale — Major Third (ratio ≈ 1.267, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 19px | 505 | 1.47 | -0.032em | — | DiatypeRounded | Small page-level heading role; the measured viewport emphasizes market navigation and data instead. |
| body | 15px | 420 | 1.33 | -0.014em | — | DiatypeRounded | Token names, symbols, market values, controls, and supporting interface text. |
| nav | 15px | 595 | 1.33 | -0.014em | — | DiatypeRounded | Top navigation, category links, and account actions. |

OpenType features in use: `"ss05", "ss11"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16 px.
- Section rhythm 72px · element gap 8px · card padding — · max content width —.

A slim fixed-looking icon rail sits at the left, beside a broad market region centered within the page. The top area combines search and account actions, followed by a horizontal category strip and compact Trending, Top, and New controls. A column-heading row anchors a long, two-part market table. The screenshot shows many repeated rows extending well below the first viewport. Alignment is column-based and consistent; the exact maximum width is not measured. Page-level breathing room contrasts with dense row content.

## Shape & elevation

- Radius: button `8px` · media `50%` · xs `8px` · sm `12px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.12s cubic-bezier(0.22, 1, 0.36, 1)` on interactive elements.

The interface reads as mostly flat: no measured shadows are present, and white space does most of the separation. Very light horizontal rules and subtle row boundaries organize the table without card-like depth. The filled dark Sign up button is a compact focal point; other controls remain understated. Keep layering restrained and avoid raised panels.

## Imagery

There is no dominant hero photography or large illustration. Small circular or square token and creator marks sit at the start of rows and within category navigation, often using colorful logos against the white page. Keep these assets thumbnail-sized and aligned to the table grid; their varied colors belong to market content, not to a broader brand background or image treatment.

## Components

### Left icon rail

A narrow vertical navigation strip with compact monochrome icons, a softly treated selected control, and a brand mark near the lower portion.

### Search field

A centered, light-gray search control with a magnifier and muted placeholder text for creators, trends, or traders.

### Account actions

A quiet Login control sits beside a dark #121212 Sign up button with white text, rounded corners, and compact padding.

### Category navigation

A horizontal row of All and creator/token categories, pairing concise labels with small circular or square icons.

### Market tabs

Trending, Top, and New form a compact selector; the active option uses darker text and a short underline.

### Token market table

Repeated aligned rows show token identity, market cap, 24-hour volume, holders, age, paired asset, and movement.

### Movement values

Positive figures use #00df00 and negative figures use #ff00f0; keep both as text accents rather than filled badges.

### Measured component styles

- **Primary button** (“Sign up”): background #121212 · text #ffffff · radius 8px · padding 4px 12px · 595 15px DiatypeRounded
- **Secondary button** (“Login”): transparent background · text #4d4d4d · border 1px solid #e6e6e6 · radius 8px · padding 3px 11px · 595 15px DiatypeRounded
- **Link** (“W W $281.3m $7.7m 100,639 948d USDC 60.5”): transparent background · text #4d4d4d · radius 0px · padding 0px · 420 15px DiatypeRounded
- **Input**: transparent background · text #4d4d4d · radius 0px · padding 12px · 420 17px DiatypeRounded
- **Navigation item** (“Login Sign up”): transparent background · text #4d4d4d · radius 0px · padding 0px · 420 15px DiatypeRounded

## Do

- Use white as the dominant page canvas.
- Keep token information aligned in consistent columns.
- Use green for positive and magenta for negative movement.
- Keep labels secondary in muted gray.
- Use small token marks as row-level content.
- Separate rows with faint hairlines rather than shadows.

## Don't

- Do not turn market signals into large colored panels.
- Do not add heavy card shadows or layered surfaces.
- Do not use oversized display typography for dense data.
- Do not let token logos disrupt row alignment.
- Do not use green or magenta as broad page backgrounds.
- Do not crowd the category navigation with oversized controls.

## Agent prompt

Build a new Zora-style crypto interface with a white Gallery White (#ffffff) canvas and a narrow icon rail beside the main content. Use DiatypeRounded or a close rounded sans-serif substitute throughout, with compact labels and clearly aligned market data. Keep the top area restrained: search, Login, and a dark Market Ink (#121212) Sign up button, followed by horizontal category navigation and simple market tabs. Organize content in a broad, dense table with consistent columns, small token logos, and faint Quiet Rule (#f2f2f2) separators. Use Ticker Gray (#878787) for secondary text. Reserve Signal Green (#00df00) for positive figures and Alert Magenta (#ff00f0) for negative figures. Avoid large illustrations, gradients, heavy shadows, and decorative cards.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | Long, two-part market table beside a slim icon rail, preceded by search, category navigation, and market tabs. | Search market content, Switch category and ranking tabs, Scan aligned market metrics | Compact data rows, Small token logos, Faint row dividers, Green and magenta change values |

## Source CSS custom properties (selected)

```css
--rs-font-family-title: DiatypeRounded,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
--rs-font-family-body: DiatypeRounded,BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
--z-background: -1;
--border-color: rgba(var(--color-text),0.08);
--rs-focus-shadow: 0 0 0 2px var(--rs-color-background-elevation-base),0 0 0 4px var(--rs-color-border-primary);
--rs-focus-inset-shadow: inset 0 0 0 2px var(--rs-color-border-primary),inset 0 0 0 4px var(--rs-color-background-elevation-base);
--privy-border-radius-sm: 6px;
--privy-border-radius-md: 12px;
--privy-border-radius-mdlg: 16px;
--privy-border-radius-lg: 24px;
--privy-border-radius-full: 9999px;
--privy-color-background: hsl(0, 0%, 100%);
--privy-color-background-2: hsl(0, 0%, 96%);
--privy-color-background-3: hsl(0, 0%, 92%);
--privy-color-foreground: hsl(0, 0%, 12%);
--privy-color-foreground-2: hsl(0, 0%, 30%);
--privy-color-foreground-3: hsl(0, 0%, 57%);
--privy-color-foreground-4: hsl(0, 0%, 92%);
--privy-color-foreground-accent: hsl(0, 0%, 100%);
--privy-color-accent: hsl(0, 0%, 0%);
--privy-color-accent-light: hsl(0, 0%, 15%);
--privy-color-accent-lightest: hsl(0, 0%, 25%);
--privy-color-accent-dark: hsl(0, 0%, 0%);
--privy-color-accent-darkest: hsl(0, 0%, 0%);
--privy-color-success: hsl(147, 43%, 52%);
--privy-color-success-dark: hsl(147, 43%, 36%);
--privy-color-success-light: hsl(147, 43%, 92%);
--privy-color-error: hsl(7, 80%, 62%);
--privy-color-error-light: hsl(7, 80%, 92%);
--privy-color-warn: hsl(36, 100%, 65%);
--privy-color-warn-light: hsl(36, 100%, 95%);
--apkt-duration-dynamic: 0ms;
--apkt-colors-black: #202020;
--apkt-colors-white: #FFFFFF;
--apkt-colors-white010: rgba(255, 255, 255, 0.1);
--apkt-colors-accent010: rgba(9, 136, 240, 0.1);
--apkt-colors-accent020: rgba(9, 136, 240, 0.2);
--apkt-colors-accent030: rgba(9, 136, 240, 0.3);
--apkt-colors-accent040: rgba(9, 136, 240, 0.4);
--apkt-colors-accent050: rgba(9, 136, 240, 0.5);
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/zora-co