Design Guide

Yaelix design system and component guidelines

Logo

Light Mode

Black logo on white background

Dark Mode

White logo on dark background

Colors

Theme Colors

Primary--primary

bg-primary

Secondary--secondary

bg-secondary

Muted--muted

bg-muted

Accent--accent

bg-accent

Destructive--destructive

bg-destructive

Semantic Colors

Background--background

bg-background border

Foreground--foreground

bg-foreground

Card--card

bg-card border

bg-popover border

Border--border

bg-border

Input--input

bg-input

Gradients

Primary Gradient

gradient-primary

Primary Diagonal

gradient-primary-diagonal

Gradient Text

Beautiful Gradient Text

Class: gradient-primary-text

Typography

Heading 1

text-4xl font-bold

Heading 2

text-3xl font-bold

Heading 3

text-2xl font-semibold

Heading 4

text-xl font-semibold

Large paragraph text

text-lg

Regular paragraph text

Default

Small text

text-sm

Extra small text

text-xs

Buttons

Variants

Sizes

With Icons

Gradient Buttons

Cards

Card Title

Card description goes here

This is the card content area where you can add any content.

Primary Border

Card with primary border color

Use border-primary class for emphasis.

Muted Background

Card with muted background

Use bg-muted for subtle cards.

Badges

Variants

Default

Secondary

Destructive

Outline

With Icons

Success

Error

Warning

Info

Form Elements

Input

Email with Icon

Password with Icon

Textarea

Enable notifications

Alert States

Success

Your changes have been saved successfully.

Information

This is an informational message for the user.

Warning

Please review this important information.

Error

An error occurred while processing your request.

Spacing

Yaelix uses Tailwind's spacing scale. Common spacing values:

p-2

0.5rem

p-4

1rem

p-6

1.5rem

p-8

2rem

gap-2

gap-4

gap-6