234.174 Perfumes no catálogo
1.913 Ofertas nas lojas
Meu perfil

Buscar ou perguntar

Flux UI Kit

Demonstração de todos os elementos de interface — cores, tipografia, botões, formulários, boxes, tabelas, modais e avisos — usando a linguagem visual do template Flux Dashboard.

Cor primária
Violeta 285
oklch(55% .25 285)
Raio base
14px
cards em 18px
Tipografia
Inter
400 / 500 / 600 / 700
Seções
10
tema claro e escuro
Atalhos

Índice da página

Fundação

Cores e tokens

A paleta é definida em oklch e muda junto com o tema. Clique em uma amostra para copiar o nome da variável.

21 tokens
Superfícies
Marca e estados
Série de gráficos
Raio, sombra e gradiente
radius-sm 10px
radius-md 12px — inputs e botões
radius-lg 14px
radius-xl 18px — cards
shadow-sm cards em repouso
shadow-brand .flux-shadow
gradient 135°, primary → accent
dot-grid .flux-dot-grid
Fundação

Tipografia

Escala do Flux (Inter) e uma galeria de fontes modernas e elegantes — sem manuscritas.

display — 36 / 700 · Inter

Move at startup speed

h1 — 24 / 700

Título de página

h2 — 20 / 600

Título de seção

h3 / card-title — 16 / 600
Título de card
corpo — 14 / 400

O corpo de texto usa 14px em quase toda a interface: descrições de card, células de tabela, rótulos de formulário e itens de menu.

apoio — 14 e 12 em muted-foreground

Texto secundário para descrições e legendas.

Texto auxiliar de 12px para metadados e horários.

Sans modernas

Geométricas e UI — ideais para produto, dashboards e interfaces.

Plus Jakarta Sans Sans · geométrica

Design com precisão

Espaçamento generoso e terminais limpos para interfaces premium.

Aa Bb Cc 123 — The quick brown fox

Manrope Sans · neutra

Clareza sem atrito

Leitura confortável em títulos e corpo, com contraste suave.

Aa Bb Cc 123 — The quick brown fox

Outfit Sans · contemporânea

Forma e ritmo

Silhueta moderna para headlines de produto e marketing digital.

Aa Bb Cc 123 — The quick brown fox

Sora Sans · tech

Velocidade legível

Tom tecnológico sem parecer fria — ótima em CTAs e labels.

Aa Bb Cc 123 — The quick brown fox

DM Sans Sans · editorial UI

Equilíbrio visual

Optical size nativo; funciona bem do microtexto ao display.

Aa Bb Cc 123 — The quick brown fox

Space Grotesk Sans · grotesca

Caráter marcado

Personalidade forte em títulos curtos e números de destaque.

Aa Bb Cc 123 — The quick brown fox

Serifs elegantes

Editoriais e refinadas — para headlines, citações e contraste com a UI.

Fraunces Serif · soft

Elegância suave

Serifa moderna com personalidade — ideal para hero e feature titles.

Aa Bb Cc 123 — The quick brown fox

Instrument Serif Serif · display

Refinamento editorial

Itálico fluido para destaques e frases de assinatura.

Aa Bb Cc 123 — The quick brown fox

Playfair Display Serif · clássica

Contraste alto

Presença luxuosa em capas, títulos de artigo e marcas premium.

Aa Bb Cc 123 — The quick brown fox

Cormorant Garamond Serif · clássica fina

Sofisticação leve

Traço fino e alto contraste — elegante em títulos curtos.

Aa Bb Cc 123 — The quick brown fox

Newsreader Serif · leitura

Texto com presença

Serifa contemporânea pensada para longos trechos e artigos.

Aa Bb Cc 123 — The quick brown fox

Paring Serif + Sans

Título em Instrument

Corpo em Manrope — contraste tipográfico moderno e legível em dashboards e landing pages.

Aa + Bb Cc 123

Recursos de texto

Texto em gradiente

Um link inline, um valor monoespaçado ORD-7891 e um trecho de código --flux-primary.

Todo componente compartilha os mesmos tokens de cor, raio e sombra.
Listas
  • Item de lista simples
  • Segundo item
  • Terceiro item
  • Projetos ilimitados
  • Suporte prioritário
  • Acesso à API
Ações

Botões

Altura 36px, raio 12px, peso 500 e ícone de 16px.

Variantes
Assinatura do template — gradiente com brilho no hover
Tamanhos
Com ícone, estados e grupo
Controle segmentado e filtros
Largura total
Sinalização

Selos, tags e avatares

Selos de 11px com raio 12px, como nas tabelas do template.

Selos de status
processing completed pending cancelled draft arquivado beta
Contadores e indicadores
12 3 Produção estável Homologação Falha no build
Tags removíveis
Next.js TypeScript Tailwind
Avatares
SC AM PK AS SC AM PK +6 EW

