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+
★
Animacoes
18
●
Breakpoints
5
Principios
Elegancia Refinada

Sombras suaves, transicoes fluidas e cantos arredondados.

Heranca Maritima

Navy e Gold evocam precisao, confianca e excelencia tecnica.

Acessivel Primeiro

WCAG AA+, indicadores de foco e navegacao 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
Semanticas — Success
600#059669
500#10B981
400#34D399
100#D1FAE5
BGsuccess-bg
Textsuccess-text
Semanticas — Danger
600#DC2626
500#EF4444
400#F87171
100#FEE2E2
BGdanger-bg
Textdanger-text
Semanticas — Warning
600#D97706
500#F59E0B
400#FBBF24
100#FEF3C7
BGwarning-bg
Textwarning-text
Semanticas — 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 Tipografica
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 — codigo e dados tecnicos
Aa Bb Cc 0123456789
const api = fetch('/api')

Botões

Variantes
Tamanhos
Estados
Grupo de Botões

Cards

Variantes
Card Padrao

Card basico com header, body e footer. Use para agrupar conteudo relacionado.

Card Accent

Borda gold na lateral esquerda para destaque de conteudo importante.

Card Brand

Borda navy no topo para itens de marca e secoes principais.

Stat Cards
■
Receita
R$ 42.580
▼
Despesas
R$ 18.230
▲
Lucro
R$ 24.350
★
Meta
87%
Card Interativo
JM
Joao Martins
joao@martinstech.net
Ativo

Card com hover state para listas clicaveis.

MT
MartinsTech Platform
10 servicos 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
Obrigatorio
Selects e Textarea
Date Picker
Toggle Switch

Tabelas

Tabela de Dados
DataDescricaoCategoriaValorStatusAcoes
01/04/2026Consultoria MartinsTechServicos+ R$ 8.500,00Confirmado
28/03/2026AWS InfrastructureCloud- R$ 1.240,00Confirmado
25/03/2026Material de escritorioOperacional- R$ 380,00Pendente
22/03/2026Treinamento EquipeEducacao- R$ 2.100,00Cancelado
20/03/2026Projeto Cliente ABCServicos+ R$ 15.000,00Confirmado
18/03/2026Hospedagem ServidorCloud- R$ 650,00Confirmado
15/03/2026Licenca SoftwareTecnologia- R$ 2.500,00Confirmado
12/03/2026Manutencao SistemaServicos- R$ 1.800,00Pendente
10/03/2026Consultoria FinanceiraConsultoria+ R$ 5.200,00Confirmado
08/03/2026Reuniao EstrategicaReuniao- 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 RHEducacao- R$ 1.500,00Confirmado
1-5 de 15 resultados
Tabela de Equipe
NomeCargoDepartamentoInicioStatusAcoes
Ana CostaTech LeadEngenharia12/01/2022Ativo
Bruno SilvaUX DesignerDesign05/03/2023Ativo
Carla MendesProduct ManagerProduto18/07/2021Ativo
Diego RochaBackend DevEngenharia22/09/2023Ativo
Elena FerreiraContent StrategistMarketing10/11/2022Ferias
Felipe AlmeidaDevOps EngineerEngenharia03/02/2024Ativo
Gabriela LimaUI DesignerDesign15/06/2023Ativo
Henrique SouzaFrontend DevEngenharia28/04/2022Desligado
Isabela MartinsOperations LeadOperacoes01/08/2021Ativo
Jorge CamposData AnalystProduto14/12/2023Ativo
Karen OliveiraGrowth MarketerMarketing20/05/2024Ativo
Lucas PereiraQA EngineerEngenharia07/10/2022Ferias

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 conteudo de texto.
Table Skeleton
Skeleton loaders para tabelas com multiplas linhas.
Form Skeleton
Skeleton loaders para formularios.
Text Skeleton Variations
Diferentes padrões de skeleton para texto.
Heading
Paragraph
List Items

Modais e Popups

Modal Dialog
Modais para confirmacoes, formularios e conteudo focado.
Dropdown Menu
Menus contextuais com opcoes e acoes.
Tooltips
Dicas contextuais ao passar o mouse sobre elementos.
Info Lucro Liquido
Chat Widget
Widget de chat flutuante para suporte e assistencia IA.
Assistente IA
Assistente14:32

Como posso ajudar?

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

Quais modelos de IA estao disponiveis?

Assistente14:33

Temos os seguintes modelos configurados:

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

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

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

Embeddings: mxbai-embed-large — usado para busca semantica e indexacao de documentos.

Visao: llama3.2-vision e llava — para analise de imagens e screenshots.

Codigo: deepseek-coder-v2:lite — especializado em geracao e revisao de codigo.

O gateway faz fallback automatico entre os modelos de texto. O timeout padrao e de 60 segundos por requisicao.

Popover de Notificacoes
Painel flutuante para notificacoes e alertas recentes.
Notificacoes 3 novas
🚀
Deploy concluido
Gateway v3.0 publicado com sucesso — 2 min atras
⚠️
Uso de memoria alto
Ollama usando 78% da RAM — 15 min atras
✔️
Backup finalizado
Banco de dados exportado — 1h atras

Feedback

Badges
Default Success Danger Warning Info Accent
Alertas
Operacao realizada com sucesso.
Erro ao processar a requisicao. Tente novamente.
Sua sessao expira em 5 minutos. (auto-dismiss 8s)
Nova versao disponivel. 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

Padrao com Sidebar
Todas as apps com multiplas secoes devem usar .app-layout com .app-sidebar e .app-content. Sidebar colapsa em mobile com overlay.
Sidebar
Painel
Transacoes
Orcamentos
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