Design Tokens

Tokens de design são as unidades fundamentais do sistema. Eles definem cores, espaçamentos, sombras e animações utilizadas em toda a aplicação.

Cores

Background

Background Default

--mt-bg

#0d0d0d

Background Elevated

--mt-bg-elevated

#1a1a1a

Background Muted

--mt-bg-muted

#151515

Border

Border Default

--mt-border

#2a2a2a

Border Hover

--mt-border-hover

#3a3a3a

Accent

Accent Primary

--mt-accent-primary

#50E3C2

Accent Primary Hover

--mt-accent-primary-hover

#3fcaab

Accent Secondary

--mt-accent-secondary

#A6D067

Accent Secondary Hover

--mt-accent-secondary-hover

#95c156

Text

Text Default

--mt-text

#f7f7f7

Text Muted

--mt-text-muted

#b3b3b3

Text Subtle

--mt-text-subtle

#666666

Espaçamento

O sistema utiliza a escala padrão do Tailwind CSS (4px base):

spacing-1

0.25rem (4px)

spacing-2

0.5rem (8px)

spacing-3

0.75rem (12px)

spacing-4

1rem (16px)

spacing-6

1.5rem (24px)

spacing-8

2rem (32px)

spacing-12

3rem (48px)

spacing-16

4rem (64px)

Sombras

Small

shadow-mt-sm

Medium

shadow-mt-md

Large

shadow-mt-lg

Extra Large

shadow-mt-xl

Glow Primary

shadow-mt-glow-primary

Glow Secondary

shadow-mt-glow-secondary

Animações

Animações pré-configuradas para transições e efeitos visuais:

Fade In

animate-mt-fade-in

0.6s

Fade In Up

animate-mt-fade-in-up

0.8s

Slide In Left

animate-mt-slide-in-left

0.8s

Slide In Right

animate-mt-slide-in-right

0.8s

Scale In

animate-mt-scale-in

0.6s

Accordion Down

animate-mt-accordion-down

0.3s

Wiggle

animate-mt-wiggle

1s infinite