SDM EditorialLegacy format
SDM Editorial is a high-contrast editorial design system developed for Salafide Montréal, an Islamic educational and community platform focused on clear, distraction-free access to articles, lessons, resources, and audio broadcasts. It channels the discipline and weight of classical print editorial design — strong headlines, stark black-and-white foundations, and a single restrained red accent used strictly for emphasis, navigation, and active states. The layout density is intentionally balanced: bold, oversized headers create clear entry points while readable body text supports long-form educational reading and study. Every element remains 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.
Corner Radius
Spacing
Base: 8pxSDM Editorial is a high-contrast editorial design system developed for Salafide Montréal, an Islamic educational and community platform focused on clear, distraction-free access to articles, lessons, resources, and audio broadcasts. It channels the discipline and weight of classical print editorial design — strong headlines, stark black-and-white foundations, and a single restrained red accent used strictly for emphasis, navigation, and active states. The layout density is intentionally balanced: bold, oversized headers create clear entry points while readable body text supports long-form educational reading and study. Every element remains flat and sharp, with borders doing all the structural work.
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Card Title
Sample body text for the card component.
Inputs
Chips
Checkbox
Default
Radio Button
Default
Tooltip
Default
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here