Design System

Interactive design tokens

Colors System

Tokenized palettes powered by CSS variables

Violet Palette

9 color tokens

Violet 100
var(--violet-100)
Click to expand
Violet 200
var(--violet-200)
Click to expand
Violet 300
var(--violet-300)
Click to expand
Violet 400
var(--violet-400)
Click to expand
Violet 500
var(--violet-500)
Click to expand
Violet 600
var(--violet-600)
Click to expand
Violet 700
var(--violet-700)
Click to expand
Violet 800
var(--violet-800)
Click to expand
Violet 900
var(--violet-900)
Click to expand

Purple Palette

9 color tokens

Purple 100
var(--purple-100)
Click to expand
Purple 200
var(--purple-200)
Click to expand
Purple 300
var(--purple-300)
Click to expand
Purple 400
var(--purple-400)
Click to expand
Purple 500
var(--purple-500)
Click to expand
Purple 600
var(--purple-600)
Click to expand
Purple 700
var(--purple-700)
Click to expand
Purple 800
var(--purple-800)
Click to expand
Purple 900
var(--purple-900)
Click to expand

Blue Palette

9 color tokens

Blue 100
var(--blue-100)
Click to expand
Blue 200
var(--blue-200)
Click to expand
Blue 300
var(--blue-300)
Click to expand
Blue 400
var(--blue-400)
Click to expand
Blue 500
var(--blue-500)
Click to expand
Blue 600
var(--blue-600)
Click to expand
Blue 700
var(--blue-700)
Click to expand
Blue 800
var(--blue-800)
Click to expand
Blue 900
var(--blue-900)
Click to expand

Indigo Palette

9 color tokens

Indigo 100
var(--indigo-100)
Click to expand
Indigo 200
var(--indigo-200)
Click to expand
Indigo 300
var(--indigo-300)
Click to expand
Indigo 400
var(--indigo-400)
Click to expand
Indigo 500
var(--indigo-500)
Click to expand
Indigo 600
var(--indigo-600)
Click to expand
Indigo 700
var(--indigo-700)
Click to expand
Indigo 800
var(--indigo-800)
Click to expand
Indigo 900
var(--indigo-900)
Click to expand

Cyan Palette

9 color tokens

Cyan 100
var(--cyan-100)
Click to expand
Cyan 200
var(--cyan-200)
Click to expand
Cyan 300
var(--cyan-300)
Click to expand
Cyan 400
var(--cyan-400)
Click to expand
Cyan 500
var(--cyan-500)
Click to expand
Cyan 600
var(--cyan-600)
Click to expand
Cyan 700
var(--cyan-700)
Click to expand
Cyan 800
var(--cyan-800)
Click to expand
Cyan 900
var(--cyan-900)
Click to expand

Gray Palette

9 color tokens

Gray 100
var(--gray-100)
Click to expand
Gray 200
var(--gray-200)
Click to expand
Gray 300
var(--gray-300)
Click to expand
Gray 400
var(--gray-400)
Click to expand
Gray 500
var(--gray-500)
Click to expand
Gray 600
var(--gray-600)
Click to expand
Gray 700
var(--gray-700)
Click to expand
Gray 800
var(--gray-800)
Click to expand
Gray 900
var(--gray-900)
Click to expand

Neutral Palette

4 color tokens

White
var(--neutral-white)
Click to expand
Light Gray
var(--neutral-light)
Click to expand
Dark Gray
var(--neutral-dark)
Click to expand
Black
var(--neutral-black)
Click to expand

Semantic Palette

4 color tokens

Info
var(--info-500)
Click to expand
Success
var(--success-500)
Click to expand
Warning
var(--warning-500)
Click to expand
Error
var(--error-500)
Click to expand

Gradients Palette

4 color tokens

Brand Gradient
var(--brand-gradient)
Click to expand
Action Gradient
var(--action-gradient)
Click to expand
Midnight Purple
var(--midnight-purple-gradient)
Click to expand
Ocean Depth
var(--ocean-depth-gradient)
Click to expand

Buttons

Consistent button styles with theme-aware variants

Primary

Standard actions and forms

Secondary (Light)

Secondary actions and cancel

Secondary (Dark)

Secondary actions and cancel

CTA

Primary call-to-action

Cards

Card components with consistent styling and interactions

Basic Card

Clean surface with soft shadow.

Glass Card

Glass surface with animated edge.

Fluid Card

Fluid glass with responsive motion.

Headings

Branded headings with gradient styles

Brand

Building the Future

Brand and hero headings

CTA Action

Get Started Today

Calls to action

Midnight

Advanced Solutions

Feature highlights

Ocean Depth

Smart Technology

Tech and innovation