Logo
The perps.studio mark comes in four formats. Always use the provided SVG assets — never recreate, stretch, or recolor the logo.
Icon Mark
Use for favicons, app icons, and compact contexts where the full wordmark won't fit.
Lockup
The primary logo. Use this whenever space allows. Maintain the icon-to-wordmark ratio.
Stacked
For square or vertical placements. Social media profiles, partnership badges, print.
Wordmark
Standalone typographic mark for editorial use, document headers, and co-branding.
Hyperliquid
Official Hyperliquid assets. Use these — never recreate or substitute with placeholder icons.
Aster
Official Aster assets. Use these — never recreate or substitute with placeholder icons.
Lighter
Official Lighter assets, from Lighter's brand kit. Use these, never recreate or substitute.
Clear Space & Minimum Size
24px minColor
A dual-accent system built on complementary tension. Olive owns action and identity. Slate owns structure and information. Click any swatch to copy its hex value.
Primary — Olive
Secondary — Slate
Neutral
Provider Accents
Semantic
Color Theory
The rationale behind the dual-accent system and deployment rules for each color.
The Problem
A monochromatic palette (olive on dark) gives nothing true contrast. Everything sits at the same temperature, so nothing pops — olive is doing triple duty as brand accent, emphasis color, and interactive color simultaneously.
Complementary Tension
Olive sits at ~65° on the color wheel. Its complement is ~225° — a deep slate-blue range. Simultaneous contrast: when a warm color sits next to a cool color, both appear more saturated than they actually are. The olive will look more olive without changing it at all.
Why #7C8BB8
Saturation at ~30% is the key decision. Higher reads as a competing brand color. Lower becomes indistinguishable grey. At 30% it's perceptible as "cool-toned" — just enough for simultaneous contrast to work. Lightness at ~55% provides contrast on dark backgrounds without competing with white text, and darkens to #5A6A94 for light mode.
Hierarchical Separation
Primary CTAs, key emphasis, brand identity, active states. The thing you want the user to do.
Section labels, step numbers, inactive states, divider lines, structural borders. The frame around the action.
Headings, body text, data values. The information itself.
Temperature Zoning
Warm olive owns above-the-fold moments and CTAs. Cool slate owns structural and informational sections. This gives each scroll-depth a subtle emotional shift without feeling like a different site.
The Rule
Deployment Map
- Primary CTA buttons
- Active step indicators
- Brand wordmark accent
- "Talk to us" links
- Key emphasis text
- Scroll progress bar
- Section labels (HOW IT WORKS, etc.)
- Inactive step numbers
- Container borders
- Vertical divider lines
- Secondary descriptive text
- Muted icon tints
Typography
Three typeface families serve distinct roles. Sora brings geometric authority to headings, Inter provides clean readability for body text, and JetBrains Mono handles all data and code.
Type Scale
Principles
These principles guide every design decision across the perps.studio brand.
Technical, not cold
Monospace type and data-dense layouts signal competence. The olive accent and warm neutrals keep it from feeling sterile.
Show, don't tell
Live demos, real numbers, and working previews beat marketing copy. The product is the pitch.
Dark-first
The primary palette is dark. Light mode exists as an alternative, not the default. Financial interfaces read better dark.
Density with hierarchy
Trading interfaces are inherently dense. Use type scale, spacing, and opacity to create clear visual hierarchy within that density.
Motion with purpose
Animations serve orientation (scroll reveals, count-ups) or feedback (loading states, hover). Never decorative.
Warm action, cool structure
Olive signals what to do. Slate frames where to look. Never mix them in the same component. This separation is what makes both colors effective.
Spacing & Radii
Border Radius
Easing
Reactor
Reactor, a perps.studio product. The perps protocol for chains.
Mark
A raster mark. Use the supplied PNG, never redraw, recolor or crop it.
Lockup
Mark and wordmark, as in the terminal's top bar.
Wordmark
REACTOR in Sora 600, uppercase, tracked 0.18em.
Construction
Built on the terminal's 24px mark. Every value scales with it.
- Mark
- 24px
- Wordmark
- Sora 600, 14px, 0.18em, uppercase
- Gap
- 10px
- Cap height
- 10.2px (0.73em), centred on the mark
- Mark to cap height
- 2.35 : 1
- Clear space
- 12px, half the mark, on every side
- Minimum
- Mark 16px. Lockup at a 24px mark.
Typography
Sora for display and figures, Inter for everything read, the system mono for code and addresses.
Type Scale
Color
A near-black canvas, cool greys and one green, used sparingly. Long and short keep their own pair.
Accent
Surfaces
Foreground
Long / Short
Endorsement
Reactor, a perps.studio product
Product family
Marks for the advanced trading products. All are built for dark backgrounds.
