DocuForge Design System
DocuForge is a clean, readable, and navigation-rich design system tailored for API documentation and developer docs sites. It pairs generous whitespace with a structured sidebar navigation, optimized for scanning long reference pages and code examples. The blue-purple-gray palette keeps the interface professional while highlighting interactive elements and syntax. Every component supports both light reading and deep-focus code study.
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.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 8pxDocuForge is a clean, readable, and navigation-rich design system tailored for API documentation and developer docs sites. It pairs generous whitespace with a structured sidebar navigation, optimized for scanning long reference pages and code examples. The blue-purple-gray palette keeps the interface professional while highlighting interactive elements and syntax. Every component supports both light reading and deep-focus code study.
Components
Buttons
Cards
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