Design SystemHydroPumps Service

Tipografia, cores, superfícies, componentes e padrões para uma presença digital técnica, premium e consistente.

v3.2 — Março 2026

Paleta de Cores

Surface #EDF2F6 sustenta a marca com leveza técnica. Highlight #FAFCFE + Shadow #D5DEE7 criam profundidade discreta, sem competir com o azul da HydroPumps.

Surface & Neumorphic

#EDF2F6
Surface--surface
#FAFCFE
NM Highlight--nm-hi
#D5DEE7
NM Shadow--nm-lo
#18314B
Dark Surface--surface-dk

Blue — Brand Primary

#0F6CB8
Blue 600--blue-600
#1183D4
Blue 500 · Primary--blue-500
#2597E2
Blue 400 · Hover--blue-400
#6BB9EA
Blue 300--blue-300
#D8EAF5
Blue 200--blue-200

Text & Status

#172B3F
Text--text
#44576B
Text 2--text-2
#718294
Text 3--text-3
#059669
Success--ok
#D97706
Warning--warn
#DC2626
Error--err

Neumorfismo

Profundidade com controle. Relevos e cavidades calibrados para a superfície da marca — sutil, polido, nunca pesado.

Light Surface

Subtle--nm-subtle
Raised--nm-raised
Raised MD--nm-raised-md
Raised LG--nm-raised-lg
Pressed--nm-pressed
Pressed MD--nm-pressed-md

Dark Surface

DK Raised--nm-dk-raised
DK Pressed--nm-dk-pressed

Tipografia

Exo 2 nos títulos para conversar com o desenho técnico e angular da logo. IBM Plex Sans na interface para manter leitura, sobriedade e confiança.

Display52px / 800
Bombeamento
H144px / 800
Soluções Especializadas
H232px / 700
Compromisso com Excelência
H322px / 700
Bombas Centrífugas
H417px / 600
UHE Itaipu — 14.000 MW
Body16px / 400
Equipe de engenheiros e técnicos especializados com ampla experiência.
Small13px / 400
Atendimento em todo o território nacional
Overline11px / 600 / upper
Atendemos todo o Brasil
Mono13px / 500
--nm-raised: 3px 3px 8px

Iconografia

Ícone da marca (gota 3D) + Lucide CDN para interface. Curadoria industrial: apenas ícones relevantes para bombeamento, operação e infraestrutura.

Brand Icon

Icon
Gota HydroPumpsfavicon-512.png
Icon
Gota HydroPumpsDark surface

Industry

droplets
waves
gauge
factory
zap
wrench
settings
shield-check
hard-hat
truck
construction
cog

Navigation & Contact

menu
arrow-right
arrow-up-right
search
phone
mail
map-pin
clock
bar-chart-3
trending-up
award
star

Botões

Quatro variantes para cada contexto de uso: Primary para ação principal, Soft para secundário, Pressed para estado ativo e Ghost Dark para fundos escuros.

Primary

Soft (Raised)

Pressed (Toggle)

Ghost Dark + Icon Buttons

Icon Buttons

Cards

Sistema de cards com quatro tratamentos visuais distintos: superfície, dark, pattern blue-header e full blue. Cada um com função específica na hierarquia de conteúdo.

Classic (Raised, Dark, Accent)

Manutenção de Bombas Centrífugas

Preventiva e corretiva. Balanceamento dinâmico, selos mecânicos, alinhamento a laser.

Balanceamento Selos
Mais solicitado Detalhes

Presentes nas maiores usinas do Brasil

Itaipu, Belo Monte, Tucuruí, Jirau e mais de 10 UHEs.

14.000 MW 10+ UHEs
Segmento líder Saiba Mais

Assistência em Campo

Atendimento emergencial na planta industrial. Tempo de parada mínimo.

24h In Loco
Emergencial 24h Detalhes

Blue Header + Brand Line Patterns

Bombas Centrífugas

Projeto, manutenção e reparo de bombas centrífugas para alta vazão e pressão.

Alta Pressão Eficiência
Produto principal Detalhes

Assistência Técnica em Campo

Equipe especializada diretamente na sua planta industrial. Cobertura nacional.

24h Nacional
Cobertura nacional Detalhes

Full Blue Cards + Brand Line Patterns

Usinas Hidrelétricas

Presentes em Itaipu, Belo Monte, Tucuruí, Jirau e mais de 10 UHEs em todo o Brasil.

