Design System

Explore the Apex design system with interactive color palettes, spacing scales, typography specimens, and live theme customization. All design tokens use CSS custom properties for easy customization.

color

Colors

Semantic and palette colors

--color-primary

50+ color tokens

spacing

Spacing

From 0 to 24rem

--spacing-4

34 spacing values

AaAaAaAaAa

typography

Typography

From xs (12px) to 9xl (128px)

--font-size-base

13 font sizes

shadow

Shadows

From none to 2xl

--shadow-md

8 shadow levels

Colors

A color system with semantic colors and full palettes. Click any color to copy its CSS variable.

Semantic Colors

Primary

--color-primary

#3b82f6Main brand color

Secondary

--color-secondary

#64748bSecondary accent

Success

--color-success

#22c55eSuccess states

Danger

--color-danger

#ef4444Error states

Warning

--color-warning

#f59e0bWarning states

Info

--color-info

#0ea5e9Info states

Light

--color-light

#f3f4f6Light backgrounds

Dark

--color-dark

#1f2937Dark backgrounds

Color Palettes

Gray

Click any shade to copy its CSS variable

Blue

Click any shade to copy its CSS variable

Green

Click any shade to copy its CSS variable

Red

Click any shade to copy its CSS variable

Yellow

Click any shade to copy its CSS variable

Purple

Click any shade to copy its CSS variable

Accessibility Contrast Checker

Background Color

Text Color

Sample Text

The quick brown fox jumps over the lazy dog.

17.74

Contrast Ratio

AAA

WCAG Rating

Typography

A complete typography system with font sizes, weights, line heights, and letter spacing. Preview changes live and copy CSS variables.

Live Preview

H1Design System

H2Design System

H3Design System

H4Design System

H5Design System

H6Design System

LargeThe quick brown fox jumps over the lazy dog.

BaseThe quick brown fox jumps over the lazy dog.

SmallThe quick brown fox jumps over the lazy dog.

Extra SmallThe quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

text-xs0.75rem(12px)Extra small text, captions

The quick brown fox jumps over the lazy dog.

text-sm0.875rem(14px)Small text, secondary content

The quick brown fox jumps over the lazy dog.

text-base1rem(16px)Body text default

The quick brown fox jumps over the lazy dog.

text-lg1.125rem(18px)Large body text

The quick brown fox jumps over the lazy dog.

text-xl1.25rem(20px)Small headings

The quick brown fox jumps over the lazy dog.

text-2xl1.5rem(24px)H6 equivalent

The quick brown fox jumps over the lazy dog.

text-3xl1.875rem(30px)H5 equivalent

The quick brown fox jumps over the lazy dog.

text-4xl2.25rem(36px)H4 equivalent

The quick brown fox jumps over the lazy dog.

text-5xl3rem(48px)H3 equivalent

The quick brown fox jumps over the lazy dog.

text-6xl3.75rem(60px)H2 equivalent

The quick brown fox jumps over the lazy dog.

text-7xl4.5rem(72px)H1 equivalent

The quick brown fox jumps over the lazy dog.

text-8xl6rem(96px)Display text

The quick brown fox jumps over the lazy dog.

text-9xl8rem(128px)Hero text

Sans Serif

The quick brown fox

--font-family-sans

Serif

The quick brown fox

--font-family-serif

Monospace

const hello = world

--font-family-mono

Spacing

34 spacing values from 0 to 24rem. Use for margins, padding, gaps, and more. View in list, stack, or comparison modes.

Token	Value	Pixels
`0`	`0`	0px
`px`	`1px`	1px
`0.5`	`0.125rem`	2px
`1`	`0.25rem`	4px
`1.5`	`0.375rem`	6px
`2`	`0.5rem`	8px
`2.5`	`0.625rem`	10px
`3`	`0.75rem`	12px
`3.5`	`0.875rem`	14px
`4`	`1rem`	16px
`5`	`1.25rem`	20px
`6`	`1.5rem`	24px
`7`	`1.75rem`	28px
`8`	`2rem`	32px
`9`	`2.25rem`	36px
`10`	`2.5rem`	40px
`11`	`2.75rem`	44px
`12`	`3rem`	48px
`14`	`3.5rem`	56px
`16`	`4rem`	64px
`20`	`5rem`	80px
`24`	`6rem`	96px
`28`	`7rem`	112px
`32`	`8rem`	128px
`36`	`9rem`	144px
`40`	`10rem`	160px
`44`	`11rem`	176px
`48`	`12rem`	192px
`52`	`13rem`	208px
`56`	`14rem`	224px
`60`	`15rem`	240px
`64`	`16rem`	256px
`72`	`18rem`	288px
`80`	`20rem`	320px
`96`	`24rem`	384px

Spacing Usage

m-4

margin: 1rem

p-2

padding: 0.5rem

gap-6

gap: 1.5rem

Borders & Shadows

Border radius and shadow scales for consistent elevation and rounding. Includes individual corner utilities.

rounded-none

00px

No radius

rounded-sm

0.125rem2px

Small radius

rounded-base

0.25rem4px

Base radius

rounded-md

0.375rem6px

Medium radius

rounded-lg

0.5rem8px

Large radius

rounded-xl

0.75rem12px

Extra large

rounded-2xl

1rem16px

2X large

rounded-3xl

1.5rem24px

3X large

rounded-full

9999pxFull

Pill/Full

Individual Corner Examples

rounded-t-lg

Top corners

rounded-b-lg

Bottom corners

rounded-l-lg

Left corners

rounded-r-lg

Right corners

rounded-tl-lg

Top left

rounded-tr-lg

Top right

rounded-bl-lg

Bottom left

rounded-br-lg

