HYRAX

Design System

The Hyrax design system - a dark, modern interface language built for AI platforms.

Logo

Full Logo

HYRAX

Logo Mark

Small

HYRAX

Colors

Rock

#0C0B0A

Rockface

#1A1816

Stone

#2A2522

Bone

#F0E8D8

Tan

#C9A87C

Signal

#E8552B

Display Gradient

UI Gradient

Typography

Display Hero - 64px / 900

The quick brown fox

H1 - 48px / 800

The quick brown fox

H2 - 32px / 700

The quick brown fox

H3 - 20px / 700

The quick brown fox

Body Large - 18px / 400

The quick brown fox jumps over the lazy dog.

Body - 15px / 400

The quick brown fox jumps over the lazy dog.

Label / Eyebrow - 11px / 700 / +14%

THE QUICK BROWN FOX

Buttons

Status Badges

FixedCriticalWarningRunningPendingDefault

Form Inputs

Cards

Card Title
Card description with supporting text.

This is the card content area where you can add any content you need.

With Glow
Card with the Hyrax glow effect.

Add the glow class for emphasis on important cards.

Active
Status Card

Cards can include badges and other components.

Spacing Scale

4px base unit: 4 - 8 - 12 - 16 - 24 - 32 - 48 - 64 - 96 - 128px

4
8
12
16
24
32
48
64

Border Radius

4px chips

8px buttons

12px cards

16px panels

9999px pills

Motion

Instant

0ms

Data, status

Quick

100ms ease-out

Hover, press

Standard

250ms ease

Panels, modals

Slow

400ms ease-in-out

Page transitions