Pão de Açúcar // Design System [Landing Pages] v.01/2025

Cores

As cores estão separadas em quatro categorias: marca, categoria, neutros e semânticos. 800 é o valor principal. Em cada componente de cor, o valor de contraste WCAG está categorizado para aplicação de texto (branco e preto). Para copiar o valor cromático, selecione abaixo o formato de cor e em seguida clique no cartão desejado.

marca

--primário

--brand-primary-900

900

#338842

hsl(131, 45%, 37%)

AA AA AAA

--brand-primary-800

--brand-primary-800
(principal)

#409A3C

hsl(117, 44%, 42%)

AA AA AAA

--brand-primary-700

700

#53A450

hsl(118, 34%, 48%)

AA AA AAA

--brand-primary-600

600

#66AE63

hsl(118, 32%, 54%)

AAA AAA

--brand-primary-500

500

#79B877

hsl(118, 31%, 65%)

AAA AAA

--brand-primary-400

400

#8CC28A

hsl(118, 31%, 65%)

AAA AAA

--brand-primary-300

300

#A0CD9E

hsl(117, 32%, 71%)

AAA AAA

--brand-primary-200

200

#B3D7B1

hsl(117, 32%, 77%)

AAA AAA

--brand-primary-100

100

#C6E1C5

hsl(118, 32%, 83%)

AAA AAA

--secundário

--brand-secondary-900

900

#005A3C

hsl(160, 100%, 18%)

AAA AAA

--brand-secondary-800

--brand-secondary-800
(principal)

#00652E

hsl(147, 100%, 20%)

AAA AAA

--brand-secondary-700

700

#1A7443

hsl(147, 63%, 28%)

AA AAA AA

--brand-secondary-600

600

#338458

hsl(147, 44%, 36%)

AA AAA AA AAA

--brand-secondary-500

500

#4D936D

hsl(147, 31%, 44%)

AA AA AAA

--brand-secondary-400

400

#66A382

hsl(148, 25%, 52%)

AAA AAA

--brand-secondary-300

300

#80B297

hsl(148, 25%, 60%)

AAA AAA

--brand-secondary-200

200

#99C1AB

hsl(147, 24%, 68%)

AAA AAA

--brand-secondary-100

100

#B3D1C1

hsl(148, 25%, 76%)

AAA AAA

--destaque

--brand-accent-900

900

#71A42C

hsl(86, 58%, 41%)

AAA AAA

--brand-accent-800

--brand-accent-800
(principal)

#8DC63F

hsl(85, 54%, 51%)

AAA AAA

--brand-accent-700

700

#98CC52

hsl(86, 54%, 56%)

AAA AAA

--brand-accent-600

600

#A4D165

hsl(85, 54%, 61%)

AAA AAA

--brand-accent-500

500

#AFD779

hsl(86, 54%, 66%)

AAA AAA

--brand-accent-400

400

#BBDD8C

hsl(85, 54%, 71%)

AAA AAA

--brand-accent-300

300

#C6E39F

hsl(86, 55%, 76%)

AAA AAA

--brand-accent-200

200

#D1E8B2

hsl(86, 54%, 80%)

AAA AAA

--brand-accent-100

100

#DDEEC6

hsl(86, 54%, 85%)

AAA AAA

--prioritário

--brand-priority-900

900

#00740A

hsl(125, 100%, 23%)

AA AAA AA

--brand-priority-800

--brand-priority-800
(principal)

#0A9D17

hsl(125, 88%, 33%)

AA AA AAA

--brand-priority-700

700

#1FC62E

hsl(125, 73%, 45%)

AAA AAA

--brand-priority-600

600

#3BEF4B

hsl(125, 85%, 58%)

AAA AAA

--brand-priority-500

500

#62FF70

hsl(125, 100%, 69%)

AAA AAA

--brand-priority-400

400

#84FF8F

hsl(125, 100%, 76%)

AAA AAA

--brand-priority-300

300

#A7FFAF

hsl(125, 100%, 83%)

AAA AAA

--brand-priority-200

200

#C9FFCE

hsl(126, 100%, 89%)

AAA AAA

--brand-priority-100

100

#ECFFED

hsl(123, 100%, 96%)

