Welcome to Fabric, FINN’s Design System

Fabric provides components and tools to our product teams, to help them work more efficiently in creating simple, intuitive, and beautiful experiences for FINN users.

Colors

Fabric colors are designed to be clear and accessible. They come in different color ranges.

View in Figma

Logo colors

Primary-blue

HEX
#0063fb
Alias of
blue-600

Secondary-blue

HEX
#06befb
Alias of
aqua-400

Text colors

Licorice

HEX
#464646
Alias of
gray-700

Stone

HEX
#767676
Alias of
gray-500

Sardine

HEX
#C3CCD9
Alias of
bluegray-300

Background colors

Toothpaste

HEX
#B6F0FF
Alias of
aqua-200

Ice

HEX
#F1F9FF
Alias of
aqua-50

Marble

HEX
#F6F8FB
Alias of
bluegray-100

Milk

HEX
#FFFFFF
Alias of
white

Mint

HEX
#CDFEE5
Alias of
green-100

Banana

HEX
#FFF5C8
Alias of
yellow-100

Salmon

HEX
#FFEFEF
Alias of
red-100

Detail colors

Lime

HEX
#059E6F
Alias of
green-600

Pea

HEX
#2EE69F
Alias of
green-400

Cherry

HEX
#D91F0A
Alias of
red-600

Watermelon

HEX
#FF5844
Alias of
red-400

Full palette

Blue

50
#eff5ff
100
#e1edfe
200
#c2dafe
300
#9ac1fe
400
#5e9cfd
500
#2b7eff
600
#0063fb
700
#004abc
800
#003e9d
900
#003280

Aqua

50
#f1f9ff
100
#e0f6ff
200
#b6f0ff
300
#84e1fc
400
#06befb
500
#03a3dd
600
#048bb7
700
#037297
800
#025c83
900
#024764

Green

50
#ebfff6
100
#cdfee5
200
#9efcd1
300
#67eeb8
400
#2ee69f
500
#18c884
600
#059e6f
700
#217a5f
800
#065f46
900
#064e3b

Yellow

50
#fff8e6
100
#fff5c8
200
#feef90
300
#fae76b
400
#ffe11f
500
#eeb61b
600
#d5840b
700
#ae6c09
800
#885407
900
#6b4206

Red

50
#fff5f5
100
#ffefef
200
#ffd1d1
300
#ff9999
400
#ff5844
500
#fa270f
600
#d91f0a
700
#b91409
800
#991500
900
#801a00

Bluegray

50
#f8fafc
100
#f1f4f9
200
#e1e6ee
300
#c3ccd9
400
#9ba8ba
500
#6f7d90
600
#4d586f
700
#3a445a
800
#272e3f
900
#0f1729

Gray

50
#fafafa
100
#f5f5f5
200
#e5e5e5
300
#cccccc
400
#adadad
500
#767676
600
#525252
700
#464646
800
#2b2b2b
900
#171717

White

#fff

Current

currentColor

Transparent

transparent

Guidelines

Don't create your own colors

Every part of the interface should use a color defined by Fabric to ensure consistency across products. Fabric’s colors are carefully chosen and tested to ensure they meet accessibility standards.

Communicating with color

In order to be accessible for every user, do not use color alone as a method of communication. For every usage of color as a feedback method, there should be an accompanying label and/or icon.