DSNiemeyer
Language
PTEN

Colors

The full Niemeyer palette — brand, neutrals, scales, and semantic tokens.

Brand colors

The Morada.ai brand colors. Use sparingly — prefer semantic tokens.

Morada blue

--morada-blue

#0073ff

Morada cyan

--morada-cyan

#02cfff

Morada teal

--morada-teal

#00ffe0

Semantic tokens

Values change with themes and modes. Always use these in components.

Background

--background

Page background

Foreground

--foreground

Primary text

Card

--card

Card surfaces

Muted

--muted

Subtle areas

Muted Foreground

--muted-foreground

Secondary text

Primary

--primary

Main action

Primary Foreground

--primary-foreground

Text on primary

Secondary

--secondary

Secondary action (blue)

Secondary Foreground

--secondary-foreground

Text on secondary

Tertiary

--tertiary

Tertiary action (orange)

Tertiary Foreground

--tertiary-foreground

Text on tertiary

Accent

--accent

Hover and highlights

Destructive

--destructive

Destructive actions

Border

--border

Borders

Input

--input

Input borders

Ring

--ring

Focus ring

Feedback colors

Success

Sample success message.

Warning

Sample warning message.

Info

Sample info message.

Destructive

Sample destructive message.

Neutral scale

Cool blue-gray base derived from #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

Color scales

Blue

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

Green

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

Red

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

Yellow

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

Cyan

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

Orange

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

Purple

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

Pink

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