--- version: alpha name: OpenSea description: A near-black NFT marketplace built like a trading terminal — GT America in white over inky panels, a left navigation rail, dense sortable data rows, and a calm marine-blue accent with green/red price signals that let the artwork thumbnails carry all the color. colors: # Surface / canvas background: "#141415" # near-black app canvas surface: "#1e1e1f" # panel and card fill, one step up from canvas surface-raised: "#26272d" # hovered row, raised menu surface surface-line: "#34353c" # dark chip fill, divider blocks, secondary button # Ink / text ink: "#ffffff" # primary text and headings on dark ink-secondary: "#acadae" # secondary copy, muted row metadata ink-muted: "#c2d0e0" # cool-gray captions, faint helper text on-accent: "#141415" # near-black text on the marine CTA # Brand accent — the calm marine blue primary: "#83c3ff" # links, sparkline strokes, active states, focus primary-strong: "#2a93ff" # pressed / stronger marine primary-soft: "#1f3347" # tinted marine panel behind active items # Semantic — the price-movement signals success: "#47bb64" # positive price change, up arrows error: "#e24756" # negative price change, down arrows # Borders border: "#2a2b30" # hairline dividers, row separators border-strong: "#34353c" # input outlines, stronger panel edges # Shadow tints (opaque approximations for the elevation table) shadow-soft: "#000002" # was rgba(0,0,2,0.3) — Google format requires hex shadow-ring: "#ffffff" # was rgba(255,255,255,0.08) inset ring — Google format requires hex typography: display: fontFamily: "GT America, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif" fontSize: 32px fontWeight: 500 lineHeight: 1.25 letterSpacing: -0.32px display-sub: fontFamily: "GT America, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 1.25 letterSpacing: -0.2px heading: fontFamily: "GT America, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.15 letterSpacing: 0px body: fontFamily: "GT America, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px body-small: fontFamily: "GT America, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px link: fontFamily: "GT America, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px button: fontFamily: "GT America, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px caption: fontFamily: "GT America, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px mono-label: fontFamily: "GT America Mono, ui-monospace, SFMono-Regular, Menlo, monospace" fontSize: 12px fontWeight: 400 lineHeight: 1.25 letterSpacing: 0.4px mono-data: fontFamily: "GT America Mono, ui-monospace, SFMono-Regular, Menlo, monospace" fontSize: 14px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 20px 2xl: 24px 3xl: 32px rounded: sm: 4px md: 6px lg: 8px xl: 12px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-accent}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 16px button-primary-hover: backgroundColor: "{colors.primary-strong}" textColor: "{colors.on-accent}" button-secondary: backgroundColor: "{colors.surface-line}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 16px button-secondary-hover: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" button-ghost: backgroundColor: "{colors.surface}" textColor: "{colors.ink-secondary}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 10px 16px button-ghost-hover: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 16px card-collection: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 8px data-row: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.mono-data}" rounded: "{rounded.md}" padding: 12px 16px data-row-hover: backgroundColor: "{colors.surface-raised}" textColor: "{colors.ink}" input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body-small}" rounded: "{rounded.lg}" padding: 10px 12px input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" search: backgroundColor: "{colors.surface}" textColor: "{colors.ink-secondary}" typography: "{typography.body-small}" rounded: "{rounded.lg}" padding: 10px 12px nav-rail: backgroundColor: "{colors.background}" textColor: "{colors.ink-secondary}" typography: "{typography.link}" padding: 12px 8px nav-item: textColor: "{colors.ink-secondary}" typography: "{typography.link}" rounded: "{rounded.md}" padding: 8px 12px nav-item-active: backgroundColor: "{colors.surface-line}" textColor: "{colors.ink}" link: textColor: "{colors.primary}" typography: "{typography.link}" padding: 0px badge: backgroundColor: "{colors.surface-line}" textColor: "{colors.ink-secondary}" typography: "{typography.mono-label}" rounded: "{rounded.pill}" padding: 4px 10px badge-up: backgroundColor: "{colors.surface}" textColor: "{colors.success}" typography: "{typography.mono-data}" rounded: "{rounded.sm}" padding: 2px 8px badge-down: backgroundColor: "{colors.surface}" textColor: "{colors.error}" typography: "{typography.mono-data}" rounded: "{rounded.sm}" padding: 2px 8px --- # OpenSea Design System ## Overview OpenSea reads less like an art gallery and more like a Bloomberg terminal that happens to trade JPEGs. The canvas is a deep, near-black charcoal (`{colors.background}`), and the layout is anchored by a persistent left navigation rail — Discover, Collections, Tokens, Swap, Drops, Activity — that frames the marketplace like a desktop trading app rather than a marketing site. Text is overwhelmingly white (`{colors.ink}`) and gray (`{colors.ink-secondary}`) set in **GT America**, and the entire chrome is intentionally desaturated. The reasoning is sound: in a marketplace, the *content* is thousands of colorful NFT thumbnails, so the interface around them stays dark and quiet to let the art supply all the color. The signature move is treating an NFT marketplace as a **data product**. Below the hero banner, the page is dense with sortable tables — collections ranked by floor price, volume, and percentage change — rendered in tight rows with mini sparkline charts. Numeric data leans on **GT America Mono** (`{typography.mono-data}`), the monospaced cut, so price columns align cleanly and read as quantitative. The accent vocabulary is deliberately financial: a calm **marine blue** (`{colors.primary}`) for links, active states, and sparkline strokes, paired with the universal trading signals — **green** (`{colors.success}`) for price up, **red** (`{colors.error}`) for price down. Color in the chrome means *information*, never decoration. The depth language is whisper-quiet and built for dark mode. Surfaces step up in tiny increments — canvas (`{colors.background}`) to panel (`{colors.surface}`) to raised row (`{colors.surface-raised}`) — and elevation is communicated mostly through a 1px inset light ring (`{colors.shadow-ring}`) rather than heavy drop shadows, which read poorly on black. Radii are tight and consistent: 6px on buttons (`{rounded.md}`), 8px on cards and inputs (`{rounded.lg}`), 4px on data chips (`{rounded.sm}`), and pills reserved for status badges and avatars. The result is a marketplace that feels precise, scannable, and trustworthy — a tool for moving assets, not a showroom. **Key Characteristics:** - Deep near-black canvas (`{colors.background}`) — committed dark mode, designed so the art carries the color - Persistent **left navigation rail** framing the app like a desktop trading terminal - **GT America** for UI and headings; **GT America Mono** (`{typography.mono-data}`) for all numeric/price columns - Marketplace-as-data-product: dense sortable tables, floor-price columns, mini sparklines - Calm **marine-blue** accent (`{colors.primary}`) for links, active states, and chart strokes — never loud - Financial color semantics: green (`{colors.success}`) for up, red (`{colors.error}`) for down - Tiny stepped surface system (`{colors.surface}` → `{colors.surface-raised}`) for hover and depth on black - Elevation via a 1px inset light ring (`{colors.shadow-ring}`), not heavy shadows that fail on dark - Tight, consistent radii: 6px buttons, 8px cards, 4px data chips — no large playful corners - Primary CTA is marine blue with **near-black text** (`{colors.on-accent}`) for contrast against the dark UI - Secondary buttons use a flat dark chip fill (`{colors.surface-line}`) that hovers one shade lighter - White and gray text hierarchy does the work; saturated color in the chrome always signals meaning ## Colors ### Surface & Canvas - **Near-Black** (`{colors.background}`): The dominant app canvas and the base for data rows. - **Panel** (`{colors.surface}`): Card and panel fill, one subtle step up from the canvas. - **Raised** (`{colors.surface-raised}`): Hovered rows and raised menu surfaces — the next step up. - **Dark Chip** (`{colors.surface-line}`): Secondary-button fill, dark chips, and active nav backgrounds. ### Ink / Text - **White** (`{colors.ink}`): Primary text and headings. - **Gray** (`{colors.ink-secondary}`): Secondary copy and muted row metadata — the workhorse second tier. - **Cool Gray** (`{colors.ink-muted}`): Faint captions and lowest-emphasis helper text, slightly blue. - **On Accent** (`{colors.on-accent}`): Near-black text on the marine CTA. ### Brand Accent - **Marine Blue** (`{colors.primary}`): Links, active states, sparkline strokes, and focus. Calm, never neon. - **Marine Strong** (`{colors.primary-strong}`): Pressed and hover state for marine surfaces. - **Marine Tint** (`{colors.primary-soft}`): Subtle tinted panel behind active or selected items. ### Semantic (Price Signals) - **Green / Red** (`{colors.success}`, `{colors.error}`): The trading signals — green for positive price change and up arrows, red for negative change and down arrows. Used everywhere prices appear. ### Borders & Shadow Tints - **Hairline** (`{colors.border}`): Row separators and dividers. - **Strong Border** (`{colors.border-strong}`): Input outlines and stronger panel edges. - **Shadow Soft / Ring** (`{colors.shadow-soft}`, `{colors.shadow-ring}`): Opaque stand-ins for the soft drop shadow and the 1px inset light ring (the originals were rgba — flattened for the Google spec). ## Typography ### Font Family - **Primary**: `GT America`, with fallbacks `ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial`. Carries all display, body, and UI text. - **Monospace**: `GT America Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`. Reserved for numeric data — floor prices, volumes, percentages — and uppercase mono labels, so columns align and read quantitatively. - **Weight strategy**: 400 for body, 500 for emphasis/links/buttons, 600 for headings. The system stays in a tight, restrained weight band; it never goes heavy. ### Hierarchy The full type scale lives in the `typography:` token block. Reference tokens directly. | Token | Use | |---|---| | `display` | 32px / 500 / -0.32px — page and banner titles | | `display-sub` | 20px / 500 — sub-titles, section leads | | `heading` | 16px / 600 — card and section headings | | `body` | 16px / 400 — standard body | | `body-small` | 14px / 400 — dense supporting copy, inputs | | `link` | 14px / 500 — nav items and inline links | | `button` | 14px / 500 — button labels | | `caption` | 12px / 400 — metadata, helper text | | `mono-label` | 12px / GT America Mono / uppercase / 0.4px — column headers, category labels | | `mono-data` | 14px / GT America Mono / 500 — floor prices, volumes, percentages | ### Principles - **Mono is for numbers**: every price, volume, and percentage uses GT America Mono so columns align — the brand's quantitative voice. - **Sans is for everything else**: GT America handles UI, headings, and prose. - **Restrained weights**: 400/500/600 only. The hierarchy comes from size and color, not heavy bold. ## Layout ### Spacing System The full scale is in the `spacing:` token block. Base unit: 8px, with 4px and 12px sub-steps for dense table internals. The personality is tight and information-dense — rows and columns are packed efficiently, the way a data tool should be. ### Grid & Container - Full-width app shell with a fixed left navigation rail (~220px) and a fluid content area - Below the hero banner, content is dominated by multi-column sortable tables and collection grids - Collection grids use compact thumbnail cards; data tables use tight mono-aligned rows ### Whitespace Philosophy - **Dense by design**: this is a data product — rows pack tightly, whitespace is economical - **Let the art breathe, not the chrome**: thumbnails get clean framing; the surrounding UI stays compact - **The rail is permanent**: navigation is always present, framing the app like a desktop terminal ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, hairline `{colors.border}` only | The canvas, data rows, most chrome | | Inset Ring (Level 1) | `inset 0 0 0 1px` light ring (`{colors.shadow-ring}`) | Cards and panels — the primary dark-mode separation device | | Raised (Level 2) | Surface step to `{colors.surface-raised}` + faint `0 1px 2px` | Hovered rows, raised menus | | Dialog (Level 3) | `0 10px 30px` soft (`{colors.shadow-soft}`) | Modals, dropdowns, wallet sheets | | Focus Ring | 1px marine (`{colors.primary}`) ring | Focused inputs and active controls | **Shadow Philosophy**: On a near-black canvas, drop shadows mostly disappear, so OpenSea separates surfaces by *lightening* them in tiny steps and outlining cards with a 1px inset light ring (`{colors.shadow-ring}`) rather than casting dark shadows. Real drop shadows are reserved for true overlays — modals, dropdowns, and the wallet sheet — where a soft, wide cast (`{colors.shadow-soft}`) lifts them off the dense table grid below. ## Shapes The full radius scale is in the `rounded:` token block. | Token | Value | Use | |---|---|---| | `sm` | 4px | Data chips, price tags, small thumbnails | | `md` | 6px | Buttons, nav items — the default interactive radius | | `lg` | 8px | Cards, inputs, search, panels | | `xl` | 12px | Larger containers, banner cards | | `pill` | 9999px | Status badges, avatars, circular controls | The radius system is tight and consistent — 6px on buttons, 8px on cards, 4px on data chips. Pills are reserved for status badges and avatars. Nothing is oversized or playful; the corners read as precise and tool-like. ## Components The complete component spec lives in the `components:` token block. ### Buttons - **`button-primary`** — Marine blue (`{colors.primary}`) fill, near-black text (`{colors.on-accent}`), 6px radius. The main CTA. Hover deepens to `{colors.primary-strong}`. - **`button-secondary`** — Dark chip (`{colors.surface-line}`) fill, white text. The neutral action. Hover lightens to `{colors.surface-raised}`. - **`button-ghost`** — Panel (`{colors.surface}`) fill, gray text. Low-emphasis. Hover lightens and whitens the text. ### Cards - **`card`** / **`card-collection`** — Panel fill, 8px radius, separated by a 1px inset light ring. Collection cards use tighter 8px padding to frame thumbnails. ### Data Rows - **`data-row`** — The marketplace table row: canvas fill, mono data type (`{typography.mono-data}`), 6px radius. **`data-row-hover`** lightens to `{colors.surface-raised}`. ### Inputs - **`input`** / **`search`** — Panel fill, `{colors.border-strong}` outline, 8px radius. **`input-focus`** holds the fill and adds a marine focus ring. ### Navigation - **`nav-rail`** — The persistent left rail: canvas background, gray items. **`nav-item-active`** fills with the dark chip color and whitens the text. ### Links & Badges - **`link`** — Marine blue text, no underline until hover. - **`badge`** — Dark-chip fill, gray mono label, pill radius. **`badge-up`** / **`badge-down`** carry green / red mono data for price movement on a small 4px chip. ## Do's and Don'ts ### Do - Keep the canvas deep near-black (`{colors.background}`) and the chrome desaturated so the art supplies the color - Frame the app with a persistent **left navigation rail**, terminal-style - Use **GT America Mono** (`{typography.mono-data}`) for every price, volume, and percentage so columns align - Reserve the marine accent (`{colors.primary}`) for links, active states, and sparkline strokes - Use green (`{colors.success}`) and red (`{colors.error}`) only as price-movement signals, everywhere prices appear - Separate dark surfaces by stepping them lighter (`{colors.surface}` → `{colors.surface-raised}`) and outlining with the 1px inset ring (`{colors.shadow-ring}`) - Give the primary CTA near-black text (`{colors.on-accent}`) on the marine fill for contrast - Keep radii tight and consistent: 6px buttons, 8px cards, 4px data chips - Let data density be the personality — pack rows efficiently ### Don't - Don't lighten the marketplace to a white canvas — it is committed dark mode - Don't add a loud or neon accent; the marine blue stays calm and informational - Don't set numeric data in the proportional sans — prices and percentages belong in GT America Mono - Don't rely on heavy drop shadows to separate cards on black — use surface steps and the inset ring - Don't deploy green/red for anything but price movement and up/down signals - Don't reach for large or pill-shaped buttons — the system tops out at 8px on cards and 6px on buttons - Don't crowd out the art thumbnails with colorful chrome — color in the UI always means information - Don't go heavier than 600 weight — hierarchy comes from size and color --- ## Responsive Behavior ### Breakpoints *(The site exposes a dense set of stops; the table below groups them into the standard tiers the layout behaves to.)* | Name | Width | Key Changes | |---|---|---| | Mobile | <640px | Left rail collapses to a bottom bar / hamburger; tables reduce to fewer columns (name, floor, change); collection grid drops to 1-2 columns | | Tablet | 640–1023px | Rail may collapse to icons; tables show a mid column set; grid at 2-3 columns | | Desktop | 1024–1279px | Full left rail; multi-column sortable tables; 4-5 column collection grids | | Large | ≥1280px | Wide content area; maximum table columns and grid density | ### Touch Targets - Nav items and buttons run ~36-40px tall for comfortable tapping - Data rows keep generous vertical padding despite the dense layout; sort headers stay tappable ### Collapsing Strategy - **Navigation**: persistent left rail → icon rail → bottom bar / hamburger as width shrinks - **Tables**: progressively drop lower-priority columns (volume, 7d change) before the core ones (name, floor, 24h change) - **Grids**: collection thumbnail grids reduce column count - **Type**: display scales down modestly; mono data columns stay legible at 12-14px ### Image Behavior - NFT thumbnails are the primary imagery — square, lazy-loaded, framed in 4-8px radius cards that reflow as grid children --- ## Agent Prompt Guide ### Quick Color Reference - Background: Near-Black (`{colors.background}`) - Text: White (`{colors.ink}`) - Brand accent: Marine Blue (`{colors.primary}`) - Secondary text: Gray (`{colors.ink-secondary}`) - Border: Hairline (`{colors.border}`) - Price up / down: Green (`{colors.success}`) / Red (`{colors.error}`) - Primary CTA: Marine Blue (`{colors.primary}`) with near-black text (`{colors.on-accent}`) ### Example Component Prompts - "Create a dark app shell: near-black (`{colors.background}`) canvas with a fixed ~220px left navigation rail (`{colors.background}`) listing Discover, Collections, Tokens, Swap, Drops, Activity in GT America at 14px weight 500 (`{colors.ink-secondary}`), the active item filled with the dark chip color (`{colors.surface-line}`) and white text" - "Build a marketplace data table row: near-black (`{colors.background}`) base, collection name in GT America white (`{colors.ink}`), floor price and 24h change in GT America Mono (`{typography.mono-data}`) with green (`{colors.success}`) for up and red (`{colors.error}`) for down, a small marine (`{colors.primary}`) sparkline, 6px radius; hover lightens to `{colors.surface-raised}`" - "Create the primary button: marine blue (`{colors.primary}`) fill, near-black text (`{colors.on-accent}`), GT America weight 500, `{rounded.md}` (6px) radius, 10px 16px padding, hover deepens to `{colors.primary-strong}`" - "Build a collection card: panel (`{colors.surface}`) fill, 8px radius (`{rounded.lg}`), 1px inset light ring (`{colors.shadow-ring}`), a square NFT thumbnail at 4px radius, name in white (`{colors.ink}`) and floor price in GT America Mono below" - "Design a dark search input: panel (`{colors.surface}`) fill, `{colors.border-strong}` outline, 8px radius, gray placeholder (`{colors.ink-secondary}`); on focus add a 1px marine (`{colors.primary}`) ring" - "Render a price-change chip: panel (`{colors.surface}`) fill, GT America Mono text in green (`{colors.success}`) for a positive change, 4px radius (`{rounded.sm}`), 2px 8px padding" ### Iteration Guide 1. Start on a deep near-black canvas (`{colors.background}`) with a persistent left nav rail. If you went light, stop — OpenSea is committed dark mode. 2. Keep the chrome desaturated. Color in the UI means information; the NFT thumbnails supply the rest. 3. Set every price, volume, and percentage in GT America Mono (`{typography.mono-data}`) so columns align. UI and prose use GT America. 4. Ration the marine accent (`{colors.primary}`) to links, active states, and chart strokes. Use green/red only for price movement. 5. Separate dark surfaces by stepping them lighter (`{colors.surface}` → `{colors.surface-raised}`) and outlining with a 1px inset ring (`{colors.shadow-ring}`) — not heavy shadows. 6. Keep radii tight: 6px buttons (`{rounded.md}`), 8px cards (`{rounded.lg}`), 4px data chips (`{rounded.sm}`). 7. Embrace density — pack data rows efficiently. The terminal feel is the brand. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by OpenSea. Brand names and trademarks belong to their respective owners.