← bit-system / fundamentos

Tokens

Grade de 4px. Tudo se alinha. Espaçamento, raios, sombras, motion, tamanhos e z-index do Bit System.

Espaçamento

baseado em 4px · token: --space-{n}

Raios de borda

baixos, pra preservar estética retrô - token: --radius-{name}

Sombras

offset sólido, sem blur - pixel style - token: --shadow-{name}

Tamanhos

ícones e hit targets - token: --size-{name}

Motion

duração + easing - linguagem retrô - tokens: --motion-{speed}, --ease-{name}
--ease-pixel · steps(8)
Hover me

Step animation 8-bit. Use em hovers de elementos de marca.

--ease-smooth · cubic-bezier
Hover me

Padrão para botões, cards e transições de UI.

--ease-out-back · overshoots
Hover me

Para modais, dropdowns e aparições com personalidade.

Z-index

camadas de profundidade - token: --z-{name}
0
--z-base
10
--z-raised
100
--z-overlay
1k
--z-modal
2k
--z-toast