Aithusa

Colors

Semantic color tokens using oklch(). All colors have light and dark variants. Never use raw Tailwind colors.

Core Semantic

bg-background

Background

--background

bg-foreground

Foreground

--foreground

bg-card

Card

--card

bg-primary

Primary

--primary

bg-secondary

Secondary

--secondary

bg-muted

Muted

--muted

bg-accent

Accent

--accent

bg-destructive

Destructive

--destructive

bg-border

Border

--border

bg-ring

Ring

--ring

bg-input

Input

--input

Popover

--popover

Extended Surfaces & Aura Indigo

bg-surface

Surface

--surface

bg-surface-hover

Surface Hover

--surface-hover

bg-surface-elevated

Surface Elevated

--surface-elevated

bg-aura-indigo

Aura Indigo

--aura-indigo

bg-aura-indigo-light

Aura Indigo Light

--aura-indigo-light

bg-aura-indigo-dark

Aura Indigo Dark

--aura-indigo-dark

Charts

bg-chart-1

Chart 1

--chart-1

bg-chart-2

Chart 2

--chart-2

bg-chart-3

Chart 3

--chart-3

bg-chart-4

Chart 4

--chart-4

bg-chart-5

Chart 5

--chart-5

Typography

Type scale, weights and letter-spacing. Font: Inter (sans), JetBrains Mono (mono).

Token	Size	Preview
`--font-size-xs`	0.75rem	Mais que Educação
`--font-size-sm`	0.875rem	Mais que Educação
`--font-size-base`	1rem	Mais que Educação
`--font-size-lg`	1.125rem	Mais que Educação
`--font-size-xl`	1.25rem	Mais que Educação
`--font-size-2xl`	1.5rem	Mais que Educação
`--font-size-3xl`	1.875rem	Mais que Educação
`--font-size-4xl`	2.25rem	Mais que Educação
`--font-size-5xl`	3rem	Mais que Educação

Normal

var(--font-weight-normal)

Medium

var(--font-weight-medium)

Semibold

var(--font-weight-semibold)

Bold

var(--font-weight-bold)

Extrabold

var(--font-weight-extrabold)

Monospace

const model = await loadAI("gpt-4o");
const result = model.generate({ prompt });

Spacing

Spacing tokens for padding, margins and gaps. Never use raw p-4, gap-6, etc.

--spacing-xs

0.25rem (4px)

--spacing-sm

0.5rem (8px)

--spacing-md

1rem (16px)

--spacing-lg

1.5rem (24px)

--spacing-xl

2rem (32px)

--spacing-2xl

3rem (48px)

--spacing-3xl

4rem (64px)

Border Radius

Computed from the base --radius token. Ensures consistent rounding.

calc(radius - 4px)

calc(radius - 2px)

radius

calc(radius + 4px)

2xl

calc(radius + 8px)

full

9999px

Shadows

Shadow elevation levels. Use diffuse shadows, never harsh black.

Subtle lift

shadow-sm

Card elevation

shadow-md

Modal / floating

shadow-lg

glow-indigo

Aura Indigo CTA glow

shadow-[var(--shadow-glow-indigo)]

Borders

Default (1px) and thick (2px) border widths.

Default Border

--border-width: 1px

Thick Border (Focus)

--border-width-thick: 2px

Z-Index Scale

Semantic stacking context. Never use raw z-50, z-100 etc.

--z-basebase

--z-dropdowndropdown

100

--z-stickysticky

200

--z-modalmodal

300

--z-tooltiptooltip

400

--z-toasttoast

Motion & Transitions

Duration tokens for animations. Respects prefers-reduced-motion.

fast

100

--duration-fast

normal

200

--duration-normal

slow

350

--duration-slow

Layout & @container

Bento grid with @container queries. Cards adapt from 1→3 columns based on parent container.

Card 1

@container responsive

Este card demonstra o comportamento de @container queries dentro do Design System Aithusa PRO.

Card 2

@container responsive

Este card demonstra o comportamento de @container queries dentro do Design System Aithusa PRO.

Card 3

@container responsive

Este card demonstra o comportamento de @container queries dentro do Design System Aithusa PRO.

Components & States

All installed shadcn components with every interaction state: default, hover, focus, disabled, loading, error.

Variants

Sizes

States

With Icons

Extended Tokens

Opacity, icon sizes, backdrop blur, and aspect ratios.

Opacity

Disabled

Hover

Overlay

Icons

sm (16px)

md (20px)

lg (24px)

Backdrop Blur

Aspect Ratios

1:1

4:3

16:9