Bottom right

Shadows

8 levels of box shadows from none to 2xl. Use shadows to create depth and elevation in your designs.

Box

shadow-none

No shadow

Box

shadow-sm

Small shadow

Box

shadow

Default shadow

Box

shadow-md

Medium shadow

Box

shadow-lg

Large shadow

Box

shadow-xl

Extra large

Theme Playground

Customize colors, border radius, and shadows in real-time. Copy the generated CSS to use in your project.

Quick Presets

Colors

primary

secondary

success

danger

warning

info

Border Radius

Base Radius0.5rem

012

Shadow Intensity

Intensity1x

Live Preview

Card Title

This card demonstrates the shadow and border radius settings.

Info alert with custom color

Warning alert with custom color

Generated CSS

:root {
  /* Colors */
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-info: #0ea5e9;

  /* Border Radius */
  --border-radius-sm: 0.125rem;
  --border-radius-base: 0.25rem;
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;
  --border-radius-xl: 0.75rem;

  /* Shadows */
  --shadow-color: 0 0 0;
  --shadow-sm: 0 1px 2px 0 rgba(var(--shadow-color), 0.05);
  --shadow-base: 0 1px 3px 0 rgba(var(--shadow-color), 0.1), 0 1px 2px 0 rgba(var(--shadow-color), 0.06);
  --shadow-md: 0 4px 6px -1px rgba(var(--shadow-color), 0.1), 0 2px 4px -1px rgba(var(--shadow-color), 0.06);
}

CSS Variables

All Apex design tokens are available as CSS custom properties. Override them to customize your theme.

CSS

/* Colors */
--color-primary: #3b82f6;
--color-secondary: #64748b;
--color-success: #22c55e;
--color-danger: #ef4444;
--color-warning: #f59e0b;
--color-info: #0ea5e9;

/* Spacing */
--spacing-1: 0.25rem;
--spacing-2: 0.5rem;
--spacing-4: 1rem;
--spacing-8: 2rem;

/* Typography */
--font-size-base: 1rem;
--font-weight-normal: 400;
--line-height-normal: 1.5;

/* Border Radius */
--border-radius-sm: 0.125rem;
--border-radius-md: 0.375rem;
--border-radius-lg: 0.5rem;

/* Shadows */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

Quick Reference

Category	Prefix	Example	CSS Property
Colors	text- / bg- / border-	text-primary	color: var(--color-primary)
Spacing	m- / p- / gap-	p-4	padding: 1rem
Typography	text- / font- / leading-	text-lg	font-size: 1.125rem
Borders	border / rounded-	rounded-lg	border-radius: 0.5rem
Shadows	shadow-	shadow-md	box-shadow: ...
Sizing	w- / h- / max-w-	w-full	width: 100%
Display	block / flex / grid	flex	display: flex

Token

Value

Pixels

Preview

Action

0

0px

px

1px

1px

0.5

0.125rem

2px

1

0.25rem

4px

1.5

0.375rem

6px

2

0.5rem

8px

2.5

0.625rem

10px

3

0.75rem

12px

3.5

0.875rem

14px

4

1rem

16px

5

1.25rem

20px

6

1.5rem

24px

7

1.75rem

28px

8

2rem

32px

9

2.25rem

36px

10

2.5rem

40px

11

2.75rem

44px

12

3rem

48px

14

3.5rem

56px

16

4rem

64px

20

5rem

80px

24

6rem

96px

28

7rem

112px

32

8rem

128px

36

9rem

144px

40

10rem

160px

44

11rem

176px

48

12rem

192px

52

13rem

208px

56

14rem

224px

60

15rem

240px

64

16rem

256px

72

18rem

288px

80

20rem

320px

96

24rem

384px

:root { /* Colors */ --color-primary: #3b82f6; --color-secondary: #64748b; --color-success: #22c55e; --color-danger: #ef4444; --color-warning: #f59e0b; --color-info: #0ea5e9; /* Border Radius */ --border-radius-sm: 0.125rem; --border-radius-base: 0.25rem; --border-radius-md: 0.375rem; --border-radius-lg: 0.5rem; --border-radius-xl: 0.75rem; /* Shadows */ --shadow-color: 0 0 0; --shadow-sm: 0 1px 2px 0 rgba(var(--shadow-color), 0.05); --shadow-base: 0 1px 3px 0 rgba(var(--shadow-color), 0.1), 0 1px 2px 0 rgba(var(--shadow-color), 0.06); --shadow-md: 0 4px 6px -1px rgba(var(--shadow-color), 0.1), 0 2px 4px -1px rgba(var(--shadow-color), 0.06); }

/* Colors */ --color-primary: #3b82f6; --color-secondary: #64748b; --color-success: #22c55e; --color-danger: #ef4444; --color-warning: #f59e0b; --color-info: #0ea5e9; /* Spacing */ --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-4: 1rem; --spacing-8: 2rem; /* Typography */ --font-size-base: 1rem; --font-weight-normal: 400; --line-height-normal: 1.5; /* Border Radius */ --border-radius-sm: 0.125rem; --border-radius-md: 0.375rem; --border-radius-lg: 0.5rem; /* Shadows */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

Quick Reference

Category	Prefix	Example	CSS Property
Colors	text- / bg- / border-	text-primary	color: var(--color-primary)
Spacing	m- / p- / gap-	p-4	padding: 1rem
Typography	text- / font- / leading-	text-lg	font-size: 1.125rem
Borders	border / rounded-	rounded-lg	border-radius: 0.5rem
Shadows	shadow-	shadow-md	box-shadow: ...
Sizing	w- / h- / max-w-	w-full	width: 100%
Display	block / flex / grid	flex	display: flex