OXGN UI

Component Library

Design System Theme

Colors, typography, spacing, and other design tokens used throughout the OXGN platform.

Colors

Primary

Primary

--color-primary

Primary 80%

--color-primary/80

Primary 60%

--color-primary/60

Primary 40%

--color-primary/40

Primary 20%

--color-primary/20

Neutral

Background

--color-background

Muted

--color-muted

Border

--color-border

Muted Text

--color-muted-foreground

Text

--color-text

Semantic

Error

--color-error

Success

--color-success

Warning

--color-warning

Info

--color-info

Typography

Heading 1

text-4xl font-bold

Heading 2

text-3xl font-semibold

Heading 3

text-2xl font-semibold

Heading 4

text-xl font-medium

Body text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-base

Small text - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-sm

Extra small text - Lorem ipsum dolor sit amet.

text-xs

Spacing

xs

0.25rem

sm

0.5rem

md

1rem

lg

1.5rem

xl

2rem

2xl

2.5rem

3xl

3rem

4xl

4rem

Border Radius

Small

rounded-sm

Default

rounded

Medium

rounded-md

Large

rounded-lg

Extra Large

rounded-xl

2x Large

rounded-2xl

3x Large

rounded-3xl

Full

rounded-full