---
version: alpha
name: OpenSea
description: "Near-black rooms divided by hairlines, pill controls, numerals set in monospace."
colors:
  on-surface-variant: "#ACADAE"
  surface: "#141415"
  outline: "#34353C"
  error: "#E24756"
  on-surface: "#FFFFFF"
  primary: "#0786FF"
  root: "#101011"
  raised: "#1B1D1F"
  line-icon-surface: "#26272D"
  hairline: "rgba(255, 255, 255, 0.08)"
  ghost-fill: "rgba(255, 255, 255, 0.02)"
  ghost-fill-strong: "rgba(255, 255, 255, 0.12)"
  success: "#47BB64"
  link: "#83C3FF"
  scrim: "rgba(0, 0, 0, 0.6)"
  media-black: "#000000"
typography:
  display:
    fontFamily: gtAmerica
    fontSize: 32px
    fontWeight: 400
    lineHeight: 40px
    letterSpacing: 0em
  display-2:
    fontFamily: gtAmerica
    fontSize: 32px
    fontWeight: 400
    lineHeight: 48px
    letterSpacing: 0em
  heading-md:
    fontFamily: gtAmerica
    fontSize: 24px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: 0em
  heading-sm:
    fontFamily: gtAmerica
    fontSize: 20px
    fontWeight: 400
    lineHeight: 25px
    letterSpacing: 0em
  heading-sm-2:
    fontFamily: gtAmerica
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
    letterSpacing: 0em
  lead-link:
    fontFamily: gtAmerica
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0em
  body-ui:
    fontFamily: gtAmerica
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0em
  metric:
    fontFamily: gtAmericaMono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 21px
    letterSpacing: 0em
  stat:
    fontFamily: gtAmericaMono
    fontSize: 14px
    fontWeight: 400
    lineHeight: 17.5px
    letterSpacing: 0em
  caption:
    fontFamily: gtAmerica
    fontSize: 12px
    fontWeight: 400
    lineHeight: 18px
    letterSpacing: 0em
  micro-label:
    fontFamily: gtAmericaMono
    fontSize: 12px
    fontWeight: 400
    lineHeight: 15px
    letterSpacing: 0em
  swap-input:
    fontFamily: gtAmericaMono
    fontSize: 24px
    fontWeight: 400
    lineHeight: 36px
    letterSpacing: 0em
rounded:
  every-control-avatar-segmented-track: 9999px
  thumbnail-table-cell-status-badge: 4px
  card-drop-tile-art-plate: 8px
  search-field-small-panel: 6px
  modal-carousel-frame-chain-cluster: 12px
  split-cell: 8px
  stacked-card-halves: 4px
  hairline-tile: 2px
  micro-indicator: 3px
spacing:
  2xs: 2px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  xl: 16px
  2xl: 20px
  3xl: 24px
  4xl: 32px
  5xl: 48px
---
# OpenSea — Style Reference

> Near-black rooms divided by hairlines, pill controls, numerals set in monospace.

**Theme:** dark

