CURATED · OPEN · FREE

OpenSea

A high-density, dark-mode dashboard for browsing and trading digital assets.

Web3NFT

OpenSea screenshot

↓ Download design system (18 MB)Open in OpenDesign

Visit: https://opensea.io

📦 Browse pack contents →

01

Identity DNA

marketplacetradingcollectiblesdigital assetsweb3

A bustling digital auction house for the modern era

02

Color

#0786FFAccent

#FFFFFFInk

#ACADA6Ink soft

#141415BG

#26272DBG soft

#1B1D1FBG quiet

#47BB64Muted

rgba(255,255,255,0.08)Line

High contrast white on dark gray for maximum data readability.

03

Typography

grotesque-sans · monospace

display32px · 500
heading20px · 500
body16px · 400
small14px · 400
caption12px · 400

04

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Consistent 4px grid system

05

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

1px solid rgba(255,255,255,0.08)

0px 1px 2px 0px rgba(0,0,0,0.03) · 0px 1px 3px 0px rgba(0,0,0,0.1) · inset 0px 0px 0px 1px rgba(255,255,255,0.08)

06

Layout

1440container

12columns

24pxgutter

768 / 1024breakpoints

Dense data dashboard with left sidebar and right ranking panel.

07

Motion & Interaction

150msmicro

200mssmall

400msmedium

cubic-bezier(0.22, 1, 0.36, 1)easing

opacity fades on hover · scale on interaction · linear gradient shifts

Background color shifts and subtle opacity changes · Immediate visual feedback via scale or color change

08

Components

button Pill-shaped primary button with high contrast, rectangular secondary buttons.
card Dark surface cards with subtle borders and rounded corners.
chip Small rounded tags with subtle background fills for filtering.
input Dark rounded search bar with a prominent shortcut hint.
hero Large full-width carousel showcasing featured collections with overlaid data.

09

Voice & Don'ts

Tone Professional, data-driven, and straightforward
Headlines Bold and concise, focusing on key metrics
CTAs Action-oriented and highly visible

don't use bright white backgrounds — screenshot shows a dark theme with #141415
don't use serif typography — screenshot shows a clean, modern grotesque sans-serif
don't use vibrant multicolor accents everywhere — screenshot shows green and red used specifically for positive/negative metrics
don't use large, loose spacing — screenshot shows a dense, information-heavy dashboard layout
don't use complex, heavy shadows — screenshot shows very subtle or no box shadows
don't use rounded inputs with large radius — screenshot shows inputs with a 16-20px radius, not fully pill-shaped unless specified
Avoid: Playful language
Avoid: Excessive exclamation marks
Avoid: Technical jargon without context

10

Inside the pack — real screenshots

OpenSea — 桌面首屏（hero） — 桌面首屏（hero）

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

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

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

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

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

OpenSea — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

OpenSea is a leading digital marketplace for NFTs, designed with a high-density, dark-mode dashboard interface. The primary colors are a deep dark background (#141415) with crisp white text (#FFFFFF) and subtle gray (#ACADA6) for secondary information. Positive trends are indicated with green (#47BB64) and negative with red (#E24756). The typography utilizes a clean, modern grotesque sans-serif font (gtAmerica) with a monospace variant (gtAmericaMono) for numerical data. The layout is complex and data-driven, featuring a multi-column structure with a persistent left sidebar and a dense right-hand ranking panel. Key design rules: never use light backgrounds; prioritize information density over whitespace; use color strictly for semantic meaning (green/red for data); maintain a professional, minimalist aesthetic without decorative flourishes. Critical donts: don't add unnecessary animations; don't use wide, airy spacing; don't use playful or rounded UI elements that clash with the data-focused UI.

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