---
version: alpha
name: Hyperliquid
description: "Bioluminescent mint blooming through deep-green glass, finance liquefied."
colors:
  on-surface-variant: "#33998C"
  on-surface: "#FFFFFF"
  surface: "#0F3933"
  outline: "#23524C"
  primary: "#97FCE4"
  mint-glow: "rgb(151, 252, 215)"
  pale-mint: "#DBFBF6"
  mint-tint: "#F6FEFD"
  bright-teal: "#50D2C1"
  deep-green: "#072723"
  canvas-green: "#02231E"
  ink-black: "#04060C"
  sage-gray: "#B0C5C1"
  frost-white: "#EDFFFC"
typography:
  caption:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.375
    letterSpacing: 0em
  body:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0em
  subhead:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0em
  title:
    fontFamily: Inter
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0em
  heading:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0em
  display-s:
    fontFamily: Teodor
    fontSize: 35px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.01em
  display:
    fontFamily: Teodor
    fontSize: 55px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
  display-l:
    fontFamily: Teodor
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
  hero:
    fontFamily: Teodor
    fontSize: 90px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.01em
rounded:
  pills-buttons-nav-bar-chips: 60px
  secondary-pill: 37px
  card: 14px
  input-small-card: 12px
spacing:
  "1": 4px
  "2": 8px
  "3": 12px
  "4": 16px
  "6": 24px
  "8": 32px
  "12": 48px
  "16": 64px
  "24": 96px
---
# Hyperliquid — Style Reference
> Bioluminescent mint blooming through deep-green glass, finance liquefied.

**Theme:** dark

Hyperliquid paints one idea with total conviction: a single mint-green signature (`#97FCE4`) glowing out of an almost-black forest-green canvas. The hero is a full-bleed field of soft organic metaball gradients — deep teal shadows dissolving into cyan-mint light — with nothing floating on it but a white pill of navigation and a serif headline. The typographic move is the wordmark itself: "Hyper" set roman, "liquid" set in **Teodor italic**, a bookish serif that makes a crypto exchange read like a manifesto rather than a trading terminal. Everything rounds to a full pill (60px) — buttons, nav, the mint "Launch App" chip — so the interface feels fluid, never boxed. The palette is a single-hue ramp: ten steps of green from `#F6FEFD` to `#02231E`, and the brand never reaches outside it.

## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Mint Signature | `#97FCE4` | `--color-brand-200` | THE brand color — primary CTA fill, "Launch App" chip, focus borders, the glow. The only saturated color on the page; spend it on one action, never as body text. |
| Mint Glow | `rgb(151, 252, 215)` | `--color-glow` | The 20px halo behind the mint blob and buttons (`0 0 20px 5px`). Ambient light, not a fill. |
| Pale Mint | `#DBFBF6` | `--color-brand-100` | Soft mint wash — button hover, tinted surface on light sections. |
| Mint Tint | `#F6FEFD` | `--color-brand-50` | Near-white with a green cast; lightest surface. |
| Bright Teal | `#50D2C1` | `--color-brand-300` | Mid-bright teal accent, links and highlights on dark. |
| Muted Teal | `#33998C` | `--color-brand-400` | Desaturated teal for secondary text and muted labels on dark. |
| Border Teal | `#23524C` | `--color-brand-500` | Hairline borders and outlined-button strokes on dark surfaces. |
| Elevated Green | `#0F3933` | `--color-brand-700` | Raised surface / card fill one step above canvas. |
| Deep Green | `#072723` | `--color-brand-800` | Primary dark surface and the text color used *on* mint chips. |
| Canvas Green | `#02231E` | `--color-brand-900` | Deepest canvas — the darkest pool in the metaball gradient. |
| Ink Black | `#04060C` | `--color-ink` | Near-black used for the app-shell / deepest backdrop. |
| Sage Gray | `#B0C5C1` | `--color-text-muted` | Subhead and secondary copy — desaturated green-gray, never pure gray. |
| White | `#FFFFFF` | `--color-white` | Hero headline, nav-pill background, primary text on dark. |
| Frost White | `#EDFFFC` | `--color-frost` | Pale mint-white background for light sections. |

## Tokens — Typography
### Teodor — display serif for headlines and the wordmark; the italic cut is the signature · `--font-display`
- **Substitute:** Ivar Display, Freight Display Pro, Canela
- **Weights:** 400 (roman + italic)
- **Sizes:** 90px hero, 60px / 55px section display, 35px
- **Line height:** ~1.0–1.05 (tight, display)
- **Letter spacing:** normal to slightly tight (`-0.01em`); the italic "liquid" leans into the serif's natural rhythm
- **Role:** Every headline and the "Hyper*liquid*" wordmark. Roman for structure, italic for the liquid half — that one italic word carries the whole brand voice.

