VoiceBox
VoiceBox is a high-contrast editorial design system for opinion blogs and cultural commentary sites. It channels the energy of print magazines — massive headlines, stark black-and-white foundations, and a single aggressive red accent that punctuates like an exclamation mark. The density is intentionally mixed: bold, oversized headers create dramatic entries while compact body text maintains readability for long-form argument. Every element is flat and sharp, with borders doing all the structural work.
Color Palette
Brand Palette
Surface Palette
Content Palette
Border Palette
Semantic Colors
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: 8pxVoiceBox is a high-contrast editorial design system for opinion blogs and cultural commentary sites. It channels the energy of print magazines — massive headlines, stark black-and-white foundations, and a single aggressive red accent that punctuates like an exclamation mark. The density is intentionally mixed: bold, oversized headers create dramatic entries while compact body text maintains readability for long-form argument. Every element is flat and sharp, with borders doing all the structural work.
Components
Buttons
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here