Color
Deep Navy is the foundation, Algae Green the secondary color and Golden Glow the accent. Keep text contrast clear on every surface.
Color
Navy
#242139Algae
#64D990Golden
#FFE600White
#FFFFFFDeep Navy #242139 · Algae Green #64D990 · Golden Glow #FFE600. White supports the system; #F3F4F6 is a quiet neutral.
In practice
Ideas become useful when they connect.
Turn one clear idea into a learning path. Give the next step room to become useful.
Use Algae for the background and Navy for the text and signature.
01 / 03Ideas become useful when they connect.
Turn one clear idea into a learning path. Give the next step room to become useful.
Next: shape the lesson
White gives learning content a quiet surface. Color organizes the interface without competing with the reading.
Use Navy for the opening and White for the message. Keep the supporting geometry simple.
Apply the palette
Ideas become useful when they connect.
Turn one clear idea into a learning path. Give the next step room to become useful.
Body text passes 4.5:1 · Large text passes 3:1
Normal text needs at least 4.5:1. Large text (24px regular or about 18.7px bold) needs 3:1. Evaluate the unrounded ratio. These checks are not a full accessibility audit.
WCAG 2.2 · 1.4.3Rules and source
A locked palette
Deep Navy #242139 · Algae Green #64D990 · Golden Glow #FFE600. White supports the system; #F3F4F6 is a quiet neutral.
Choose contrast first
Navy text works on White, Algae and Golden; White works on Navy. Recognition must survive in one color. Avoid white body text on bright brand surfaces.
Do
Use one dominant field and a restrained accent. Keep reading surfaces clean.
Don’t
Do not add unapproved hues or use color as the only signal.
Open editable Figma sourceSource pages 10, 14, 19, 31