MagSpread Design System

MagSpread Design System mockup preview
Click to expand

MagSpread is an editorial design system inspired by print magazine layouts, built for digital magazines and longform storytelling. It combines warm cream surfaces with deep teal and rose accents to create a luxurious, full-bleed reading experience. The system rejects shadows and rounded corners in favor of generous whitespace, bold serif headlines, and sharp geometric precision.

Color Primary#134E4A
Color Secondary#E11D48
Color Tertiary#FDF2E9
Color Success#16A34A
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

HeadlinePlayfair Display · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyManrope · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

MonoSource Code Pro · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h1Playfair Display · 56px · Black

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2Playfair Display · 40px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3Playfair Display · 28px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4Playfair Display · 22px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyManrope · 18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smallManrope · 14px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

xsManrope · 12px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 12px

MagSpread is an editorial design system inspired by print magazine layouts, built for digital magazines and longform storytelling. It combines warm cream surfaces with deep teal and rose accents to create a luxurious, full-bleed reading experience. The system rejects shadows and rounded corners in favor of generous whitespace, bold serif headlines, and sharp geometric precision.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

FilterStatus SuccessStatus WarningStatus Error

list

Default

Active

checkbox

Unchecked

Checked

Focus

radio-button

Unchecked

Selected

tooltip

Base

Do's & Don'ts

Do

use Playfair Display at bold or black weights for dramatic, editorial headlines.
leverage full-bleed images and color blocks for magazine-style section breaks.
maintain generous line height (1.75) on body text for comfortable long-form reading.
use the secondary rose (#E11D48) for pull quotes, drop caps, and accent highlights.
apply the 12px spacing base consistently for an airy, editorial feel.
use uppercase letter-spaced labels for category tags and section identifiers.

Don't

add border-radius to any element; the sharp, geometric print aesthetic is core.
use drop shadows or glows; hierarchy comes from scale, color, and whitespace.
use more than two columns for body text; readability declines past ~70 characters per line.
use the warm cream background for text-on-cream combinations below AA contrast ratio.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 5.4 KB
Downloads 0
blog editorial elegant news warm

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/magspread and implement it in my code

Don't have the MCP? Install it here