Semantic Colors

Background & Surface

--background #ffffff

--card #ffffff

--popover #ffffff

--muted #f5f5f5

--accent #f5f5f5

--sidebar #fafafa

--sidebar-primary #171717

--header-background #fafafa

Text

--foreground #0a0a0a

--card-foreground #0a0a0a

--popover-foreground #0a0a0a

--primary-foreground #fafafa

--secondary-foreground #171717

--tertiary-foreground #0a0a0a

--muted-foreground #737373

--accent-foreground #171717

--destructive-foreground #fafafa

--sidebar-foreground #0a0a0a

--header-foreground #0a0a0a

Interactive

--primary #171717

--secondary #f5f5f5

--tertiary #93c5fd

--destructive #ef4444

Border & Input

--border #e5e5e5

--input #e5e5e5

--ring #a3a3a3

Chart

--chart-1 #3b82f6

--chart-2 #10b981

--chart-3 #6b21a8

--chart-4 #f59e0b

--chart-5 #f43f5e

Status

--status-info #f1f5f9

--status-success #dcfce7

--status-warning #fef3c7

--status-error #fee2e2

Typography

The quick brown fox — H1

Section heading — H2

Subsection — H3

Lead paragraph — introductory text that sets the stage for body content below.

Body paragraph. Vortex defaults to Noto Sans KR at 14px with a relaxed reading rhythm suited to enterprise dashboards and forms.

Muted helper text for secondary information.

inline code sample

Spacing & Shape

Spacing

0

0 · 0px

1

calc(0.25rem * 1) · 4px

2

calc(0.25rem * 2) · 7px

3

calc(0.25rem * 3) · 11px

4

calc(0.25rem * 4) · 14px

5

calc(0.25rem * 5) · 18px

6

calc(0.25rem * 6) · 21px

8

calc(0.25rem * 8) · 28px

10

calc(0.25rem * 10) · 35px

12

calc(0.25rem * 12) · 42px

0.5

calc(0.25rem * 0.5) · 2px

Radius

none

xs

sm

md

lg

xl

2xl

3xl

4xl

full

Shadow

shadow-xs

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-2xl

Focus Ring

--ring → #a3a3a3 · 2px solid · offset 2px

Components

Default

Disabled

Focus --ring → #a3a3a3

Card Title

Short description of a Vortex card surface with a neutral background and subtle border.

Draft Active Pending Error