Serif Journal

Serif Journal is an editorial design system inspired by the internet's premier long-form reading platform. It reveres the written word above all else — serif typography dominates, color is used with extreme restraint, and every design decision optimizes for immersive, distraction-free reading. The aesthetic channels a literary magazine: elegant, opinionated, and confidently minimal. Content is not decorated; it is presented with the respect it deserves.

Primary#1A8917
Secondary#FFC017
Neutral#757575
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

Meta/NavigationSource Serif 4 · 14px · Regular

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

CodeJetBrains Mono · 16px · Regular

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

SubheadingsSource Serif 4 · 18px · Regular

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

BodySource Serif 4 · 21px · Regular

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

Article SubtitleSource Serif 4 · 24px · Regular

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

Article Title MobilePlayfair Display · 32px · Bold

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

Article Title DesktopPlayfair Display · 48px · Black

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

Spacing

Base: 4px

Serif Journal is an editorial design system inspired by the internet's premier long-form reading platform. It reveres the written word above all else — serif typography dominates, color is used with extreme restraint, and every design decision optimizes for immersive, distraction-free reading. The aesthetic channels a literary magazine: elegant, opinionated, and confidently minimal. Content is not decorated; it is presented with the respect it deserves.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Chips

DefaultActive

Elevation & Depth

Modal
Navigation Border

Do's & Don'ts

Do

Use Playfair Display exclusively for headlines — its dramatic serifs are the visual signature
Set article body text at 21px with 1.58 line height — this ratio is sacred for long-form readability
Keep the color palette monochromatic — #242424, #757575, #E6E6E6, #FFFFFF are the workhorses
Limit article body width to 680px — wider text columns reduce reading comprehension
Use the green (#1A8917) only for follow buttons and clap interactions — never for decoration

Don't

Use sans-serif fonts anywhere in the interface — even UI chrome uses Source Serif 4
Add shadows or card treatments to article feed items — they should breathe on the white canvas
Use color to convey information hierarchy — rely on font size, weight, and the serif/display distinction
Place more than one CTA per article card — the headline itself is the primary click target
Download .md

License MIT
Uploaded 1 months ago
Version v1
File size 8.0 KB
Downloads 30
Copies 1

Use with MCP

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

Don't have the MCP? Install it here