Fundamentos

Cor

A paleta oficial, suas funções e os tokens que a tornam consistente.

Agenu Mineral

Neutros estruturam a experiência. O verde assina, direciona e dá ênfase.

Agenu Black

#111412--agenu-neutral-950rgb(17, 20, 18)hsl(140 8% 7%)

Agenu Green

Cor institucional para identidade, ação e seleção.

#2F705B--agenu-green-500rgb(47, 112, 91)hsl(161 41% 31%)

Agenu Soft Green

#BFD8CE--agenu-green-200rgb(191, 216, 206)hsl(156 24% 80%)

Agenu Mist

#E9EEEB--agenu-mistrgb(233, 238, 235)hsl(144 13% 92%)

Agenu Off White

#F7F8F6--agenu-neutral-50rgb(247, 248, 246)hsl(90 12% 97%)

Agenu White

#FFFFFF--agenu-neutral-0rgb(255, 255, 255)hsl(0 0% 100%)

Agenu Gray

#6C746F--agenu-neutral-500rgb(108, 116, 111)hsl(143 4% 44%)

Agenu Green

Green 500 é a referência cromática da marca. Os demais níveis expandem o uso sem criar novos verdes fora do sistema.

50#EEF4F2--agenu-green-50

100#DEE8E5--agenu-green-100

200#BFD8CE--agenu-green-200

300#9BBAB0--agenu-green-300

400#699889--agenu-green-400

500Agenu Green#2F705B--agenu-green-500

600#2B6452--agenu-green-600

700#265746--agenu-green-700

800#21493B--agenu-green-800

900#1B392F--agenu-green-900

950#152922--agenu-green-950

Neutros

A escala neutra sustenta estrutura, conteúdo e superfícies. Neutral 950 é Agenu Black; Neutral 50 é Agenu Off White; Neutral 500 é Agenu Gray.

0#FFFFFF--agenu-neutral-0

50Agenu Off White#F7F8F6--agenu-neutral-50

100#EFF1EF--agenu-neutral-100

200#DDE2DF--agenu-neutral-200

300#C5CBC7--agenu-neutral-300

400#9CA59F--agenu-neutral-400

500Agenu Gray#6C746F--agenu-neutral-500

600#555D58--agenu-neutral-600

700#3E4541--agenu-neutral-700

800#292E2B--agenu-neutral-800

900#1B1F1D--agenu-neutral-900

950Agenu Black#111412--agenu-neutral-950

Temas

O primary muda entre temas intencionalmente: Green 500 no claro e Green 400 no escuro preservam contraste e uma presença mineral equilibrada.

Light

Background · SurfaceTítulo de referência

Texto com hierarquia e leitura confortável.

background: #F7F8F6
surface: #FFFFFF
surfaceSecondary: #EFF1EF
surfaceElevated: #FFFFFF
foreground: #111412
foregroundSecondary: #555D58
foregroundMuted: #6C746F
border: #DDE2DF
borderStrong: #C5CBC7
primary: #2F705B
primaryHover: #2B6452
primaryPressed: #265746
primaryForeground: #FFFFFF
primarySubtle: #EEF4F2
primarySoft: #BFD8CE

Dark

Background · SurfaceTítulo de referência

Texto com hierarquia e leitura confortável.

background: #0E100F
surface: #151816
surfaceSecondary: #1B1F1D
surfaceElevated: #222724
foreground: #F7F8F6
foregroundSecondary: #BAC1BD
foregroundMuted: #858E89
border: #2B302D
borderStrong: #3E4541
primary: #699889
primaryHover: #7DA99B
primaryPressed: #9BBAB0
primaryForeground: #111412
primarySubtle: #152922
primarySoft: #21493B

Estados semânticos

Estados funcionais comunicam significado de interface. Agenu Green representa marca, ação, seleção e ênfase — não deve substituir Success.

Success

Operação concluída e estado positivo.

#27845D--successrgb(39, 132, 93)hsl(155 54% 34%)

Warning

#B7791F--warningrgb(183, 121, 31)hsl(36 71% 42%)

Danger

#C94A4A--dangerrgb(201, 74, 74)hsl(0 54% 54%)

Info

#3F6EA8--inforgb(63, 110, 168)hsl(213 45% 45%)

Acessibilidade cromática

As relações abaixo são calculadas com luminância relativa WCAG. Uma combinação visualmente atraente não é automaticamente adequada para qualquer texto.

Agenu Black sobre Off White#111412 sobre #F7F8F6

17.40:1

AA normal: Sim
AA large: Sim
AAA: Sim

Agenu Black sobre White#111412 sobre #FFFFFF

18.54:1

AA normal: Sim
AA large: Sim
AAA: Sim

White sobre Agenu Green#FFFFFF sobre #2F705B

5.85:1

AA normal: Sim
AA large: Sim
AAA: Não

Green 400 sobre Agenu Black#699889 sobre #111412

5.70:1

AA normal: Sim
AA large: Sim
AAA: Não

Off White sobre Deep Dark#F7F8F6 sobre #0E100F

17.93:1

AA normal: Sim
AA large: Sim
AAA: Sim

Neutral 500 sobre Off White#6C746F sobre #F7F8F6

4.52:1

AA normal: Sim
AA large: Sim
AAA: Não

Agenu Black sobre Agenu Green#111412 sobre #2F705B

3.17:1

AA normal: Não
AA large: Sim
AAA: Não

Não comunique erro, sucesso, alerta, seleção ou outro estado somente por cor. Associe texto, ícone, label ou outra indicação perceptível quando necessário.