ARPO

Guia de Estilo ARPO

Sistema visual com escala tipográfica, paleta de cores extraída do símbolo ARPO, espaçamentos em múltiplos de 8px e componentes reutilizáveis.

Cores da marca

Primária Navy
HEX #0F1E3A • RGB 15,30,58 • HSL 219,59%,14%
L+10% • HEX #203357 • RGB 32,51,87 • HSL 219,46%,23%
L+20% • HEX #33486F • RGB 51,72,111 • HSL 220,38%,32%
D−10% • HEX #0B1730 • RGB 11,23,48 • HSL 219,62%,12%
D−20% • HEX #071125 • RGB 7,17,37 • HSL 219,67%,9%
Neutro 50 • HEX #F8FAFC
Secundária Laranja
HEX #F26A2E • RGB 242,106,46 • HSL 20,88%,56%
L+10% • HEX #F5844F
L+20% • HEX #F79E70
D−10% • HEX #D45526
D−20% • HEX #B6431F
Neutro 900 • HEX #121826
Acento Magenta
HEX #D21C5A • RGB 210,28,90 • HSL 338,77%,47%
L+10% • HEX #E14979
L+20% • HEX #EA7598
D−10% • HEX #B1164A
D−20% • HEX #8F113C
Neutro 700 • HEX #334155

Escala Tipográfica

Display 2
Display 1

H1

H2

H3

H4

Body grande

Body padrão

Small

Escala de Espaçamento (8px)

1 • 8px (.5rem)
2 • 16px (1rem)
3 • 24px (1.5rem)
4 • 32px (2rem)
5 • 40px (2.5rem)
6 • 48px (3rem)
7 • 64px (4rem)
8 • 80px (5rem)

Botões e Estados

Primário Secundário Acento Outline Desabilitado

Componentes

Card

Card com ícone e título, borda e hover.

Card

Uso para serviços, soluções e destaques.

Card

Compatível com a paleta e variações de fundo.