Octo Code
Octo Code is a developer-centric design system inspired by the world's largest code collaboration platform. It embraces a dark-mode-first philosophy with precise syntax-highlighting-friendly colors, clean typography, and an interface that puts code front and center. The aesthetic is functional, information-dense, and unapologetically built for people who live in terminals and pull requests.
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.
Spacing
Base: 4pxOcto Code is a developer-centric design system inspired by the world's largest code collaboration platform. It embraces a dark-mode-first philosophy with precise syntax-highlighting-friendly colors, clean typography, and an interface that puts code front and center. The aesthetic is functional, information-dense, and unapologetically built for people who live in terminals and pull requests.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Chips
List
Default
Default
Checked
Default
Elevation & Depth
Do's & Don'ts
Do
Use with MCP
Don't have the MCP? Install it here