One system runs the whole capture: the same near-black shell wraps the discovery home, the market tables and the swap panel, and they share a canvas. The palette is a luminance ladder from `#101011` up to `#26272D`, with two inks — white for what matters and `#ACADAE` for everything else — and saturated paint reserved for meaning: green for gain, red for loss, blue for a link and a single filled action. Type splits in two with no middle ground: gtAmerica carries language, gtAmericaMono carries every price, percentage and timestamp, and the census records `normal` letter-spacing on every row it lists, from `"Floor price"` to `"Swap everything"`. Hierarchy comes from weight 500 against 400 and from a line-height that drops from 1.5 to 1.25 the moment text becomes a label. Every control in the layout census is a pill at radius 9999px; cards and panels get 4px, 6px, 8px or 12px, so corner shape alone says what is clickable. Depth is a luminance step plus a one-pixel inset ring — the shadows that exist read as a seam, not a lift.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Root | `#101011` | `--color-bg-root` | The plane under everything: its carriers are `html`, `footer` and the modal shell `.relative.z-modal.rounded-xl.border`. |
| Canvas | `#141415` | `--color-bg-primary` | The working surface: icon rail, sticky nav, table cells, badges, modal halves. The most-painted fill in the inventory. |
| Raised | `#1B1D1F` | `--color-bg-elevated` | The step up from canvas — segmented tracks on `.inline-flex.rounded-full.gap-1.overflow-hidden`, selected secondary buttons, carousel slides. |
| Line / Icon Surface | `#26272D` | `--color-border-1` | Double duty: the 1px structural line on nav, pills and panels, and the fill of round icon buttons. |
| Control Line | `#34353C` | `--color-border-2` | The brighter 1px border, carried on buttons filled `#1B1D1F`. It marks a raised control, not a section edge. |
| Text Primary | `#FFFFFF` | `--color-text-primary` | Names, numbers, headings; also the fill behind circular avatars on `.aspect-square.overflow-hidden.shrink-0.object-cover`. |
| Text Secondary | `#ACADAE` | `--color-text-secondary` | Labels, inactive pills, nav links, column headers — the ink for anything the eye should skip. |
| Hairline | `rgba(255, 255, 255, 0.08)` | `--color-border-1-transparent` | The 1px divider and the inset ring. Translucent, so it survives over artwork as well as canvas. |
| Ghost Fill | `rgba(255, 255, 255, 0.02)` | `--color-bg-ghost` | A barely-there wash for cards and unselected filter pills — presence without a new grey. |
| Ghost Fill Strong | `rgba(255, 255, 255, 0.12)` | `--color-border-ghost-strong` | The border of a selected ghost pill — `"All"` and `"NFTs"` — one notch brighter than the hairline. |
| Success | `#47BB64` | `--color-success-1` | Positive deltas, live and minting dots, the `"New"` badge border. Direction and liveness, not decoration. |
| Error | `#E24756` | `--color-error-1` | Negative deltas — `"-24.6%"` on `.font-mono.text-error-1.cursor-pointer` — carried as text 68 times, with no fill or border row. |
| Link | `#83C3FF` | `--color-link` | Inline links inside data views, on `.cursor-pointer.no-underline.text-link.hover:text-link-hover`. Softer than the action blue, so it sits below a CTA. |
| Action Blue | `#0786FF` | `--color-action` | The filled CTA colour, on `"Explore Solana"` and the swap panel's `"Connect Wallet"`. Its rarity is the signal. |
| Scrim | `rgba(0, 0, 0, 0.6)` | `--color-overlay` | The modal backdrop. A separate `rgba(0, 0, 0, 0.5)` wash carries a 10px blur behind floating chrome. |
| Media Black | `#000000` | `--color-media-bg` | The letterbox behind video-aspect media, and the base of the hero scrim's gradient stops. |

## Tokens — Typography

### gtAmerica — the language face: nav, headings, buttons, prose · `--font-sans`
- **Substitute:** Inter, Neue Haas Grotesk Display, Suisse Int'l
- **Weights:** 400, 500
- **Sizes:** 12px, 14px, 16px, 20px, 24px, 32px
- **Line height:** 18px at 12px, 21px at 14px, 24px at 16px, 25–30px at 20px, 30px at 24px, 40–48px at 32px
- **Letter spacing:** `normal` at every size the census measures, including the 32px display rows `"Swap everything"` and `"QUOTRONS"`
- **Role:** Carries every word that is not a number — nav labels, section headings, button text, the swap page's display line and its subtitle.

