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

# ethereum.org · Design System

> Open, airy guidance for a user-owned internet

**Theme:** light · **Industry:** crypto · **Source:** https://ethereum.org/ · **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._

Ethereum.org pairs an open, white editorial canvas with bold black typography and restrained purple accents. Large illustrated scenes, practical onboarding, and modular cards guide visitors from the core idea to learning and building.

## North star

Keep the interface spacious and editorial, using purple for clear actions and vivid Ethereum artwork for moments of explanation.

## Overview

The page uses a predominantly white canvas, with soft gray bands reserved for selected content areas and the footer. Near-black Inter headings create a strong editorial hierarchy; compact uppercase eyebrows label sections, while body copy stays subdued and readable. Ethereum purple is the main interactive signal for links, buttons, small labels, and selected visual accents, with darker and brighter purples appearing in badges and gradient artwork. A full-bleed illustrated hero gives the otherwise restrained interface a distinctive, human scale; later illustrations and product demonstrations explain concepts rather than behaving like generic decoration. Content alternates between centered introductions, left-aligned feature storytelling, and multi-column card groupings, with generous whitespace separating the long page sections. Cards use fine gray outlines and rounded corners, while selected promotional and principle panels use darker or purple gradient treatments. Keep the interface calm and legible, letting illustrations carry the richer color.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas, white card faces, and prominent reversed text on purple actions. |
| Slate Reading Gray | `#616161` | `--color-slate-reading-gray` | semantic | Muted body copy, footer links, and subdued supporting text. |
| Ethereum Violet | `#6c24e0` | `--color-ethereum-violet` | brand | Primary buttons, navigation search, active links, and key interactive accents. |
| Soft Section Gray | `#f7f7f7` | `--color-soft-section-gray` | surface | The principles section band, footer background, and quiet card or section surfaces. |
| Ink Black | `#121212` | `--color-ink-black` | neutral | Main headings, navigation text, body copy, and dark card content. |
| Deep Amethyst | `#41128c` | `--color-deep-amethyst` | accent | Small purple badge text and deeper supporting accents. |
| Quiet Border Gray | `#cfcfcf` | `--color-quiet-border-gray` | semantic | Fine card outlines, subtle dividers, and hairline boundaries. |
| Gradient Mist | `#dbdbdb` | `--color-gradient-mist` | surface | Appears in measured section gradient treatments; use as atmospheric artwork or gradient color, not a core text color. |
| Pale Lavender | `#e5d7fc` | `--color-pale-lavender` | accent | Soft purple gradient and illustration color; not a dominant interface surface. |
| Illustration Charcoal | `#4c4c4c` | `--color-illustration-charcoal` | semantic | Measured within gradient treatments and dark visual overlays, rather than a core page color. |
| Bright Orchid | `#9357f4` | `--color-bright-orchid` | accent | Brighter purple gradient endpoint and occasional card or illustration highlight. |
| Royal Gradient Violet | `#561bb6` | `--color-royal-gradient-violet` | accent | Deep purple gradient start, primarily in decorative panels and visual treatments. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f7` (Soft Section Gray) · `--color-text` → `#121212` (Ink Black) · `--color-text-muted` → `#616161` (Slate Reading Gray) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#cfcfcf` (Quiet Border Gray) · `--color-accent` → `#6c24e0` (Ethereum Violet) · `--color-accent-2` → `#41128c` (Deep Amethyst) · `--color-accent-3` → `#9357f4` (Bright Orchid) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#121212` | `#ffffff` | 18.73:1 | AAA |
| `#121212` | `#f7f7f7` | 17.49:1 | AAA |
| `#616161` | `#ffffff` | 6.19:1 | AA |
| `#616161` | `#f7f7f7` | 5.78:1 | AA |
| `#ffffff` | `#f7f7f7` | 1.07:1 | fail |
| `#6c24e0` | `#ffffff` | 7.08:1 | AAA |
| `#6c24e0` | `#f7f7f7` | 6.61:1 | AA |

### Gradients

