# Magic Eden · Design system migration spec

> Source: https://magiceden.io  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of a high-performance, dark-mode marketplace UI for a specialized web3 domain.

## 1. Identity DNA

Magic Eden functions as a neon-lit bazaar for digital collectibles, a marketplace where clarity and speed are paramount for its web3-native audience. Its design system is built on a foundation of high contrast and restrained vibrancy, creating a focused environment for trading.

**One-liner:** A high-energy, dark-mode marketplace for buying, selling, and discovering NFTs.
**Keywords:** NFT · Marketplace · Solana · Trading · Web3
**Analogy:** A neon-lit bazaar for digital collectibles

## 2. Color

The palette is anchored by a deep purple-black void, a deliberate choice that lets the essential elements—the bright white text and vibrant neon pink and green accents—emerge with sharp definition. This creates a hierarchy where color signals action and data.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#15111d` | main background |
| `--bg-soft` | `#1e1929` | card background |
| `--bg-quiet` | `#2a2337` | quiet area |
| `--ink` | `#f2f2f3` | body text |
| `--ink-soft` | `#858094` | secondary text |
| `--muted` | `#4d3d5c` | placeholder |
| `--accent` | `#ea4141` | single accent |
| `--line` | `rgba(35, 30, 47, 1)` | divider |

**Color principle:** Deep purple-black background with bright white text and vibrant neon pink and green accents.

Color is used surgically, reserved for calls-to-action and critical data points against the dark field, ensuring functional clarity over decorative flair.

## 3. Typography

Inter serves as the primary sans-serif, a workhorse grotesque chosen for its clarity across a dense UI of data and interactive elements. Bold weights carve out hierarchy for headings, while the body text remains clean and legible at standard sizes.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 24px | 1.2 | 700 | -0.5px | Section headings |
| body | 16px | 1.5 | 400 | 0px | General body text |
| caption | 12px | 1.3 | 400 | 0px | Labels and metadata |

**Type rules:**
- Use Inter as the primary sans-serif for UI.
- Use bold weights for headings and emphasis.

## 4. Spacing

A strict 4px grid underpins the entire layout, establishing a consistent spatial rhythm that balances density with breathing room.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px grid system.

## 5. Surfaces

Depth is conveyed through minimal shadow and defined borders rather than gradient or blur. Elements sit on a flat plane, separated by a single, dark border that reinforces the interface's grid structure.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Shadows:**
  - 0px 1px 2px 0px rgba(0, 0, 0, 0.05)
- **Borders:** 1px solid #231e2f

## 6. Layout

The layout is a responsive 12-column grid, engineered to organize collections of cards and dense tables of data. Horizontal carousels and clear visual grouping maintain order within this structured skeleton.

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

**Skeleton:** Responsive grid for collection cards and tables.

## 7. Motion & Interaction

Motion is subtle and purposeful, confined to functional feedback like smooth hover transitions and the sliding of carousels. The system prioritizes immediate, app-like responsiveness over decorative animation.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions for hover states and UI updates.
  - Carousel sliding for featured sections.

- **Hover:** Subtle color shifts or border highlights on cards and buttons.
- **Click:** Immediate feedback with opacity changes.
- **Transition:** 0.15s cubic-bezier(0.4, 0, 0.2, 1) for most properties.
- **Keyboard:** Standard focus outlines for accessibility.

## 8. Voice & Don'ts

The editorial voice is direct and utility-focused, employing short, punchy headlines and action-oriented calls to action. It avoids vague language and passive construction to maintain clarity and pace.

- **Tone:** Direct, professional, and focused on utility.
- **Headline style:** Short, punchy, and bold.
- **CTA style:** Action-oriented (e.g., 'Buy Packs', 'See all').
- **Avoid:** Vague terminology / Overly complex sentences / Passive voice

### Don'ts
- ❌ Don't use a light background — the screenshot shows a dark purple-black interface.
- ❌ Don't use serif fonts — the screenshot shows a clean, modern sans-serif style.
- ❌ Don't use rounded corners everywhere — the screenshot shows sharp, 8px radii on cards.
- ❌ Don't use multiple dominant colors — the screenshot shows a restrained palette with pink and green accents.
- ❌ Don't use dense, cramped layouts — the screenshot shows generous spacing and clear visual hierarchy.
- ❌ Don't use subtle, low-contrast borders — the screenshot shows clear, dark borders to separate elements.

The system deliberately avoids light themes, serif typography, and pervasive rounding, adhering to a strict visual discipline that defines its marketplace identity.

## System Prompt (paste into AI tool)

```
Magic Eden is a leading Solana NFT marketplace designed for a web3-savvy audience. It features a dark mode interface with a deep purple-black background (#15111d) and vibrant accents like neon pink (#ea4141) and green (#41e78a). The typography uses a clean grotesque sans-serif (Inter) with bold headings and 16px body text. Key components include collection cards with 8px radius, pill-shaped tags, and a horizontal carousel for featured items. Avoid using light themes, serif fonts, or overly decorative elements. The design prioritizes clarity, trust, and ease of navigation for trading digital assets.
```
