Design SystemHydroPumps Service

Guia visual completo de marca, neumorfismo refinado, tipografia, componentes e padrões para o ecossistema digital.

v2.1 — Março 2026

Paleta de Cores

Surface #E8ECF0 é a base neumórfica. Highlight #F4F7FA + Shadow #D1D6DE criam a profundidade sutil.

Surface & Neumorphic

#E8ECF0
Surface--surface
#F4F7FA
NM Highlight--nm-hi
#D1D6DE
NM Shadow--nm-lo
#1B2D42
Dark Surface--surface-dk

Blue — Brand Primary

#0D6EBD
Blue 600--blue-600
#1183D4
Blue 500 · Primary--blue-500
#2E9CE8
Blue 400 · Hover--blue-400
#5BB5EF
Blue 300--blue-300
#D6E9F5
Blue 200--blue-200

Text & Status

#1A2736
Text--text
#4A5568
Text 2--text-2
#7A8694
Text 3--text-3
#059669
Success--ok
#D97706
Warning--warn
#DC2626
Error--err

Neumorfismo

Polished & subtle. Sombras curtas e suaves. Nunca pesado — sempre highend.

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

IBM Plex Sans. Pesos 300–800. Mono companion para código e tokens.

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 — Lucide

SVG stroke-based. Subtle em repouso → pressed no hover.

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

Primary (cor), Soft (raised), Pressed (inset), Ghost Dark. Interação: raised→pressed.

Primary

Soft (Raised)

Pressed (Toggle)

Ghost Dark + Icon Buttons

Icon Buttons

Cards

Raised, Dark, Inset, Accent. Todos com profundidade sutil e polida.

Manutenção de Bombas Centrífugas

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

Balanceamento Selos
Mais solicitado Detalhes
Referência Nacional

Presentes nas maiores usinas do Brasil

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

Assistência em Campo

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

24h In Loco

Tags & Badges

Raised, Pressed, Status. Pill-shaped com Lucide inline.

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

Contadores

Raised e Inset. Ambos sutis e polidos.

Raised

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

Inset

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

Formulários

Inputs pressed. Focus ring azul sutil. Wrapper raised.

Segmentos de Atuação

Ícone pressed→raised no hover. Elevação sutil e polida.

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

Hero, CTA, Section Header. Dark surface pra contraste — logo sempre no light.

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 4px, 11 steps.

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

Design Tokens

CSS vars prontos pra Tailwind v4 @theme. Copie o :root deste arquivo.

/* HydroPumps — Polished Neumorphism Tokens */ /* Soft UI Evolution: subtle, highend, premium */ --surface: #E8ECF0; --nm-hi: #F4F7FA; /* highlight */ --nm-lo: #D1D6DE; /* shadow */ --nm-raised: 3px 3px 8px #D1D6DE, -3px -3px 8px #F4F7FA; --nm-pressed: inset 2px 2px 6px #D1D6DE, inset -2px -2px 6px #F4F7FA; --blue-500: #1183D4; --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 */