Gray Paper

Gray Paper is a dignified, editorial design system inspired by the tradition of serious journalism and long-form storytelling. Serif-dominant typography, restrained colors, and generous whitespace create an atmosphere of intellectual authority and reading comfort. The system treats every article as a crafted experience, prioritizing sustained attention over quick consumption.

Primary#567B95
Secondary#326891
Neutral#F7F7F5
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

Display 72pxPlayfair Display · 72px · Black

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

Headline 60pxPlayfair Display · 60px · Bold

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

Headline 48pxPlayfair Display · 48px · Bold

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

Headline 36pxPlayfair Display · 36px · Bold

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

Headline 28pxPlayfair Display · 28px · Bold

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

Headline 22pxPlayfair Display · 22px · Bold

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

Body Text 18pxLibre Baskerville · 18px · Regular

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

Body Small 16pxLibre Baskerville · 16px · Regular

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

Caption 14pxLibre Baskerville · 14px · Regular

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

Metadata/Overline 12pxLibre Baskerville · 12px · Regular

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

Spacing

Base: 4px

Gray Paper is a dignified, editorial design system inspired by the tradition of serious journalism and long-form storytelling. Serif-dominant typography, restrained colors, and generous whitespace create an atmosphere of intellectual authority and reading comfort. The system treats every article as a crafted experience, prioritizing sustained attention over quick consumption.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Chips

SectionActiveBreaking

Elevation & Depth

Modal

Do's & Don'ts

Do

Use Playfair Display exclusively for headlines...
Maintain the 680px max-width for article body text...
Use generous line-height (1.8) for body text...
Employ bold horizontal rules (3px #121212)...
Use italic Libre Baskerville for pullquotes...
Treat whitespace as a primary design element...

Don't

Use border-radius on any structural element...
Use saturated colors for decorative purposes...
Use icons where text labels suffice...
Add animation or motion effects...
Download .md

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

Use with MCP

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

Don't have the MCP? Install it here