Foundations

Color

Plated's colors communicate how the product works. Using them consistently helps people recognize patterns — and every pairing below is tested for people with low vision.

Primary

The core of every screen. Cream and white are the canvas, eggplant is the voice, brown is the call to action.

Eggplant

#353036

Primary text · dark background

White

#FFFFFF

Inverse text · cards

Cream

#FBF9F7

Primary light background

Brown

#936B4A

Action color · links · buttons

Plated Red

#FF4338

Brand mark only

Secondary

Supporting backgrounds and feedback colors for success, warning and error.

Dark Brown

#6F6359

Secondary text · dark background

Forest

#264A3D

Accent dark background

Green

#2D6A41

Success

Tomato

#BB4006

Error

Gold

#D89B18

Warning (icons only)

Extended tints

Lighter steps for backgrounds, borders and alert fills. 'On dark' variants keep feedback colors legible on eggplant.

Brown

10#F4F0EC

20#E9E1DB

40#D4C4B7

50#B18764

Default#936B4A

Eggplant

10#EAEAEA

20#D7D6D7

40#AEACAF

Default#353036

Green

10#EAF0EB

30#C0D2C5

Default#2D6A41

On dark#189A43

Tomato

10#F8EBE6

30#EAC5B4

Default#BB4006

On dark#DA4804

Gold

10#FBF5E7

30#F3E1B9

Default#D89B18

Accessibility

Minimum contrast is 4.5:1 for body text (AA). 7:1 (AAA) combinations are the most legible and preferred for long reading.

12.9:1

White on Eggplant

AAA

12.3:1

Eggplant on Cream

AAA

9.9:1

White on Forest

AAA

6.5:1

White on Green

5.8:1

White on Dark Brown

5.5:1

White on Tomato

4.7:1

White on Brown

2.7:1

Eggplant on Brown

Fail

2.4:1

White on Gold

Fail

Use brown for buttons and links on white or cream; use gold only as an icon fill paired with a gold-10 background.

Don't

Put eggplant text on brown, white text on gold, or use Plated Red for interface elements.