# Color

# Primary

Orange is the new black!

The Amber color palette comes with 10 different weights, ranging from 50 (lightest) to 900 (darkest). Start using $orange-500 as our primary color then go up or down in weight.

$orange-50 is meant to be used only as background color.

$orange-50 #FFF3E1

$orange-100 #FEDAB4

$orange-200 #FDC187

$orange-300 #FCA85A

$orange-400 #FB8F2D

$orange-500 #EB6400

$orange-600 #D55800

$orange-700 #BF4C00

$orange-800 #A94000

$orange-900 #933400

# Neutral

Grey colors are used for text, backgrounds, lines and borders.

We use $grey-900 for high emphasis texts, $grey-700 for medium emphasis texts and $grey-500 for disabled texts.

$grey-50 is meant to be used only as background color.

$grey-50 #F5F5F5

$grey-100 #EBEBEB

$grey-200 #E0E0E0

$grey-300 #D6D6D6

$grey-400 #B8B8B8

$grey-500 #999999

$grey-600 #7A7A7A

$grey-700 #5C5C5C

$grey-800 #3D3D3D

$grey-900 #1F1F1F

# Feedback

# Success

$success-700 #388E3C

$success-50 #E8F5E9

# Warning

$warning-700 #FBC02D

$warning-50 #FFFDE7

# Error

$error-700 #D32F2F

$error-50 #FFEBEE

# Info

$info-700 #0288D1

$info-50 #E1F5FE

# Basic

$black #000000

$white #FFFFFF

# Accessibility

All type color combinations on Amber must pass WCAG AA standards of 4.5:1 for normal text and 3:1 for large text. For larger text, if the font weight is light (300) or normal (400) the text should be no smaller than 24px.

Use Color Contrast Checker by Mari Johannessen or check out our Contrast Grid provided by EightShapes.