We enjoy to learn with fun

Our aim is to improve learning. To achieve this, we’re constantly learning and improving ourselves. Fun is a vital part of sofatutor’s development as we want to create a product that is entertaining. That's why we chose the playground as a model, a place where children learn and have fun, in order to create our Design System.

Colors

We define different sets of colors. The brand is represented by the two green colors of our logo and the black that brings a strong support to the navigation elements of our platform. The navigation is complemented with the Fondation Palette that contains a variety of colors used for buttons, backgrounds and texts, among others.

Brand

Green

HEX: #99CC00

RGB: 153, 204, 0

CMYK: 40, 0, 100, 0

Dark Green

HEX: #669900

RGB: 102, 153, 0

CMYK: 66, 18, 100, 4

Black

HEX: #333333

RGB: 51, 51, 51

CMYK: 0, 10, 10, 90

Foundation Palette

Primary

HEX: #0066CC

RGB: 0, 102, 204

Secondary

HEX: #CCCCCC

RGB: 204, 204, 204

Success

HEX: #DDEEAA

RGB: 221, 228, 170

Warning

HEX: #EEFFAA

RGB: 254, 239, 170

Alert

HEX: #FCE3E3

RGB: 252, 227, 227

White

HEX: #FFFFFF

RGB: 255, 255, 255

Gray Light

HEX: #F8F8F8

RGB: 248, 248, 248

Gray Medium

HEX: #E6E8E5

RGB: 230, 232, 229

RGB: 153, 153, 153

Gray

HEX: #999999

Gray Dark

HEX: #666666

RGB: 102, 102, 102

Interaction

Normal

Primary

Hover

HEX: #0099FF

RGB: 0, 153, 255

Disabled

Primary: 40%

Normal

Dark Green

Hover

Green

Disabled

Dark Green: 40%

Normal

Gray Dark

Hover

Secondary

Disabled

Gray Dark: 20%

Normal

Gray Medium

Hover

Gray Light

Disabled

Gray Medium: 20%

Normal

White

Hover

Gray Light

Disabled

Black: 20%

Color stands for the Font

Icons

Normal

Secondary

Hover

HEX: #999999

RGB: 153, 153, 153

Disabled

Secondary: 40%

Color Wheel

Our color wheel has been designed to work harmoniously in all of our sofatutor graphic elements across the platform and our products. The wheel is based in our brand green color. All other colors respond to that main green.

Tints & Shades

In order to get light and dark variations from our color wheel, we have been built a set of Tints and Shades which are complementary colors to be used on different graphic elements, such as gradients, borders, backgrounds, shadows among others.

Green

#99CC00

#F5FAE6

#D6EB99

#C2E066

#ADD633

#7AA300

#6B8F00

#5C7A00

#4D6600

Kelly Green

#00B500

#E6F8E6

#99E199

#66D366

#33C433

#009100

#007F00

#006D00

#005B00

Blue

#0088B5

#E6F3F8

#99CFE1

#66B8D2

#33A0C4

#006D91

#005F7F

#00526D

#00445B

Indigo

#004CB5

#E6EDF8

#99B7E1

#6694D3

#3370C4

#003D91

#00357F

#002E6D

#00265B

Deep Blue

#1E00B5

#E9E6F8

#A599E1

#7866D3

#4B33C4

#180091

#15007F

#12006D

#0F005B

Purple

#7900B5

#F2E6F8

#C999E1

#AF66D3

#9433C4

#610091

#55007F

#49006D

#3D005B

Raspberry

#C10070

#F9E6F1

#E699C6

#DA66A9

#CD338D

#9A005A

#87004E

#740043

#610038

Red

#E30000

#FCE6E6

#F49999

#EE6666

#E93333

#B60000

#9F0000

#880000

#720000

Deep Orange

#E35B00

#FCEFE6

#F4BD99

#EE9D66

#E97C33

#B64900

#9F4000

#883700

#722E00

Orange

#E38800

#FCF3E6

#F4CF99

#EEB866

#E9A033

#B66D00

#9F5F00

#885200

#724400

Amber

#E3B500

#FCF836

#F4E199

#EED366

#E9C433

#B69100

#9F7F00

#886D00

#725B00

Lime

#E3E300

#FCFCE6

#F4F499

#EEEE66

#E9E933

#B6B600

#9F9F00

#888800

#727200

Dark Green

#669900

#F0F5E6

#C2D699

#A3C266

#85AD33

#527A00

#476B00

#3D5C00

#334D00

Yellow

#FBCD00

#FFFAE6

#FDEB99

#FDE166

#FCD733

#C9A400

#B09000

#977B00

#7E6700