AAA AAA

--complementar 1

--brand-complementary1-800

Brand / Complementary 1
800

#AACD73

hsl(83, 47%, 63%)

AAA AAA

--brand-complementary1-700

700

#B3D281

hsl(83, 47%, 66%)

AAA AAA

--brand-complementary1-600

600

#BBD78F

hsl(83, 47%, 70%)

AAA AAA

--complementar 2

--brand-complementary2-800

Brand / Complementary 2
800

#64823C

hsl(86, 37%, 37%)

AA AA AAA

--brand-complementary2-700

700

#748F50

hsl(86, 28%, 44%)

AA AA AAA

--brand-complementary2-600

600

#839B63

hsl(86, 22%, 50%)

AA AA AAA

--complementar 3

--brand-complementary3-800

Brand / Complementary 3
800

#3C7341

hsl(125, 31%, 34%)

AA AAA AA

--brand-complementary3-700

700

#508154

hsl(125, 23%, 41%)

AA AA AA AAA

--brand-complementary3-600

600

#638F67

hsl(125, 18%, 47%)

AA AA AAA

--PA Mais

--color-brand-pamais-800

Brand
PA Mais 800

#00BEA0

hsl(171, 100%, 37%)

AAA AAA

--color-brand-pamais-700

700

#1AC5AA

hsl(171, 77%, 44%)

AAA AAA

--color-brand-pamais-600

600

#33CBB3

hsl(171, 60%, 50%)

AAA AAA

--oferta

--color-brand-oferta-800

Brand
Oferta 800

#FF5014

hsl(15, 100%, 54%)

AA AA AAA

--color-brand-oferta-700

700

#FF622C

hsl(15, 100%, 59%)

AAA AAA

--color-brand-oferta-600

600

#FF7343

hsl(15, 100%, 63%)

AAA AAA

--selos

--color-brand-selos-800

Brand
Selos 800

#F0781E

hsl(26, 88%, 53%)

AAA AAA

--color-brand-selos-700

700

#F28635

hsl(26, 88%, 58%)

AAA AAA

--color-brand-selos-600

600

#F3934B

hsl(26, 87%, 62%)

AAA AAA

--adega

--color-brand-adega-800

Brand
Adega 800

#411F4E

hsl(283, 43%, 21%)

AAA AAA

--color-brand-adega-700

700

#57256B

hsl(283, 49%, 28%)

AAA AAA

--color-brand-adega-600

600

#7C4492

hsl(283, 36%, 42%)

AAA AAA

categoria

--FLV

--color-catg-flv-800

Catg / FLV
800

#488B41

hsl(114, 36%, 40%)

AA AA AAA

--color-catg-flv-700

700

#6EBE65

hsl(114, 41%, 57%)

AAA AAA

--color-catg-flv-600

600

#9BF192

hsl(114, 77%, 76%)

AAA AAA

--queijo

--color-catg-queijo-800

Catg / Queijo
800

#F9B347

hsl(36, 94%, 63%)

AAA AAA

--color-catg-queijo-700

700

#FFD79B

hsl(36, 100%, 80%)

AAA AAA

--color-catg-queijo-600

600

#9BF192

hsl(37, 96%, 90%)

AAA AAA

--peixes

--color-catg-peixes-800

Catg / Peixes
800

#53BADB

hsl(195, 65%, 59%)

AAA AAA

--color-catg-peixes-700

700

#72DCFF

hsl(195, 100%, 72%)

AAA AAA

--color-catg-peixes-600

600

#B1ECFF

hsl(195, 100%, 85%)

AAA AAA

--padaria

--color-catg-padaria-800

Catg / Padaria
800

#A75F27

hsl(26, 62%, 40%)

AA AAA AAA

--color-catg-padaria-700

700

#DA8747

hsl(26, 67%, 57%)

AAA AAA

--color-catg-padaria-600

600

#FFAB6B

hsl(26, 100%, 71%)

AAA AAA

--cafeteria

--color-catg-cafeteria-800

Catg / Cafeteria
800

#47191A

hsl(359, 48%, 19%)

AAA AAA

--color-catg-cafeteria-700

700

#7A3739

hsl(26, 67%, 57%)

AAA AAA

