Design System

Apex provides a comprehensive design system with consistent colors, typography, spacing, and more.

Colors

A semantic color system with primary, secondary, success, warning, and error colors.

Primary

#3b82f6

Secondary

#8b5cf6

Success

#22c55e

Warning

#eab308

Error

#ef4444

Info

#06b6d4

Typography

Consistent typography scale for headings and body text:

Heading 1 (text-4xl)

Heading 2 (text-3xl)

Heading 3 (text-2xl)

Heading 4 (text-xl)

Heading 5 (text-lg)

Heading 6 (text-base)

Body text (text-base)

Small text (text-sm)

Extra small text (text-xs)

Spacing

Consistent spacing scale for margins and padding:

CSS

.space-0 { 0rem }
.space-1 { 0.25rem }
.space-2 { 0.5rem }
.space-3 { 0.75rem }
.space-4 { 1rem }
.space-5 { 1.25rem }
.space-6 { 1.5rem }
.space-8 { 2rem }
.space-10 { 2.5rem }
.space-12 { 3rem }
.space-16 { 4rem }
.space-20 { 5rem }
.space-24 { 6rem }
.space-32 { 8rem }
.space-40 { 10rem }
.space-48 { 12rem }
.space-56 { 14rem }
.space-64 { 16rem }

Border Radius

Consistent border radius scale:

rounded-none

rounded-sm

rounded

rounded-md

rounded-lg

rounded-xl

rounded-full

Shadows

Consistent shadow scale for elevation:

Box

shadow-none

Box

shadow-sm

Box

shadow

Box

shadow-md

Box

shadow-lg

Box

shadow-xl