prismdinstrument

EXTRACTED · 10 SECTIONS · 20 COLORS · GRADE C

hyperliquid.xyz

Accent #5e6ad2 · Inter — every value below measured via getComputedStyle(), not asserted by hand.

colors

faces

shadows

keyframes

DESIGN.md tokens.json

real render · source of truth

hyperliquid.xyz is built on a soft, near-white canvas (rgb(219, 251, 246)). The system uses rgb(151, 252, 228) as the accent for primary actions and brand signals. Teodor as the primary typeface. A restrained elevation system (1 distinct shadow) — shadows reserved for the few elements that must lift off the page. Interactions are smoothed by transitions across many elements, with little or no keyframe animation.

Color — roles, semantics & the full census

20 colors measured · click any swatch to copy

Canvas

#dbfbf6

Fail 1.1:1

Ink

#ffffff

Fail 1.1:1

Accent

#97fce4

Fail 1.1:1

Line

#ffffff

Fail 1.1:1

Semantic states

error#f25a67success#26b562

2 semantic roles found.

20 colors mined from the live renderexpand

Type — the ladder, in the real face

3 roles · rendered live in the real Inter (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl90px · 400

body

body16px · 400 · ×5.63

body sm

body-sm12px · 400 · ×1.33

Depth — elevation is extracted, not invented

1 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1

Motion — easings, transitions & live keyframes

5 easing curves · 2 keyframes · hover a tile to preview

Easing & transitions

transition-3ease-in-out

transition-5ease-out

chakra-transition-easing-ease-outcubic-bezier(0, 0, 0.2, 1)

chakra-transition-easing-ease-incubic-bezier(0.4, 0, 1, 1)

chakra-transition-easing-ease-in-outcubic-bezier(0.4, 0, 0.2, 1)

2 keyframe animations extracted

animation-1pr2sp7

animation-m6kcno

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale

xxs · 2px

xs · 12px

sm · 20px

md · 37px

base · 45px

lg · 60px

xl · 105px

2xl · 125px

3xl · 150px

Radius

none
0px

xs
12px

sm
14px

md
37px

lg
60px

xl
68px

full
9999px

Components — the closed vocabulary

1 component families · 5 variants counted on the live DOM

Component	Variants found
links	×5

Layout — structure & dimensions

5 layout metrics measured

max Width1200px

header Height64px

sidebar Width0px

gap16px

container Padding24px

Responsive — real breakpoints

5 media-query stops read from the live CSS

320px

768px

1200px

1500px

1600px

Do's & Don'ts

9 enforceable rules pulled verbatim from the spec

Use Light Gray (`#dbfbf6`) as the page background — it's intentionally not pure white

Use Inter as the primary typeface — it defines the brand personality

Use the extracted shadow patterns for elevation — they are tuned to match the brand palette

Use #97fce4 (`#97fce4`) as the primary accent — it's the brand's signature interactive color

Respect the 12px–105px spacing range — the design uses a wide scale for visual breathing room

Don't

Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity

Don't substitute with generic sans-serif or serif — the custom font carries the brand

Don't invent new shadow values — use only the extracted shadow levels

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the hyperliquid.xyz design system. Canvas #dbfbf6 · ink #ffffff · accent #97fce4. Type: Inter — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.

Every value above was getComputedStyle-verified.

$ npx prismd add hyperliquid

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press