The colors, typography, and animations that define the visual identity. Each element is intentional and serves a specific purpose in guiding user behavior.
Hex Code
RGB
OKLCH
Usage
Primary background, trust, sophistication. Used for page backgrounds and dark sections.
Accessibility
AAA contrast with white text (18.5:1)
Hex Code
RGB
OKLCH
Usage
Call-to-action buttons, energy, modern. Draws attention and guides user action.
Accessibility
AAA contrast with dark text (14.8:1)
Hex Code
RGB
OKLCH
Usage
Secondary actions, highlights, data visualization. Creates hierarchy and focus.
Accessibility
AAA contrast with white text (6.2:1)
Text, borders, subtle elements
Borders, dividers, backgrounds
Success states, positive feedback
Warnings, caution states
Errors, critical alerts
Display Font
Modern, distinctive, tech-forward. Used for all headings and display text.
Why this font?
Creates visual hierarchy and brand distinctiveness. Highly readable on screens.
48px • Bold • Line height 1.2
36px • Bold • Line height 1.3
28px • Bold • Line height 1.4
Body Font
Neutral, highly readable, web-optimized. Used for all body copy.
Why this font?
Excellent readability at all sizes. Neutral personality supports any content.
16px • Regular • Line height 1.6
14px • Regular • Line height 1.5
12px • Regular • Line height 1.5
Timing
150ms
Easing
ease-in-out
Usage
Micro-interactions, hover states, button feedback
Example
Button color change on hover
Timing
300ms
Easing
ease-in-out
Usage
Page transitions, modal opens, element reveals
Example
Fade in on page load
Timing
500ms
Easing
ease-out
Usage
Entrance animations, storytelling moments
Example
Staggered list animations
Hover over the boxes to see animations
300ms normal transition
500ms slow transition