Design Brief — Catálogo Importools

1. Paleta de Cores

Nome	Hex	Uso
Fundo principal	`#070B14`	Background geral
Card / Painel	`#121A2B`	Cards, sidebar, painéis
Texto principal	`#ECF1FB`	Todo texto de leitura
Texto secundário	`#9AA6BF`	Labels, descrições, meta
Bordas / Linhas	`#27324A`	Separadores, bordas
Amarelo destaque	`#FFDD00`	CTAs, botões, links hover
Azul escuro alt.	`#11192B`	Seções alternadas
Azul médio	`#506694`	Ícones, placeholders
Sucesso	`#10B981`	Confirmações
Erro	`#EF4444`	Validação, alertas
Alerta	`#F59E0B`	Avisos

2. Tipografia

Uso	Fonte	Peso	Tamanho
H1	Inter	700 (Bold)	36px
H2	Inter	700	28px
H3	Inter	600 (Semi)	20px
Body	Inter	400	15px
Small	Inter	400	13px
Botões	Inter	600	14px

Heading H1 — 36px Bold

Heading H2 — 28px Bold

Heading H3 — 20px Semi

Body text — 15px Regular. Texto de exemplo para visualização da tipografia no dark mode.

Small / Caption — 13px Regular

3. Espaçamento e Grid

Elemento	Valor
Sistema base	8px
Gap entre seções	64px desktop / 40px mobile
Padding de seção	48px desktop / 24px mobile
Padding de card	20px
Padding de botão	12px 24px (md) / 10px 16px (sm)
Gap entre cards	16px
Container max-width	1280px
Border-radius card	8px
Border-radius botão	6px

4. Componentes (ao vivo)

Botões

Card de Produto

Passe o mouse para ver o efeito hover:

[ Imagem 4:3 ]

Torno CNC X200

Máquinas CNC › Tornos

Qtd mín: 1 unidade

[ Imagem 4:3 ]

Injetora Plástico 380T

Injetoras › Plástico

Qtd mín: 1 unidade

Formulário (Inputs)

CNPJ

E-mail

Filtros Sidebar (estilo DigiKey)

─ Categorias ───────────────── ▸ Máquinas CNC (24) ▾ Injetoras (18) ├─ Plástico (12) ├─ Borracha (4) └─ Metal (2) ▸ Linhas Automáticas (8) ─ Marca ────────────────────── ☐ Haas ☐ DMG Mori ☐ Fanuc [Limpar filtros]

Breadcrumbs

Home › Máquinas CNC › Tornos › Torno CNC X200

Tabela de Especificações

Peso	2.400 kg
Cubagem	3.2 m³
Dimensões	2.1 × 1.4 × 1.8 m
Potência motor	15 kW
Voltagem	380V trifásico
Material	Aço carbono / Ferro fundido

5. Estrutura de Páginas

5.1 — Home / Catálogo Principal

┌──────────────────────────────────────────────────────┐ │ [IMPORTOOLS logo] [🔍 Buscar produtos...] [☰] │ ├──────────────────────────────────────────────────────┤ │ │ │ Catálogo de Máquinas e Equipamentos │ │ para Importação da China │ │ │ │ [🔍 Buscar por produto, categoria... ] │ │ │ ├──────────────────────────────────────────────────────┤ │ │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ ⚙️ │ │ 🔧 │ │ 🏭 │ │ │ │ Máquinas │ │ Ferramen │ │ Insumos │ │ │ │ CNC (24) │ │ tas (32) │ │ (18) │ │ │ └──────────┘ └──────────┘ └──────────┘ │ │ │ ├──────────────────────────────────────────────────────┤ │ Como Funciona │ │ 1. Escolha → 2. Simule → 3. Importe │ ├──────────────────────────────────────────────────────┤ │ [Footer] │ └──────────────────────────────────────────────────────┘

5.2 — Página de Categoria (estilo DigiKey)

┌──────────────────────────────────────────────────────┐ │ Home › Máquinas CNC › Tornos │ ├────────────┬─────────────────────────────────────────┤ │ │ Tornos CNC (24 produtos) │ │ Filtros │ Ordenar: [Relevância ▾] [≡] [⊞] │ │ ├─────────────────────────────────────────┤ │ ▾ Subcateg │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ ├ Horiz. │ │ Prod 1 │ │ Prod 2 │ │ Prod 3 │ │ │ └ Vert. │ └────────┘ └────────┘ └────────┘ │ │ │ ┌────────┐ ┌────────┐ ┌────────┐ │ │ ▸ Marca │ │ Prod 4 │ │ Prod 5 │ │ Prod 6 │ │ │ ▸ Material │ └────────┘ └────────┘ └────────┘ │ │ │ │ │ [Limpar] │ ‹ 1 2 3 4 ... 8 › │ └────────────┴─────────────────────────────────────────┘

5.3 — Ficha do Produto

┌──────────────────────────────────────────────────────┐ │ Home › Máquinas CNC › Tornos › Torno CNC X200 │ ├──────────────────────┬───────────────────────────────┤ │ │ Torno CNC X200 │ │ ┌──────────────┐ │ Máquinas CNC › Tornos │ │ │ │ │ │ │ │ [Imagem] │ │ Qtd mínima: 1 unidade │ │ │ │ │ │ │ └──────────────┘ │ ┌───────────────────────┐ │ │ [●] [○] [○] [○] │ │ ⚡ SIMULAR IMPORTAÇÃO │ │ │ │ └───────────────────────┘ │ ├──────────────────────┴───────────────────────────────┤ │ [Especificações] [Dados Frete] [Informações] │ ├──────────────────────────────────────────────────────┤ │ Peso .............. 2.400 kg │ │ Cubagem ........... 3.2 m³ │ │ Dimensões ......... 2.1 × 1.4 × 1.8 m │ │ Potência .......... 15 kW │ └──────────────────────────────────────────────────────┘

