Efeitos
Sombras suaves, bordas leves, cantos arredondados e transicoes fluidas. Projetado para conforto visual em uso prolongado.
Sombras
Sombras com blur suave para criar profundidade natural. Quanto maior a elevacao, mais difusa a sombra.
@include shadow('xs'); // Inputs, elementos rentes
@include shadow('sm'); // Cards, botoes em repouso
@include shadow('md'); // Cards hover, dropdowns
@include shadow('lg'); // Modais, popovers
@include shadow('xl'); // Elementos flutuantesSombras coloridas
Glow sutil com a cor do elemento. Usado em botoes hover e cards de destaque.
Bordas
Bordas de 1px como padrao para sistemas. Cores claras (#E5E5E5) criam separacao visual sem peso.
Border Radius
Cantos arredondados para suavidade visual. 8px (md) e o padrao para a maioria dos componentes.
$border-radius-none: 0;
$border-radius-xs: 4px;
$border-radius-sm: 6px;
$border-radius-md: 8px; // padrao
$border-radius-lg: 12px; // cards, modals
$border-radius-xl: 16px;
$border-radius-2xl: 24px;
$border-radius-full: 9999px; // avatars, pillsTransicoes
Transicoes suaves com easing natural. Criam feedback visual sem distrair.
| Token | Duracao | Uso |
|---|---|---|
$transition-fast |
100ms |
Hover de botoes, links, toggles |
$transition-base |
200ms |
Dropdowns, tooltips, tabs |
$transition-slow |
300ms |
Modais, overlays, sidebar |
@include transition-fast; // all 100ms ease
@include transition-base; // all 200ms ease
@include transition-slow; // all 300ms ease
// Hover com elevacao
@include hover-lift; // translateY(-1px) + shadow mdVariantes Brutais (opt-in)
Para pecas de marketing, landing pages ou elementos de destaque. Use com moderacao -- nao indicado para interfaces de sistema.
// Sombras brutal - usar apenas em --neo-brutal variants
@include brutal-shadow('sm'); // 4px offset
@include brutal-shadow('md'); // 6px offset
@include brutal-shadow('md', $color-brand-blue); // colorida
@include brutal-hover; // translate + shadow