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

# Codex · Design System

> A precise dark canvas for live crypto data

**Theme:** dark · **Industry:** crypto · **Source:** https://www.codex.io/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Codex presents its crypto data API through a near-black, editorial interface with sharp lime calls to action and restrained green data highlights. Fine borders, compact labels, and live-looking product panels make technical breadth feel structured and approachable.

## North star

Keep the dark canvas quiet and let clear grids, readable data, and lime actions establish hierarchy.

## Overview

The page is anchored by a near-black canvas (#181818), which keeps attention on bright white and soft gray typography, fine gray dividers, and product interface previews. The primary action uses vivid lime (#e5ff5d) with dark text, while mint green appears sparingly in market data and status cues; amber and other accents are secondary details rather than core brand surfaces. Geist carries the headline, navigation, labels, and body copy, with tight display tracking and frequent uppercase micro-labels. Satoshi adds a softer supporting voice in some feature headings and data cards, while JetBrains Mono makes code samples legible as code. The layout alternates centered hero content with left-aligned section introductions and dense, sharply divided grids. Product screenshots, charts, token marks, and code panels provide the visual evidence; they sit inside dark frames instead of competing with the brand palette. Spacing is comfortable around major sections but compact within dashboards and tables.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Codex Black | `#181818` | `--color-codex-black` | brand | Primary canvas and recurring card background; also grounds the hero and dark fade overlays. |
| Signal Lime | `#e5ff5d` | `--color-signal-lime` | accent | Primary CTA fill, highlighted action labels, small badges, and lime interface indicators. |
| Graphite Line | `#3d4045` | `--color-graphite-line` | surface | Measured divider and border color; appears as a contrasting band and footer surface. |
| Soft Silver | `#d1d1d1` | `--color-soft-silver` | neutral | Muted explanatory copy and secondary footer text on dark backgrounds. |
| Quiet Gray | `#a7a7a7` | `--color-quiet-gray` | neutral | Secondary text and less prominent copy, preserving contrast without competing with headings. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Navigation, primary text, and selected headings and buttons. |
| Panel Charcoal | `#1f1f1f` | `--color-panel-charcoal` | surface | Raised card and navigation surface, notably in portfolio-style data panels. |
| Mist White | `#e8e8e8` | `--color-mist-white` | neutral | Main body and feature-card text, slightly softened against the black canvas. |
| Market Mint | `#00e599` | `--color-market-mint` | accent | Small market-data gains, badges, and status details; a data accent rather than a broad surface. |
| Slate Gray | `#8c8c8c` | `--color-slate-gray` | neutral | Low-emphasis labels, headings, footer copy, and muted button text. |
| Divider Charcoal | `#2e2e2e` | `--color-divider-charcoal` | surface | Subtle card edges and separators within dark interface areas. |
| Control Charcoal | `#282828` | `--color-control-charcoal` | surface | Quiet button, navigation, and card control backgrounds. |
| Pale Mint | `#97e6b4` | `--color-pale-mint` | accent | Occasional green-tinted text accent, supporting the market-data palette. |
| Midnight Gray | `#575757` | `--color-midnight-gray` | neutral | Rare subdued text detail; keep it secondary on the dark canvas. |
| Deep Ink | `#111111` | `--color-deep-ink` | neutral | Dark foreground on lime primary buttons and a small number of dark text details. |
| Data Amber | `#ffcb6b` | `--color-data-amber` | semantic | Small warm data highlight; use as a restrained informational detail, not a dominant brand color. |

### Semantic aliases

`--color-canvas` → `#181818` (Codex Black) · `--color-surface` → `#3d4045` (Graphite Line) · `--color-surface-2` → `#1f1f1f` (Panel Charcoal) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#d1d1d1` (Soft Silver) · `--color-text-subtle` → `#a7a7a7` (Quiet Gray) · `--color-border` → `#3d4045` (Graphite Line) · `--color-accent` → `#00e599` (Market Mint) · `--color-accent-2` → `#97e6b4` (Pale Mint) · `--color-accent-3` → `#ffcb6b` (Data Amber)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#181818` | 17.76:1 | AAA |
| `#ffffff` | `#3d4045` | 10.41:1 | AAA |
| `#ffffff` | `#1f1f1f` | 16.48:1 | AAA |
| `#d1d1d1` | `#181818` | 11.63:1 | AAA |
| `#d1d1d1` | `#3d4045` | 6.82:1 | AA |
| `#d1d1d1` | `#1f1f1f` | 10.79:1 | AAA |
| `#a7a7a7` | `#181818` | 7.38:1 | AAA |
| `#a7a7a7` | `#3d4045` | 4.33:1 | AA-large |
| `#a7a7a7` | `#1f1f1f` | 6.85:1 | AA |
| `#00e599` | `#181818` | 10.71:1 | AAA |

### Gradients

- `linear-gradient(rgba(24, 24, 24, 0) 0%, rgba(24, 24, 24, 0.02) 36%, rgba(24, 24, 24, 0.08) 52%, rgba(24, 24, 24, 0.24) 70%, rgba(24, 24, 24, 0.56) 86%, rgba(24, 24, 24, 0.86) 96%, rgb(24, 24, 24) 100%)`
- `linear-gradient(to left, rgb(24, 24, 24) 13.1%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgb(24, 24, 24) 13.1%, rgba(0, 0, 0, 0) 100%), linear-gradient(to top, rgb(24, 24, 24) 13.1%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(to top, rgb(24, 24, 24) 13.1%, rgba(0, 0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist | `--font-body` | webfont | 400, 500 | Primary display, navigation, body copy, labels, and buttons | Inter |
| Manrope | `--font-manrope` | webfont | 400 | Supporting sans-serif text in secondary interface areas | Manrope |
| satoshi | `--font-satoshi` | webfont | 500, 400 | Some feature headings and wallet/data card text | Manrope |
| JetBrains Mono | `--font-mono` | webfont | 400 | Code examples and API response snippets | JetBrains Mono |

- **Geist:** Medium-weight display with tight negative tracking; uppercase navigation and compact captions are common.
- **Manrope:** Regular-weight supporting voice; keep it clean and understated alongside Geist.
- **satoshi:** Regular and medium weights provide a subtly rounder companion to Geist.
- **JetBrains Mono:** Monospace code treatment with comfortable line spacing and no extra tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.347, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 62px | 500 | 0.92 | -0.04em | — | Geist | Oversized hero statement and prominent page-level display copy. |
| h1 | 56px | 500 | 0.92 | -0.04em | — | Geist | Primary hero heading. |
| h2 | 48px | 500 | 1 | -0.04em | — | Geist | Major section headings across the long landing page. |
| h3 | 32px | 500 | 1.4 | 0 | — | satoshi | Feature headings and product panel titles. |
| h4 | 28px | 500 | 1.5 | 0 | — | satoshi | Secondary card headings and nested feature titles. |
| body | 14px | 400 | 1.4 | -0.02em | — | Geist | Supporting descriptions, feature copy, and standard interface text. |
| caption | 12px | 500 | 1.33 | -0.02em | uppercase | Geist | Uppercase micro-labels, badges, and compact metadata. |
| button | 10px | 400 | 1 | -0.02em | — | Geist | Compact action labels, typically uppercase. |
| nav | 12px | 500 | 1.33 | -0.02em | uppercase | Geist | Uppercase primary navigation labels. |
| code | 11.5px | 400 | 1.75 | 0 | — | JetBrains Mono | Monospace API queries and structured response examples. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 1, 4, 6, 8, 10, 11, 12, 13, 15, 16, 17, 20, 24, 26, 32, 56 px.
- Section rhythm 64px · element gap 12px · card padding 20px · max content width 1278px.

The content sits within a broad centered frame, measured at a 1278px maximum width, with a fine outer boundary visible in the screenshots. The hero centers its message over atmospheric media; subsequent sections use left-aligned introductions, paired feature panels, and multi-column grids. Dividers define the transitions between modules more than contrasting section backgrounds do. The measured rhythm uses generous gaps between sections and tighter spacing inside cards and dense data displays. Content density varies deliberately: open headline areas lead into compact, information-rich product demonstrations.

## Shape & elevation

- Radius: button `4px` · card `20px` · media `50%` · badge `4px` · nav `4px` · link `4px` · xs `1px` · sm `3px` · md `4px` · lg `5px` · xl `7px` · 2xl `15px` · pill `9999px`
- Shadow `lg` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 4.4px 26.4px 0px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.45) 0px 24px 60px 0px`
- Motion: standard transition `0.2s cubic-bezier(0, 0, 0.2, 1)` on interactive elements.

The design is mostly flat: fine borders and hairlines establish card edges, section divisions, and table structure. Dark panels separate content subtly from the canvas instead of relying on conspicuous shadows. The pricing area introduces a brighter featured card against darker neighboring plans; shadows are restrained and used to distinguish layered cards where needed.

## Imagery

The hero uses a subdued, dark, globe-like digital asset visual behind centered copy, faded so the headline and lime CTA remain dominant. Product illustrations are primarily interface captures or rendered mockups: token lists, charts, wallet balances, code, and data visualizations. Token logos and partner marks add color within those demonstrations, not as defining brand colors. Imagery is framed in dark panels and cropped to support the grid.

## Components

### Primary CTA

Lime-filled button with dark text, uppercase Geist label, compact padding, and a small icon on prominent start-building actions.

### Section introduction

Large left-aligned heading paired with a short muted description, often with the title wrapping across two lines.

### Feature grid

Dark feature panels divided by thin borders, with compact headings, short copy, and small lime navigation markers.

### Data showcase

Framed chart, wallet, or token interface previews on dark surfaces, mixing muted labels with mint market indicators.

### Code panel

Dark API example panel with JetBrains Mono query and response text plus restrained syntax color.

### Pricing cards

Three-column pricing comparison with dark side cards and a visually emphasized light central plan.

### Navigation

Compact uppercase labels on a dark bar, Codex wordmark at left, and a bright lime Get Started action at right.

### Measured component styles

- **Primary button** (“S T A R T B U I L D I N G F O R F R E E ”): background #e5ff5d · text #111111 · radius 4px · padding 8px 16px 8px 8px · 500 12px Geist · uppercase
- **Secondary button** (“CHART DATA”): background #181818 · text #ffffff · radius 0px · padding 0px · 500 12px Geist · uppercase
- **Link** (“Predictions E X P L O R E E X P L O R E”): background #181818 · text #e8e8e8 · radius 0px · padding 17px 15px 15px 15px · 400 16px Geist
- **Card** (“Wallet balances Portfolio view for any w”): background #181818 · text #e8e8e8 · radius 0px · padding 20px · 400 16px Geist
- **Badge** (“$112.69”): background #00e599 · text #ffffff · radius 4px · padding 0px 4px · 500 10px satoshi
- **Navigation item** (“P R O D U C T S P R O D U C T S”): transparent background · text #ffffff · radius 0px · padding 0px · 500 12px Geist · uppercase

## Do

- Use #181818 as the dominant page canvas.
- Reserve #e5ff5d for primary actions and small emphasis.
- Use thin borders to organize grids and panels.
- Keep headings crisp, compact, and high contrast.
- Treat charts and interface previews as dark product evidence.
- Use monospace only for code and API responses.

## Don't

- Do not turn the page into a bright, light-themed layout.
- Do not use lime as a large background band.
- Do not add heavy shadows to every card.
- Do not let mockup colors redefine the brand palette.
- Do not make section layouts overly spacious or sparse.
- Do not use decorative display type in place of the measured sans-serif system.

## Agent prompt

Build a new Codex-style page as a dark, technical interface with a #181818 Codex Black canvas and compact, deliberate hierarchy. Use #e5ff5d Signal Lime for the primary CTA and restrained interface emphasis; use #3d4045 Graphite Line for fine dividers, #1f1f1f Panel Charcoal for subtle card surfaces, and #e8e8e8 Mist White for readable copy. Use Geist or Inter for headings, navigation, and body text, with tightly tracked display headings and uppercase micro-labels. Use JetBrains Mono for code examples. Structure content in a centered wide frame, alternating concise section introductions with bordered grids, product previews, and code panels. Keep market greens inside data details. Favor flat surfaces and hairline borders; use imagery as dark, framed product evidence rather than decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero statement and actions over a dark atmospheric globe visual. | Primary and secondary CTA, Partner marks | Dark media fade, Lime CTA, Centered heading |
| 2 | feature-split | Left-aligned heading and supporting paragraph in a single introductory band. | Value proposition, Technical reassurance | Large heading, Muted copy, Open dark canvas |
| 3 | feature-grid | Two-column feature area with token price and prediction-market demonstrations. | Feature discovery, Live-data preview | Bordered panels, Token list, Prediction widget |
| 4 | feature-grid | Three adjacent product cards for balances, aggregated data, and webhooks. | Feature scanning, Explore links | Dark interface previews, Fine dividers, Lime indicators |
| 5 | product-showcase | Section title and copy above tabs, with chart and code panels side by side. | Tabbed data categories, Interactive query preview | Chart visualization, Code panel, Dark segmented tabs |
| 6 | logo-cloud | Section intro followed by a dense, multi-column grid of product and company marks. | Customer discovery, Social proof | Logo-and-copy cells, Thin grid lines |
| 7 | feature-split | Intro above a two-part interface: capability list beside a large code example. | Capability selection, API example | Vertical feature menu, Monospace code panel, Lime selection details |
| 8 | testimonials | Centered testimonial within a framed band, with controls at the sides. | Carousel navigation, Read-story link | Centered quote, Customer attribution, Small lime controls |
| 9 | feature-grid | Intro followed by three equal feature columns with compact copy. | Benefit scanning, Capability comparison | Three-column grid, Small icons, Bordered cells |
| 10 | pricing | Three pricing cards, a highlighted central plan, and a compact metrics row below. | Plan comparison, Primary plan selection | Featured light card, Dark side cards, Checklist rows |
| 11 | stats | Large token illustration beside a vertically stacked set of coverage metrics. | Scale validation, Coverage browsing | Token-logo cluster, Metric list, Divided rows |
| 12 | integrations | Four-column endpoint cards beneath a section heading. | Endpoint discovery, Explore links | Bordered cards, Compact labels, Arrow accents |
| 13 | cta | Centered heading and short copy with paired calls to action. | Signup prompt, Documentation access | Centered composition, Lime primary action, Dark secondary action |
| 14 | footer | Brand description and several compact link columns above a fine bottom divider. | Grouped site navigation, Legal links | Small uppercase headings, Muted link lists, Thin separators |

## Source CSS custom properties (selected)

```css
--background: #181818;
--foreground: #e8e8e8;
--card-foreground: #e1e8ee;
--popover-foreground: #eee;
--primary: #e5ff5d;
--primary-foreground: #081a1b;
--secondary: #292929;
--secondary-foreground: #eee;
--muted-foreground: #b4b4b4;
--accent: #2a2a2a;
--accent-foreground: #e5ff5d;
--destructive-foreground: #fff;
--border: #2c2c2c;
--brand: #e5ff5d;
--brand-foreground: #111;
--radius: .5rem;
--ease-out-expo: cubic-bezier(.16,1,.3,1);
--ease-codex: cubic-bezier(.08,1,.2,1);
--ease-sine-in-out: cubic-bezier(.37,0,.63,1);
--ease-sine-in: cubic-bezier(.12,0,.39,0);
--ease-power1-in-out: cubic-bezier(.45,0,.55,1);
--ease-power2-in: cubic-bezier(.55,0,1,.45);
--ease-power2-in-out: cubic-bezier(.65,0,.35,1);
```

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