Referência 3.000+ Projetos
Segmento principal Saiba Mais

Siderurgia & Mineração

Soluções robustas para processos críticos de alta temperatura e corrosão.

Alta Temperatura Anti-Corrosão
Processos críticos Saiba Mais

Petróleo & Gás

Equipamentos certificados e em conformidade com padrões API internacionais.

Certificado API Alta Pressão
Padrões API Saiba Mais

Blue Accent Bar (Left)

Selos Mecânicos

Fornecimento e instalação de selos mecânicos nacionais e importados com garantia.

Nacional + ImportadoCatálogo

Rolamentos Industriais

Rolamentos de precisão para aplicações de alta rotação e carga pesada.

Alta rotaçãoCatálogo

Eixos & Acoplamentos

Fabricação e usinagem de eixos sob medida com balanceamento dinâmico.

Sob medidaCatálogo

Brand Patterns — Família Visual

01 — ServiçosAssistência Técnica em Campo
02 — SegmentoUsinas Hidrelétricas
03 — ProdutoBombas Centrífugas
04 — SegmentoPetróleo & Gás
05 — SegmentoSiderurgia & Mineração

Tags & Badges

Indicadores de contexto, status e serviço. Pill-shape com ícone Lucide inline — usadas em cards, listas e filtros de segmento.

Balanceamento Selos Mecânicos Alinhamento a Laser Peças Originais Disponível 24h Emergencial Em Manutenção

Números da Marca

Contadores para destaque de métricas institucionais: anos de mercado, projetos realizados, cobertura e disponibilidade. Dois tratamentos visuais: raised e inset.

Raised

08
Anos de experiência
3.000+
Projetos realizados
100%
Cobertura nacional
24h
Suporte emergencial

Inset (Dark)

08
Anos
3.000+
Projetos
99%
Satisfação
6
Segmentos

Formulários

Inputs com pressed inset para feedback tátil. Focus ring em azul primário. Estrutura para captação de contato e solicitações comerciais.

Dark (Preferido)

Light (Alternativo)

Segmentos de Atuação

Seis mercados industriais onde a HydroPumps opera com expertise técnica comprovada — de usinas hidrelétricas ao petróleo e gás.

Usinas HidrelétricasItaipu, Belo Monte, Tucuruí
Siderurgia & MineraçãoProcessos críticos
SaneamentoETA e ETE
Petróleo & GásPadrões API
Química & PetroquímicaFluidos corrosivos
Papel & CeluloseIndústria pesada

Seções Compostas

Blocos estruturais do site: Hero para impacto imediato, CTA para conversão e Section Header para introdução limpa de cada seção de conteúdo.

Hero Banner

Atendemos todo o Brasil

Soluções Especializadas em Bombeamento Industrial

Manutenção, reparo e fornecimento de peças para bombas centrífugas e verticais.

CTA Banner

Atendemos todo o Brasil

Equipe técnica com logística própria para qualquer região

Section Header

Serviços

Soluções Técnicas Especializadas

Equipe qualificada e infraestrutura completa para atender todo o Brasil.

Espaçamento

Escala base 4px com 11 incrementos. Garante consistência de ritmo visual em todos os componentes e layouts do sistema.

--s1
4px
--s2
8px
--s3
12px
--s4
16px
--s6
24px
--s8
32px
--s10
40px
--s12
48px
--s16
64px
--s20
80px
--s24
96px

Design Tokens

Variáveis CSS completas e prontas para uso. Compatíveis com Tailwind v4 @theme. O :root deste arquivo é a fonte de verdade do sistema visual.

/* HydroPumps — Polished Neumorphism Tokens */ /* Soft UI Evolution: subtle, highend, premium */ --surface: #EDF2F6; --nm-hi: #FAFCFE; /* highlight */ --nm-lo: #D5DEE7; /* shadow */ --nm-raised: 2px 2px 6px #D5DEE7, -2px -2px 6px #FAFCFE; --nm-pressed: inset 1px 1px 4px #D5DEE7, inset -1px -1px 4px #FAFCFE; --blue-500: #1183D4; --font-head: 'Exo 2', 'IBM Plex Sans', system-ui; --font: 'IBM Plex Sans', system-ui; --radius: 10-24px (soft corners); /* Logo: navy #103060 — NEVER on dark bg */ /* Icons: Lucide CDN */ /* Full tokens → view-source */