# Ethereum · Design system migration spec

> Source: https://ethereum.org  ·  Curated by OpenDesign  ·  en

> A highly successful example of a 'calm' design for a complex technical topic, making decentralized technology feel accessible and trustworthy.

## 1. Identity DNA

The system is conceived as a clean, instructional public utility portal for a decentralized network. It establishes a calm, educational hub for the Ethereum ecosystem, treating complexity with clarity and structure. The design functions like a well-organized reference library—authoritative yet accessible, with infrastructure as its core metaphor.

**One-liner:** A calm, educational hub for the Ethereum ecosystem.
**Keywords:** decentralized · global · sovereign · network · infrastructure
**Analogy:** A clean, instructional public utility portal for a decentralized network.

## 2. Color

The color system operates on a white-dominant layout with a primary purple accent and a soft grayscale hierarchy. This creates a clear visual order where content resides on a neutral field, and the distinct purple provides a singular point of interactive emphasis.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F7F7F7` | card background |
| `--bg-quiet` | `#F2EBFF` | quiet area |
| `--ink` | `#121212` | body text |
| `--ink-soft` | `#616161` | secondary text |
| `--muted` | `#8C8C8C` | placeholder |
| `--accent` | `#6C24E0` | single accent |
| `--line` | `rgba(207, 207, 207, 1)` | divider |

**Color principle:** White-dominant layout with purple accents and soft grayscale hierarchy.

The principle is one of restraint, using color sparingly to guide attention against a clean, light background.

## 3. Typography

Typography employs a humanist-sans for display and body copy, with IBM Plex Mono for code, establishing a voice that is both modern and warm. The category choices support an educational tone, prioritizing legibility and a calm, authoritative presence over stylistic flair.

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** mono

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 900 | -1px | Main hero headline |

## 4. Spacing

Spacing follows a consistent 1.6 multiplier rhythm, creating a predictable and generous vertical cadence.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 14 / 16 / 24 / 32 / 48 px
- **Rhythm:** 1.6 multiplier

## 5. Surfaces

Surface treatment is defined by minimal depth, using a single, soft shadow and subtle, 1-pixel solid borders. This approach maintains a clean, flat aesthetic while providing just enough definition to separate components from the background.

- **Radius:** sm 4px · md 8px · lg 24px · pill 999px
- **Shadows:**
  - 0 1px 1px 0 rgba(0, 0, 0, 0.1)
- **Borders:** 1px solid rgba(207, 207, 207, 1)

## 6. Layout

The layout skeleton is straightforward: a full-width hero image anchors the page, with centered text content flowing below. This structure prioritizes clarity and focus, creating a spacious, vertical reading path with ample whitespace between sections.

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

**Skeleton:** Full-width hero image, centered text content below.

## 7. Motion & Interaction

Motion philosophy favors subtle, functional feedback over decoration. Transitions are smooth and brief, primarily using color shifts on hover and scale transforms on click to confirm interaction.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Color transitions on hover
  - Transform/scale on interactive elements

- **Hover:** Color transition on interactive elements.
- **Click:** Visual feedback via transform.
- **Transition:** All properties with 0.15s or 0.3s cubic-bezier easing.
- **Keyboard:** Focus styles implied by interactive components.

## 8. Voice & Don'ts

The editorial voice is consistently educational, accessible, and authoritative, using bold, declarative, user-centric headlines. Call-to-action language is direct and encouraging, such as 'Start here', guiding users without pressure.

- **Tone:** Educational, accessible, and authoritative.
- **Headline style:** Bold, declarative, and user-centric.
- **CTA style:** Direct and encouraging, e.g., 'Start here'.
- **Avoid:** Technical jargon / Complexity / Dark themes / Aggressive marketing

### Don'ts
- ❌ Don't use dark mode — screenshot shows a predominantly white background.
- ❌ Don't use high-contrast neon colors — screenshot shows a soft purple accent (#6C24E0).
- ❌ Don't use serif fonts for headings — screenshot shows a bold humanist-sans font.
- ❌ Don't use heavy drop shadows — screenshot shows minimal, soft shadows.
- ❌ Don't use tight, dense layouts — screenshot shows generous whitespace and a clean rhythm.
- ❌ Don't use decorative borders — screenshot uses subtle 1px borders.

The system deliberately avoids dark themes, high-contrast neons, decorative complexity, and aggressive marketing language.

## System Prompt (paste into AI tool)

```
This is the ethereum.org homepage, a clean and educational hub for the Ethereum ecosystem. The design DNA is calm, accessible, and authoritative, using a white-dominant palette with a distinct purple accent (#6C24E0) and grayscale hierarchy (#121212 for ink, #616161 for secondary text). Typography uses a humanist-sans for display and body, with IBM Plex Mono for code. Critical donts: avoid dark mode (the site is light-themed), avoid high-contrast neons, and avoid decorative complexity. The layout is spacious, centered, and focuses on clear educational content, making it a key reference for decentralized finance and technology.
```