CURATED · OPEN · FREE

Ethereum

A calm, educational hub for the Ethereum ecosystem.

CryptoFoundation

↓ Download design system (27 MB)Open in OpenDesign

Visit: https://ethereum.org

📦 Browse pack contents →

Identity DNA

decentralizedglobalsovereignnetworkinfrastructure

A clean, instructional public utility portal for a decentralized network.

Color

#6C24E0Accent

#121212Ink

#616161Ink soft

#FFFFFFBG

#F7F7F7BG soft

#F2EBFFBG quiet

#8C8C8CMuted

rgba(207, 207, 207, 1)Line

White-dominant layout with purple accents and soft grayscale hierarchy.

Typography

humanist-sans · mono

display56px · 900

Spacing

4px

8px

14px

16px

24px

32px

48px

1.6 multiplier

Surfaces

sm · 4px

md · 8px

lg · 24px

pill · 999px

1px solid rgba(207, 207, 207, 1)

0 1px 1px 0 rgba(0, 0, 0, 0.1)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Full-width hero image, centered text content below.

Motion & Interaction

150msmicro

300mssmall

500msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Color transitions on hover · Transform/scale on interactive elements

Color transition on interactive elements. · Visual feedback via transform.

Components

button Purple pill-shaped button with white text.
card Light bordered card with rounded corners and soft shadow.
chip Pill-shaped tab selector.
input Search bar with icon and keyboard shortcut.
hero Full-width illustration with centered bold headline.

Voice & Don'ts

Tone Educational, accessible, and authoritative.
Headlines Bold, declarative, and user-centric.
CTAs Direct and encouraging, e.g., 'Start here'.

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.
Avoid: Technical jargon
Avoid: Complexity
Avoid: Dark themes
Avoid: Aggressive marketing

Inside the pack — real screenshots

Ethereum — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko