Elementos

Componentes de interface, botões, cards e outros elementos do sistema de design IARA.

Botões

Estilos de botões para diferentes contextos e ações.

Primário

Secundário

Tamanhos

Com Ícones

Cards

Containers para agrupar informações relacionadas.

Card Básico

Um card simples com borda sutil e efeito hover.

Card Elevado

Card com sombra para criar hierarquia visual.

Card Accent

Card com fundo colorido para destaque.

🚀

Card Interativo

Card clicável com efeito de elevação no hover.

Destaque

Card Feature

Card com borda accent para destacar features.

Card Glass

Efeito de vidro com backdrop blur.

Inputs

Campos de entrada e formulários.

🔍

Badges & Tags

Elementos para categorização e status.

DefaultAccentMutedOutline
✓ Sucesso⚠ Aviso✗ Erroℹ Info

Tabs

Navegação entre seções de conteúdo.

Conteúdo da tab: Visão Geral

Alerts

Mensagens de feedback e notificações.

✓

Sucesso

Operação realizada com sucesso!

ℹ

Informação

Uma informação importante para você.

⚠

Atenção

Atenção! Verifique as informações.

✗

Erro

Ocorreu um erro. Tente novamente.

Espaçamentos & Bordas

Tokens de espaçamento e raio de borda.

Border Radius

Button

100px

Card

16px

Large

24px

Input

12px

Espaçamentos Fluidos

--pad-body: clamp(1rem, -1.125rem + 6.8vw, 3.125rem);
--pad-hero: clamp(1.875rem, -1.25rem + 10vw, 5rem);

/* Tailwind defaults também disponíveis */
p-4  = 1rem (16px)
p-6  = 1.5rem (24px)
p-8  = 2rem (32px)
p-12 = 3rem (48px)

Transições

Animações e efeitos de transição.

/* Variáveis de Transição */
--tr-time: 550ms;
--bezier: cubic-bezier(0.32, 0, 0.03, 0.99);

/* Classes Tailwind Recomendadas */
transition-colors duration-300
transition-all duration-300
transition-transform duration-300 ease-out