Componentes
Fundamentos e peças do design system. Cada uma só usa tokens e não conhece nenhum Projeto.
Cores e superfícies
Superfícies em camadas: página, card, dentro do card, modal. As cores semânticas são as mesmas nos dois temas; o destaque troca pelos quatro tons.
Página
--bgCard
--cardDentro do card
--subModal
--dialogDentro do modal
--dialog-subTexto
--fgTexto secundário
--muteTexto terciário
--dimDestaque
--accentSucesso
--successAtenção
--warningErro
--dangerInformação
--infoTipografia
Geist para texto e Geist Mono para metadados (datas, códigos). Pesos 400 e 500; títulos com espaçamento levemente negativo.
Construindo o portfólio
Display · h1 · 28px · 500Recomendações pendentes
Título · h2 · 16px · 500Precisa de atenção
Subtítulo · h3 · 14px · 500Organizou nosso front-end em Vue de um jeito simples.
Corpo · 13px · 400Atualizado há 4 minutos
Legenda · 12px · 40012 out 2026 · 14:32
Mono · metadados · 12px · 400Tamanhos
Todo controle mede 36px: botão ao lado de segmentado ao lado de campo, mesma altura. Em telas de toque o alvo sobe para 44px.
36pxAltura de controles
--control-h16pxÍcones em controles
--icon-size8pxGap ícone–texto
--gap-icon12pxPadding horizontal
--pad-x10pxRaio de botões
--radius-control14pxRaio de cards
--radius-card↕ 36pxAnimação
Entrar é mais lento que sair. Só transform e opacity; a mola passa um pouco do ponto (1.04) e assenta. Clique para ver a entrada e de novo para ver a saída, mais rápida.
Rápida
80 ms entra · 60 ms sai · hover, cores, setasMédia
160 ms entra · 120 ms sai · tema, abas, switchLenta
240 ms entra · 160 ms sai · modais, páginasÍcones
Conjunto Solar, nos estilos linear (controles) e duotone (títulos de seção). Servidos pelo próprio site. Clique para copiar o nome.
Botão
Um primário por área. Carregando trava o clique e mantém a largura.
Segmentado e badge
Segmentado para 2 a 4 opções: o fundo da opção ativa desliza até a nova escolha. Setas, Home e End funcionam.
RascunhoPublicadoEm revisãoAgendadoBloqueado
Card e estado vazio
O brilho do card segue o mouse, só com mouse e nunca no toque. Estado vazio: ícone em linha, uma frase do que falta e, se houver, a próxima ação.
Nenhum post publicadoO primeiro texto está sendo escrito.
Lista com destaque deslizante
Um fundo único acompanha o item sob o mouse (e o foco do teclado). Itens não clicáveis não ganham hover. No toque não aparece.
Toast e modal
Toast confirma ações rápidas e empilha até três (o mouse em cima abre a pilha). Modal é para decisões curtas; no celular sobe como folha.
Barra flutuante e voltar ao topo
Role a página para baixo e depois um pouco para cima: a barra reaparece no topo. O botão redondo aparece depois de 700px.
A barra e o botão desta página são os componentes reais; role para ver.
Padrões
Regras de uso que valem para todo o site.