Fundamentos — 01

Cores

Sistema de cores da EuMilitar: escala primitiva, tokens semânticos e paletas das forças militares. Clique em qualquer swatch para copiar o valor hex.

01.1

Escala Primitiva

As escalas brutas de cor. Use os tokens semânticos nos componentes — estas escalas são a referência da fonte da verdade.

Neutros — --n-*

Copiar

50

#f5f0e8

--n-50

Copiar

100

#ede4cf

--n-100

Copiar

200

#e3d8bd

--n-200

Copiar

300

#c8bda5

--n-300

Copiar

400

#a89c8a

--n-400

Copiar

500

#7d7164

--n-500

Copiar

600

#5a5048

--n-600

Copiar

700

#433c34

--n-700

Copiar

800

#2e2720

--n-800

Copiar

900

#1a1612

--n-900

Brand / Verde Militar — --b-*

Copiar

50

#eaf2eb

--b-50

Copiar

100

#d3e8d6

--b-100

Copiar

200

#b3d3ba

--b-200

Copiar

300

#85b890

--b-300

Copiar

400

#5c9968

--b-400

Copiar

500

#3b7a47

--b-500

Copiar

600

#2d6338

--b-600

Copiar

700

#1f4d2a

--b-700

Copiar

800

#122318

--b-800

Copiar

900

#0a1a0e

--b-900

Urgência / Fire — --fire-*

Copiar

Base

#C4521A

--fire

Copiar

Light

#E8AC80

--fire-light

Copiar

Pale

#F7E8DC

--fire-pale

01.2

Metáfora de Material

Tokens inspirados em material impresso: tinta, lápis, papel, bloco e régua. Usados para hierarquia de texto e superfícies.

Material Impresso

--ink

Tinta principal — texto e ícones

#1a1612

--ink-soft

Tinta suavizada

#3a322a

--pencil

Lápis — secundário

#7d7164

--pencil-soft

Lápis suavizado — terciário

#a89c8a

--paper

Papel — fundo de cards

#ede4cf

--paper-deep

Papel mais escuro — separadores

#e3d8bd

--block

Bloco — fundo de seções

#d4c8a8

--rule

Régua — linhas divisórias

#c8bda5
01.3

Tokens Semânticos

Tokens de uso — sempre prefira estes nos componentes em vez dos valores primitivos.

Superfícies

--surface-base

Fundo principal da aplicação

#ede4cf

--surface-brand

Fundo em verde da marca

#1f4d2a

--surface-dark

Fundo escuro / dark mode base

#1a1612

--surface-raised

Cards, modais e elementos elevados

#ffffff

Texto

--text-primary

Texto principal

#1a1612

--text-secondary

Texto secundário e labels

#5a5048

--text-placeholder

Placeholders e texto desabilitado

#a89c8a

--text-brand

Texto da marca / links ativos

#1f4d2a

--text-inverse

Texto sobre fundos escuros

#f5f0e8

Bordas

--border-brand

Borda da marca

#1f4d2a

--border-default

Borda padrão

#c8bda5

--border-strong

Borda de alto contraste

#433c34
01.4

Urgência & Fire

Âmbar queimado — complementar ao verde, máximo contraste visual. Reserve para escassez, prazo e CTA prioritário. Exemplos de uso em Componentes → Badge e Button.

Tokens de Urgência

--fire

Base — fundo de badge urgente, botão CTA máximo

#C4521A

--fire-light

Light — bordas, ícones e texto sobre claro

#E8AC80

--fire-pale

Pale — fundo sutil de banners de alerta

#F7E8DC

--urgent

Alias semântico → var(--fire)

#C4521A

--urgent-light

Alias semântico → var(--fire-light)

#E8AC80

--urgent-pale

Alias semântico → var(--fire-pale)

#F7E8DC

--shadow-urgent

Shadow offset com cor de urgência

4px 4px 0 #C4521A
01.5

Forças Militares

Paletas específicas para cada força. Cada grupo tem três tons: base (saturado, para fundo de badge), light (para bordas e ícones) e pale (para fundos sutis).

EXExército Brasileiro
Copiar

Base

#1f4d2a

--ex

Copiar

Light

#c3d4bd

--ex-light

Copiar

Pale

#eaf2eb

--ex-pale

MBMarinha do Brasil
Copiar

Base

#132645

--mb

Copiar

Light

#b8c8dc

--mb-light

Copiar

Pale

#e5edf5

--mb-pale

FABForça Aérea Brasileira
Copiar

Base

#1a3d5c

--fab

Copiar

Light

#bdd0e3

--fab-light

Copiar

Pale

#e8f0f7

--fab-pale

PMPolícia Militar
Copiar

Base

#1e1e58

--pm

Copiar

Light

#b4b4e0

--pm-light

Copiar

Pale

#e8e8f5

--pm-pale

BMCorpo de Bombeiros
Copiar

Base

#5c1212

--bm

Copiar

Light

#e0b0b0

--bm-light

Copiar

Pale

#f5e5e5

--bm-pale