PRIMARY COLOR (BLUE / MAIN: #0E78D5, light: #BCE0FF)

H1 (4em). An adaptive learning platform for early years

H2 (3em). An adaptive learning platform for early years

H3 (1.5em). An adaptive learning platform for early years

p (1em). An adaptive learning platform for early years

p strong. An adaptive learning platform for early years

SECONDARY COLOR (GREEN / MAIN: #4C8501, LIGHT: #E1FBC0)

Why isn’t this color brighter or more “pastel”?

We need to begin considering accessibility so that everyone can use our product(s). Learn more here: Link.


In particular, these colors were picked to have high contrast ratios with the background color. Adjustments can be made to fit with other background colors. A tool to help select accessible colors can be found here.

H1. An adaptive learning platform for early years

H2. An adaptive learning platform for early years

H3. An adaptive learning platform for early years

p. An adaptive learning platform for early years

p strong. An adaptive learning platform for early years

TERTIARY COLOR (Orange-Red / MAIN: #C8512A, LIGHT: #FFE6DE)

H1. An adaptive learning platform for early years

H2. An adaptive learning platform for early years

H3. An adaptive learning platform for early years

p. An adaptive learning platform for early years

p strong. An adaptive learning platform for early years

padding: 1.5em 1em;

border-radius: .5em;

box-shadow: 0 0 40px 0 rgba(0,0,0,0.1);

padding: .75em 2.25em;

border-radius: .5em;

box-shadow: 0 0 40px 0 rgba(0,0,0,0.1);

padding: 1em 3em;

border-radius: .5em;

box-shadow: 0 0 40px 0 rgba(0,0,0,0.1);

This is a card with an elevation of 1!

border-radius: .5em;

box-shadow: 0 0 40px 0 rgba(0,0,0,0.1);

This is a card with an elevation of 2!

border-radius: .5em;

box-shadow: 0 0 20px 5px rgba(0,0,0,0.1);

This is a card with an elevation of 3!

border-radius: .5em;

box-shadow: 0 0 10px 10px rgba(0,0,0,0.1);

This is a form field in a card