Aithusa

Role Of This Guide

O style guide governa interface. Brandbook governa marca. Aqui o foco é traduzir a identidade em tokens, padrões e componentes de produto.

Brandbook first

Consulte o brandbook para tese, narrativa, voz e sinais de identidade antes de desenhar interface.

Style guide second

Use este documento para tokens, componentes, motion e decisões de composição visual em produto.

Token before utility

Prefira CSS variables e primitives canônicos antes de criar exceções visuais ou classes isoladas.

Usage Rules

Quatro regras para manter a linguagem do sistema consistente enquanto ele cresce.

Primary lime marca direção, ação e energia. Não usar como ruído decorativo.

Glow, scanlines e cockpit grid são acentos composicionais, não textura obrigatória.

Motion deve orientar leitura, revelar hierarquia ou confirmar estado.

Inter domina a UI; display e serif entram só quando a interface precisa tensão editorial.

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 & Brand Accents

bg-surface

Surface

--surface

bg-surface-hover

Surface Hover

--surface-hover

bg-surface-elevated

Surface Elevated

--surface-elevated

bg-bb-lime-light

BB Lime Light

--bb-lime-light

bg-bb-lime-dark

BB Lime Dark

--bb-lime-dark

bg-gold

Gold

--gold

bg-optimal

Optimal

--optimal

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. Families: Tasa Orbiter Display, Inter, Cormorant Garamond and Roboto 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-primary

Primary CTA glow

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

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.

micro

150ms

--duration-micro

technical

250ms

--duration-technical

card

450ms

--duration-card

page

800ms

--duration-page

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