Cores
Paleta primaria, semantica e superficies. Clique para copiar.
Tipografia
Escala tipografica com Instrument Sans. Hierarquia visual atraves de tamanho, peso e cor.
letter-spacing: -0.02em
letter-spacing: 0.08em
400 / #6B7280
Botoes
Variantes, tamanhos, estados, icones e agrupamentos.
Specs
- Padding
- 10px 20px (default) / 7px 14px (sm)
- Border-radius
- 9px (Fibonacci md)
- Font
- 14px / 600 Instrument Sans
- Cores
- #182077 primary / #A64040 danger / #97C120 accent
- Transition
- 240ms / 180ms (Mevlox Ease)
- Hover
- translateY(-1px) + shadow 0 4px 16px
Use quando
- Acao principal da pagina (primary, 1x por tela)
- Acoes secundarias de apoio (secondary ou ghost)
- Confirmacao explicita (primary ou success)
- Destrutiva com confirmacao (danger)
Nao use quando
- Para apenas navegar (use link)
- Mais de 1 primary visivel na mesma tela
- Acao destrutiva sem modal de confirmacao
- Texto maior que 3 palavras (encurte)
Formularios Compactos
Campos menores (13px/7px padding) para mais densidade sem perder legibilidade.
Specs
- Padding input
- 7px 10px (13px font)
- Label
- 12px / 500 / gap 4px
- Border
- 1px solid #E5E7EB
- Border-radius
- 9px (Fibonacci md)
- Focus ring
- 3px rgba(24,32,119,0.08) + 1px primary
- Erro
- #A64040 border + helper 11px
- Transition
- 240ms border / 400ms shadow
Use quando
- Coletar dados estruturados (nome, email, CPF)
- Agrupar campos por contexto em cards
- Indicar erros com helper text abaixo do campo
- Floating label para forms minimalistas
Nao use quando
- Mais de 7 campos sem agrupar em secoes
- Placeholder substituindo o label (use ambos)
- Validar apenas no submit (valide em blur)
- Campos obrigatorios sem indicacao visual
Badges
Indicadores de status, contornados e com animacao.
Specs
- Padding
- 3px 10px
- Border-radius
- 5px (Fibonacci sm)
- Font
- 11px / 600 / uppercase-off
- Cores soft
- BG tom 50 + texto tom 600 (brasileira)
- Dot
- 6px circle + pulse 2s Mevlox Ease
- Counter
- min-width 18px / 10px / 700 / radius full
Alertas
Feedback contextual com icones e botao de fechar.
Specs
- Padding
- 12px 16px
- Border-radius
- 9px (Fibonacci md)
- Border
- 1px solid tom 500 a 25% opacity
- Icone
- 20px stroke 1.5px
- Cores
- Paleta brasileira: Musgo / Terracota / Ocre / Ardosia
- Transition
- 240ms Mevlox Ease
Use quando
- Feedback apos uma acao (success no submit)
- Avisos contextuais dentro de forms ou paginas
- Alertas persistentes ate acao do usuario (warning)
- Informacao secundaria sobre sistema (info)
Nao use quando
- Feedback curto e temporario (use toast)
- Dialogo que bloqueia fluxo (use modal)
- Sem icone ou texto curto demais
- Empilhar mais de 3 alertas na mesma pagina
Tabela
Tabela compacta com hover e badges de status.
| Cliente | Plano | Status | Valor |
|---|---|---|---|
| Airlan Madeira | Fibra 400 Mbps | Ativo | R$ 149,90 |
| Maria Santos | Fibra 600 Mbps | Pendente | R$ 199,90 |
| Joao Costa | Fibra 1 Gbps | Cancelado | R$ 299,90 |
Specs
- Padding celula
- 10px 16px
- Header
- 12px / 600 / uppercase / letter 0.04em
- Font celula
- 13px / 400 Instrument Sans
- Valores
- 12px JetBrains Mono / alinhamento direita
- Border
- 1px solid #E5E7EB (apenas rows)
- Hover row
- background #F9FAFB / transition 180ms
Use quando
- Listar registros estruturados (clientes, faturas)
- Valores monetarios com fonte monoespacada
- Status com badges coloridos semanticamente
- Acoes rapidas por linha (editar, excluir)
Nao use quando
- Mais de 7 colunas (quebra em mobile, use cards)
- Dados hierarquicos (use tree ou accordion)
- Sem paginacao para +50 linhas
- Dados narrativos longos (use data list)
Dropdown Menu
Menu flutuante com icones, divisor e variante escura.
Tabs
Navegacao por abas em dois estilos: underline e pill.
Breadcrumb
Navegacao hierarquica com separadores chevron.
Paginacao
Navegacao entre paginas com estado ativo e desabilitado.
Avatar
Circular com iniciais, tamanhos multiplos, grupo e indicadores de presenca.
Tooltip
Dica flutuante que aparece ao passar o mouse.
Modal
Dialogo flutuante com overlay, animacao e acoes.
Specs
- Max-width
- 480px (default) / 640px (lg)
- Border-radius
- 14px (Fibonacci lg)
- Overlay
- rgba(0,0,0,0.6) + backdrop-blur 4px
- Padding
- header 16px 20px / body 20px / footer 12px 20px
- Entrada
- scale 0.95 -> 1 + fade 240ms Mevlox Ease
- Spotlight
- vignette radial gradient ativo
Use quando
- Confirmar acao destrutiva ou irreversivel
- Capturar atencao para um subfluxo (cadastro rapido)
- Exibir detalhes complementares sem nova pagina
- Dialogo curto com no maximo 2-3 acoes
Nao use quando
- Formulario longo com +7 campos (use pagina)
- Empilhar modal dentro de outro modal
- Mensagem simples e temporaria (use toast)
- Ao abrir sem contexto ou gatilho do usuario
Toast Notifications
Notificacoes contextuais com auto-dismiss, barra de progresso e icones semanticos.
Code Block
Blocos de codigo com destaque sintatico, badge de linguagem e botao copiar.
<x-mevlox.btn variant="primary">Salvar</x-mevlox.btn>.mev-btn-primary {
background: var(--mev-primary);
color: #ffffff;
border-radius: var(--radius-sm);
font-weight: 600;
}# Instalar o design system
npm install @mevlox/design-systemSkeleton Loading
Placeholders com animacao shimmer para estados de carregamento.
Empty State
Estado vazio para listas, tabelas e buscas sem resultado.
Top Bar / Header
Barra superior de aplicacao com logo, busca e acoes.
Command Palette
Busca global estilo Spotlight. Atalho: Cmd+K.
Data List
Painel de detalhes em duas colunas com fundo alternado.
File Upload
Zona de arrasto com preview de arquivo e barra de progresso.
Date Picker
Seletor de data customizado com calendario integrado.
Painel de Notificacoes
Dropdown com lista de notificacoes, leitura e link para mais.
Stat Dashboard
Metricas em linha com tendencia e sparklines minimalistas.
Specs do card
- Padding
- 20px (body) / 16px 20px (header, footer)
- Border-radius
- 14px (Fibonacci lg)
- Border
- 1px solid #E5E7EB
- Shadow
- 0 1px 3px rgba(0,0,0,0.04)
- Tilt 3D
- perspective 1000px + rotateX/Y on hover
- Transition
- 240ms Mevlox Ease
- Stat value
- 26px / 700 (count-up animation 1200ms)
Use quando
- Agrupar informacoes relacionadas (cliente, fatura)
- Dashboards com KPIs destacados e sparklines
- Listas de itens com acoes (editar, abrir)
- Layout em grid para paginas densas
Nao use quando
- Conteudo muito curto (use badge ou chip)
- Aninhar card dentro de outro card
- Usar shadow forte em tema claro (use sm ou md)
- Card sem hierarquia (titulo + body + acao)
Timeline
Feed de atividades com linha temporal e pontos coloridos.
Accordion
Secoes expansiveis com animacao suave. Clique para abrir.
Chip / Tag Input
Campo de entrada com tags removiveis. Digite e pressione Enter.
Status Page
Indicador de saude dos servicos com status individual.
Slider / Range
Controle deslizante com valor dinamico e estilo customizado.
Color Picker
Seletor de cor com preview, campo hex e swatches predefinidos.
Rating / Stars
Avaliacao por estrelas clicaveis com hover progressivo.
Stepper Numerico
Controle de quantidade com botoes de incremento e decremento.
Table of Contents
Navegacao vertical com indicador lateral para paginas longas.
Kanban Board
Quadro de tarefas em colunas com cards arrastaveis.
Calendario Mini
Calendario compacto com navegacao mensal e indicadores de eventos.
Chat Bubble
Baloes de mensagem enviados e recebidos com timestamps.
Mapa
Placeholder de mapa com pin de localizacao e endereco.
Pricing Table
Tabela de precos com destaque para o plano recomendado.
- ✓ 100 Mbps download
- ✓ 50 Mbps upload
- ✓ Suporte por email
- ✕ IP fixo
- ✕ SLA garantido
- ✓ 400 Mbps download
- ✓ 200 Mbps upload
- ✓ Suporte prioritario
- ✓ IP fixo
- ✕ SLA garantido
- ✓ 1 Gbps download
- ✓ 500 Mbps upload
- ✓ Suporte 24/7
- ✓ IP fixo
- ✓ SLA 99.9%
Testimonial / Quote
Depoimento de cliente com citacao destacada.
Desde que migramos para a Mevlox Tecnologia, nossa empresa nao teve nenhuma queda de conexao. O suporte tecnico e rapido e a fibra optica realmente entrega o que promete.
Feature Grid
Grid de funcionalidades com icones e descricoes compactas.
Banner / Announcement
Barra de anuncio com variantes e botao de dispensar.
Drawer / Side Panel
Painel lateral deslizante com overlay e conteudo detalhado.
Split Button
Botao principal com menu dropdown integrado.
OTP / PIN Input
Campos de codigo de verificacao com foco automatico.
Rich Text Preview
Visualizacao de conteudo formatado com tipografia rica.
Politica de Uso da Rede
Este documento descreve as regras de uso aceitavel da rede Mevlox Tecnologia. Todos os assinantes devem seguir estas diretrizes para garantir a qualidade do servico.
- Nao utilizar a rede para atividades ilicitas
- Respeitar os limites de banda contratados
- Manter o roteador atualizado
- Primeiro acesse o painel do cliente
- Verifique seu consumo mensal
- Entre em contato se necessario
A velocidade contratada e a maxima disponivel para o plano, sujeita a condicoes da rede.
Para configurar, use o comando ip route add default via 10.0.0.1 no terminal.
Mais detalhes na documentacao completa.
Diff / Changelog
Visualizacao de diferencas com linhas adicionadas e removidas.
Card de Plano (ISP)
Seletor de planos de internet fibra optica. Destaca o plano recomendado com badge e borda acentuada.
- Wi-Fi 5 incluso
- IPv4 compartilhado
- Suporte em horario comercial
- Sem fidelidade
- Wi-Fi 6 incluso
- IPv4 dedicado
- Suporte 24/7
- Fidelidade 12 meses
- Wi-Fi 6 Mesh
- Bloco /29 de IPs
- SLA 99,9% garantido
- Gerente dedicado
Stepper de Pedido (Distribuidora)
Progresso horizontal do pedido: do checkout a entrega. Usado na area do cliente da distribuidora.
Status de Rede (ISP NOC)
Mini dashboard NOC em tempo real. Indicador pulsante, metricas em JetBrains Mono e grafico de latencia.
Uptime SLA (Datacenter)
Historico visual de disponibilidade dos ultimos 90 dias. Cada barra representa 1 dia. Hover revela data e status.
Downloads & Instalacao
Recursos para instalar e usar o design system nos seus projetos.
npm install @mevlox/design-system@import '@mevlox/design-system';<x-mevlox.btn variant="primary">Salvar</x-mevlox.btn>
<x-mevlox.alert type="success">Salvo!</x-mevlox.alert>
<x-mevlox.badge variant="warning">Pendente</x-mevlox.badge>