Emma Wilson

[email protected]
Dica flutuante e atalho
Sincronizado há 3 minutos ⌘K abre a paleta de comandos
Entrada de dados

Formulários

Campos de 36px com raio 12px, sombra sutil e anel de foco de 3px na cor primária.

demonstração
Aparece no seu perfil público.
Usamos este endereço para notificações.
Seleção de data única.
Lista de seleção única.
BR +55
Campo formatado com seletor de país.
R$ BRL
Prefixo e sufixo no mesmo grupo.
Ícone posicionado dentro do campo.
Este cupom expirou.
Somente leitura para este perfil.
Código de verificação
—
Seis dígitos com avanço automático.
Até 280 caracteres.
Envio de arquivos
Caixas de seleção
Botões de opção
Interruptores Limite de uso 65%
Contêineres

Boxes e cards

Card branco, borda de 1px, raio 18px e sombra leve que cresce no hover.

Cards de indicador
MRR R$ 48,2 mil ↗ 12,4% vs. mês anterior
Usuários ativos 12.847 ↗ 8,2% vs. mês anterior
Publicações 342 ↗ 24,1% vs. mês anterior
Cancelamentos 1,4% ↘ 0,3% vs. mês anterior
Card completo, lista e perfil

Sprint 24

Faltam 5 dias

Concluídos (14) Em andamento (5) A fazer (2)

Atividade do time

Últimas movimentações

SC

Sarah C. aprovou o PR #284

3 min
AM

Alex M. publicou em produção

12 min
PK

Priya K. abriu a issue #92

28 min
ML

Marcus L. revisou o PR #281

45 min
AS

Aigars Silkalns

Administradora · Colorlib

Pro 2FA ativo
Plano, quadro kanban e linha do tempo

Plano Pro

Cobrança mensal

Atual

R$ 29/mês

  • Projetos ilimitados
  • Suporte prioritário
  • Analytics avançado
  • Acesso à API

Quadro

Colunas com cards arrastáveis

A fazer 2
Design

Revisar tokens de cor

Vence em 2 dias
Docs

Escrever guia de uso

Publicações

Histórico de releases

  • v2.4.0 em produção

    Há 2 minutos · main

  • Retentativa de webhooks

    Há 18 minutos · homologação

  • Atualização de dependências

    Há 1 hora · main

Faixa promocional, estado vazio e carregamento

Ative o relatório semanal

Receba um resumo do desempenho toda segunda-feira.

Nenhum resultado

Ajuste os filtros ou crie um novo registro.

Esqueleto de carregamento
Visualização

Dados, gráficos e tabela

Linhas de 44px, cabeçalho em muted-foreground e selo de status por linha.

Área — crescimento de receita Jul Set Nov Dez Jan
Barras — pedidos por dia
Seg
Ter
Qua
Qui
Sex
Sáb
Dom
Medidores de uso e progresso
Chamadas de API8.420 / 10.000
Armazenamento3,2 / 5 GB
Assentos do time4 / 10
Adoção — Dashboard92%
Adoção — Relatórios61%
Adoção — Webhooks18%
Pedido Cliente Produto Status Data Valor
ORD-7891 EW

Emma Wilson

[email protected]

 		Licença Pro Dashboard completed 14 fev 2026 R$ 299,00
ORD-7890 JC

James Chen

[email protected]

 		Upgrade Plano Time processing 14 fev 2026 R$ 599,00
ORD-7889 SG

Sofia Garcia

[email protected]

 		Licença Enterprise pending 13 fev 2026 R$ 1.499,00
ORD-7888 DK

David Kim

[email protected]

 		Licença Individual cancelled 12 fev 2026 R$ 79,00
Mostrando 1–4 de 20 resultados
Orientação

Navegação

Trilha, abas, menu lateral com indicador em gradiente e paleta de comandos.

Trilha de navegação
Abas com painéis

Resumo de faturamento, adoção de recursos e saúde dos serviços.

Menu lateral
Paleta de comandos
Buscar páginas, ações e atalhos... esc
Criar novo pedido ⌘N
Ver atividade recente
Alternar tema
Menu suspenso
Comunicação

Avisos e toasts

Fundo tingido na cor do estado com borda a 35% de opacidade.

Nova versão disponível

A versão 2.4.0 traz melhorias de desempenho no painel de pedidos.

Publicação concluída

O deploy para produção terminou sem erros.

Limite de armazenamento próximo

Você usou 3,2 GB dos 5 GB disponíveis no plano atual.

Falha no pagamento

Não conseguimos processar o cartão terminado em 4242.

Toasts — clique para disparar
Sobreposições

Modais e painéis

Diálogos com raio 18px, sombra ampliada e rodapé alinhado à direita.

Filtros
Somente