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

# Hyperliquid · Design System

> Quiet editorial clarity meets onchain market energy

**Theme:** light · **Industry:** crypto · **Source:** https://hyperliquid.xyz/ · **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._

Hyperliquid pairs a restrained, editorial homepage with vivid green market visuals and a confident serif headline. Alternating pale content areas and deep-green feature sections frame the platform as both financial infrastructure and a live trading venue.

## North star

Use spacious editorial typography on pale surfaces, then reserve saturated mint and deep green for decisive actions and market-focused moments.

## Overview

The page balances a near-white canvas (#f8f9f9) with deep evergreen surfaces (#03211c and #0f3933), using green as a focused signal rather than a blanket decoration. A large, lightly weighted serif headline creates an editorial opening, while compact sans-serif navigation, body copy, metrics and labels keep the interface functional. The hero is spacious and asymmetrical: headline on the left, concise proposition and mint CTA on the right, followed by a muted partner-logo strip. Below, dark sections and market imagery provide contrast; trading visuals and particle-like green graphics carry motion and technical character, while pale content blocks keep longer explanations legible. Layout is aligned to a broad centered page width, with generous pauses between major content groups and a denser rhythm inside navigation, stats and lists. Rounded buttons and cards soften the otherwise flat, precise visual system.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Porcelain Canvas | `#f8f9f9` | `--color-porcelain-canvas` | neutral | Primary page canvas and the dominant background behind the hero and content sections. |
| Slate Sage | `#4e6360` | `--color-slate-sage` | semantic | Muted body copy and supporting text on pale backgrounds. |
| Deep Evergreen | `#03211c` | `--color-deep-evergreen` | brand | Primary heading and text color; also anchors inverse dark sections. |
| Moss Signal | `#447259` | `--color-moss-signal` | accent | Green links and a key stop in the brand's atmospheric green gradient. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Light text and graphic details over dark surfaces. |
| Mint Signal | `#97fce3` | `--color-mint-signal` | accent | Primary Trade CTA fill and luminous highlights in market visuals. |
| Forest Surface | `#0f3933` | `--color-forest-surface` | surface | Deep-green section and graphic surface, often blended into a green gradient. |
| Mist Panel | `#dfe3e3` | `--color-mist-panel` | surface | Soft neutral panel background for secondary surfaces and interface elements. |
| Weathered Sage | `#96a2a0` | `--color-weathered-sage` | semantic | Low-emphasis supporting text and labels. |
| Midnight Spruce | `#011916` | `--color-midnight-spruce` | brand | Deepest green gradient edge, used in atmospheric section artwork. |
| Soft Fern | `#77b694` | `--color-soft-fern` | accent | Pale green gradient endpoint, chiefly visible in large decorative section treatments. |
| Cloud Panel | `#e8eaea` | `--color-cloud-panel` | surface | Subtle button, card and link backgrounds against the near-white canvas. |

### Semantic aliases

`--color-canvas` → `#f8f9f9` (Porcelain Canvas) · `--color-surface` → `#03211c` (Deep Evergreen) · `--color-surface-2` → `#dfe3e3` (Mist Panel) · `--color-surface-3` → `#0f3933` (Forest Surface) · `--color-surface-4` → `#e8eaea` (Cloud Panel) · `--color-text` → `#03211c` (Deep Evergreen) · `--color-text-muted` → `#4e6360` (Slate Sage) · `--color-text-subtle` → `#ffffff` (Paper White) · `--color-accent` → `#447259` (Moss Signal) · `--color-accent-2` → `#97fce3` (Mint Signal) · `--color-accent-3` → `#77b694` (Soft Fern) · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#03211c` | `#f8f9f9` | 16.08:1 | AAA |
| `#03211c` | `#dfe3e3` | 13.11:1 | AAA |
| `#03211c` | `#0f3933` | 1.34:1 | fail |
| `#4e6360` | `#f8f9f9` | 6.07:1 | AA |
| `#4e6360` | `#03211c` | 2.65:1 | fail |
| `#4e6360` | `#dfe3e3` | 4.95:1 | AA |
| `#4e6360` | `#0f3933` | 1.98:1 | fail |
| `#ffffff` | `#f8f9f9` | 1.05:1 | fail |
| `#ffffff` | `#03211c` | 16.96:1 | AAA |
| `#ffffff` | `#dfe3e3` | 1.29:1 | fail |

### Gradients

- `radial-gradient(113% 100% at 50% 0px, rgb(1, 25, 22) 0%, rgb(15, 57, 51) 34.5035%, rgb(68, 114, 89) 67.2508%, rgb(119, 182, 148) 99.8856%)`
- `linear-gradient(rgb(248, 249, 249) 0%, rgba(248, 249, 249, 0) 10%, rgba(248, 249, 249, 0) 90%, rgb(248, 249, 249) 100%)`
- `linear-gradient(rgba(249, 252, 252, 0) 0%, rgb(249, 252, 252) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Diatype Regular | `--font-body` | webfont | 400 | Body copy, links, navigation and secondary headings | Inter |
| Teodor Light | `--font-display` | webfont | 300 | Display and primary headline | Bodoni Moda |
| ABC Diatype Medium | `--font-abc-diatype-medium` | webfont | 500 | Small labels and uppercase captions | Inter |

- **ABC Diatype Regular:** Regular-weight sans with slightly tight tracking; use for compact interface text and readable explanatory copy.
- **Teodor Light:** Light, elegant serif with tight tracking; sentence case, used for large editorial statements.
- **ABC Diatype Medium:** Medium weight for compact uppercase labels; keep the treatment functional and restrained.

### Type scale — Perfect Fifth (ratio ≈ 1.495, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 300 | 1.05 | -0.03em | — | Teodor Light | Large editorial statements, led by the homepage hero headline. |
| h1 | 40px | 300 | 1.15 | -0.03em | — | Teodor Light | Primary page headline and prominent section statements. |
| h2 | 36px | 400 | 1.2 | -0.03em | — | ABC Diatype Regular | Major feature and explanatory section headings. |
| h3 | 24px | 400 | 1.25 | -0.03em | — | ABC Diatype Regular | Compact feature and subsection headings. |
| body | 16px | 400 | 1.4 | -0.01em | — | ABC Diatype Regular | Paragraphs, descriptions and general interface copy. |
| caption | 14px | 500 | 1.14 | 0 | uppercase | ABC Diatype Medium | Small uppercase labels for sections, metadata and categories. |
| link | 16px | 400 | 1.4 | -0.01em | — | ABC Diatype Regular | Navigation, inline links and CTA-adjacent text. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

- Base unit **8px**, density **compact**.
- Scale (most used values): 4, 8, 10, 12, 16, 24, 32, 40, 72, 80 px.
- Section rhythm 40px · element gap 12px · card padding — · max content width 1328px.

Use a broad centered composition with a measured page max width of 1328px. The hero is asymmetrical, placing a large left-aligned headline opposite a concise text-and-CTA block; a horizontal partner strip creates a transition below. Major sections alternate between open pale content areas and full-width dark-green feature bands. Maintain generous vertical pauses between major blocks, while keeping navigation, stats, lists and logo rows compact. Favor clear alignment and low visual density over card-heavy grids.

## Shape & elevation

- Radius: button `12px` · card `12px` · media `50%` · xs `8px` · sm `12px` · md `16px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is mostly flat, with no measured shadows. Separate areas through background shifts, whitespace and occasional thin dividers rather than raised layers. Cards and buttons use soft neutral fills and rounded corners; dark feature bands provide the strongest sense of depth through color and gradient, not shadow.

## Imagery

Use market-interface imagery, abstract particle fields and restrained brand graphics rather than lifestyle photography. The trading interface can appear as a wide product screenshot, while mint particles and green gradients suggest live data and liquidity. Keep decorative visuals within deliberate section bands and preserve clean, quiet areas around editorial copy.

## Components

### Primary Trade CTA

Mint-filled button (#97fce3) with blue text, a 12px radius and a compact uppercase label; used in the hero and trading feature.

### Secondary navigation button

Soft gray (#e8eaea) rounded button with compact uppercase text for destinations such as Tech, About and Apps.

### Hero headline

Large, light serif statement on the left of the hero, paired with concise explanatory copy and a mint CTA on the right.

### Partner logo strip

Horizontal row of muted partner marks, separated from the hero by a fine hairline and kept visually secondary.

### Market feature band

Full-width deep-green area with mint particle artwork or trading imagery, contrasting with the pale content canvas.

### Link row

Compact sans-serif destination or market link, with green accents for selected product links and minimal surrounding decoration.

### Measured component styles

- **Primary button** (“TRADE”): background #97fce3 · text #0000ee · radius 12px · padding 24px 16px · 400 12px sans-serif
- **Secondary button** (“TECH”): background #e8eaea · text #0000ee · radius 12px · padding 16px · 400 12px sans-serif
- **Link** (“BTC $84,082”): transparent background · text #03211c · radius 0px · padding 0px · 400 12px sans-serif
- **Card** (“BLOOMBERG JUL 15, 2026 Crypto Market Off”): background #e8eaea · text #000000 · radius 12px · padding 0px · 400 12px sans-serif

## Do

- Keep the canvas near-white and the main text deep evergreen.
- Reserve mint for prominent actions and selected visual highlights.
- Use a light editorial serif for the most important headline.
- Pair broad, open hero composition with compact supporting interface text.
- Alternate pale content areas with deliberate deep-green feature bands.
- Use imagery to suggest live markets, data and liquidity.

## Don't

- Do not fill every section with gradients or saturated green.
- Do not use heavy shadows to create artificial depth.
- Do not make secondary navigation as prominent as the hero CTA.
- Do not crowd the headline with dense explanatory copy.
- Do not treat decorative market artwork as the page's content hierarchy.
- Do not introduce unmeasured colors for core interface elements.

## Agent prompt

Create a new Hyperliquid-style page with a near-white Porcelain Canvas (#f8f9f9), Deep Evergreen (#03211c) text and selective Forest Surface (#0f3933) feature bands. Open with an asymmetrical editorial hero: a light serif headline on the left, concise sans-serif copy and a Mint Signal (#97fce3) CTA on the right. Use measured Hyperliquid typefaces where available; otherwise choose close serif and sans-serif substitutes with restrained tracking. Keep navigation compact, content aligned to a broad centered width, and section spacing generous. Use market screenshots or particle-like green graphics sparingly to convey onchain activity. Prefer flat surfaces, hairline dividers and soft neutral panels over shadows. Make the page feel calm and precise, with green intensity concentrated in actions and visual feature moments.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | other | Full-width pale canvas with two centered decorative graphics and no detected text or controls. | visual transition, decorative pause | near-white background, centered SVG artwork |
| 2 | footer | Two-column footer links on the pale background, with grouped learning and social destinations. | grouped navigation, external social links | compact link lists, two-column grouping |

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