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