### gtAmericaMono — the numeral face: prices, deltas, volumes, micro-labels · `--font-mono`
- **Substitute:** JetBrains Mono, IBM Plex Mono, Roboto Mono
- **Weights:** 400, 500
- **Sizes:** 12px, 14px, 24px
- **Line height:** 15px and 18px at 12px, 17.5px and 21px at 14px, 36px at 24px
- **Letter spacing:** `normal`, including the uppercase micro-label row `"Floor price"`
- **Role:** Every figure in the interface. Column values, percentage change, market cap, the swap input, and the uppercase stat labels under hero artwork.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Display (swap) | 32px | 40px | normal | `--text-display-md` |
| Display (hero) | 32px | 48px | normal | `--text-display-sm` |
| Heading md | 24px | 30px | normal | `--text-heading-md` |
| Heading sm | 20px | 25px | normal | `--text-heading-sm` |
| Heading sm (loose) | 20px | 30px | normal | `--text-heading-sm` |
| Lead / link | 16px | 24px | normal | `--text-md` |
| Body & UI | 14px | 21px | normal | `--text-sm` |
| Metric (mono) | 14px | 21px | normal | `--text-sm` + `--font-mono` |
| Stat (mono, uppercase) | 14px | 17.5px | normal | `--text-sm` + `--font-mono` |
| Caption | 12px | 18px | normal | `--text-xs` |
| Micro-label (mono, uppercase) | 12px | 15px | normal | `--text-xs` + `--font-mono` |
| Swap input (mono) | 24px | 36px | normal | `--text-2xl` + `--font-mono` |

## Tokens — Spacing & Shapes

**Base unit:** 4px, with 2px and 6px half-steps   **Density:** compact

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 2xs | 2px | `--spacing-0-5` |
| xs | 4px | `--spacing-1` |
| sm | 6px | `--spacing-1-5` |
| md | 8px | `--spacing-2` |
| lg | 12px | `--spacing-3` |
| xl | 16px | `--spacing-4` |
| 2xl | 20px | `--spacing-5` |
| 3xl | 24px | `--spacing-6` |
| 4xl | 32px | `--spacing-8` |
| 5xl | 48px | `--spacing-12` |

### Border Radius

| Element | Value |
|---------|-------|
| Every control, avatar, segmented track | 9999px |
| Thumbnail, table cell, status badge | 4px |
| Card, drop tile, art plate | 8px |
| Search field, small panel | 6px |
| Modal, carousel frame, chain cluster | 12px |
| Split cell (left half only) | 8px 0px 0px 8px |
| Stacked card halves | 4px 4px 0px 0px · 0px 0px 4px 4px |
| Hairline tile | 2px |
| Micro indicator | 3px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| Inset ring | `rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset` | `--shadow-inset-border` |
| Card seam | `rgba(0, 0, 0, 0.03) 0px 1px 2px 0px` | `--shadow-xs` |
| Media lift | `rgba(0, 0, 0, 0.1) 0px 1px 2px -1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px` | `--shadow-sm` |

### Layout
- **Page max-width:** `not measured` — the horizontal-inset census is empty, so no section carries a gutter of 48px or more; the widest measured box is a 1500×48px table row
- **Section gap:** 32px and 24px column gaps carry the vertical rhythm; the section-padding census holds a single 64px row, on `.flex.flex-col.items-center.py-2`
- **Card padding:** 12px on `.flex.flex-col.dark.relative`; 24px on the modal footer `.flex.gap-2.rounded-b-xl.border-border-1`
- **Element gap:** 4px is the default, 6px and 8px inside controls, 12px between card columns, 16px between list blocks

## Components

### Icon Rail
**Role:** The persistent vertical navigation that pins the app to the left edge on every view.
Built from `.flex.h-full.w-[52px].flex-col` — a `nav` filled `#141415` with a 1px `#26272D` border, 16px top and 8px side padding, radius 0px and no shadow, once per page. Its 52px width comes from the class; the 8px gap row carries the same class, so icons stack on an 8px rhythm. Flat canvas fill and a hard square edge make it read as architecture rather than a floating panel. Icons sit in 36×36px round hit areas.

### Market Table Nav
**Role:** The sticky header that holds the view tabs and the time-range switches above a market table.
`.sticky.z-[1].top-0.z-top-navbar`: a `nav` filled `#141415`, 12px vertical and 0px horizontal padding, radius 0px, 1px `#26272D` border, no shadow, two elements across the collections and tokens views. It takes the canvas fill, so the border does all the separating — the bar is visible only where its line crosses content. Tabs inside are pills; the bar itself is never rounded.

