DSNiemeyer
Idioma
PTEN

Cores

Paleta completa do Niemeyer — brand, neutrals, escalas e tokens semânticos.

Cores da brand

As cores da marca Morada.ai. Use com moderação — prefira tokens semânticos.

Preto

--morada-black

#1d1d1b

Azul — primária

--morada-blue

#0073ff

Ciano

--morada-cyan

#02cfff

Cya — secundária

--morada-cya

#00ffe0

Roxo escuro

--morada-dark-purple

#38384d

Coral

--morada-coral

#f27d82

Laranja — terciária

--morada-orange

#f7b87d

Laranja claro

--morada-light-orange

#fad499

Amarelo

--morada-yellow

#fcf2a3

Tokens semânticos

Mudam de valor entre temas e modos. Sempre use estes em componentes.

Background

--background

Fundo da página

Foreground

--foreground

Texto principal

Card

--card

Fundo de cards

Muted

--muted

Áreas sutis

Muted Foreground

--muted-foreground

Texto secundário

Primary

--primary

Ação principal

Primary Foreground

--primary-foreground

Texto sobre primary

Secondary

--secondary

Ação secundária (morada-cya)

Secondary Foreground

--secondary-foreground

Texto sobre secondary

Tertiary

--tertiary

Ação terciária (morada-orange)

Tertiary Foreground

--tertiary-foreground

Texto sobre tertiary

Accent

--accent

Hover/destaque

Destructive

--destructive

Ações perigosas

Border

--border

Bordas

Input

--input

Borda de inputs

Ring

--ring

Focus ring

Cores de feedback

Sucesso

Exemplo de mensagem de sucesso.

Aviso

Exemplo de mensagem de aviso.

Info

Exemplo de mensagem informativa.

Destrutivo

Exemplo de mensagem destrutiva.

Escala neutra

Base cool blue-gray derivada de #606A80.

50
100
150
200
300
400
500
600
700
800
850
900
950

50

#F7F8FA

100

#ECEEF3

150

#E1E4EA

200

#D3D7E0

300

#B4BAC8

400

#8D95A8

500

#606A80

600

#4E5668

700

#3C4354

800

#2B303E

850

#232836

900

#1A1E2B

950

#10131C

Escalas de cor

Azul — primária

1
2
3
4
5
6
7
8
9
10

1

#f0f7ff

2

#e0efff

3

#b8dbff

4

#85c1ff

5

#4da3ff

6

#0073ff

7

#005ecc

8

#004a99

9

#003566

10

#001f3d

Cya — secundária (#00ffe0)

1
2
3
4
5
6
7
8
9
10

1

#ebfffc

2

#c5fff5

3

#9cfde9

4

#52fadb

5

#19ffec

6

#00ffe0

7

#00ccb3

8

#009987

9

#006659

10

#003d35

Laranja — terciária (#f7b87d)

1
2
3
4
5
6
7
8
9
10

1

#fff5ec

2

#ffe4cc

3

#fccda0

4

#fac085

5

#f7b87d

6

#f2a05c

7

#e07c2a

8

#c05e16

9

#9a460d

10

#6b2e07

Verde — sucesso (esmeralda)

1
2
3
4
5
6
7
8
9
10

1

#ecfdf5

2

#d1fae5

3

#a7f3d0

4

#6ee7b7

5

#34d399

6

#10b981

7

#059669

8

#047857

9

#065f46

10

#064e3b

Ciano

1
2
3
4
5
6
7
8
9
10

1

#ECFDFF

2

#D4F9FF

3

#A8F0FF

4

#6BE4FF

5

#2FD6FF

6

#02CFFF

7

#00AEDB

8

#008DB2

9

#006D8A

10

#004D63

Perigo (vermelho)

1
2
3
4
5
6
7
8
9
10

1

#fef2f2

2

#fee2e2

3

#fecaca

4

#fca5a5

5

#f87171

6

#ef4444

7

#dc2626

8

#b91c1c

9

#991b1b

10

#7f1d1d

Aviso (âmbar)

1
2
3
4
5
6
7
8
9
10

1

#fffbeb

2

#fef3c7

3

#fde68a

4

#fcd34d

5

#fbbf24

6

#f59e0b

7

#d97706

8

#b45309

9

#92400e

10

#78350f