DebugDeck Design System
DebugDeck is a dense, multi-panel design system engineered for debugging tools and log analysis dashboards. Built on a dark foundation, it uses severity-coded amber and red glows to draw attention to critical issues in real-time data streams. The ultra-compact layout maximizes information density while maintaining scanability across log panels, stack traces, and variable inspectors. Every visual choice serves the developer's need for speed and precision under pressure.
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.
Spacing
Base: 4pxDebugDeck is a dense, multi-panel design system engineered for debugging tools and log analysis dashboards. Built on a dark foundation, it uses severity-coded amber and red glows to draw attention to critical issues in real-time data streams. The ultra-compact layout maximizes information density while maintaining scanability across log panels, stack traces, and variable inspectors. Every visual choice serves the developer's need for speed and precision under pressure.
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