CodeCademy Design System
CodeCademy is a dark, focused, and code-first design system built for coding bootcamp and developer education platforms. It treats the code editor as the hero of every screen, with a dark-mode environment that reduces eye strain during long sessions. Bright green signals success and progress, warm orange draws attention to hints and guidance, and cool blue highlights informational elements -- all against a deep slate canvas that feels like home to developers.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxCodeCademy is a dark, focused, and code-first design system built for coding bootcamp and developer education platforms. It treats the code editor as the hero of every screen, with a dark-mode environment that reduces eye strain during long sessions. Bright green signals success and progress, warm orange draws attention to hints and guidance, and cool blue highlights informational elements -- all against a deep slate canvas that feels like home to developers.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Chips
Elevation & Depth
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here