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

# OpenSea · Design System

> A dark trading floor for onchain discovery

**Theme:** dark · **Industry:** crypto · **Source:** https://opensea.io/ · **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._

OpenSea presents discovery, market activity, and NFT collections in a compact dark trading interface. Bright collection artwork and green or red market signals stand out against restrained surfaces and fine borders.

## North star

Treat the dark interface as a quiet trading frame: let artwork attract attention and use restrained color to make market signals instantly legible.

## Overview

The page uses a near-black canvas as a quiet frame for a dense stream of market information and colorful collection artwork. White establishes the primary reading hierarchy, while muted gray handles secondary labels and supporting navigation. Green and red are reserved for market movement, status, and other high-signal details rather than broad decorative fills. GT America supplies the compact sans-serif interface; GT America Mono marks terse uppercase labels and data-like captions. The desktop composition pairs a narrow vertical icon rail with a wide discovery area and a market list at the right. Rounded pills group filters, while bordered cards organize token performance and collection previews. Large media panels provide visual contrast, often with dark gradients overlaying artwork so text remains legible. Consistent spacing, restrained borders, and small-radius cards keep the crowded marketplace scannable without making it feel like a conventional storefront.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary navigation, headings, collection names, prices, and high-contrast interface text. |
| Abyss Black | `#101011` | `--color-abyss-black` | surface | Main application surface and dark fades beneath media; the foundational interface background. |
| Market Green | `#47bb64` | `--color-market-green` | accent | Positive price movement, active minting badges, and selected positive status indicators. |
| Slate Canvas | `#1b1d1f` | `--color-slate-canvas` | brand | Page canvas and select card surfaces, separating content areas from the deeper application background. |
| Pitch Black | `#080808` | `--color-pitch-black` | surface | Deepest secondary background and the dark endpoint of media fades. |
| Quiet Silver | `#acadae` | `--color-quiet-silver` | neutral | Muted navigation, supporting descriptions, subtitles, and secondary market information. |
| Divider Charcoal | `#232324` | `--color-divider-charcoal` | neutral | Fine card, button, navigation, and footer borders that define surfaces without bright outlines. |
| Graphite Edge | `#404143` | `--color-graphite-edge` | neutral | Subtle secondary edge detail; use sparingly for supporting outlines rather than prominent structure. |
| Smoked Steel | `#2d2f30` | `--color-smoked-steel` | surface | Raised navigation and button details, plus understated supporting interface fills. |
| Blue Charcoal | `#26272d` | `--color-blue-charcoal` | surface | Selected filter and dark media-adjacent interface details; keep it distinct from the main canvas. |
| Footer Coal | `#141415` | `--color-footer-coal` | surface | Deep footer and navigation surfaces, giving lower-priority interface regions a subtle tonal shift. |
| Market Coral | `#e24756` | `--color-market-coral` | semantic | Negative price movement and loss indicators; a compact status signal, not a broad decorative color. |

### Semantic aliases