### Primary Action Button
**Role:** The single filled call to action — connect, or go where the announcement points.
`.cursor-pointer.no-underline.inline-flex.items-center` paints fill `#0786FF`, text `#FFFFFF` at 14px/500, padding 0px 20px, radius 9999px, no border and no shadow, on `"Explore Solana"`. Height is `not measured`. The top-bar class `.inline-flex.items-center.whitespace-nowrap.justify-center` measures two ways: `"Connect Wallet"` with no fill, `#FFFFFF` ink at 14px/500/21px, padding 0px 16px, radius 9999px and a 133×40px box on every page; and filled `#0786FF` on the swap panel's own `"Connect Wallet"`. Build both — the unfilled one is chrome, the filled one is commitment.

### Filter Pill
**Role:** The category, chain and range selector that sits above every browsable list.
`.inline-flex.disabled:pointer-events-none.disabled:opacity-40.ite` paints three variants; do not merge them. As an `a`: fill `#141415`, ink `#ACADAE`, 14px/400/21px, padding 0px 6px, radius 9999px, 1px `#26272D` border, box 57–148×28px, on `"Ethereum"`. As a `button`: same fill and border, padding 0px 10px, box 42–153×28px, on `"Agents"`. On the home view: fill `rgba(255, 255, 255, 0.02)`, border `1px rgba(255, 255, 255, 0.08)`, padding 0px 12px, on `"Gaming"`. Selection brightens both layers at once — `"NFTs"` goes to fill `rgba(255, 255, 255, 0.08)`, border `rgba(255, 255, 255, 0.12)`, ink `#FFFFFF` at 14px/500.

### Segmented Toggle
**Role:** A two-state switch for mutually exclusive modes, sized to sit inside a footer or toolbar.
The track is `.inline-flex.rounded-full.gap-1.overflow-hidden`: a `div` filled `#1B1D1F`, 2px padding, radius 9999px, no border, no shadow, box 72–102×24px, holding `"Collector Pro"`. The thumb is `.absolute.inset-0.size-full.rounded-full` — a `span` filled `#141415`, radius 9999px, box 20–63×20px. Labels ride on `.relative.flex.items-center.rounded-full` with 4px 6px padding: active at 12px/500/18px, inactive at 12px/400/18px. The inversion is the point — the track is *lighter* than the selected thumb, so the chosen item reads as pressed in.

### Trending Token Card
**Role:** A compact row-card pairing a token's identity with its price move and a sparkline.
`.flex.w-full.gap-3.p-0`: a `div` filled `rgba(255, 255, 255, 0.02)`, radius 8px, 1px `rgba(255, 255, 255, 0.08)` border, `rgba(0, 0, 0, 0.03) 0px 1px 2px 0px` shadow, 12px gap, box 300×82px, holding `"Catecoin $71M +32.3%"`. The row carries no padding of its own — the 12px gap and its children set the inset. Two percent white separates the card from canvas without adding another grey.

### Featured Drop Card
**Role:** A tall artwork tile carrying a collection name, its live status and a price.
`.flex.flex-col.dark.relative`: a `div` with no fill, 12px padding all round, radius 8px, no border, the `rgba(0, 0, 0, 0.03) 0px 1px 2px 0px` seam shadow, box 300×200px, holding `"Nekoadz Minting now $7.46"`. Artwork sits behind on `.absolute.inset-0.z-[-1].rounded-lg` at the same 300×200px and 8px radius, with a second plate at `.absolute.inset-0.z-[-1].scale-[0.995]`, 299×199px — a stacked-card illusion built from scale, not shadow. The gradient scrim, not a panel, keeps text readable over the art.

### Market Table Row
**Role:** The primary data surface — one asset per line, identity left, figures right, trend last.
`.no-underline.disabled:pointer-events-none.disabled:opacity-40.in` measures two ways. In the market tables: an `a` with no fill, 14px/400/21px, zero padding, radius 0px, 1px `#26272D` border, no shadow, box 1500×48px, holding `"$8,692.62 -2.3% $8,342.88 $194.3K 22 5,060 8,888"`. On the home view the same class drops the border, takes radius 4px and a 507×60px box, holding `"Pudgy Penguins -2.3%"`. Cells inside the wide row use `.flex.items-center.shrink-0.first:pl-2` — fill `#141415`, padding 0px 8px, radius 4px, no border — so the row reads as a strip of tiles, not a ruled grid.

