Design System

A comprehensive guide to VectorAlpha's design tokens, components, and patterns.

Color Palette

Brand Colors

Brand 500

#3B82F6

Brand 600

#2563EB

Accent Colors

Accent 500

#A855F7

Accent 600

#9333EA

Semantic Colors

Success

#22C55E

Error

#EF4444

Gradients

Brand Gradient

.gradient-text

Dark Gradient

.gradient-text-dark

Typography

Heading 1

.heading-1

Heading 2

.heading-2

Heading 3

.heading-3

Lead paragraph text for important introductions.

.text-lead

Buttons

Variants

Primary Button Secondary Button Outline Button Ghost Button Gradient Button

Sizes

Small Default Large

States

Normal Hover Disabled

Cards

Basic Card

A simple card with padding and border.

.card

Hover Card

Card with hover effects.

.card-hover

Interactive Card

Clickable card with active states.

.card-interactive

Glass Card

Card with glassmorphism effect.

.glass-card

Form Elements

Default Input .input

Error Input .input-error

Badges

Primary Badge Success Badge With Icon

Links

This is a paragraph with a standard link and a subtle link for less emphasis.

.link .link-subtle

Utility Classes

Layout

• .section - Standard section padding
• .container-prose - Max width for text content
• .container-wide - Max width for wide layouts

Effects

• .glass-effect - Glassmorphism backdrop
• .shimmer - Loading shimmer effect
• .focus-ring - Consistent focus states
• .animate-in - Fade in animation