Design System
v3.0Maritime Precision
Kitchen Sink
Referência completa de componentes, padrões e tokens do design system MartinsTech. Use esta página como guia para padronizar interfaces.
Componentes
24
Tokens
120+
Animações
18
Breakpoints
5
Princípios
Elegância Refinada
Sombras suaves, transições fluidas e cantos arredondados.
Herança Marítima
Navy e Gold evocam precisão, confiança e excelência técnica.
Acessível Primeiro
WCAG AA+, indicadores de foco e navegação por teclado.
Cores
Brand — Navy
900#001D3D
800#002952
700#003566
600#004080
500#0059B3
400#3385CC
300#66A3D9
200#99C2E6
100#CCE0F2
50#E6F0F9
Brand — Gold
600#B8930F
500#D4A51A
400#F5CC00
300#FFE066
200#FFF0A6
50#FFFBE6
Semânticas — Success
600#059669
500#10B981
400#34D399
100#D1FAE5
BGsuccess-bg
Textsuccess-text
Semânticas — Danger
600#DC2626
500#EF4444
400#F87171
100#FEE2E2
BGdanger-bg
Textdanger-text
Semânticas — Warning
600#D97706
500#F59E0B
400#FBBF24
100#FEF3C7
BGwarning-bg
Textwarning-text
Semânticas — Info
600#0284C7
500#0EA5E9
400#38BDF8
100#E0F2FE
BGinfo-bg
Textinfo-text
Slate (Neutrals)
950#020617
900#0F172A
800#1E293B
700#334155
600#475569
500#64748B
400#94A3B8
300#CBD5E1
200#E2E8F0
100#F1F5F9
50#F8FAFC
Tipografia
Escala Tipográfica
Maritime Precision
Dashboard Overview
Section Header
Page Title
Card Heading
Subsection Title
Body text — DM Sans regular for comfortable reading at standard paragraph length.
UI label, navigation, and secondary information.
Caption, timestamp, and metadata.
Fontes
DM Sans
Font body — todos os textos
Aa Bb Cc 0123456789
Regular 400 · Medium 500 · Semibold 600 · Bold 700
Fira Code
Font mono — código e dados técnicos
Aa Bb Cc 0123456789
const api = fetch('/api')
Cards
Variantes
Card Padrão
Card básico com header, body e footer. Use para agrupar conteúdo relacionado.
Card Accent
Borda gold na lateral esquerda para destaque de conteúdo importante.
Card Brand
Borda navy no topo para itens de marca e seções principais.
Stat Cards
Receita
R$ 42.580
Despesas
R$ 18.230
Lucro
R$ 24.350
Meta
87%
Card Interativo
JM
João Martins
joao@martinstech.net
Card com hover state para listas clicáveis.
MT
MartinsTech Platform
10 serviços ativos
72% do plano utilizado
Estado Vazio
Nenhum resultado encontrado
Tente ajustar os filtros ou criar um novo item.
Formulários
Campos de Entrada
Obrigatório
Selects e Textarea
Date Picker
Toggle Switch
Tabelas
Tabela de Dados
| Data | Descrição | Categoria | Valor | Status | Ações |
|---|---|---|---|---|---|
| 01/04/2026 | Consultoria MartinsTech | Serviços | + R$ 8.500,00 | Confirmado | |
| 28/03/2026 | AWS Infrastructure | Cloud | - R$ 1.240,00 | Confirmado | |
| 25/03/2026 | Material de escritório | Operacional | - R$ 380,00 | Pendente | |
| 22/03/2026 | Treinamento Equipe | Educação | - R$ 2.100,00 | Cancelado | |
| 20/03/2026 | Projeto Cliente ABC | Serviços | + R$ 15.000,00 | Confirmado | |
| 18/03/2026 | Hospedagem Servidor | Cloud | - R$ 650,00 | Confirmado | |
| 15/03/2026 | Licença Software | Tecnologia | - R$ 2.500,00 | Confirmado | |
| 12/03/2026 | Manutenção Sistema | Serviços | - R$ 1.800,00 | Pendente | |
| 10/03/2026 | Consultoria Financeira | Consultoria | + R$ 5.200,00 | Confirmado | |
| 08/03/2026 | Reunião Estratégica | Reunião | - R$ 0,00 | Confirmado | |
| 05/03/2026 | Marketing Digital | Marketing | - R$ 3.600,00 | Cancelado | |
| 02/03/2026 | Auditoria Interna | Compliance | - R$ 4.200,00 | Pendente | |
| 28/02/2026 | Desenvolvimento App | Desenvolvimento | + R$ 22.000,00 | Confirmado | |
| 25/02/2026 | Treinamento RH | Educação | - R$ 1.500,00 | Confirmado |
1-5 de 15 resultados
Tabela de Equipe
| Nome | Cargo | Departamento | Início | Status | Ações |
|---|---|---|---|---|---|
| Ana Costa | Tech Lead | Engenharia | 12/01/2022 | Ativo | |
| Bruno Silva | UX Designer | Design | 05/03/2023 | Ativo | |
| Carla Mendes | Product Manager | Produto | 18/07/2021 | Ativo | |
| Diego Rocha | Backend Dev | Engenharia | 22/09/2023 | Ativo | |
| Elena Ferreira | Content Strategist | Marketing | 10/11/2022 | Férias | |
| Felipe Almeida | DevOps Engineer | Engenharia | 03/02/2024 | Ativo | |
| Gabriela Lima | UI Designer | Design | 15/06/2023 | Ativo | |
| Henrique Souza | Frontend Dev | Engenharia | 28/04/2022 | Desligado | |
| Isabela Martins | Operations Lead | Operações | 01/08/2021 | Ativo | |
| Jorge Campos | Data Analyst | Produto | 14/12/2023 | Ativo | |
| Karen Oliveira | Growth Marketer | Marketing | 20/05/2024 | Ativo | |
| Lucas Pereira | QA Engineer | Engenharia | 07/10/2022 | Férias |
Compact + Sortable
Densidade alta para dashboards financeiros. Clique nos cabeçalhos para ordenar.
| ID | Transação | Categoria | Valor | Data | Status |
|---|---|---|---|---|---|
| #TXN-0041 | Licença Figma Enterprise | Tecnologia | - R$ 1.620,00 | 02/04/2026 | Pago |
| #TXN-0040 | Consultoria DevOps | Serviços | + R$ 9.800,00 | 01/04/2026 | Pago |
| #TXN-0039 | Google Workspace | Cloud | - R$ 890,00 | 30/03/2026 | Pendente |
| #TXN-0038 | Projeto Integração API | Desenvolvimento | + R$ 18.500,00 | 28/03/2026 | Pago |
| #TXN-0037 | Seguro Equipamentos | Operacional | - R$ 2.340,00 | 25/03/2026 | Cancelado |
| #TXN-0036 | Curso AWS Certified | Educação | - R$ 3.200,00 | 22/03/2026 | Pago |
.table .table-compact .table-striped
th[data-sort]
.cell-mono
.cell-right
Relaxed + Selected Rows
Espaçamento confortável para leitura. Linhas selecionadas com fundo de marca.
| Projeto | Responsável | Prazo | Progresso | Status | |
|---|---|---|---|---|---|
| Redesign Portal | Ana Costa | 15/05/2026 |
72%
|
Em andamento | |
| Migração Cloud | Felipe Almeida | 30/06/2026 |
35%
|
Atrasado | |
| App Mobile v2 | Diego Rocha | 20/04/2026 |
91%
|
Em andamento | |
| Auditoria LGPD | Carla Mendes | 10/07/2026 |
12%
|
Planejado |
.table .table-relaxed
tr.selected
Bordered + Sticky Header
Tabela com bordas e cabeçalho fixo em scroll. Redimensione a janela para testar.
| Servidor | IP | CPU | RAM | Disco | Uptime | Status |
|---|---|---|---|---|---|---|
| martinsconnect | 100.82.246.71 | 23% | 9.2 GB | 47% | 34d 12h | Online |
| cloudinha | 100.109.196.69 | 8% | 1.8 GB | 22% | 34d 12h | Online |
| gateway | 127.0.0.1:7000 | 12% | 512 MB | -- | 5d 3h | Online |
| dashboard | 127.0.0.1:7001 | 6% | 384 MB | -- | 5d 3h | Online |
| chat | 127.0.0.1:7002 | 4% | 256 MB | -- | 5d 3h | Online |
| agent | 127.0.0.1:7005 | 18% | 1.1 GB | -- | 2d 8h | Online |
| ollama | 127.0.0.1:11434 | 45% | 4.6 GB | -- | 34d 12h | Online |
| keycloak | 127.0.0.1:5017 | 9% | 720 MB | -- | 12d 6h | Online |
| mysql | 127.0.0.1:3306 | 3% | 340 MB | 15% | 34d 12h | Online |
| staging-01 | 10.0.1.50 | 0% | -- | -- | -- | Offline |
.table .table-bordered .table-sticky
.table-wrapper
.cell-mono .cell-right
Empty State
Estado vazio com mensagem centralizada quando não há dados.
| Nome | Cargo | Status | |
|---|---|---|---|
| Nenhum resultado encontrado | |||
.table-empty
Estados de Carregamento
Spinners
Indicadores de carregamento em diferentes tamanhos e cores.
spinner-sm
default
spinner-lg
spinner-accent
Button Loading State
Botões com indicador de carregamento em progresso.
Card Skeleton
Skeleton loaders para cards e conteúdo de texto.
Table Skeleton
Skeleton loaders para tabelas com múltiplas linhas.
Form Skeleton
Skeleton loaders para formulários.
Text Skeleton Variations
Diferentes padrões de skeleton para texto.
Heading
Paragraph
List Items
Modais e Popups
Modal Dialog
Modais para confirmações, formulários e conteúdo focado.
Dropdown Menu
Menus contextuais com opções e ações.
Tooltips
Dicas contextuais ao passar o mouse sobre elementos.
Info
Lucro Líquido
Popover de Notificações
Painel flutuante para notificações e alertas recentes.
Feedback
Badges
Default
Success
Danger
Warning
Info
Accent
Alertas
Operação realizada com sucesso.
Erro ao processar a requisição. Tente novamente.
Sua sessão expira em 5 minutos. (auto-dismiss 8s)
Nova versão disponível. Atualize para acessar os recursos mais recentes. (expires 2026-04-03)
Toasts (clique para testar)
Progress
Default — 45%
Success — 72%
Warning — 88%
Danger — 95%
Accent — 60%
Avatars
A
JM
MT
DS
Status Dots
Online
Idle
Offline
Syncing
Layout
Padrão com Sidebar
Todas as apps com múltiplas seções devem usar
.app-layout com .app-sidebar e .app-content. Sidebar colapsa em mobile com overlay.
Grid de Cards
Use
ks-grid-2, ks-grid-3, ks-grid-4 para layouts responsivos com auto-fit.
4 colunas
1
2
3
4
3 colunas
1
2
3
2 colunas
1
2
Espaçamento
Escala de Espaçamento
1
2
3
4
5
6
8
10
12
16
Sombras
xs
sm
md
lg
xl
2xl
Border Radius
sm
md
lg
xl
2xl
full
Ícones
Editor
Select an icon, tweak colors and size, then copy the JSON props to inject anywhere.
Iconhome
Stroke
Fill
Background
Size48
Stroke W1.5
Radius12
Padding12
Todos os Ícones
Biblioteca completa de ícones do MtIcons. Clique para copiar o nome. Use com
MtIcons.svg('name', size) ou <span data-icon="name" data-size="20"></span>
Brand Colors
Ícones nas cores da marca. Navy para contextos primários, Gold para destaques e ações.
Duotone Navy + Gold
Ícones com camada primária em Navy e camada secundária em Gold. O efeito duotone real da marca.
Uso
Três formas de usar ícones no projeto:
HTML (data-icon)
<span data-icon="home"
data-size="20"></span>
JS (DOM element)
var icon = MtIcons.svg('home', 20);
el.appendChild(icon);
JS (HTML string)
var str = MtIcons.html('home', 20);
container.append(str);
Solar Duotone icons by 480 Design (CC Attribution). Duotone elements use
opacity: 0.5 for the secondary stroke layer.
Chat Widget
O widget de assistente IA integrado na plataforma. Usa
MtHelp para comunicação via MtApi com streaming.Live Demo
Mensagens renderizadas com os componentes
msg e chat-bar aprovados.Controles do Widget
Abra, feche e controle o assistente programaticamente.
Contexto da Conversa
Defina o contexto que o assistente usa para personalizar respostas. Use
MtHelp.setContext() para informar qual app e página o usuário está visualizando.Anatomia do Widget
Componentes visuais que compõem o chat.
FAB (Floating Action Button)
Status Dot
Conectado
Processando
Offline
Chat Preview
Widget de chat flutuante para suporte e assistência IA.
screenshot.pngAPI
Interface pública do módulo
MtHelp.| Método | Descrição |
|---|---|
MtHelp.mount() | Monta o FAB e o modal no body. Chamado uma vez na inicialização. |
MtHelp.show() | Exibe o FAB (após autenticação). |
MtHelp.hide() | Oculta o FAB. |
MtHelp.open() | Abre o modal de chat programaticamente. |
MtHelp.close() | Fecha o modal de chat. |
MtHelp.reset() | Limpa a conversa e restaura o estado vazio. |
MtHelp.setContext({app, page, content}) | Define o contexto da conversa para o sistema de IA. |