### Avatar & Thumbnail
**Role:** The identity mark at the head of every list row, card and selector.
Shape is semantic. Collections take `.aspect-square.overflow-hidden.min-h-8.min-w-8` — an `img` at 32×32px, radius 4px, no border, no shadow. Tokens take `.aspect-square.overflow-hidden.shrink-0.object-cover` — an `img` at 32×32px filled `#FFFFFF`, radius 9999px. Larger card art uses `.aspect-square.overflow-hidden.min-h-10.min-w-10` at 40×40px radius 4px; the profile-scale circle `.object-cover.aspect-square.overflow-hidden.order-1` runs 48×48px, radius 9999px, filled `#FFFFFF` and ringed by the inset shadow. Rounded square means a collection; circle means a token or a person.

### Inset Hairline Ring
**Role:** The universal edge treatment for anything holding an image, drawn inside the shape so art is never clipped.
`.pointer-events-none.absolute.inset-0.inset-shadow-border` is an unfilled, borderless `div` whose only property is `rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset`. Three measured variants: radius 4px at 32–40×32–40px on the home and collections views, radius 9999px at 32×32px on the tokens view, radius 9999px at 48×48px on the home view. An inset shadow rather than a border keeps the ring off the layout box, so a 32px avatar stays 32px — and it is why every image here has a lit edge.

### Status Badge
**Role:** A small bordered marker for state — new, live, minting, automatic.
Two measured boxes share a shape. `"New"` is a `div` filled `#141415`, padding 4px 6px, radius 4px, 1px `#47BB64` border — green is almost always ink here, and this badge is where it becomes a line. `"Auto"` on the swap panel takes the identical fill, padding and radius with a 1px `#26272D` border and a mono label at 12px/500/18px. Live status uses text alone: `"Minting now"` on `.flex.items-center.h-[18px].w-fit` at mono 12px/400/18px in `#47BB64`, beside a dot on `.relative.flex.size-1.5`. Badge height is pinned at 18px by the class, never by padding.

### Modal Dialog
**Role:** The interruption surface for an announcement, sat over a blurred, dimmed page.
Built in two halves. The header `.flex.justify-between.rounded-t-xl.border-border-1` is a `div` filled `#141415`, padding 20px 24px, radius `12px 12px 0px 0px`, 1px `#26272D` border. The footer `.flex.gap-2.rounded-b-xl.border-border-1` repeats the fill and border with 24px padding and radius `0px 0px 12px 12px`. The shell carries `#101011` on `.relative.z-modal.rounded-xl.border`. Behind it, `.fixed.inset-0.bg-overlay.ease-out-quint` paints `rgba(0, 0, 0, 0.6)` and `.absolute.inset-0.bg-black/50.backdrop-blur-[10px]` adds a 50% black wash with a 10px blur. The dialog is darker than the page it covers — depth here goes down, not up.

## Do's and Don'ts

### Do
- Keep every interactive element at radius 9999px. Every row in the controls census — `"Explore Solana"`, `"Gaming"`, `"Agents"`, `"Ethereum"`, `"All"`, `"NFTs"`, `"1d"`, `"Connect Wallet"` — paints 9999px.
- Set numerals in gtAmericaMono and language in gtAmerica. A price or supply figure in the sans face breaks column alignment and the reading rhythm with it.
- Separate planes with a luminance step and a 1px line: `#101011` under `#141415` under `#1B1D1F` under `#26272D`.
- Use `rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset` on anything holding artwork, so the edge sits inside the box.
- Drop line-height to 1.25 when type becomes a label or a stat — `"Floor price"` at 12px/15px, `"146 (3.4%)"` at 14px/17.5px — and hold 1.5 for anything read in sentences.
- Reserve `#47BB64` and `#E24756` for direction. Green and red are data, not decoration.

