1 component families · 5 variants counted on the live DOM
Component
Variants found
links
×5
07
Layout — structure & dimensions
5 layout metrics measured
max Width1200px
header Height64px
sidebar Width0px
gap16px
container Padding24px
08
Responsive — real breakpoints
5 media-query stops read from the live CSS
320px
768px
1200px
1500px
1600px
09
Do's & Don'ts
9 enforceable rules pulled verbatim from the spec
Do
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
10
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.