Design System

v3.0
Maritime 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
text-5xl / 3rem / 700
Maritime Precision
text-4xl / 2.25rem / 700
Dashboard Overview
text-3xl / 1.875rem / 700
Section Header
text-2xl / 1.5rem / 700
Page Title
text-xl / 1.25rem / 600
Card Heading
text-lg / 1.125rem / 600
Subsection Title
text-base / 1rem / 400
Body text — DM Sans regular for comfortable reading at standard paragraph length.
text-sm / 0.875rem / 500
UI label, navigation, and secondary information.
text-xs / 0.75rem / 500
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')

Botões

Variantes
Tamanhos
Estados
Grupo de Botões

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
Ativo

Card com hover state para listas clicáveis.

MT
MartinsTech Platform
10 serviços ativos
Pro
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
DataDescriçãoCategoriaValorStatusAções
01/04/2026Consultoria MartinsTechServiços+ R$ 8.500,00Confirmado
28/03/2026AWS InfrastructureCloud- R$ 1.240,00Confirmado
25/03/2026Material de escritórioOperacional- R$ 380,00Pendente
22/03/2026Treinamento EquipeEducação- R$ 2.100,00Cancelado
20/03/2026Projeto Cliente ABCServiços+ R$ 15.000,00Confirmado
18/03/2026Hospedagem ServidorCloud- R$ 650,00Confirmado
15/03/2026Licença SoftwareTecnologia- R$ 2.500,00Confirmado
12/03/2026Manutenção SistemaServiços- R$ 1.800,00Pendente
10/03/2026Consultoria FinanceiraConsultoria+ R$ 5.200,00Confirmado
08/03/2026Reunião EstratégicaReunião- R$ 0,00Confirmado
05/03/2026Marketing DigitalMarketing- R$ 3.600,00Cancelado
02/03/2026Auditoria InternaCompliance- R$ 4.200,00Pendente
28/02/2026Desenvolvimento AppDesenvolvimento+ R$ 22.000,00Confirmado
25/02/2026Treinamento RHEducação- R$ 1.500,00Confirmado
1-5 de 15 resultados
Tabela de Equipe
NomeCargoDepartamentoInícioStatusAções
Ana CostaTech LeadEngenharia12/01/2022Ativo
Bruno SilvaUX DesignerDesign05/03/2023Ativo
Carla MendesProduct ManagerProduto18/07/2021Ativo
Diego RochaBackend DevEngenharia22/09/2023Ativo
Elena FerreiraContent StrategistMarketing10/11/2022Férias
Felipe AlmeidaDevOps EngineerEngenharia03/02/2024Ativo
Gabriela LimaUI DesignerDesign15/06/2023Ativo
Henrique SouzaFrontend DevEngenharia28/04/2022Desligado
Isabela MartinsOperations LeadOperações01/08/2021Ativo
Jorge CamposData AnalystProduto14/12/2023Ativo
Karen OliveiraGrowth MarketerMarketing20/05/2024Ativo
Lucas PereiraQA EngineerEngenharia07/10/2022Férias

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
Chat Widget
Widget de chat flutuante para suporte e assistência IA.
Assistente IA
Assistente14:32

Como posso ajudar?

Martins14:33
screenshot.png screenshot.png PDF relatorio.pdf Modais e Popups

Quais modelos de IA estão disponíveis?

Assistente14:33

Temos os seguintes modelos configurados:

Modelo principal: qwen3:8b — equilíbrio entre velocidade e qualidade, ideal para a maioria das tarefas de texto.

Fallback 1: phi4-mini — modelo compacto da Microsoft, bom para respostas rápidas e tarefas simples.

Fallback 2: llama3.2:1b — modelo ultraleve da Meta, ativado quando os outros estão sobrecarregados.

Embeddings: mxbai-embed-large — usado para busca semântica e indexação de documentos.

Visão: llama3.2-vision e llava — para análise de imagens e screenshots.

Código: deepseek-coder-v2:lite — especializado em geração e revisão de código.

O gateway faz fallback automático entre os modelos de texto. O timeout padrão é de 60 segundos por requisição.

Popover de Notificações
Painel flutuante para notificações e alertas recentes.
Notificações 3 novas
🚀
Deploy concluído
Gateway v3.0 publicado com sucesso — 2 min atrás
⚠️
Uso de memória alto
Ollama usando 78% da RAM — 15 min atrás
✔️
Backup finalizado
Banco de dados exportado — 1h atrás

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.
Sidebar
Painel
Transações
Orçamentos
Config
Page Header
Stat Card
Stat Card
Content Area
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

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.
Navy
Gold
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.