Tipografia Cores
AURORA SYSTEM
Animacoes

Hero de Demonstracao

System

White Motion
Architecture

Transparent lettering Glow background Shimmer buttons

Tokens

126

variaveis para escala

Components

08

com microinteracoes

Fonts

Inter + Mono

fallback robusto

white-first aesthetictransparent letteringreveal-driven layoutshover flashlight cards
white-first aesthetictransparent letteringreveal-driven layoutshover flashlight cards
01 / Tipografia

Escala completa e carregamento

Font families + strategy

  • Primary: Inter, sans-serif
  • Fallback stack: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif
  • Monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
  • Loading: local (`css2_19fd9cc6b396.css` + woff2)
  • Weights: 400/500/600/700

Roles h1 -> helper

h1Inter / 700 / 96px / 0.9 / -0.06em / uppercase opt.
h2Inter / 600 / 64px / 0.95 / -0.04em / none
h3Inter / 600 / 48px / 1.0 / -0.03em / none
h4Inter / 600 / 36px / 1.1 / -0.02em / none
h5Inter / 600 / 28px / 1.15 / -0.01em / none
h6Inter / 600 / 22px / 1.2 / normal / uppercase opt.
body-lgInter / 400 / 20px / 1.6 / 0 / none
bodyInter / 400 / 16px / 1.65 / 0 / none
body-smInter / 400 / 14px / 1.6 / .005em / none
captionInter / 500 / 12px / 1.5 / .08em / uppercase
labelInter / 600 / 12px / 1.3 / .12em / uppercase
helperMono / 400 / 11px / 1.45 / .08em / uppercase
02 / Sistema de Cores

Hex, RGB, HSL, opacidade, gradiente e semantica

Primary

HEX #131313 | RGB 19,19,19 | HSL 0,0%,7%

text/bg ativo/border forte

Accent

HEX #B5FF3D | RGB 181,255,61 | HSL 83,100%,62%

hover/foco/glow/decorative

Gradient + opacity

100/80/60/35/15

hero overlays, surfaces e botao

Semantic: primary / secondary / accent / neutral / feedback / decorative.

Contexto: text, background, border, hover, active, disabled. Contraste alvo: AA/AAA em fundo claro.

03 / UI Components

Buttons, Inputs, Cards, Navbar, Sections, Modals, Badges, Tooltips

Buttons + Inputs

Cards + Navbar + Section

Card

Adaptive Surface

hover glow e transicao

Navbar demo
Section pattern para blocos modulares.

Badges + Tooltip

neutralaccentsuccess
Tooltip com fade/slide

Modal

04 / Icones

Solar + Simple Icons

05 / Animacoes

Background, transicao e efeitos repetidos

Reveal

fade + slide + blur

Text clip

Live

Flashlight

radial spotlight at cursor

As dobras usam repetidamente glow de fundo, reveal, spotlight em componentes, beam nos botoes, marquee e carousel ken-burns.