### Inter — UI and body; the workhorse under the serif · `--font-body`
- **Substitute:** system-ui, Segoe UI, Roboto, Helvetica Neue
- **Weights:** 300, 400
- **Sizes:** 28px, 24px, 20px, 16px body, 12px caption
- **Line height:** 1.5 body, 1.375 tight labels
- **Letter spacing:** normal (`0`); nav links sit at default tracking
- **Role:** Navigation, buttons, subheads, and all running copy. Kept quiet and neutral so Teodor owns every display moment.

### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| Caption | 12px | 1.375 | 0 | `--text-caption` |
| Body | 16px | 1.5 | 0 | `--text-body` |
| Subhead | 20px | 1.4 | 0 | `--text-subhead` |
| Title | 24px | 1.3 | 0 | `--text-title` |
| Heading | 28px | 1.2 | 0 | `--text-heading` |
| Display S | 35px | 1.1 | -0.01em | `--text-display-sm` |
| Display | 55px | 1.05 | -0.01em | `--text-display` |
| Display L | 60px | 1.05 | -0.01em | `--text-display-lg` |
| Hero | 90px | 1.0 | -0.01em | `--text-hero` |

## Tokens — Spacing & Shapes
**Base unit:** 4px   **Density:** comfortable

### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 1 | 4px | `--spacing-1` |
| 2 | 8px | `--spacing-2` |
| 3 | 12px | `--spacing-3` |
| 4 | 16px | `--spacing-4` |
| 6 | 24px | `--spacing-6` |
| 8 | 32px | `--spacing-8` |
| 12 | 48px | `--spacing-12` |
| 16 | 64px | `--spacing-16` |
| 24 | 96px | `--spacing-24` |

### Border Radius
| Element | Value |
|---------|-------|
| Pills — buttons, nav bar, chips | 60px |
| Secondary pill | 37px |
| Card | 14px |
| Input / small card | 12px |

### Shadows
| Name | Value | Token |
|------|-------|-------|
| Mint Glow | `rgb(151, 252, 215) 0px 0px 20px 5px` | `--shadow-glow` |

### Layout
- **Page max-width:** ~1280px (contained content over a full-bleed background)
- **Section gap:** 96px+ (generous, hero breathes)
- **Card padding:** 24–32px
- **Element gap:** 16–24px

## Components
### Navigation Bar
**Role:** The floating top-level wayfinding.
A white (`#FFFFFF`) fully-pilled bar (radius 60px) floating over the dark hero, holding the wordmark on the left and links (Stats, Docs, Ecosystem) plus the mint "Launch App" chip on the right. The white pill is the one light object on the dark canvas — deliberate contrast, not chrome.

### Wordmark
**Role:** Brand identity.
"Hyper" in Teodor roman + "liquid" in **Teodor italic**, dark green (`#072723`) on the white nav pill, preceded by a small green infinity/logo glyph. The italic split *is* the logo — never set the whole word in one style.

### Primary CTA — "Start Trading" / "Launch App"
**Role:** The single most important action.
Mint fill `#97FCE4`, pill radius 60px, dark green text (`#072723`), Inter 16px/400. On the hero it may carry the mint glow (`0 0 20px 5px`). One per view — the mint is a spotlight.

### Secondary CTA — "Start Building"
**Role:** The alternative path.
Transparent fill with a mint/teal border (`#97FCE4` or `#23524C`), pill radius, light text on dark. Ghosted counterpart to the primary — same shape, no fill, so the mint stays scarce. *(border inferred from borderColors + screenshot outline)*

### Hero Headline
**Role:** The thesis.
Teodor 90px roman, white (`#FFFFFF`), centered, line-height ~1.0. "The Blockchain To House All Finance" — serif gravity doing the persuading.

### Hero Subhead
**Role:** Supporting explanation.
Inter ~16–20px, sage gray (`#B0C5C1`), centered under the headline, ~3 short lines. Quiet, low-contrast, deliberately secondary to the serif.

### Nav Link
**Role:** Secondary navigation.
Inter 16px/400. Dark green (`#072723`) on the white pill; white (`#FFFFFF`) when placed directly on dark. No underline, no background — text only. *(from measured link specs)*

### Card / Surface
**Role:** Content container on dark sections.
Elevated green fill (`#0F3933` over `#072723` canvas), radius 14px, hairline border in `#23524C`. Depth by luminance step, not drop shadow.

### Mint Accent Blob
**Role:** Decorative brand mark.
A soft organic mint (`#97FCE4`) blob shape floating above the headline, occasionally haloed by the mint glow. The metaball motif of the whole background, distilled to one droplet.

