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.

Azul Morada

--morada-blue

#0073ff

Ciano Morada

--morada-cyan

#02cfff

Teal Morada

--morada-teal

#00ffe0

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 (blue)

Secondary Foreground

--secondary-foreground

Texto sobre secondary

Tertiary

--tertiary

Ação terciária (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 #8891a3.

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

50

#f5f6f7

100

#eceef3

200

#e5e7ec

300

#ccd1d9

400

#a9b0be

500

#8891a3

600

#5c687f

700

#454e62

800

#303643

850

#252a36

900

#181b24

950

#12141d

975

#0b0d13

Escalas de cor

Azul

100
200
300
400
500
600
700
800
900

100

#eff6ff

200

#dceafd

300

#bad5fb

400

#85b5f8

500

#5194f5

600

#176ae7

700

#154ea1

800

#0f3b7a

900

#052c5c

Verde

100
200
300
400
500
600
700
800
900

100

#e5fbf0

200

#ccf0dd

300

#a3e0bf

400

#61c58f

500

#31a767

600

#297e50

700

#1b5c39

800

#15472c

900

#09351e

Vermelho

100
200
300
400
500
600
700
800
900

100

#fef2f1

200

#fde3e1

300

#fcc5c0

400

#f79992

500

#ed6b65

600

#c83f3c

700

#932c29

800

#781717

900

#4f0c12

Amarelo

100
200
300
400
500
600
700
800
900

100

#fff5d4

200

#ffe6a1

300

#fccd5c

400

#dea635

500

#c78721

600

#9b5f11

700

#74461b

800

#5a3311

900

#43250a

Ciano

100
200
300
400
500
600
700
800
900

100

#dcf6fd

200

#baedfb

300

#8fd8ef

400

#54b8d7

500

#2f99b9

600

#24758e

700

#1a5266

800

#003d52

900

#002d3d

Teal

100
200
300
400
500
600
700
800
900

100

#dafbf7

200

#9bf9f0

300

#6fe5da

400

#50c4b8

500

#3ba398

600

#287b71

700

#185a52

800

#0e4941

900

#03302c

Laranja

100
200
300
400
500
600
700
800
900

100

#fff3e8

200

#fae4d1

300

#f5caa8

400

#eca26c

500

#dd7a34

600

#b05828

700

#833c1b

800

#6c2a0e

900

#51200b

Roxo

100
200
300
400
500
600
700
800
900

100

#f2f1fe

200

#e6e5f8

300

#d3cff3

400

#b3abe9

500

#988ae1

600

#7659d4

700

#5b44a1

800

#443277

900

#2e1d58

Rosa

100
200
300
400
500
600
700
800
900

100

#fff0f7

200

#fde1ed

300

#f7c4d9

400

#ec9abc

500

#e06f9e

600

#bf4075

700

#941d53

800

#730d3b

900

#4f0d2c