### Don't
- Don't add letter-spacing. Every row the type census lists, from `"Aggregating"` at 12px to `"Swap everything"` at 32px, reads `normal`.
- Don't reach for a heavier weight. The type census's weights block gives gtAmerica and gtAmericaMono 400 and 500, and its heaviest rows — `"Swap everything"` at 32px and `"Connect Wallet"` at 14px — both sit at 500.
- Don't use shadow for hierarchy. The three shadows the pages paint top out at `rgba(0, 0, 0, 0.1)`; anything darker turns a flat instrument into a web page.
- Don't spread `#0786FF`. The inventory paints it twice — `"Explore Solana"` and the swap panel's `"Connect Wallet"` — so one committed action per view is the ceiling.
- Don't tint the chrome. These greys sit within a couple of points of neutral; a blue-cast surface fights every collection thumbnail on the page.
- Don't give a collection a circular avatar or a token a rounded square. The 4px-versus-9999px split is how the eye sorts two asset classes at a glance.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Root | `#101011` | The `html` and `footer` plane, and the modal shell — the floor of the system |
| 1 | Canvas | `#141415` | The working surface: rail, sticky nav, table cells, badges, modal halves |
| 2 | Ghost | `rgba(255, 255, 255, 0.02)` | Cards and unselected pills — a wash that separates without a new grey |
| 3 | Raised | `#1B1D1F` | Segmented tracks and selected secondary buttons |
| 4 | Icon Surface | `#26272D` | Round icon buttons in the top bar; the same value as the structural line |

## Elevation

Depth is luminance plus a hairline; the shadows exist to stop edges vanishing. The ladder climbs in two-to-five-point steps — `#101011`, `#141415`, `#1B1D1F`, `#26272D` — so nothing jumps, and the eye reads layering from the 1px `#26272D` border and the `rgba(255, 255, 255, 0.08)` inset ring instead. `rgba(0, 0, 0, 0.03) 0px 1px 2px 0px` is the card seam: three percent alpha on a near-black ground is a lower edge, not a lift. The one heavier value, `rgba(0, 0, 0, 0.1) 0px 1px 2px -1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px`, carries a single rounded media block. The modal inverts all of it — `#101011` over a 60% black scrim with a 10px blur, so the most elevated surface is also the darkest.

## Imagery

The chrome is a frame for artwork it does not control, built to lose that fight gracefully. Collection art carries the saturated colour — pixel skulls, 3D renders, PFP grids, trading-card scans — while the interface holds four greys, two inks and three semantic paints. Where type sits over art, a downward scrim does the work: `rgba(0, 0, 0, 0)` to `rgba(0, 0, 0, 0.35)` to `rgba(0, 0, 0, 0.65)` to `rgba(0, 0, 0, 0.8)` on `.dark.absolute.inset-0.bg-[linear-gradient(180deg,rgba(0,0,0,0)0%)`, keeping a collection name and its stat strip legible on any image. Editorial illustration appears in the learn cards — isometric 3D objects on flat saturated plates — as content, not chrome. Letterboxed media gets `#000000` on `.relative.aspect-video.w-full.overflow-hidden`, the only pure black the inventory paints as a fill.

## Layout

A fixed 52px icon rail on the left, a full-width top bar with search and wallet, everything else scrolling between them. The horizontal-inset census is empty — no section pads its sides by 48px or more — so bands run to the shell edges and the widest measured element is a 1500×48px table row. The home view runs a full-bleed hero carousel, then stacked section blocks, each a 20px/500 heading over a card row, with a live collection sidebar pinned right. The market views split two ways: a filter sidebar of pill groups, and a table with uppercase secondary-ink column headers, 48px rows and a sparkline in the trailing cell. The swap view is a centred panel on empty canvas, where whitespace does the composing. Vertical rhythm comes from gaps, 32px and 24px between blocks, 16px between list items, 12px inside cards; the section-padding census carries one row, 64px on `.flex.flex-col.items-center.py-2`.

