Design system · Smart Tax Contabilidade

Precisão financeira,
traduzida em interface.

Um sistema visual único — navy institucional, acabamento em bronze e tipografia confiante — para o portal do cliente e o site institucional da Smart Tax. Tom formal, direto, sem excessos: contabilidade de alto padrão para PJ e MEI.

13Componentes
2Produtos modelados
4Escalas de cor
2Famílias tipográficas
Smart Tax

Fundamentos

Marca & voz

A logomarca é a única fonte original do sistema — dela vieram a paleta, a tipografia de destaque e o motivo do rótulo com letras espaçadas. Tom de voz formal e consultivo, em segunda pessoa, sem emojis.

Lockup da marca

Sobre navy — não recolorir nem redesenhar

Abrir ↗

Símbolo isolado

Para aplicações pequenas / quadradas

Abrir ↗

Iconografia

Lucide (CDN) — traço fino, substituição sinalizada

Abrir ↗

Voz & tom

Formal, tranquilizadora, segunda pessoa

Abrir ↗

Fundamentos

Cores

Navy profundo (amostrado do fundo da logo) como superfície dominante e bronze/dourado como acento único — reservado para a ação de maior prioridade em cada tela. Neutros quentes carregam o modo claro do dashboard.

Escala navy

Marca primária — fundos e texto sobre claro

Abrir ↗

Escala gold / bronze

Acento — do mark de veio de madeira

Abrir ↗

Escala neutra

Cinzas quentes para superfícies e texto de UI

Abrir ↗

Status semântico

Sucesso, alerta, erro, informação

Abrir ↗

Fundamentos

Tipografia

Manrope (extrabold) para display e títulos — geométrica e confiante, ecoando o wordmark. Inter para corpo de texto, rótulos e dados de tabela. Um rótulo tracejado em maiúsculas cita diretamente o subtítulo "CONTABILIDADE" da logo.

Escala display / heading

Manrope — geométrica e ousada

Abrir ↗

Escala body / label

Inter — corpo de texto, rótulos, legendas

Abrir ↗

Rótulo tracejado

Motivo herdado do wordmark da logo

Abrir ↗

Fundamentos

Espaçamento & elevação

Grade de 4px, raios pequenos e consistentes (4–20px) e sombras suaves com tom navy — nada de brilho ou elevação exagerada fora de modais.

Escala de espaçamento

Grade base de 4px, de 4 a 128px

Abrir ↗

Raios & sombras

Arredondamento de cantos e elevação em uso

Abrir ↗

Biblioteca

Componentes

Conjunto padrão dimensionado para os dois produtos: botões, formulários, exibição de dados, navegação e feedback. Todos em React, prontos para uso em produção.

Buttons

Primário, gold, secundário, ghost, tamanhos, desabilitado

Abrir ↗

Forms

Input, Select, Checkbox, Radio, Switch

Abrir ↗

Tabs

Abas sublinhadas, indicador ativo em gold

Abrir ↗

Aplicado

Produtos

O sistema em ação nos dois produtos modelados: o portal do cliente e o site institucional. Clique para navegar dentro de cada protótipo.

Portal do cliente

Início, Notas & Documentos, Declarações, Configurações

Abrir ↗

Site institucional

Header, hero, serviços, planos, footer

Abrir ↗