5.4 — Simulação (resultado via e-mail)

┌──────────────────────────────────────────────────────┐ │ [IMPORTOOLS logo] │ ├──────────────────────────────────────────────────────┤ │ Simulação de Importação │ │ Torno CNC X200 · Metalúrgica Silva Ltda · SP │ ├──────────────────────────────────────────────────────┤ │ Valor FOB ......................... US$ 45.000,00 │ │ Frete internacional .............. US$ 3.200,00 │ │ Cubagem .......................... US$ 800,00 │ │ Transporte porto ................. R$ 2.100,00 │ │ Armazenagem ...................... R$ 1.800,00 │ │ Desembaraço ...................... R$ 3.500,00 │ │ II (14%) ......................... R$ 35.280,00 │ │ IPI (10%) ........................ R$ 27.720,00 │ │ PIS/COFINS ....................... R$ 25.704,00 │ │ ICMS SP (18%) .................... R$ 63.504,00 │ │ ──────────────────────────────────────────────── │ │ Câmbio: 1 USD = R$ 5,60 (02/03/2026 14:30) │ │ ┌──────────────────────────────────────────────┐ │ │ │ CUSTO TOTAL: R$ 412.608,00 │ │ │ │ Retirada: Porto de Santos — Santos/SP │ │ │ └──────────────────────────────────────────────┘ │ │ │ │ [💬 Falar com a Importools] [📄 Salvar PDF] │ └──────────────────────────────────────────────────────┘

6. Animações e Interações

Elemento	Animação	Duração
Cards (scroll)	Fade-in + slide-up	0.4s, stagger 0.05s
Hover cards	translateY(-2px) + sombra	0.2s ease
Filtros expandir	Altura + fade children	0.25s ease
Modal simulação	Fade-in + scale(0.95→1)	0.3s
Tabs (ficha)	Fade conteúdo	0.2s
Botão CTA	Hover brightness + sombra	0.15s
Autocomplete busca	Dropdown slide-down	0.2s
Loading	Skeleton shimmer	loop 1.5s
Total simulação	Glow amarelo	0.5s (uma vez)

    Princípio: Animações sutis e funcionais. Nunca bloqueiam a interação. Respeitam prefers-reduced-motion.
  

7. Breakpoints Responsivos

Nome	Range	Grid	Container
Mobile	<768px	1 coluna	100% − 32px
Tablet	768−1023px	2 colunas	100% − 48px
Desktop	1024−1439px	3 colunas	1200px
Wide	≥1440px	3-4 colunas	1280px

    Sidebar filtros: 260px fixa em desktop, drawer (slide-in) em mobile/tablet

    Ficha produto: 2 colunas em desktop, 1 coluna em mobile

    Botão "Simular": fixo no bottom em mobile (sticky)

8. Reinaldo Virtual — UX/UI

Componente global

Chat flutuante fixo no canto inferior direito em todas as páginas públicas.
Estado fechado (FAB) e aberto (janela de conversa).
Label padrão: Reinaldo Virtual.

Fluxo obrigatório antes da primeira resposta

Pré-cadastro: CNPJ + e-mail + WhatsApp.
Consentimento obrigatório (LGPD) antes do envio do formulário.
Sem esse gate concluído, o agente não responde perguntas.
Mensagem inicial orientativa para preenchimento.
Texto de consentimento: “Ao continuar, você autoriza o uso de CNPJ, e-mail e WhatsApp para atendimento comercial, geração de simulação e contato da Importools, conforme a Política de Privacidade. Seus dados poderão ser armazenados por até 6 meses para fins de atendimento e auditoria, com possibilidade de solicitação de exclusão.”

Janela de chat

Header com nome, avatar e status online.
Corpo com histórico + sugestões rápidas.
Ações rápidas: “Indicar produto”, “Dúvida de importação”, “Ir para simulação oficial”.

Guardrails visuais e de conteúdo

Selo fixo: “Respostas baseadas no catálogo e base interna Importools”.
Quando faltar base interna: resposta de limitação + CTA para contato humano.
Quando o usuário pedir cálculo: encaminhar para “Gerar Simulação Oficial”.
Aviso jurídico no fluxo: “Valores estimativos sujeitos à revisão da equipe de especialistas da Importools”.

Especificação visual

Elemento	Especificação
CTA principal	`#FFDD00` com texto `#111111`
Balão do agente	Fundo `#121A2B`
Balão do usuário	Fundo `#11192B`
Borda widget	`1px solid #27324A`, hover com glow amarelo
Tamanho desktop	380 × 560 px
Mobile	Fullscreen sheet com safe area

9. Fontes Homologadas do Chat

Catálogo publicado (produtos e especificações técnicas)
Tabelas fiscais e logísticas homologadas
FAQ oficial publicado no admin
Políticas internas aprovadas (LGPD, escopo e disclaimers)

    Regra obrigatória: o Reinaldo não pode usar fontes externas não homologadas para responder usuários.
  

🎨 Design Brief — Catálogo Importools

📑 Índice