Tangible Pattern Library

visionary-blu-10

HEX: #D3D4DD
HSL: hsl(234, 13%, 85%)

Text color u-color-visionary-blu-10
Background color u-bg-color-visionary-blu-10
Border color u-border-color-visionary-blu-10

visionary-blu-50

HEX: #B6B7C6
HSL: hsl(236, 12%, 75%)

Text color u-color-visionary-blu-50
Background color u-bg-color-visionary-blu-50
Border color u-border-color-visionary-blu-50

visionary-blu-100

HEX: #999BB0
HSL: hsl(235, 13%, 65%)

Text color u-color-visionary-blu-100
Background color u-bg-color-visionary-blu-100
Border color u-border-color-visionary-blu-100

visionary-blu-200

HEX: #7C7E99
HSL: hsl(236, 12%, 54%)

Text color u-color-visionary-blu-200
Background color u-bg-color-visionary-blu-200
Border color u-border-color-visionary-blu-200

visionary-blu-300

HEX: #5F6182
HSL: hsl(237, 16%, 44%)

Text color u-color-visionary-blu-300
Background color u-bg-color-visionary-blu-300
Border color u-border-color-visionary-blu-300

visionary-blu-400

HEX: #42456C
HSL: hsl(236, 24%, 34%)

Text color u-color-visionary-blu-400
Background color u-bg-color-visionary-blu-400
Border color u-border-color-visionary-blu-400

visionary-blu-500

HEX: #252855
HSL: hsl(236, 39%, 24%)

Text color u-color-visionary-blu-500
Background color u-bg-color-visionary-blu-500
Border color u-border-color-visionary-blu-500

visionary-blu-600

HEX: #20234A
HSL: hsl(236, 40%, 21%)

Text color u-color-visionary-blu-600
Background color u-bg-color-visionary-blu-600
Border color u-border-color-visionary-blu-600

visionary-blu-700

HEX: #1C1E40
HSL: hsl(237, 39%, 18%)

Text color u-color-visionary-blu-700
Background color u-bg-color-visionary-blu-700
Border color u-border-color-visionary-blu-700

visionary-blu-800

HEX: #171935
HSL: hsl(236, 39%, 15%)

Text color u-color-visionary-blu-800
Background color u-bg-color-visionary-blu-800
Border color u-border-color-visionary-blu-800

human-teal-10

HEX: #EAF9F5
HSL: hsl(164, 56%, 95%)

Text color u-color-human-teal-10
Background color u-bg-color-human-teal-10
Border color u-border-color-human-teal-10

human-teal-50

HEX: #D9F4EE
HSL: hsl(167, 55%, 90%)

Text color u-color-human-teal-50
Background color u-bg-color-human-teal-50
Border color u-border-color-human-teal-50

human-teal-100

HEX: #C8EEE6
HSL: hsl(167, 53%, 86%)

Text color u-color-human-teal-100
Background color u-bg-color-human-teal-100
Border color u-border-color-human-teal-100

human-teal-200

HEX: #B7E9DE
HSL: hsl(167, 53%, 82%)

Text color u-color-human-teal-200
Background color u-bg-color-human-teal-200
Border color u-border-color-human-teal-200

human-teal-300

HEX: #A6E4D7
HSL: hsl(167, 53%, 77%)

Text color u-color-human-teal-300
Background color u-bg-color-human-teal-300
Border color u-border-color-human-teal-300

human-teal-400

HEX: #95DFCF
HSL: hsl(167, 54%, 73%)

Text color u-color-human-teal-400
Background color u-bg-color-human-teal-400
Border color u-border-color-human-teal-400

human-teal-500

HEX: #86C9BA
HSL: hsl(167, 38%, 66%)

Text color u-color-human-teal-500
Background color u-bg-color-human-teal-500
Border color u-border-color-human-teal-500

human-teal-600

HEX: #689C91
HSL: hsl(167, 21%, 51%)

Text color u-color-human-teal-600
Background color u-bg-color-human-teal-600
Border color u-border-color-human-teal-600

human-teal-700

HEX: #59867C
HSL: hsl(167, 20%, 44%)

Text color u-color-human-teal-700
Background color u-bg-color-human-teal-700
Border color u-border-color-human-teal-700

human-teal-800

HEX: #4B7068
HSL: hsl(167, 20%, 37%)

Text color u-color-human-teal-800
Background color u-bg-color-human-teal-800
Border color u-border-color-human-teal-800

rebel-coral-10

HEX: #FFE9EA
HSL: hsl(357, 100%, 96%)

Text color u-color-rebel-coral-10
Background color u-bg-color-rebel-coral-10
Border color u-border-color-rebel-coral-10

rebel-coral-50

HEX: #FFCDCD
HSL: hsl(0, 100%, 90%)

Text color u-color-rebel-coral-50
Background color u-bg-color-rebel-coral-50
Border color u-border-color-rebel-coral-50

rebel-coral-100

HEX: #FFBEBF
HSL: hsl(359, 100%, 87%)

Text color u-color-rebel-coral-100
Background color u-bg-color-rebel-coral-100
Border color u-border-color-rebel-coral-100

rebel-coral-200

HEX: #FFB0B1
HSL: hsl(359, 100%, 85%)

Text color u-color-rebel-coral-200
Background color u-bg-color-rebel-coral-200
Border color u-border-color-rebel-coral-200

rebel-coral-300

HEX: #FFA1A2
HSL: hsl(359, 100%, 82%)

Text color u-color-rebel-coral-300
Background color u-bg-color-rebel-coral-300
Border color u-border-color-rebel-coral-300

rebel-coral-400

HEX: #FF9394
HSL: hsl(359, 100%, 79%)

Text color u-color-rebel-coral-400
Background color u-bg-color-rebel-coral-400
Border color u-border-color-rebel-coral-400

rebel-coral-500

HEX: #E68485
HSL: hsl(359, 66%, 71%)

Text color u-color-rebel-coral-500
Background color u-bg-color-rebel-coral-500
Border color u-border-color-rebel-coral-500

rebel-coral-600

HEX: #CC7676
HSL: hsl(0, 46%, 63%)

Text color u-color-rebel-coral-600
Background color u-bg-color-rebel-coral-600
Border color u-border-color-rebel-coral-600

rebel-coral-700

HEX: #B36768
HSL: hsl(359, 33%, 55%)

Text color u-color-rebel-coral-700
Background color u-bg-color-rebel-coral-700
Border color u-border-color-rebel-coral-700

rebel-coral-800

HEX: #8F564B
HSL: hsl(10, 31%, 43%)

Text color u-color-rebel-coral-800
Background color u-bg-color-rebel-coral-800
Border color u-border-color-rebel-coral-800

neutral-white

HEX: #FFFFFF
HSL: hsl(0, 0%, 100%)

Text color u-color-neutral-white
Background color u-bg-color-neutral-white
Border color u-border-color-neutral-white

neutral-off-white

HEX: #F4F4F0
HSL: hsl(60, 15%, 95%)

Text color u-color-neutral-off-white
Background color u-bg-color-neutral-off-white
Border color u-border-color-neutral-off-white

neutral-black

HEX: #000000
HSL: hsl(0, 0%, 0%)

Text color u-color-neutral-black
Background color u-bg-color-neutral-black
Border color u-border-color-neutral-black

Visionary blu

Human teal

Rebel coral

Neutral