Style Guide

A comprehensive guide to VectorAlpha's design system, showcasing standardized components and styling patterns.

Shadows

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-2xl

Borders

Default Border

.border-default

Hover Border

.border-hover

Active Border

.border-active

Rounded Corners

rounded-xs

rounded-sm

rounded-md

rounded-lg

rounded-xl

rounded-2xl

rounded-3xl

rounded-full

Buttons

Cards

Basic Card

Standard card with subtle shadow and border.

.card

Hover Card

Card with hover lift effect.

.card-hover

Glass Card

Glassmorphism effect card.

.glass-card

Badges & Status

Primary Success Warning Error Accent

Production Beta Alpha Experimental Deprecated

Form Elements

Default Input

Success Input

Error Input

Small Input

Interactive Effects

Scale Effect

Hover to see scale animation.

.interactive-scale

Lift Effect

Hover to see lift animation.

.interactive-lift

Glow Effect

Hover to see glow effect.

.interactive-glow