### Body Text
**Role:** Running copy.
Inter 16px/400, line-height 1.5. Sage gray (`#B0C5C1`) on dark, deep green (`#072723`) on light surfaces.

### Focus / Selection Ring
**Role:** Interactive feedback.
Mint border (`#97FCE4`) or the mint glow shadow around focused controls — the brand color pulling double duty as the attention signal.

## Do's and Don'ts
### Do
- Keep the mint `#97FCE4` scarce — one CTA, one accent, one glow per view.
- Set headlines in Teodor and keep the "liquid" wordmark half italic.
- Build depth with luminance steps in the green ramp (`#02231E` → `#0F3933`), not gray shadows.
- Round everything meaningful to a full pill (60px) — buttons, nav, chips.
- Let the organic metaball gradient carry the hero; overlay almost nothing on it.
- Use sage gray (`#B0C5C1`) for secondary copy so it stays green-family, never neutral gray.

### Don't
- Don't introduce a second hue — this is a single-green system; no blue, purple, or orange (the Chakra defaults in the stylesheet are library baggage, not brand).
- Don't set the whole wordmark in one style; the roman/italic split is the identity.
- Don't fill multiple buttons with mint — it stops being a spotlight.
- Don't use hard drop shadows on dark; the only glow is the mint halo.
- Don't set body copy in Teodor — the serif is display-only.
- Don't square off the corners; pills and 12–14px cards only.

## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#02231E` | Deepest pool of the hero gradient |
| 0 | Deep Green | `#072723` | Primary dark surface |
| 1 | Elevated | `#0F3933` | Raised cards / panels |
| 2 | Border | `#23524C` | Hairline separators & outlines |
| — | Ink | `#04060C` | App-shell / deepest backdrop |
| Light | Nav Pill | `#FFFFFF` | The one white object on dark |
| Light | Frost | `#EDFFFC` | Pale mint-white light sections |

## Elevation
Depth is conveyed almost entirely by **luminance steps within the green ramp** — a card is simply a lighter green (`#0F3933`) than its canvas (`#072723`/`#02231E`), optionally edged with a `#23524C` hairline. There are no gray drop shadows anywhere in the brand layer. The single shadow token is a **mint glow** (`rgb(151,252,215) 0 0 20px 5px`) — used not for elevation but for emphasis, blooming behind the primary CTA and the accent blob. Light rises out of the dark rather than casting onto it.

## Imagery
No photography. The signature imagery is the **generative organic gradient** — soft metaball / blob fields of deep teal-green melting into cyan-mint light, rendered large and full-bleed behind the hero. It reads as liquid, luminous, and abstract: finance as a fluid, glowing substance. Iconography is minimal and geometric (a small infinity-style logo glyph). Keep any illustration abstract, single-hue green, and softly lit from within.

## Layout
Full-bleed dark background with **contained, centered content** (~1280px). The nav is a floating white pill inset from the top edges rather than a full-width bar — the interface hovers over the gradient. The hero is vertically centered: accent blob, then a two-line serif headline, then a three-line subhead, then a paired CTA row (filled + outlined pill). Generous vertical rhythm (96px+ between movements). Everything is axis-centered and calm; the drama comes from the background and the serif, not from dense layout.

## Typography Signature
Hyperliquid runs a deliberate **two-voice split**: a bookish display serif (Teodor) for every headline and the wordmark, over a neutral grotesque (Inter) for all UI and body. The move that makes it work is the *italic wordmark* — "Hyper" roman, "*liquid*" italic — a one-word gesture that softens an otherwise hard-edged category (crypto/DeFi) into something editorial and confident. Headlines run tight (line-height ~1.0 at 90px) and centered, letting the serif's contrast do the persuading; body copy stays at a comfortable 1.5 in low-contrast sage gray so nothing competes with the serif. The result feels less like a trading dashboard and more like the cover of a well-set essay about money.

## Agent Prompt Guide
## Quick Color Reference
- background: `#02231E` / `#072723` (deep forest-green canvas)
- text: `#FFFFFF` (headlines) / `#B0C5C1` (secondary sage gray)
- surface: `#0F3933` (elevated) / `#FFFFFF` (nav pill)
- border: `#23524C` (hairline) / `#97FCE4` (focus)
- accent: `#97FCE4` (mint signature) with glow `rgb(151,252,215) 0 0 20px 5px`
- primary action: `#97FCE4` fill with `#072723` text