--color-catg-cafeteria-600

600

#AD6062

hsl(26, 100%, 71%)

AA AAA AA AAA

--carnes

--color-catg-carnes-800

Catg / Carnes
800

#7B381B

hsl(18, 64%, 29%)

AAA AAA

--color-catg-carnes-700

700

#9D4F2D

hsl(26, 67%, 57%)

AA AAA AA

--color-catg-carnes-600

600

#BF6A45

hsl(26, 100%, 71%)

AAA AAA AAA

--rotissere

--color-catg-rotissere-800

Catg / Rotissere
800

#E83A54

hsl(351, 79%, 57%)

AA AA AAA

--color-catg-rotissere-700

700

#FF4D68

hsl(351, 100%, 65%)

AA AA AAA

--color-catg-rotissere-600

600

#FF758A

hsl(351, 100%, 73%)

AAA AAA

--vinho

--color-catg-vinho-800

Catg / vinho
800

#5C1E3B

hsl(332, 51%, 24%)

AAA AAA

--color-catg-vinho-700

700

#7E3155

hsl(332, 44%, 34%)

AAA AAA

--color-catg-vinho-600

600

#A04972

hsl(332, 37%, 46%)

AA AAA AA

--sushi

--color-catg-sushi-800

Catg / Sushi
800

#E65B2D

hsl(15, 79%, 54%)

AA AA AAA

--color-catg-sushi-700

700

#FF7040

hsl(15, 100%, 63%)

AAA AAA

--color-catg-sushi-600

600

#FF906B

hsl(15, 100%, 71%)

AAA AAA

neutros

--dark

--color-neutral-dark-800

Dark 800

#000000

hsl(0, 0%, 0%)

AAA AAA

--color-neutral-dark-700

Dark 700

#192325

hsl(190, 19%, 12%)

AAA AAA

--color-neutral-dark-600

Dark 600

#4D4D52

hsl(240, 3%, 31%)

AAA AAA

--color-neutral-dark-500

Dark 500

#79797E

hsl(240, 2%, 48%)

AA AA AAA

--color-neutral-dark-400

Dark 400

#9B9BA0

hsl(240, 3%, 62%)

AAA AAA

--light

--color-neutral-light-800

Light 800

#FFFFFF

hsl(0, 0%, 100%)

AAA AAA

--color-neutral-light-700

Light 700

#C3C3C8

hsl(240, 4%, 77%)

AAA AAA

--color-neutral-light-600

Light 600

#E2E2E5

hsl(240, 5%, 89%)

AAA AAA

--color-neutral-light-500

Light 500

#F2F2F5

hsl(240, 13%, 95%)

AAA AAA

--color-neutral-light-400

Light 400

#F7FAFC

hsl(204, 45%, 98%)

AAA AAA

semânticos

--positivo

--color-semantics-positive-900

900

#00652E

hsl(147, 100%, 20%)

AAA AAA

--color-semantics-positive-800

Semantics Positive 800

#409A3C

hsl(117, 44%, 42%)

AA AA AAA

--color-semantics-positive-700

700

#8CC28A

hsl(118, 31%, 65%)

AAA AAA

--negativo

--color-semantics-negative-900

900

#B81021

hsl(354, 84%, 39%)

AA AAA AA

--color-semantics-negative-800

Semantics Negative 800

#F0283C

hsl(354, 87%, 55%)

AA* AA AAA

--color-semantics-negative-700

700

#F67E8A

hsl(354, 87%, 73%)

AAA AAA

--alerta

--color-semantics-alert-900

900

#E69D00

hsl(41, 100%, 45%)

AAA AAA

--color-semantics-alert-800

Semantics Alert 800

#FFAE00

hsl(41, 100%, 50%)

AAA AAA

--color-semantics-alert-700

700

#FFCE66

hsl(41, 100%, 70%)

AAA AAA

--informação

--color-semantics-info-900

900

#156DA7

hsl(204, 78%, 37%)

AAA AAA AA

--color-semantics-info-800

Semantics Info 800

#1779BA

hsl(204, 78%, 41%)

AA AAA AA

--color-semantics-info-700

700

#74AFD6

hsl(204, 54%, 65%)

AAA AAA