`--color-canvas` → `#1b1d1f` (Slate Canvas) · `--color-surface` → `#101011` (Abyss Black) · `--color-surface-2` → `#080808` (Pitch Black) · `--color-surface-3` → `#2d2f30` (Smoked Steel) · `--color-surface-4` → `#141415` (Footer Coal) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#acadae` (Quiet Silver) · `--color-border` → `#232324` (Divider Charcoal) · `--color-accent` → `#47bb64` (Market Green) · `--color-accent-2` → `#e24756` (Market Coral)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#1b1d1f` | 16.91:1 | AAA |
| `#ffffff` | `#101011` | 19.02:1 | AAA |
| `#ffffff` | `#080808` | 20.03:1 | AAA |
| `#ffffff` | `#2d2f30` | 13.45:1 | AAA |
| `#acadae` | `#1b1d1f` | 7.52:1 | AAA |
| `#acadae` | `#101011` | 8.46:1 | AAA |
| `#acadae` | `#080808` | 8.91:1 | AAA |
| `#acadae` | `#2d2f30` | 5.99:1 | AA |
| `#47bb64` | `#1b1d1f` | 6.89:1 | AA |
| `#47bb64` | `#101011` | 7.75:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 25%, rgba(0, 0, 0, 0.65) 65%, rgba(0, 0, 0, 0.8) 100%)`
- `linear-gradient(in oklab, rgba(0, 0, 0, 0) 0%, rgb(16, 16, 17) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| gtAmerica | `--font-body` | webfont | 400, 500 | Primary interface type for navigation, headings, body copy, buttons, collection names, and prices. | Inter |
| gtAmericaMono | `--font-mono` | webfont | 400, 500 | Monospaced code and compact uppercase market or status captions. | IBM Plex Mono |

- **gtAmerica:** Measured weights 400 and 500; clean sentence case, with compact labels and clear hierarchy rather than expressive display styling.
- **gtAmericaMono:** Measured weights 400 and 500; use for short uppercase labels and data-oriented details, not long reading text.

### Type scale — Perfect Fifth (ratio ≈ 1.512, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 32px | 500 | 1.5 | 0 | — | gtAmerica | Primary page or feature heading, set in GT America medium. |
| h2 | 20px | 500 | 1.25 | 0 | — | gtAmerica | Section titles such as Trending Tokens and Featured Drops. |
| body | 14px | 400 | 1.5 | 0 | — | gtAmerica | Collection details, supporting descriptions, and interface copy. |
| caption | 12px | 400 | 1.25 | 0 | uppercase | gtAmericaMono | Compact uppercase labels for metrics and status information. |
| button | 14px | 400 | 1.5 | 0 | — | gtAmerica | Filter pills and action controls. |
| nav | 16px | 400 | 1.5 | 0 | — | gtAmerica | Main navigation labels and category links. |
| code | 14px | 400 | 1.5 | 0 | — | gtAmericaMono | Monospaced data details where a technical readout is needed. |

## Spacing & layout

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

The desktop page combines a slim icon rail, a broad discovery workspace, and a right-side market list. Within the workspace, a category-filter row precedes a large collection feature, followed by compact token cards and further discovery sections. Keep content aligned to a consistent left edge and use a multi-column card arrangement where the available width allows. Section changes are clear but economical; density comes from many visible listings, not oversized text or generous empty bands. No page maximum width was measured.

## Shape & elevation

- Radius: button `9999px` · card `8px` · media `4px` · badge `4px` · nav `50%` · link `4px` · xs `4px` · sm `8px` · md `12px` · pill `9999px`
- Shadow `inset` (other, media, card): `rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset, 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 `hairline` (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.03) 0px 1px 2px 0px`
- Shadow `sm` (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 1px 2px -1px, rgba(0, 0, 0, 0.1) 0px 1px `
- Motion: standard transition `0.2s ease-out` on interactive elements.

The page relies on tonal surfaces and fine borders more than prominent shadows. Cards use restrained outlines and measured rounded corners; an inset light edge appears on some media and card surfaces. Keep layers legible through subtle background shifts, with artwork, overlays, and interface controls stacked clearly rather than separated by heavy elevation.

## Imagery

Artwork is the visual centerpiece: collection banners, token thumbnails, and editorial NFT cards use varied, saturated imagery against the dark interface. The leading collection feature uses a wide framed image with overlaid title, creator, and market metrics; smaller cards crop imagery tightly. Some artwork includes illustrated or pixel-art subjects, but treat these colors as content, not brand palette. Dark gradients support text contrast over media.

## Components

### Icon rail

A slim, dark vertical navigation strip with stacked white or muted icons and an emphasized OpenSea mark.

### Search and account bar

A compact top bar pairs a bordered search field on the left with sign-in and account controls on the right.

### Filter pills

Rounded category and market filters use subtle dark fills or fine #232324 borders, with white active text and muted inactive text.

### Featured collection

A wide artwork panel layers collection title, creator, metrics, and thumbnail previews over the image with a dark readability fade.

### Market cards

Compact bordered cards combine token artwork, name, value, and a small green or red performance signal.

### Collection market list

The right column lists collection thumbnails, names, floor prices, and movement in a tightly aligned, scannable format.

### Status badge

A small uppercase monospaced label uses #47bb64 text and a matching fine border for minting status.

### Measured component styles

- **Primary button** (“Discover”): background #26272d · text #ffffff · radius 3.35544e+07px · padding 8px · 400 16px gtAmerica
- **Secondary button** (“Memes”): transparent background · text #acadae · border 1px solid #232324 · radius 3.35544e+07px · padding 0px 12px · 400 14px gtAmerica
- **Link** (“Statements By visualizevalue FLOOR PRICE”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px gtAmerica
- **Input**: transparent background · text #ffffff · radius 0px · padding 0px · 400 14px gtAmerica
- **Card** (“Doppler $22.1M -16.7%”): transparent background · text #ffffff · border 1px solid #232324 · radius 8px · padding 0px 16px 0px 0px · 400 16px gtAmerica · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Badge** (“MINTING NOW”): transparent background · text #47bb64 · border 1px solid #47bb64 · radius 4px · padding 4px 6px · 400 12px gtAmericaMono · uppercase
- **Navigation item** (“Discover”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px gtAmerica

## Do

- Use #101011 and #1b1d1f as the main dark interface layers.
- Keep artwork prominent and reserve negative space around its overlaid text.
- Use #47bb64 for positive movement and #e24756 for negative movement.
- Separate dense listings with fine #232324 borders.
- Use GT America for interface text and GT America Mono for compact captions.
- Keep filters pill-shaped and card surfaces subtly rounded.

## Don't

- Do not turn artwork colors into the interface palette.
- Do not use bright accent colors for large background bands.
- Do not replace market signals with decorative gradients.
- Do not make every text label equally prominent.
- Do not rely on heavy shadows to distinguish cards.
- Do not make the dense marketplace feel like a sparse editorial landing page.

## Agent prompt

Build a new OpenSea-style marketplace page as a dark, information-dense discovery interface. Use Abyss Black (#101011) for the main application surface and Slate Canvas (#1b1d1f) for supporting regions. Set interface text in white (#ffffff), secondary copy in Quiet Silver (#acadae), and keep borders close to Divider Charcoal (#232324). Use Market Green (#47bb64) and Market Coral (#e24756) only for positive and negative market signals. Use GT America or a close sans-serif substitute for navigation and content, with a monospace face for compact uppercase metric labels. Arrange navigation, filters, a large artwork feature, compact market cards, and a collection list in aligned desktop columns. Let varied NFT imagery provide color; apply dark overlays where text sits on media. Prefer rounded pills, restrained card corners, fine borders, and minimal shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | Desktop discovery dashboard with a left icon rail, broad collection feed, and right-side market list. | Search and sign-in, Category filters, Market price scanning, Collection discovery | Dark navigation rail, Rounded filter pills, Artwork-led feature card, Compact bordered data cards, Green and red movement indicators |

## Source CSS custom properties (selected)

```css
--color-white: 255 255 255;
--color-black: 0 0 0;
--color-text-primary: 255 255 255;
--color-text-secondary: 172 173 174;
--color-text-tertiary: 67 68 71;
--color-bg-app: 16 16 17;
--color-bg-app-root: 16 16 17;
--color-bg-primary: 20 20 21;
--color-bg-secondary: 23 24 26;
--color-bg-careers: 8 8 8;
--color-bg-additional-1: 27 29 31;
--color-bg-additional-2: 38 39 45;
--color-bg-additional-3: 60 61 64;
--color-bg-contrast-1: 137 138 140;
--color-bg-contrast-2: 149 149 151;
--color-border-1: 38 39 45;
--color-border-2: 52 53 60;
--color-border-3: 67 68 71;
--color-bg-primary-transparent: rgb(255 255 255 / 2%);
--color-bg-secondary-transparent: rgb(255 255 255 / 4%);
--color-bg-additional-1-transparent: rgb(255 255 255 / 8%);
--color-bg-additional-2-transparent: rgb(255 255 255 / 12%);
--color-bg-additional-3-transparent: rgb(255 255 255 / 16%);
--color-bg-contrast-1-transparent: rgb(255 255 255 / 24%);
--color-bg-contrast-2-transparent: rgb(255 255 255 / 32%);
--color-border-1-transparent: rgb(255 255 255 / 8%);
--color-border-2-transparent: rgb(255 255 255 / 12%);
--color-border-3-transparent: rgb(255 255 255 / 16%);
--color-border-special-inset-1: rgb(255 255 255 / 8%);
--color-overlay: rgb(0 0 0 / 60%);
--color-legendary: 255 138 0;
--color-legendary-transparent: rgb(255 138 0 / 30%);
--color-legendary-transparent-1: rgb(255 138 0 / 8%);
--color-epic: 211 88 255;
--color-epic-transparent: rgb(211 88 255 / 30%);
--color-epic-transparent-1: rgb(211 88 255 / 8%);
--color-rare: 0 163 255;
--color-rare-transparent: rgb(0 163 255 / 30%);
--color-rare-transparent-1: rgb(0 163 255 / 8%);
--color-common: 137 138 140;
```

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