## Typography Voice

Two faces, one rule: if it is a quantity, it is mono. The split is structural — the most-observed text style in the capture is gtAmericaMono at 14px/400/21px in `#FFFFFF`, the second is gtAmerica at 14px/400/21px in `#ACADAE`. That pairing *is* the interface: a white number and a grey label, side by side, same size, same leading. The signature move is the leading. Body and metric text hold 1.5 — 14px over 21px, 12px over 18px, 16px over 24px — then it collapses to 1.25 the instant type becomes a label or a headline: `"Floor price"` at 12px/15px, `"146 (3.4%)"` at 14px/17.5px, `"Trending Tokens"` at 20px/25px, `"Swap everything"` at 32px/40px. Nothing is tracked, nothing is bolder than 500, and the largest type measured is 32px. Scale and leading carry the hierarchy; weight barely moves. It works because a market screen is read in columns, and a face that shifts width or spacing under emphasis would destroy the column.

## Agent Prompt Guide

## Quick Color Reference
- background: `#141415`
- text: `#FFFFFF`
- surface: `#1B1D1F`
- border: `#26272D`
- accent: `#47BB64`
- primary action: `#0786FF`

## Example Component Prompts

1. **Filter Pill Row**: Build a horizontal row of pill buttons, 4px gap. Each pill: background `#141415`, 1px solid `#26272D` border, radius 9999px, padding 0 10px, height 28px, label gtAmerica 14px/400 line-height 21px in `#ACADAE`, letter-spacing normal. Selected state: background `rgba(255, 255, 255, 0.08)`, border `1px solid rgba(255, 255, 255, 0.12)`, label `#FFFFFF` at weight 500. No shadow, no transform.

2. **Market Table Row**: A 48px-tall link row on `#141415` with a 1px `#26272D` bottom border and no radius. Left: a 32×32px avatar at radius 4px with `rgba(255, 255, 255, 0.08) 0 0 0 1px inset`, then the asset name in gtAmerica 14px/400/21px `#FFFFFF`. Right: right-aligned numeric columns in gtAmericaMono 14px/400/21px — price in `#FFFFFF`, positive change in `#47BB64`, negative in `#E24756`. Column headers above in `#ACADAE`, uppercase, 12px.

3. **Trending Token Card**: A 300×82px card, background `rgba(255, 255, 255, 0.02)`, 1px `rgba(255, 255, 255, 0.08)` border, radius 8px, box-shadow `rgba(0, 0, 0, 0.03) 0px 1px 2px 0px`, 12px gap between children. A 40×40px radius-4px thumbnail, then a two-line stack: name in gtAmerica 14px/500 `#FFFFFF`, and market cap plus change in gtAmericaMono 14px/400 — `#ACADAE` for the value, `#47BB64` or `#E24756` for the delta.

4. **Segmented Toggle**: A pill track, background `#1B1D1F`, radius 9999px, 2px padding, height 24px, 4px gap. Two labels at gtAmerica 12px/18px with 4px 6px padding; the selected one sits on a `#141415` thumb at radius 9999px, height 20px, and takes weight 500 in `#FFFFFF`; the unselected is weight 400 in `#ACADAE`. No border, no shadow.

5. **Swap Panel**: A centred card on `#141415` at radius 12px with a 1px `#26272D` border. Header row: a pill tab group plus an `"Auto"` badge — `#141415`, radius 4px, 1px `#26272D` border, padding 4px 6px, gtAmericaMono 12px/500/18px. Two stacked input sections divided by a `rgba(255, 255, 255, 0.08)` 1px rule, amounts in gtAmericaMono 24px/500/36px `#FFFFFF`, token selectors as `#1B1D1F` pills with a 1px `#34353C` border. Footer: a full-width `#0786FF` button, radius 9999px, gtAmerica 14px/500 `#FFFFFF`, padding 0 20px.

## Similar Brands

