Colors
Coddy colors
One brand color: Coddy Blue. Magenta belongs to Bugsy. Every other color means something in the product, so it never appears just for decoration.
Brand
Two colors with names
Coddy Blue is the logo, Bit, links and accents. Bugsy Magenta is for Bugsy and the AI tutor only.
Coddy Blue
The one brand color. Logo, wordmark, Bit, accents.
Coddy Blue on dark
The same blue, lifted for dark backgrounds.
Bugsy Magenta
Bugsy and the AI tutor features. Nowhere else.
Product
Colors that mean something
A learner reads these as signals. Orange is your streak, gold is your score. Keep them for what they mean.
Streak
The streak flame and daily streak moments.
Score
XP, score, coins and gems.
Energy
The energy bolt and the daily limit.
Pro
Coddy Pro and premium features.
Success
Passed tests, done lessons, correct answers.
Hearts
Hearts and lives.
Streak freeze
The frozen streak that saves a missed day.
Interface
Buttons and links
Our buttons sit on a darker shadow that presses down when you tap. Try it.
Button blue
Primary buttons on the web, light theme.
Button shadow
The pressed edge under button blue.
Deep blue
Secondary buttons and links.
Button blue, dark theme
Primary buttons on dark backgrounds.
Backgrounds
Light and dark
Clean white or very light blue, lots of empty space, one focal point. Dark mode is a warm charcoal, never pure black.
White
The light theme background.
Mist
Cards and secondary surfaces on light.
Sky wash
Light blue landing sections.
Charcoal
The dark theme background.
Graphite
Cards on dark.
Editor
The code editor background.
Gradients
Two skies
Light Sky
Hero sections and big moments on light.
Dark Sky
The same idea after sunset.
Readable
Contrast that passes
Coddy Blue is a bright, happy blue. Great for art and accents, too light for small white text. Here is how the common pairs score.
FAQ
Color questions
What is Coddy's brand color?
Why is Bugsy a different color?
Can I use the streak orange or the score gold in my design?
Writing about Coddy?
Facts, founders and the press contact are on the press page. Go to the press kit
