Sistema de Design
Cores
Primária (Enabled)
#FFC900Primária (Hover)
#FFB300Secundária (Enabled)
#323A3ESecundária (Hover)
#435056Destrutiva (Enabled)
#F74136Destrutiva (Hover)
#D52A2FFundo
#131616Fundo Nivel 700
#323A3EBorda Divisória
#FFC900Texto Primário
#000000Texto Secundário
#FFFFFFTexto de Destaque
#FEEBB1Tipografia
Título 1
font-family: var(--h1-font-family); font-size: var(--h1-font-size) → var(--h1-font-size-xl)Título 2
font-family: var(--h2-font-family); font-size: var(--h2-font-size) → var(--h2-font-size-xl)Título 3
font-family: var(--h3-font-family); font-size: var(--h3-font-size) → var(--h3-font-size-xl)Texto de Corpo (Grande)
font-family: var(--body-lg-font-family); font-size: var(--body-lg-font-size) → var(--body-lg-font-size-xl)Fonte Calibri: moderna e legível, perfeita para conteúdos principais
Texto de Corpo (Médio)
font-family: var(--body-md-font-family); font-size: var(--body-md-font-size) → var(--body-md-font-size-xl)Fonte Calibri: moderna e legível, ideal para a maioria dos conteúdos
Texto de Corpo (Pequeno)
font-family: var(--body-sm-font-family); font-size: var(--body-sm-font-size) → var(--body-sm-font-size-xl)Fonte Calibri: moderna e legível, perfeita para textos secundários e interfaces
Título Especial
font-family: var(--h2-heading-font-family); font-size: var(--h2-heading-font-size) → var(--h2-heading-font-size-xl)Fonte Felix Titling: elegante e clássica, ideal para títulos de destaque
Botões Elegantes
Botões são componentes interativos utilizados para ações dentro da aplicação.
Contêineres Responsivos
Este é um contêiner responsivo (largura máxima: 1200px)
Redimensione seu navegador para ver como este contêiner se adapta a diferentes tamanhos de tela.
Separadores de Sessão
Separadores são elementos visuais que ajudam a organizar o conteúdo e melhorar a legibilidade, criando hierarquia visual na interface.
Separador Simples com Elipses
Linha única para separação com elipses decorativas em ambos os lados
Separador Composto
Separador com elementos decorativos de setas e símbolo de infinito
Separador com Seta
Linha simples com seta direcional à direita, ideal para indicar continuidade
Separador com Seta
Designed for immersion
Linha simples com seta direcional à direita, ideal para indicar continuidade
Selects
Os componentes Select permitem que os usuários escolham uma opção de uma lista de itens.
Select Básico
Selected: No item selected
Dropdowns
Os componentes Dropdown exibem menus flutuantes que aparecem quando o usuário interage com um botão ou outro controle.
Dropdown Menu
Carrossel
O carrossel é um componente interativo que permite exibir uma sequência de slides com navegação intuitiva e transições suaves. Temos dois tipos de carrossel disponíveis: um para conteúdo misto e outro específico para galerias de imagens.
Carrossel de Conteúdo
Carrossel de Imagens
Características dos Carrosséis:
- Navegação intuitiva com botões e indicadores
- Suporte a touch/swipe em dispositivos móveis
- Autoplay com pausa no hover
- Transições suaves e animações elegantes
- Totalmente responsivo
- Acessível com suporte a ARIA
Cards
Os cards são componentes versáteis para exibição de conteúdo, permitindo organizar informações em blocos visuais distintos.
Card com Imagem e Texto Responsivo
Teste
Este card demonstra uma abordagem responsiva para exibição de conteúdo. Com proporção vertical (2:3), a imagem ocupa 60% da altura total e o texto se ajusta automaticamente ao espaço disponível. Utiliza a fonte Calibri em todos os elementos de texto para uma aparência moderna e legível. O card inclui valores numéricos posicionados em cada extremidade para destacar informações importantes, com o valor da esquerda na cor primária e o da direita na cor do texto padrão. O card tem altura mínima de 400px e altura máxima de 680px para manter uma boa experiência visual em diferentes tamanhos de tela. O botão secundário no final do card ocupa 90% da largura, proporcionando uma experiência clara para ações do usuário.
Badges de Conquista
Padrão
Customizado (azul, 80px)
HexagonalBadge (80px)