- **Linear** — the same near-black canvas, one-pixel hairlines and refusal of shadow as hierarchy; depth is a two-point luminance step in both systems.
- **Vercel Dashboard** — a neutral near-black shell that treats colour as data-only, with a geometric sans for language and mono for anything measured.
- **Raycast** — pill-shaped controls, compact 4px rhythm and a grey ladder that stays out of the way of the content it frames.
- **Bloomberg Terminal** — the monospace-numerals-and-green-red-deltas tradition this interface modernises without softening.
- **Robinhood** — the same idea of a dense trading table rendered calm, with a single saturated blue held back for the one committed action.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-bg-root: #101011;
  --color-bg-primary: #141415;
  --color-bg-elevated: #1B1D1F;
  --color-border-1: #26272D;
  --color-border-2: #34353C;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #ACADAE;
  --color-border-1-transparent: rgba(255, 255, 255, 0.08);
  --color-bg-ghost: rgba(255, 255, 255, 0.02);
  --color-border-ghost-strong: rgba(255, 255, 255, 0.12);
  --color-success-1: #47BB64;
  --color-error-1: #E24756;
  --color-link: #83C3FF;
  --color-action: #0786FF;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-media-bg: #000000;

  /* Typography — Families */
  --font-sans: 'gtAmerica', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'gtAmericaMono', 'JetBrains Mono', ui-monospace, monospace;

  /* Typography — Scale */
  --text-display-md: 32px;  --leading-display-md: 40px;
  --text-display-sm: 32px;  --leading-display-sm: 48px;
  --text-heading-md: 24px;  --leading-heading-md: 30px;
  --text-heading-sm: 20px;  --leading-heading-sm: 25px;
  --text-2xl: 24px;         --leading-2xl: 36px;
  --text-md: 16px;          --leading-md: 24px;
  --text-sm: 14px;          --leading-sm: 21px;
  --leading-sm-tight: 17.5px;
  --text-xs: 12px;          --leading-xs: 18px;
  --leading-xs-tight: 15px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --tracking-normal: normal;

  /* Spacing */
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;

  /* Border Radius */
  --radius-xs: 2px;
  --radius-micro: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-inset-border: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset;
  --shadow-xs: rgba(0, 0, 0, 0.03) 0px 1px 2px 0px;
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 1px 2px -1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
}
```

### Tailwind v4

```css
@theme {
  --color-bg-root: #101011;
  --color-bg-primary: #141415;
  --color-bg-elevated: #1B1D1F;
  --color-border-1: #26272D;
  --color-border-2: #34353C;
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #ACADAE;
  --color-border-1-transparent: rgba(255, 255, 255, 0.08);
  --color-bg-ghost: rgba(255, 255, 255, 0.02);
  --color-border-ghost-strong: rgba(255, 255, 255, 0.12);
  --color-success-1: #47BB64;
  --color-error-1: #E24756;
  --color-link: #83C3FF;
  --color-action: #0786FF;
  --color-overlay: rgba(0, 0, 0, 0.6);
  --color-media-bg: #000000;

  --font-sans: 'gtAmerica', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'gtAmericaMono', 'JetBrains Mono', ui-monospace, monospace;

  --text-xs: 12px;
  --text-xs--line-height: 18px;
  --text-sm: 14px;
  --text-sm--line-height: 21px;
  --text-md: 16px;
  --text-md--line-height: 24px;
  --text-heading-sm: 20px;
  --text-heading-sm--line-height: 25px;
  --text-heading-md: 24px;
  --text-heading-md--line-height: 30px;
  --text-2xl: 24px;
  --text-2xl--line-height: 36px;
  --text-display-md: 32px;
  --text-display-md--line-height: 40px;
  --text-display-sm: 32px;
  --text-display-sm--line-height: 48px;
  --tracking-normal: normal;

  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;

  --radius-xs: 2px;
  --radius-micro: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  --shadow-inset-border: rgba(255, 255, 255, 0.08) 0px 0px 0px 1px inset;
  --shadow-xs: rgba(0, 0, 0, 0.03) 0px 1px 2px 0px;
  --shadow-sm: rgba(0, 0, 0, 0.1) 0px 1px 2px -1px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
}
```