--- name: dYdX tagline: 'Pure-black canvas, Satoshi-compressed display, and one signature indigo-purple #7774ff CTA — a pro-trader perps terminal as a brand.' updated_at: 2026-05-28T23:13:57.213Z published_at: 2026-05-28T23:13:57.213Z author: webdesignhot source_url: https://dydx.exchange spec: webdesignhot/0.1 quality: curated featured: false categories: [saas] tags: [dark, structured, sans, crypto, defi, purple] preview_swatch: ['#000000', '#7774ff', '#fafafd'] related: [blur-io, coinbase, kraken] description: 'dYdX dresses a decentralized perpetuals exchange in the visual language of a professional trading desk. The canvas is **pure black** `#000000` — not navy-tinted, not warmed, just black — with near-white text at `#fafafd` (a faintly cool off-white, rgb 250,250,253) carrying every glyph. A single signature **indigo-purple** `#7774ff` (rgb 119,116,255) flags the primary action: the "Get Started" CTA renders white-on-purple at a `12px` corner radius, the one place curves and saturated colour exist in the otherwise monochrome surface. Type runs on **Satoshi (compressed)** for both display and body — a geometric-grotesque with tight, technical letterforms; the marketing h1 lands at a confident 60px while body holds 18px, both at weight 400 so the headline reads through scale and tracking rather than heaviness. Where Blur commits to brutalist 0px-everything and neon orange, dYdX softens just enough — a 12px radius on the brand CTA, a near-white instead of pure-white ink — while keeping the same pure-black, dense, information-first register. The purple-on-black is the identity: every other surface is greyscale, and the indigo voltage is reserved for the one moment that converts a visitor into a trader.' # Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger). # Maps role names to this entry's actual token names so role-aware # downstream tools resolve `theme.background` → entry's `bg`, etc. # Auto-generated by scripts/add-aliases.mjs — do not edit manually; # regenerate after changing color token names. aliases: background: bg foreground: text primary: brand primary-foreground: on-brand border: border colors: bg: '#000000' # canvas — pure black, never navy bg-elev-1: '#0a0a0a' # surface-soft — secondary panel, card bg bg-elev-2: '#131316' # surface-strong — hover, dropdown, modal bg-elev-3: '#1c1c20' # surface-elevated — popover, tooltip surface: '#0a0a0a' # default card surface surface-strong: '#131316' # hovered surface / row text: '#fafafd' # ink — primary, faintly cool off-white text-body: '#c8c8d2' # body running copy text-muted: '#8a8a96' # captions, column headers, secondary text-subtle: '#5a5a64' # disabled, placeholder brand: '#7774ff' # dYdX indigo-purple — the signature voltage brand-hover: '#8e8bff' # primary-hover — lighter indigo brand-active: '#605df0' # pressed — slightly deeper brand-soft: '#7774ff1a' # 10% indigo tint — selected rows, ghost hover brand-glow: 'rgba(119,116,255,0.40)' on-brand: '#ffffff' # white text on the indigo CTA (live token) border: '#1f1f24' # default 1px hairline border-soft: '#131316' # softer divider on dense lists border-strong: '#33333c' # focused / hover row border border-brand: '#7774ff' # indigo border on active/focus state semantic-up: '#26c486' # long / price-up green semantic-up-soft: '#26c4861a' semantic-down: '#ff5a5a' # short / price-down red semantic-down-soft: '#ff5a5a1a' semantic-warning: '#f5b945' # liquidation / margin warning amber semantic-info: '#7774ff' # info reuses brand indigo focus-ring: 'rgba(119,116,255,0.55)' scrim: 'rgba(0,0,0,0.80)' link: '#7774ff' link-hover: '#8e8bff' typography: display: family: '"Satoshi", "Satoshi-compressed", system-ui, -apple-system, sans-serif' weights: [400, 500, 700] body: family: '"Satoshi", "Satoshi-compressed", system-ui, -apple-system, sans-serif' weights: [400, 500, 600] mono: family: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace' weights: [400, 500] scale: display-hero: { size: 60, weight: 400, lineHeight: 1.0, tracking: '-0.03em', family: display } display-lg: { size: 48, weight: 400, lineHeight: 1.05, tracking: '-0.025em', family: display } h1: { size: 40, weight: 500, lineHeight: 1.1, tracking: '-0.02em', family: display } h2: { size: 32, weight: 500, lineHeight: 1.18, tracking: '-0.014em', family: display } h3: { size: 24, weight: 500, lineHeight: 1.25, tracking: '-0.008em', family: display } h4: { size: 20, weight: 600, lineHeight: 1.3, tracking: '0', family: body } body-lg: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body: { size: 16, weight: 400, lineHeight: 1.55, tracking: '0', family: body } body-sm: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: body } label: { size: 13, weight: 500, lineHeight: 1.4, tracking: '0.01em', family: body } table-header: { size: 12, weight: 500, lineHeight: 1.3, tracking: '0.04em', family: body } price-mono: { size: 14, weight: 500, lineHeight: 1.3, tracking: '0', family: mono } caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body } eyebrow: { size: 11, weight: 600, lineHeight: 1.3, tracking: '0.08em', family: body } radius: micro: 2 sm: 4 md: 8 lg: 12 xl: 16 pill: 9999 spacing: base: 4 scale: [0, 4, 8, 12, 16, 24, 32, 48, 64, 96] layout: page-width: 1280 prose-width: 720 header-height: 64 motion: ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)' ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)' duration-fast: 150 duration-standard: 240 duration-slow: 320 reduced-motion: 'respects prefers-reduced-motion: reduce' breakpoints: mobile: 640 tablet: 1024 desktop: 1280 wide: 1536 shadows: ambient: 'none' standard: '0 1px 0 0 #1f1f24' elevated: '0 8px 24px rgba(0,0,0,0.6)' modal: '0 16px 48px rgba(0,0,0,0.7)' glow: '0 0 0 1px rgba(119,116,255,0.4), 0 0 24px rgba(119,116,255,0.25)' ring: '0 0 0 3px rgba(119,116,255,0.55)' components: button-primary: { bg: brand, text: on-brand, padding: '12px 20px', radius: 12 } button-secondary: { bg: bg-elev-2, text: text, border: border, padding: '12px 20px', radius: 12 } button-ghost: { bg: transparent, text: text, border: border, padding: '12px 20px', radius: 12 } button-link: { bg: transparent, text: brand, padding: '0', radius: 0 } card: { bg: surface, border: border, radius: 12, padding: 24 } input: { bg: bg-elev-1, border: border, text: text, radius: 8, padding: '10px 14px' } badge: { bg: brand-soft, text: brand, radius: 9999, padding: '4px 10px' } accessibility: contrast-text-on-bg: 20.16 contrast-body-on-bg: 12.65 contrast-brand-on-bg: 5.73 contrast-on-brand: 3.67 focus-ring: '3px solid rgba(119,116,255,0.55)' reduced-motion-honored: true dark-mode: dark-only lineage: summary: 'dYdX descends from professional trading terminals crossed with the modern dark-SaaS aesthetic. The pure-black canvas, dense tabular data, monospace numerals, and information-first layout inherit from desktop trading software, while the Satoshi geometric-grotesque type, 12px-radius composed surfaces, and disciplined single-accent system come from contemporary developer-tool brands like Linear and Vercel. The clearest contemporary move is one saturated voltage on black reserved for the primary action — dYdX picks indigo-purple #7774ff where Linear leans violet and Vercel leans monochrome; the family resemblance is the discipline, not the hue. It rejects consumer-fintech warmth (Coinbase navy, Robinhood green) and hype-maximalist crypto loudness, staying sober, technical, and assuming a sophisticated user.' influences: - { name: Linear, role: 'Single near-black surface plus one disciplined accent; geometric type register', url: 'https://linear.app' } - { name: Vercel, role: 'Monochrome-on-black product design; restraint as polish; single high-contrast CTA', url: 'https://vercel.com' } - { name: TradingView, role: 'Dense market tables, monospace numerals, dark trading-surface conventions', url: 'https://www.tradingview.com' } - { name: Blur, role: 'Brutalist pure-black trader counterpart; dYdX shares the black canvas and single-voltage discipline but softens to 12px radius and a humanist-grotesque sans', url: 'https://blur.io' } - { name: Satoshi (Fontshare), role: 'Display and body typeface; compressed geometric-grotesque with technical character', url: 'https://www.fontshare.com/fonts/satoshi' } --- ## 1. Visual Theme & Atmosphere dYdX looks like a trading desk that decided it had a brand. The canvas is **pure black** `#000000` — not the navy-tinted near-black that softens consumer crypto products, not a warmed charcoal, just black. Over it, near-white ink at `#fafafd` (rgb 250,250,253 — a faintly cool off-white that pulls a half-degree away from clinical pure white) carries every glyph. The atmosphere is the one a professional perpetuals trader wants at 3 a.m.: high contrast, low decoration, nothing on the screen that does not carry information or convert intent. The system commits to monochrome everywhere except one place. A single **indigo-purple** `#7774ff` (rgb 119,116,255) is the brand's entire chromatic vocabulary. It appears on the "Get Started" CTA — white text on the indigo fill at a `12px` corner radius — and on the active states, links, focus rings, and selected rows that echo it. The purple-on-black is the identity. Strip the indigo out and dYdX would read as a generic dark dashboard; the indigo voltage is what makes the surface unmistakably theirs, and the brand spends it sparingly precisely so that it lands. Typography runs on **Satoshi**, specifically the compressed cut sampled in production (`Satoshi-compressed`). Satoshi is a geometric-grotesque sans with tight apertures and technical, slightly-condensed letterforms — it reads as engineered rather than friendly, which is exactly the register a derivatives exchange wants. The marketing h1 lands at a confident **60px** but holds **weight 400**, leaning on size, tight negative tracking, and the compressed proportions to carry authority rather than bolding its way there. Body sits at **18px / 400** — generous for a dense product, a deliberate signal that the marketing surface should breathe even while the trading surface packs density. Where this system sits relative to its neighbours is instructive. **Blur** commits to brutalist 0px-on-everything and neon orange in JetBrains Mono; dYdX is the more composed cousin — it keeps the pure-black canvas and the single-voltage discipline, but softens with a 12px radius on the brand CTA, a near-white instead of pure-white ink, and a humanist-grotesque sans instead of a monospace. Coinbase warms to navy and rounds to friendliness; dYdX stays black and technical. The result is *pro-trader, not consumer-fintech* — sober, dense, and confident that its user already knows what a perp is. Depth is restrained. There are no decorative gradients washing the hero, no glassmorphism, no illustrated mascots. Elevation is built from a tight greyscale surface ladder (`#000` → `#0a0a0a` → `#131316` → `#1c1c20`) and 1px hairlines at `#1f1f24`. Shadows exist but are quiet — a hairline divider here, a soft modal drop there — and the only luminous gesture in the entire system is the optional indigo glow on the primary CTA and the focus ring. The discipline is the point: when every surface is greyscale, the one indigo moment does all the persuading. **Key Characteristics:** - Pure black canvas `#000000` — no navy tint, no warming - Single signature voltage: dYdX indigo-purple `#7774ff` on the primary CTA and active states - Near-white ink `#fafafd` (rgb 250,250,253) — a faintly cool off-white, not pure `#fff` - Satoshi (compressed) for display and body — geometric-grotesque, technical, tight - Marketing h1 at 60px / weight 400 — authority through scale and tracking, not weight - 12px corner radius on the brand CTA — the one softened, the one chromatic moment - Greyscale surface ladder + 1px hairlines for elevation; shadows kept quiet - Body at 18px / 400 — generous marketing breathing room over a dense product - White-on-indigo CTA (per live token) — the singular saturated affordance - Pro-trader register: dense, sober, information-first, assumes a sophisticated user ## 2. Color Palette & Roles ### Canvas - **Canvas / bg** (`#000000`): Pure black — the brand's defining commitment, every page background. - **Surface Soft** (`#0a0a0a`): Card and secondary-panel background; one step off black. - **Surface Strong** (`#131316`): Row/card hover, dropdown menu, modal sheet background. - **Surface Elevated** (`#1c1c20`): Popover, tooltip, the topmost floating layer. ### Text - **Ink / text** (`#fafafd`): Primary text — headlines, key values. Faintly cool off-white (rgb 250,250,253). - **Body** (`#c8c8d2`): Running paragraph copy and secondary labels. - **Muted** (`#8a8a96`): Captions, table column headers, helper text. - **Subtle** (`#5a5a64`): Disabled text, placeholders, decorative dividers. ### Brand - **dYdX Indigo** (`#7774ff`): The singular voltage — primary CTA fill, active states, links, focus ring, selected-row tint. rgb 119,116,255. - **Brand Hover** (`#8e8bff`): Lighter indigo on CTA hover. - **Brand Active** (`#605df0`): Slightly deeper indigo on press. - **Brand Soft** (`#7774ff1a`): 10% indigo tint — selected-row background, ghost-button hover, badge fill. - **On-Brand** (`#ffffff`): White text on the indigo CTA — matches the live sampled token (`rgb 255,255,255`). ### Accent None as a separate hue. dYdX is monochrome plus one voltage by design — the indigo carries every accent duty (links, info, selection, focus). Its scarcity is the system's persuasion budget; introducing a second decorative accent would dilute the one moment the brand spends to convert. ### Interactive - **Link** = Brand `#7774ff`, no underline by default, underline (or `#8e8bff`) on hover. - **Hover** — primary CTA lightens to `#8e8bff`; rows shift bg to `#131316` and border to `#33333c`. - **Active / Pressed** — Brand Active `#605df0`. - **Disabled** — `#5a5a64` text on `#0a0a0a` bg, `cursor: not-allowed`, no indigo. - **Selected (row / filter)** — brand-soft `#7774ff1a` bg, `#7774ff` left-border or text. ### Neutral / Surface `#000000` (Canvas) → `#0a0a0a` (Surface Soft) → `#131316` (Surface Strong / Hover) → `#1c1c20` (Surface Elevated) → `#1f1f24` (Border) → `#33333c` (Border Strong) → `#5a5a64` (Subtle) → `#8a8a96` (Muted) → `#c8c8d2` (Body) → `#fafafd` (Ink). A true neutral grey ramp from black to off-white, with the faintest cool drift at the top. ### Surface & Borders - **Border** (`#1f1f24`): Default 1px hairline on cards, inputs, table rows. - **Border Soft** (`#131316`): Inner-row dividers on dense lists — one step off canvas. - **Border Strong** (`#33333c`): Focused/hovered border. - **Border Brand** (`#7774ff`): Active and keyboard-focus border. ### Shadow Colors - **Standard** (`0 1px 0 0 #1f1f24`): Hairline divider — the workhorse "shadow." - **Elevated** (`0 8px 24px rgba(0,0,0,0.6)`): Dropdowns, popovers floating over content. - **Modal** (`0 16px 48px rgba(0,0,0,0.7)`): Dialogs over the scrim. - **Glow** (`0 0 0 1px rgba(119,116,255,0.4), 0 0 24px rgba(119,116,255,0.25)`): Optional indigo halo on the primary CTA — the only luminous effect. ### Semantic - **Up / Long** (`#26c486`): Price-up green, long-position PnL, filled-buy. 9.32:1 on canvas (AAA). - **Up Soft** (`#26c4861a`): Pill / row-flash background. - **Down / Short** (`#ff5a5a`): Price-down red, short-position PnL, filled-sell. 6.86:1 on canvas (AA+). - **Down Soft** (`#ff5a5a1a`): Pill / row-flash background. - **Warning** (`#f5b945`): Liquidation-risk and margin-warning amber — rare, high-stakes only. - **Info** (`#7774ff`): Reuses brand indigo; dYdX does not maintain a separate info-blue. Green/red are the only chromatic tokens besides indigo, and they appear only where PnL and order-state demand them. The discipline is near-total. ## 3. Typography Rules ### Font Family - **Display & Body** — `"Satoshi"`, production cut `"Satoshi-compressed"`, fallback `system-ui, -apple-system, sans-serif`. The same family runs headlines and paragraphs; there is no separate body face. - **Mono** — `ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace` for prices, order sizes, wallet addresses, and any tabular numeric column where alignment matters. - **Weights** — 400 (running body, hero headlines), 500 (labels, table values, emphasis), 600/700 (sub-heads, buttons, eyebrows). Hero leans on 400; the system rarely needs 700. - **Substitutes** — Satoshi is by Indian Type Foundry / Fontshare. The nearest free alternatives are General Sans (same foundry, slightly wider) or Hanken Grotesk; Inter reads more humanist and less engineered. Avoid Helvetica/Arial — they lose the compressed geometric character. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | Use | |------|------|-----:|-------:|------------:|---------------:|-----| | display-hero | Satoshi | 60 | 400 | 1.0 | -0.03em | Marketing hero headline (live h1) | | display-lg | Satoshi | 48 | 400 | 1.05 | -0.025em | Section heros | | h1 | Satoshi | 40 | 500 | 1.1 | -0.02em | Product page titles | | h2 | Satoshi | 32 | 500 | 1.18 | -0.014em | Section headings | | h3 | Satoshi | 24 | 500 | 1.25 | -0.008em | Sub-section headings | | h4 | Satoshi | 20 | 600 | 1.3 | 0 | Card titles, panel headers | | body-lg | Satoshi | 18 | 400 | 1.55 | 0 | Marketing running copy (live body) | | body | Satoshi | 16 | 400 | 1.55 | 0 | Default product running text | | body-sm | Satoshi | 14 | 400 | 1.5 | 0 | Secondary copy, dense panels | | label | Satoshi | 13 | 500 | 1.4 | 0.01em | Form labels, inline labels | | table-header | Satoshi | 12 | 500 | 1.3 | 0.04em | Market-table column headers | | price-mono | Mono | 14 | 500 | 1.3 | 0 | Prices, sizes, PnL — tabular numerals | | caption | Satoshi | 12 | 500 | 1.4 | 0.02em | Captions, helper text | | eyebrow | Satoshi | 11 | 600 | 1.3 | 0.08em | Section eyebrows — often UPPERCASE | | nav-link | Satoshi | 14 | 500 | 1.2 | 0.01em | Top-nav items | | button | Satoshi | 15 | 600 | 1.2 | 0.01em | All CTAs | ### Principles - **Hero authority through scale, not weight** — display-hero is 60px at weight 400. The compressed letterforms plus tight -0.03em tracking carry presence; bolding would read as shouty. - **Negative tracking on display, neutral on body** — headlines tighten progressively (-0.03em down to -0.008em); body sits at 0; small labels and eyebrows take slight positive tracking (0.01–0.08em) for legibility at size. - **Mono only for numbers** — unlike Blur (mono everywhere), dYdX reserves monospace strictly for prices, sizes, PnL, and addresses, so columns align. Everything else is Satoshi. - **Three working weights** — 400 / 500 / 600. 700 exists but is rarely needed; the type does its work through size and the compressed cut. - **Eyebrows uppercase with 0.08em tracking** — the one place dYdX uppercases. Section eyebrows ("PERPETUALS", "GOVERNANCE") read as kicker labels. - **Tabular numerals always-on for price-mono** — enable `font-variant-numeric: tabular-nums` so flickering order books and PnL don't reflow. - **Generous body line-height (1.55)** — marketing copy breathes; this is the system's clearest concession to a non-trader reader. ## 4. Component Stylings ### Buttons **`button-primary`** — The signature CTA. Background indigo `#7774ff`, **white** text (`#ffffff`, per live token), 12 × 20 padding, **12px radius**, weight 600. Hover → `#8e8bff`; pressed → `#605df0`. Optional indigo glow (`glow` shadow) on the marketing hero CTA. This is the one chromatic, one curved element in the system — used for "Get Started", "Trade Now", "Connect Wallet". **`button-secondary`** — Background surface-strong `#131316`, ink text `#fafafd`, 1px `#1f1f24` border, 12 × 20 padding, 12px radius. For "Learn More", "View Docs", non-primary actions adjacent to the primary CTA. **`button-ghost`** — Transparent bg, ink text, 1px `#1f1f24` border, 12px radius. Hover → bg `#131316`, border `#33333c`. For tertiary actions and toolbar controls. **`button-link`** — No fill, no padding, indigo `#7774ff` text, underline on hover. Inline navigation and "see all" affordances. Destructive actions (Close Position, Cancel Order) use the same shapes with `semantic-down` `#ff5a5a` text on a ghost, escalating to a red fill only on final confirm. ### Cards **`card`** — Surface-soft `#0a0a0a` bg, 1px `#1f1f24` border, **12px radius**, 24px padding. Title in h4 (Satoshi 20/600), body in body-sm. Hover (when interactive) → bg `#131316`, border `#33333c` — colour-state, no lift by default; marketing feature cards may add a subtle 4px translateY. **`market-row`** — Dense market-list row: `#000` bg, 1px `#131316` bottom divider, market name in label, mark price / 24h change / volume in price-mono columns (green/red for change). Hover → bg `#0a0a0a`. Selected → brand-soft `#7774ff1a` bg with a 2px `#7774ff` left border. **`stat-card`** — Account-summary tile: surface-soft bg, 12px radius, 16px padding, caption label on top (muted), price-mono value below (ink, or green/red for PnL). ### Badges / Tags / Pills **`badge`** — Status pill: brand-soft `#7774ff1a` bg, `#7774ff` text, **pill radius 9999**, 4 × 10 padding, caption type. The one place dYdX goes fully round. **`badge-long`** — Position-side pill: `#26c4861a` bg, `#26c486` text, pill radius. **`badge-short`** — Position-side pill: `#ff5a5a1a` bg, `#ff5a5a` text, pill radius. **`tag-neutral`** — Metadata tag: surface-strong `#131316` bg, muted text, 6px radius, 2 × 8 padding — squarer than badges for inert metadata. ### Inputs / Forms **`input`** — Surface-soft `#0a0a0a` bg, 1px `#1f1f24` border, **8px radius** (tighter than buttons/cards), 10 × 14 padding, ink text, muted placeholder. Focus → border `#7774ff` + 3px `rgba(119,116,255,0.55)` ring. Caret colour `#7774ff`. **`input-amount`** — Order-size / amount field: same shell, price-mono type, right-aligned numerals, an inline unit suffix ("USDC", "ETH") in muted, and quick-fill chips (25% / 50% / Max) as ghost buttons below. **`select`** — Same surface and border as input; chevron in muted; open menu uses surface-strong `#131316` bg with elevated shadow, selected option in brand-soft. **`slider`** — Leverage slider: track `#1f1f24`, filled portion `#7774ff`, thumb white with 1px indigo ring; tick labels in caption muted. ### Navigation **`top-nav`** — 64px tall, `#000` bg, 1px `#1f1f24` bottom border. Wordmark left, primary tabs (Trade, Portfolio, Markets, Governance) in nav-link, right cluster ends in the indigo "Connect Wallet" primary CTA. Active tab: `#fafafd` text with a 2px `#7774ff` underline; inactive: muted. **`side-rail`** (trading view) — Left market-selector / right order-form rails, `#000` bg, 1px `#1f1f24` separators, dense rows at price-mono type. The order-form rail anchors the indigo Buy/Long and red Sell/Short buttons at the bottom. ### Modals & Overlays **`modal`** — Surface-strong `#131316` bg, 1px `#1f1f24` border, 12px radius, 24px padding, `modal` drop shadow over a `rgba(0,0,0,0.80)` scrim. Header in h3, primary action is the indigo CTA bottom-right. **`toast`** — Surface-elevated `#1c1c20` bg, 1px `#1f1f24` border (or 1px `#7774ff` for primary), 8px radius, elevated shadow, 12 × 16 padding. Auto-dismiss ~4s; success uses a small `#26c486` dot, error a `#ff5a5a` dot. ### Footer **`footer`** — `#000` bg, 1px `#1f1f24` top border, 48px vertical padding. Multi-column link list (Trade, Develop, Community, Legal), wordmark, social icons in muted grey. Restrained — no decorative wash, the indigo appears only on link-hover. ## 5. Layout Principles ### Spacing System - **Base unit**: 4px. - **Scale**: 0 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96. - **Section padding (vertical)**: 96px on marketing landing sections; 48px between product panels; 24px card interiors. - **Dense trading surfaces**: market rows and order books drop to 8–12px row rhythm — the product breathes far less than the marketing site, by design. ### Grid & Container - **Max content width**: 1280px on marketing pages, centred. The trading application goes full-bleed to the viewport (charts and order books want every pixel). - **Marketing grid**: 12-column with 24px gutters; feature blocks alternate text/visual at desktop, stack at mobile. - **Trading layout**: three-zone — market selector (left), chart + order book (centre), order form (right) — each an independently scrolling panel separated by 1px hairlines. ### Whitespace Philosophy **Two registers, one brand.** Marketing pages are generous (96px sections, 18px body, 1.55 line-height) to court newcomers; the application is dense and information-first for working traders. Both stay pure-black, both reserve the indigo for the single converting action. The shift in density is intentional, not inconsistent. ### Section Cadence The page stays pure black `#000` throughout — no light/dark band alternation. Rhythm comes from the surface ladder (cards step up to `#0a0a0a`/`#131316`) and 1px hairlines, with eyebrow → headline → body → CTA repeating down the page. The indigo CTA punctuates each major section exactly once. ## 6. Shapes & Radius Scale | Tier | Token | Value | Use | |------|-------|------:|-----| | Micro | `micro` | 2px | Inline chips, tiny indicators, checkbox corners | | Standard | `sm` | 4px | Tags, small inline controls | | Comfortable | `md` | 8px | Inputs, selects, dropdowns, tooltips | | Relaxed | `lg` | 12px | **Buttons, cards, modals — the brand CTA radius (live token)** | | Large | `xl` | 16px | Marketing feature cards, large media frames | | Pill | `pill` | 9999px | Status/position badges, avatars, leverage-slider thumb | The defining number is **12px** (`lg`): the live "Get Started" CTA radius, and the radius dYdX uses for buttons, cards, and modals alike. Inputs sit one step tighter at 8px to read as utilitarian. Unlike Blur's brutalist 0px, dYdX's 12px is the deliberate softening that separates "pro-trader composed" from "pro-trader brutalist" — present, but never so round it reads consumer-friendly. ## 7. Depth & Elevation | Level | Treatment | Use | |-------|-----------|-----| | 0 Flat | No shadow, no border | Body sections on canvas | | 1 Hairline | 1px `#1f1f24` (or `0 1px 0 0 #1f1f24`) | Default cards, inputs, table rows | | 2 Surface step | `#000` → `#0a0a0a` | Cards, panels lifting off canvas | | 3 Hover | `#0a0a0a` → `#131316`, border → `#33333c` | Card / row hover | | 4 Floating | `0 8px 24px rgba(0,0,0,0.6)` on `#131316`/`#1c1c20` | Dropdowns, popovers, tooltips | | 5 Modal | `0 16px 48px rgba(0,0,0,0.7)` over `rgba(0,0,0,0.80)` scrim | Dialogs | | Glow | `0 0 0 1px rgba(119,116,255,0.4), 0 0 24px rgba(119,116,255,0.25)` | Optional indigo halo on hero CTA | | Focus ring | `0 0 0 3px rgba(119,116,255,0.55)` | All keyboard focus | **Shadow Philosophy**: Depth is built primarily from the greyscale surface ladder and 1px hairlines; drop-shadows appear only on genuinely floating layers (dropdowns, modals) and stay dark and soft so they read as separation, not ornament. The only luminous gesture in the system is indigo — the optional CTA glow and the focus ring. This keeps the surface sober: everything is matte greyscale until the one moment the brand wants you to act. ## 8. Interaction & Motion - **Easing standard** — `cubic-bezier(0.4, 0, 0.2, 1)` for hover, colour, and most state changes. - **Easing emphasized** — `cubic-bezier(0.2, 0, 0, 1)` for modal/sheet entrances and larger reveals. - **Durations** — fast 150ms (hover, colour swaps), standard 240ms (dropdowns, focus, card hover), slow 320ms (modal/sheet enter, page section reveals). - **Hover** — primary CTA lightens `#7774ff → #8e8bff` over 150ms; rows swap bg and border over 150ms; cards step surface tier (+ optional 4px translateY on marketing feature cards only). - **Active / Press** — CTA deepens to `#605df0`; subtle 1px inset, no scale-down. - **Price flash** — order-book and PnL values flash `#26c4861a` (up) or `#ff5a5a1a` (down) bg for ~400ms then ease back. Tabular numerals prevent reflow. - **Focus** — 3px `rgba(119,116,255,0.55)` ring fades in over 150ms; never removed for mouse users (focus-visible scoped). - **Modal / sheet** — enters with 320ms emphasized ease: fade + 8px rise, scrim fades simultaneously. - **CTA glow** — hero CTA may pulse its indigo glow once on initial viewport entry (240ms in, settle) as the single attention gesture; disabled under reduced-motion. - **Page transition** — none in the application (instant route swaps for trader speed); marketing pages allow gentle scroll-reveal fades. - **Reduced motion** — `prefers-reduced-motion: reduce` honoured: glow pulse, translateY, price-flash and scroll-reveals collapse to opacity-only or are disabled; colour-state changes remain. ## 9. Accessibility & A11y - **Contrast (computed from live tokens)**: - Ink `#fafafd` on canvas `#000000` = **20.16:1** — AAA at every size. - Body `#c8c8d2` on canvas = **12.65:1** — AAA. - Brand indigo `#7774ff` on canvas = **5.73:1** — AA for normal text, AAA for large; safe for links and icons on black. - Muted `#8a8a96` on canvas = **6.16:1** — AA for normal text. - White on-brand `#ffffff` on indigo `#7774ff` = **3.67:1** — passes AA for **large/bold text only** (≥18.66px bold / 24px regular). The live CTA label runs ~15–16px bold, sitting right at the large-bold threshold; keep CTA text ≥16px bold and **do not** drop white-on-indigo below that or it fails AA. (Ink `#fafafd` on indigo is 3.52:1 — same caveat.) - Up green `#26c486` on canvas = **9.32:1** (AAA); Down red `#ff5a5a` on canvas = **6.86:1** (AA+). - **Focus indicator**: 3px solid `rgba(119,116,255,0.55)` ring, highly visible on pure black; never suppressed for keyboard users. - **ARIA patterns**: Market tables use `role="table"` with `aria-sort` on sortable headers. Order-side toggles use `role="radiogroup"`. Toasts use `role="status"` / `aria-live="polite"`; liquidation warnings escalate to `aria-live="assertive"`. - **Keyboard nav**: Market rows focusable (Up/Down to move, Enter to select); order-form fields in logical tab order; quick-fill chips reachable by Tab + Space. - **Screen reader hints**: PnL and price-change values carry visually-hidden "+N% up" / "-N% down" text so colour is never the sole carrier. Position side ("Long"/"Short") is spoken, not implied by colour alone. - **Reduced motion**: Honoured — see §8. - **Colour independence**: Green/red PnL always pairs with a sign (+/−) and a direction word in SR text, so red/green colour-blind users are not stranded. ## 10. Responsive Behavior | Breakpoint | Width | Key Changes | |------------|------:|-------------| | Mobile | < 640 | Top nav → hamburger; trading view stacks chart over a tabbed order form; market table → card stack; hero h1 drops 60 → 36px | | Tablet | 640–1024 | Two-zone trading layout (chart + collapsible order form); marketing feature blocks 1-up; nav condenses | | Desktop | 1024–1280 | Full three-zone trading layout; marketing grid 2-up features; persistent nav | | Wide | > 1280 | Content capped at 1280px on marketing; trading app goes full-bleed to use chart/order-book estate | **Touch Targets**: Primary CTAs and order buttons render at minimum 44 × 44px on touch. Quick-fill chips and toggles expand to 44px tap height on mobile. **Collapsing Strategy**: Top nav → hamburger sheet. Trading three-zone layout collapses to a single scroll with a sticky bottom Long/Short action bar on mobile. Market tables collapse to card stacks surfacing market / mark price / 24h change. **Image / Chart Behavior**: Charts are canvas/WebGL and resize to container; marketing imagery uses `loading="lazy"` and `aspect-ratio` to prevent layout shift. The product carries no decorative imagery — only functional charts and token glyphs. ## 11. Content & Voice - **Tone** — technical, confident, trader-direct. The product assumes the reader knows derivatives; marketing copy is plain and benefit-led ("Trade perpetuals with deep liquidity") without crypto-hype maximalism. - **Microcopy** — imperative and compact in-app: "Connect Wallet", "Add Margin", "Close Position", "Cancel All". Labels favour the trader's noun ("Mark Price", "Funding", "Open Interest") over a softened explanation. - **CTA verbs** — "Get Started" (entry), "Trade Now" / "Start Trading" (conversion), "Connect Wallet" (auth), "Long" / "Short" (order side), "Place Order" (commit). - **Empty states** — brief and useful: "No open positions", "No order history yet" — paired with a single quiet CTA to start, no illustration, no apology. - **Error messages** — direct and remediable: "Insufficient margin — add USDC", "Order size below minimum". Wallet/chain errors surface the provider message rather than masking it. - **Number formatting** — tabular monospace; locale separators; sensible decimal precision per market; PnL always signed (+/−) and coloured. USD value shown alongside token amounts where helpful. - **Voice prohibition** — no hype emoji, no "to the moon" maximalism, no fake urgency timers. The brand's authority comes from sobriety; it talks to professionals, not to a hype feed. ## 12. Dark Mode & Theming dYdX is **dark-only**. The pure-black canvas is the brand and there is no light variant — a derivatives terminal lives on black both for the trader's eyes during long sessions and because the indigo voltage only reads as a signature against black. The near-white ink `#fafafd` and the single indigo `#7774ff` are tuned for this one surface. If a hypothetical light variant ever shipped, the predicted token swap would be: `bg #ffffff`, `surface-soft #f7f7f9`, `surface-strong #efeff2`, `border #e4e4ea`, `text #0a0a0e`, `text-body #3a3a44`, with `#7774ff` carrying through unchanged (it holds 4.5:1+ on white as well). But the editorial position is that this surface should not exist: dYdX is a "trade in the dark" instrument by identity, and a light mode would dilute the purple-on-black that *is* the brand. ## 13. Lineage & Influences dYdX's design language descends from **professional trading terminals** crossed with the modern dark-SaaS aesthetic. The pure-black canvas, dense tabular data, monospace numerals, and information-first layout are direct inheritances from desktop trading software (Bloomberg/TradingView lineage). But where pure terminals are utilitarian to the point of brutalism (see Blur), dYdX layers on a contemporary product-design polish: the Satoshi geometric-grotesque type, the 12px-radius composed surfaces, and the disciplined single-accent system that today's developer-tool brands (Linear, Vercel) popularised. The single-voltage-on-black move is its clearest contemporary borrowing — one saturated brand colour reserved for the primary action, everything else greyscale. dYdX picks indigo-purple where Linear leans violet-on-near-black and Vercel leans monochrome; the family resemblance is the *discipline*, not the hue. What dYdX rejects is the consumer-fintech warmth (Coinbase's navy and rounding, Robinhood's friendly green) and the hype-maximalist crypto aesthetic (loud gradients, neon everything) — it stays sober, technical, and assumes a sophisticated user. Influences: - **Linear** — single near-black surface plus one disciplined accent; Satoshi-adjacent geometric type register. https://linear.app - **Vercel** — monochrome-on-black product design, restraint as polish, single high-contrast CTA. https://vercel.com - **TradingView** — dense market tables, monospace numerals, dark trading-surface conventions. https://www.tradingview.com - **Blur** — the brutalist pure-black trader counterpart in NFT markets; dYdX shares the black canvas and single-voltage discipline but softens to 12px radius and a humanist-grotesque sans. https://blur.io - **Satoshi (Fontshare / Indian Type Foundry)** — the display and body typeface; chosen for its compressed geometric-grotesque, technical character. https://www.fontshare.com/fonts/satoshi ## 14. Do's and Don'ts ### Do - Keep the canvas pure `#000000` — no navy tint, no warming - Use ink `#fafafd` (rgb 250,250,253) for primary text — a faint cool off-white, not pure `#fff` - Reserve indigo `#7774ff` for the primary CTA and active/selected/link/focus states only - Give the brand CTA a 12px radius and white text — match the live "Get Started" token - Keep CTA label text ≥16px bold so white-on-indigo clears AA large-text (3.67:1) - Build elevation from the greyscale surface ladder + 1px `#1f1f24` hairlines; keep shadows quiet - Use Satoshi (compressed) for display and body; monospace only for prices, sizes, PnL, addresses - Let the hero h1 land at 60px / weight 400 — authority through scale and tracking, not bold - Use green `#26c486` / red `#ff5a5a` strictly for PnL and order state, always paired with a sign - Enable tabular numerals on all numeric columns so order books don't reflow ### Don't - Don't use navy-tinted black (`#0d1117`, `#04111d`) — pure `#000` is the commitment - Don't introduce a second decorative accent — indigo is the only chromatic voltage - Don't run white-on-indigo CTA text below ~16px bold — it drops under AA (3.67:1) - Don't go 0px brutalist — the 12px radius is what separates dYdX from Blur; keep the softening - Don't make headlines heavy — Satoshi at 400/500 carries the hero; 700 reads shouty here - Don't use monospace for body copy — mono is numbers-only; Satoshi is the voice - Don't add loud gradients, glassmorphism, or neon glows beyond the single indigo CTA halo - Don't lift cards on hover in the application — colour-state swap; reserve translateY for marketing - Don't use hype-crypto copy or emoji — the voice is sober, technical, professional - Don't carry red/green as the only PnL signal — always add +/- sign and SR direction text ## 15. Agent Prompt Guide ### Quick Color Reference - Brand (indigo-purple): `#7774ff` - Brand hover: `#8e8bff` - Brand pressed: `#605df0` - On-brand (CTA text): `#ffffff` - Canvas: `#000000` - Surface soft: `#0a0a0a` - Surface strong: `#131316` - Ink text: `#fafafd` - Body text: `#c8c8d2` - Muted: `#8a8a96` - Border: `#1f1f24` - Up green: `#26c486` - Down red: `#ff5a5a` ### Example Component Prompts - "Create a dYdX hero band: pure `#000000` background, 60px Satoshi (compressed) weight 400 headline 'Trade perpetuals on-chain' with -0.03em tracking in `#fafafd`, an 11px uppercase eyebrow 'DEFI'S PRO TRADING PLATFORM' in `#8a8a96` above it, 18px Satoshi body in `#c8c8d2`, and a primary CTA 'Get Started' in white 16px bold on indigo `#7774ff`, 12px radius, 12 × 20 padding, with a soft indigo glow. Add a secondary 'View Docs' button: surface `#131316`, 1px `#1f1f24` border, 12px radius." - "Design a market card: `#0a0a0a` bg, 1px `#1f1f24` border, 12px radius, 24px padding. Header row: market 'ETH-USD' in Satoshi 20/600 `#fafafd` + a long badge ('LONG') as a pill, `#26c4861a` bg, `#26c486` text, 9999px radius. Body: mark price in monospace 14/500 `#fafafd`, 24h change '+2.41%' in `#26c486`. Hover: bg → `#131316`, border → `#33333c`, no lift." - "Build a markets table row: `#000` bg, 1px `#131316` bottom divider. Columns: market name in Satoshi 13/500 `#fafafd`, mark price + index in monospace `#fafafd`, 24h change in `#26c486` (up) or `#ff5a5a` (down), volume in monospace `#8a8a96`. Hover → bg `#0a0a0a`; selected → `#7774ff1a` bg with a 2px `#7774ff` left border. Column headers: Satoshi 12/500 0.04em tracking `#8a8a96`." - "Render an order-form panel: surface `#000`, right rail. A radiogroup Long/Short toggle (Long fills `#7774ff` white text, Short ghost). Amount input: `#0a0a0a` bg, 1px `#1f1f24` border, 8px radius, monospace right-aligned numerals with a muted 'USDC' suffix; quick-fill chips 25%/50%/Max as ghost buttons. A leverage slider with `#7774ff` filled track. Submit: full-width indigo `#7774ff` CTA 'Place Order', white 16px bold, 12px radius." - "Compose a top nav: 64px tall, `#000` bg, 1px `#1f1f24` bottom border. Wordmark left; tabs 'Trade / Portfolio / Markets / Governance' in Satoshi 14/500 `#8a8a96`, active tab `#fafafd` with a 2px `#7774ff` underline; right side ends in a primary indigo CTA 'Connect Wallet', white 16px bold, 12px radius." - "Create a stat dashboard: three stat-cards on `#000`, each surface `#0a0a0a`, 12px radius, 16px padding — caption label in `#8a8a96` 12px on top, monospace value below; PnL card shows '+$1,240.50' in `#26c486`, loss card '-$320.10' in `#ff5a5a`. Equal-width, 16px gap." ### Iteration Guide 1. Lock the canvas to pure `#000000` first — if it looks navy or warm, it isn't dYdX. Then set ink to `#fafafd`, not `#ffffff`. 2. Spend indigo `#7774ff` exactly once per section — on the primary CTA. If two indigo elements compete, demote one to greyscale. 3. Put a 12px radius on buttons, cards, and modals; 8px on inputs; 9999px only on badges/avatars. Never 0px (that's Blur). 4. Keep the hero at weight 400–500 and large (≈60px). If it reads shouty, you've over-weighted it; lean on size and -0.03em tracking. 5. Use Satoshi for everything except numbers; switch prices, sizes, and PnL to monospace with tabular numerals so columns align. 6. Confirm CTA text is white and ≥16px bold — below that, white-on-indigo (3.67:1) fails AA. Bump size before changing the colour. 7. Build depth with the surface ladder (`#000`→`#0a0a0a`→`#131316`) and 1px `#1f1f24` hairlines; add a real shadow only on floating layers. 8. Add green/red only where PnL or order state demands it, always with a +/- sign — never as decoration.