sofatutor Playground

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

L4

#F5FAE6

L3

#D6EB99

L2

#C2E066

L1

#ADD633

D1

#7AA300

D2

#6B8F00

D3

#5C7A00

D4

#4D6600

Kelly Green

#00B500

L4

#E6F8E6

L3

#99E199

L2

#66D366

L1

#33C433

D1

#009100

D2

#007F00

D3

#006D00

D4

#005B00

Blue

#0088B5

L4

#E6F3F8

L3

#99CFE1

L2

#66B8D2

L1

#33A0C4

D1

#006D91

D2

#005F7F

D3

#00526D

D4

#00445B

Indigo

#004CB5

L4

#E6EDF8

L3

#99B7E1

L2

#6694D3

L1

#3370C4

D1

#003D91

D2

#00357F

D3

#002E6D

D4

#00265B

Deep Blue

#1E00B5

L4

#E9E6F8

L3

#A599E1

L2

#7866D3

L1

#4B33C4

D1

#180091

D2

#15007F

D3

#12006D

D4

#0F005B

Purple

#7900B5

L4

#F2E6F8

L3

#C999E1

L2

#AF66D3

L1

#9433C4

D1

#610091

D2

#55007F

D3

#49006D

D4

#3D005B

Raspberry

#C10070

L4

#F9E6F1

L3

#E699C6

L2

#DA66A9

L1

#CD338D

D1

#9A005A

D2

#87004E

D3

#740043

D4

#610038

Red

#E30000

L4

#FCE6E6

L3

#F49999

L2

#EE6666

L1

#E93333

D1

#B60000

D2

#9F0000

D3

#880000

D4

#720000

Deep Orange

#E35B00

L4

#FCEFE6

L3

#F4BD99

L2

#EE9D66

L1

#E97C33

D1

#B64900

D2

#9F4000

D3

#883700

D4

#722E00

Orange

#E38800

L4

#FCF3E6

L3

#F4CF99

L2

#EEB866

L1

#E9A033

D1

#B66D00

D2

#9F5F00

D3

#885200

D4

#724400

Amber

#E3B500

L4

#FCF836

L3

#F4E199

L2

#EED366

L1

#E9C433

D1

#B69100

D2

#9F7F00

D3

#886D00

D4

#725B00

Lime

#E3E300

L4

#FCFCE6

L3

#F4F499

L2

#EEEE66

L1

#E9E933

D1

#B6B600

D2

#9F9F00

D3

#888800

D4

#727200

Dark Green

#669900

L4

#F0F5E6

L3

#C2D699

L2

#A3C266

L1

#85AD33

D1

#527A00

D2

#476B00

D3

#3D5C00

D4

#334D00

Yellow

#FBCD00

L4

#FFFAE6

L3

#FDEB99

L2

#FDE166

L1

#FCD733

D1

#C9A400

D2

#B09000

D3

#977B00

D4

#7E6700