Hyper Foundation

Deep emerald command center.

Hyperliquid presents a dark, immersive interface dominated by a deep green-black canvas. Typography is a precise blend of a traditional serif for commanding headlines and a clean sans-serif for functional content, making blocks of text feel grounded yet efficient. A vivid, almost neon, mint green color serves as the sole accent, highlighting interactive elements and drawing focus to key information. Components are understated, often using ghost styling or subtle outlines, and leverage large rounded corners to soften the overall impression.

⚡️ Build with this template https://hyperliquid.xyz

Color Palette

Typography

Heading: inherit

Body: inherit

The quick brown fox jumps over the lazy dog.

# Hyper Foundation — Style Reference
> Deep emerald command center.
Theme: dark

Hyperliquid presents a dark, immersive interface dominated by a deep green-black canvas. Typography is a precise blend of a traditional serif for commanding headlines and a clean sans-serif for functional content, making blocks of text feel grounded yet efficient. A vivid, almost neon, mint green color serves as the sole accent, highlighting interactive elements and drawing focus to key information. Components are understated, often using ghost styling or subtle outlines, and leverage large rounded corners to soften the overall impression.

## Colors
| Name | Value | Role |
|------|-------|------|
| Midnight Emerald | `#072724` | Page backgrounds, card surfaces, primary text on lighter surfaces. The canvas of the system |
| Ghost Jade | `#23524c` | Subtle card backgrounds, ghost button borders, hairline dividers. Provides minimal contrast against Midnight Emerald |
| Aura Mint | `#97fcd7` | Green text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color |
| Ceramic White | `#ffffff` | Primary text on dark backgrounds, active icons, essential information text |
| Slate Border | `#2c2e33` | Subtle borders separating UI elements on dark backgrounds, non-active menu item borders |
| Platinum Ghost | `#b0c5c1` | Muted text, decorative fills for secondary icons or illustrations. A very light gray with a cool tint |
| Ash Text | `#0f3933` | Secondary text on dark backgrounds, subtle captions, placeholder text |
| Deep Teal | `#33998c` | Teal text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color |

## Typography
| Family | Role |
|--------|------|
| Teodor | Display and main headings. The single weight serif projects authority and traditional finance gravitas against a modern tech backdrop. Large sizes command attention. |
| Inter | All body text, navigation items, buttons, and functional UI elements. The sans-serif provides a legible and clean counterpoint to the display font, ensuring content is easily digestible. Weight 300 is used for lighter emphasis. |