---
name: OpenSea
description: "OpenSea represents the 'pro' end of marketplace design, balancing complex real-time data with a clean, dark UI that remains legible at high densities."
version: alpha

colors:
  background: "#141415"
  primary: "#FFFFFF"
  secondary: "#ACADA6"
  tertiary: "#0786FF"
  neutral: "#47BB64"
  bg-soft: "#26272D"
  bg-quiet: "#1B1D1F"
  muted-soft: "#83C3FF"
  line: "rgba(255,255,255,0.08)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 32px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 20px
    lineHeight: 1.2
    fontWeight: 500
    letterSpacing: "normal"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"
  small:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 1.46
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

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

*A bustling digital auction house for the modern era*

## Colors

High contrast white on dark gray for maximum data readability.

- **Background (`#141415`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#ACADA6`)** — uses `ink-soft` token
- **Accent (`#0786FF`)** — uses `accent` token
- **Muted (`#47BB64`)** — uses `muted` token
- **Borders (`rgba(255,255,255,0.08)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

## Layout

Dense data dashboard with left sidebar and right ranking panel.

*Rhythm:* Consistent 4px grid system

## Elevation & Depth

- 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)
- Borders: 1px solid rgba(255,255,255,0.08)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## 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.

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```