Theme Showcase

Color variables and design system preview

Background Colors

Primary

--color-bg-primary

Secondary

--color-bg-secondary

Success

--color-bg-success

Info

--color-bg-info

Warning

--color-bg-warning

Danger

--color-bg-danger

Accent

--color-bg-accent

Lateral

--color-bg-lateral

Text Colors

Primary

--color-text-primary

Secondary

--color-text-secondary

Success

--color-text-success

Info

--color-text-info

Warning

--color-text-warning

Danger

--color-text-danger

Accent

--color-text-accent

Muted

--color-text-muted

Component Examples

Header Component

Status Icon

Buttons

Filled Variants

Link

Outlined Variants

Link

Fonts Showcase

Font Sizes (Tailwind)

text-xs - Lorem ipsum dolor sit amet (12px)

text-sm - Lorem ipsum dolor sit amet (14px)

text-base - Lorem ipsum dolor sit amet (16px)

text-lg - Lorem ipsum dolor sit amet (18px)

text-xl - Lorem ipsum dolor sit amet (20px)

text-2xl - Lorem ipsum dolor sit amet (24px)

text-3xl - Lorem ipsum (30px)

text-4xl - Lorem (36px)

Font Weights (Tailwind)

font-thin - Thin text example (100)

font-extralight - Extra Light text (200)

font-light - Light text example (300)

font-normal - Normal text example (400)

font-medium - Medium text example (500)

font-semibold - Semi Bold text (600)

font-bold - Bold text example (700)

font-extrabold - Extra Bold text (800)

font-black - Black text example (900)

Combined Examples

Main Heading (text-4xl font-bold)

Section Heading (text-2xl font-semibold)

Subsection Heading (text-xl font-medium)

Regular paragraph text (text-base font-normal). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Smaller description text (text-sm font-light). Ut enim ad minim veniam, quis nostrud exercitation.

Fine print or caption text (text-xs font-extralight)

Dark Mode

Switch your browser/system theme to see all colors adapt automatically using CSS variables.