- `radial-gradient(120% 80% at 50% -30%, oklab(0.605953 0.100786 -0.199559 / 0.24) 33%, oklab(0.586711 -0.0150739 -0.195399 / 0.08) 66%, rgba(0, 0, 0, 0) 100%)`
- `radial-gradient(oklab(0 0 0 / 0.14) 0%, oklab(0 0 0 / 0.7) 100%)`
- `linear-gradient(oklab(0.18152 0.00000824779 0.00000363588 / 0.05) 0%, oklab(0.18152 0.00000824779 0.00000363588 / 0.15) 100%)`
- `linear-gradient(in oklab, rgb(86, 27, 182) 0%, rgb(147, 87, 244) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 900, 700, 600, 500 | All interface text, including headings, body copy, navigation, labels, links, and buttons. | Inter |

- **Inter:** Heavy bold headings anchor hierarchy; body and controls are regular. Eyebrows and captions use uppercase; tracking is generally neutral.

### Type scale — Perfect Fourth (ratio ≈ 1.355, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 900 | 0.9 | 0 | — | Inter | Large hero display and oversized promotional headlines. |
| h1 | 60px | 900 | 1.2 | 0 | — | Inter | Primary page headline and prominent section introductions. |
| h2 | 48px | 900 | 1.2 | 0 | — | Inter | Major section headings, including feature and update sections. |
| h3 | 36px | 900 | 1.11 | 0 | — | Inter | Feature titles and secondary card headings. |
| h4 | 30px | 900 | 1.3 | 0 | — | Inter | Smaller card titles and subordinate content headings. |
| body | 14px | 400 | 1.6 | 0 | — | Inter | Default paragraphs, explanatory copy, and supporting text. |
| caption | 12px | 400 | 1.6 | 0 | uppercase | Inter | Compact uppercase metadata and small supporting labels. |
| button | 16px | 400 | 1.6 | 0 | — | Inter | Primary and secondary action labels. |
| nav | 16px | 400 | 1.6 | 0 | — | Inter | Top-level navigation and search control text. |
| link | 24px | 400 | 1.63 | 0 | — | Inter | Prominent inline and standalone content links. |
| eyebrow | 14px | 600 | 1.6 | 0.05em | uppercase | Inter | Uppercase section labels above major headlines. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 2, 4, 8, 12, 14, 16, 20, 24, 32, 40, 48, 64 px.
- Section rhythm 48px · element gap 8px · card padding 20px · max content width 1248px.

Use a centered content frame capped at the measured 1248px maximum, opening with full-bleed hero artwork. The page alternates centered introductions with left-aligned feature narratives and multi-column card groups. Keep the measured comfortable density and 48px section rhythm, with 8px element gaps and generous whitespace between major blocks. The principles band and footer provide the main light-gray interruptions to the white canvas. Align text to the story: centered for onboarding and updates, start-aligned for feature explanations and link-heavy navigation.

## Shape & elevation

- Radius: button `4px` · card `24px` · badge `9999px` · nav `3px` · link `32px` · xs `3px` · sm `4px` · md `6px` · lg `8px` · xl `16px` · 2xl `24px` · pill `9999px`
- Shadow `hairline` (button, text, link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `md` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4p`
- Shadow `hairline-2` (link): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgb(207, 207, 207) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8p`
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat, relying on whitespace and fine #cfcfcf outlines instead of strong shadow. Rounded cards separate content from the page without heavy framing; a few cards use measured soft shadows for lift. Reserve layered gradients and darker backdrops for featured visual panels, not routine controls.

## Imagery

Use detailed, colorful Ethereum-themed illustration rather than conventional photography: the opening scene depicts a lively architectural environment with the Ethereum symbol, while later illustrations and wallet screens clarify use cases. Frame hero art broadly and allow it to span the page width; keep explanatory artwork beside text in feature sections. Card imagery can use soft gradient or blurred visual treatments, but preserve a clean, legible foreground.

## Components

### Primary action

Purple #6c24e0 fill with white label, compact rounded corners, and generous horizontal padding; use for onboarding and key section actions.

### Text link

Purple inline link for contextual navigation; prominent standalone links remain simple and lightly framed.

### Outlined information card

White or transparent card with a 1px #cfcfcf border, rounded corners, and calm black text.

### Purple badge

Small uppercase pill using a pale lavender background and deep amethyst text.

### Principle feature card

Large rounded card within the light-gray principles band; use vivid purple treatment for the highlighted principle among quieter cards.

### Top navigation

White horizontal bar with Ethereum mark, dark navigation labels, and a bordered search control whose icon or active state uses purple.

### Announcement banner

Full-width dark purple event strip with white event details, strong centered promotional text, and a bright purple action.

### Measured component styles

- **Primary button** (“Start here”): background #6c24e0 · text #ffffff · border 1px solid · radius 8px · padding 12px 32px · 400 18px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Secondary button** (“Learn”): transparent background · text #121212 · border 1px solid · radius 4px · padding 8px 16px · 400 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Link** (“Why privacy matters”): transparent background · text #6c24e0 · radius 0px · padding 0px · 400 16px Inter
- **Card** (“TRADITIONAL APPS Your data is their prod”): transparent background · text #121212 · border 1px solid #cfcfcf · radius 24px · padding 16px 24px · 400 16px Inter · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“NEWSLETTERS”): background #ece0ff · text #41128c · border 1px solid · radius 3.35544e+07px · padding 2px 8px · 400 12px Inter · uppercase
- **Navigation item** (“search”): transparent background · text #6c24e0 · radius 0px · padding 0px · 400 16px Inter

## Do

- Use white as the primary canvas.
- Reserve Ethereum purple for actions, links, and selected emphasis.
- Set headings in heavy Inter with clear size hierarchy.
- Give long sections generous whitespace.
- Use illustrations to explain Ethereum concepts.
- Use hairline borders to define cards without visual heaviness.

## Don't

- Do not turn every section into a colored panel.
- Do not use purple for long body paragraphs.
- Do not replace the illustrative identity with generic stock imagery.
- Do not crowd the layout with dense UI chrome.
- Do not add heavy shadows to ordinary cards.
- Do not invent additional palette colors.

## Agent prompt

Build a new Ethereum.org-style page with a white Gallery White (#ffffff) canvas and a centered content frame capped at the measured 1248px maximum. Use Inter throughout: heavy near-black Ink Black (#121212) headings, readable Slate Reading Gray (#616161) body copy, and compact uppercase section labels. Apply Ethereum Violet (#6c24e0) to primary actions, active links, and selected accents; use Deep Amethyst (#41128c) sparingly for badge details. Organize content into spacious editorial sections, alternating centered introductions, text-and-illustration splits, and modular rounded cards. Use Soft Section Gray (#f7f7f7) for occasional bands and the footer, with Quiet Border Gray (#cfcfcf) hairlines instead of heavy framing. Favor detailed Ethereum-themed illustration and purposeful wallet or interface demonstrations. Keep gradients confined to featured visual treatments.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed illustrated scene spanning the page width beneath the announcement. | brand storytelling, visual introduction | large illustrated canvas, Ethereum symbol |
| 2 | hero | Centered single-column headline, supporting copy, and primary action. | clear first step, quick onboarding | oversized bold heading, purple primary button |
| 3 | feature-split | Left-aligned feature statement with supporting metrics alongside. | concept explanation, proof through metrics | uppercase eyebrow, large heading, separated statistic area |
| 4 | feature-grid | Three-column use-case content with illustrations and compact actions. | scenario discovery, carousel-style browsing | illustrated cards, text links, pagination controls |
| 5 | stats | Asymmetric feature composition with proof-point callouts around explanatory text. | reliability reassurance, verifiable proof | floating statistic cards, eyebrow and headline |
| 6 | product-showcase | Centered section introduction above a two-column interactive wallet demonstration. | hands-on exploration, step-by-step tutorial | wallet interface mockup, step indicator, action controls |
| 7 | feature-grid | Light-gray band with centered introduction and a multi-card principle grid. | principle comparison, learn more | highlighted purple card, outlined white cards, rounded corners |
| 8 | other | A wide promotional visual placed between content sections. | event discovery, ticket conversion | dark gradient backdrop, bright action button |
| 9 | content-feed | Centered section heading over three horizontally aligned news cards. | news discovery, browse more | thumbnail blocks, metadata badges, centered more button |
| 10 | feature-grid | Softly tinted, centered introduction above three onboarding cards. | choose a path, guided entry | three cards, image or gradient panels, purple card actions |
| 11 | category-nav | Wide multi-column directory of link groups, aligned to the left. | topic browsing, deep navigation | category headings, dense link lists |
| 12 | footer | Compact light-gray footer with social icons and utility links. | social navigation, policy access | icon row, small legal links, gray background |

## Source CSS custom properties (selected)

```css
--space: calc(.25rem * 6);
--docsearch-modal-background: hsla(0, 0%, 100%);
--docsearch-highlight-color: hsla(263, 88%, 65%);
--docsearch-container-background: hsla(0, 0%, 0%, .75);
--docsearch-text-color: #1c1e21;
--docsearch-hit-color: #444950;
--docsearch-muted-color: #969faf;
--docsearch-hit-background: #fff;
--docsearch-footer-background: #fff;
--docsearch-searchbox-background: #ebedf0;
--docsearch-searchbox-focus-background: #fff;
```

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