## Example Component Prompts
1. **Floating nav pill**: A fully-rounded (60px radius) white `#FFFFFF` navigation bar floating over a dark green background, holding a wordmark ("Hyper" roman + "liquid" italic, Teodor serif, `#072723`) on the left and text links (Inter 16px, `#072723`) plus a mint `#97FCE4` pill "Launch App" button on the right.
2. **Hero section**: Full-bleed organic green metaball gradient background (deep teal `#02231E` melting into mint-cyan light), centered Teodor serif headline at 90px in white `#FFFFFF`, a three-line Inter subhead in sage gray `#B0C5C1`, and a CTA row: filled mint `#97FCE4` pill "Start Trading" (dark green `#072723` text) beside an outlined pill "Start Building" (mint border, transparent fill).
3. **Primary CTA button**: Pill-shaped (60px radius) button, mint `#97FCE4` fill, dark green `#072723` label in Inter 16px/400, with an optional mint glow shadow `rgb(151,252,215) 0 0 20px 5px`.
4. **Content card**: A `#0F3933` surface over a `#072723` canvas, 14px radius, 1px `#23524C` hairline border, 28px padding, white `#FFFFFF` title in Teodor and `#B0C5C1` body in Inter — no drop shadow, depth by luminance only.
5. **Accent blob**: A soft organic mint `#97FCE4` droplet shape floating on dark green, gently haloed by a mint glow — the liquid brand mark.

## Similar Brands
- **Phantom** — crypto product that leans on a single saturated signature color over dark, letting one hue carry the whole identity.
- **Linear** — dark canvas, restrained single-accent palette, and depth by luminance rather than shadow.
- **Arc (The Browser Company)** — playful organic gradients and rounded, fluid geometry over a confident dark field.
- **Stripe** — the editorial-serif-over-neutral-sans move applied to a fintech product, making infrastructure feel considered.
- **Vercel / Geist** — pill-forward, minimal-chrome UI where restraint and a single bold gesture do all the work.

## Quick Start
### CSS Custom Properties
```css
:root {
  /* Colors — green ramp */
  --color-brand-50: #F6FEFD;
  --color-brand-100: #DBFBF6;
  --color-brand-200: #97FCE4;
  --color-brand-300: #50D2C1;
  --color-brand-400: #33998C;
  --color-brand-500: #23524C;
  --color-brand-600: #17453F;
  --color-brand-700: #0F3933;
  --color-brand-800: #072723;
  --color-brand-900: #02231E;
  /* Colors — surfaces & text */
  --color-white: #FFFFFF;
  --color-frost: #EDFFFC;
  --color-ink: #04060C;
  --color-text-muted: #B0C5C1;
  --color-glow: rgb(151, 252, 215);

  /* Typography — Families */
  --font-display: 'Teodor', 'Ivar Display', 'Freight Display Pro', Georgia, serif;
  --font-body: 'Inter', system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  /* Typography — Scale */
  --text-caption: 12px;
  --text-body: 16px;
  --text-subhead: 20px;
  --text-title: 24px;
  --text-heading: 28px;
  --text-display-sm: 35px;
  --text-display: 55px;
  --text-display-lg: 60px;
  --text-hero: 90px;
  --leading-tight: 1.0;
  --leading-heading: 1.2;
  --leading-body: 1.5;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;

  /* Border Radius */
  --radius-pill: 60px;
  --radius-pill-sm: 37px;
  --radius-card: 14px;
  --radius-input: 12px;

  /* Shadow */
  --shadow-glow: 0px 0px 20px 5px rgb(151, 252, 215);
}
```
### Tailwind v4
```css
@theme {
  --color-brand-50: #F6FEFD;
  --color-brand-100: #DBFBF6;
  --color-brand-200: #97FCE4;
  --color-brand-300: #50D2C1;
  --color-brand-400: #33998C;
  --color-brand-500: #23524C;
  --color-brand-600: #17453F;
  --color-brand-700: #0F3933;
  --color-brand-800: #072723;
  --color-brand-900: #02231E;
  --color-white: #FFFFFF;
  --color-frost: #EDFFFC;
  --color-ink: #04060C;
  --color-text-muted: #B0C5C1;

  --font-display: 'Teodor', 'Ivar Display', Georgia, serif;
  --font-body: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;

  --text-caption: 12px;
  --text-body: 16px;
  --text-subhead: 20px;
  --text-title: 24px;
  --text-heading: 28px;
  --text-display-sm: 35px;
  --text-display: 55px;
  --text-display-lg: 60px;
  --text-hero: 90px;

  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-24: 96px;

  --radius-pill: 60px;
  --radius-pill-sm: 37px;
  --radius-card: 14px;
  --radius-input: 12px;

  --shadow-glow: 0px 0px 20px 5px rgb(151, 252, 215);
}
```