Brand Guidelines
Our visual identity system. Colors, typography, and UI components.
Brand Colors
Gray Scale
Text Colors
Primary Text (brand-snow / gray-50)
Use for headings and important content
#fcfafaBody Text (gray-200)
Use for paragraphs and general content
#b0b0c8Secondary Text (gray-300)
Use for supporting content
#8888a8Muted Text (gray-400)
Use for captions and metadata
#606080Accent Text (primary)
Use for links and emphasis
#b400e0Background Colors
Gradients
linear-gradient(135deg, #b400e0, #cc00ff)linear-gradient(135deg, #0f1020, #212345, #0f1020)Text Gradient
Gradient Heading Example
Apply with class .text-gradient
Status Colors
Used for confirmations, successful actions, and positive feedback.
Used for errors, warnings, and destructive actions.
UI Components
Coming SoonButtons
.btn-primary.btn-secondaryCards
Gradient Card
With gradient background and border.
Solid Card
Solid background color.
Transparent Card
Semi-transparent variant.
.card.card-solid.card-transparentBadges
Typography
Heading 1 (text-6xl)
The quick brown fox
Heading 2 (text-4xl)
The quick brown fox
Heading 3 (text-2xl)
The quick brown fox
Body (text-base)
The quick brown fox jumps over the lazy dog. This is body text used for paragraphs and general content throughout the site.
Small (text-sm)
The quick brown fox jumps over the lazy dog. Used for captions, metadata, and supporting text.
Font Family: Inter