InkWell

Click to expand

InkWell is a design system crafted for writer portfolios and long-form essay blogs.

#1E293B#1E293B

#881337#881337

#FEF3C7#FEF3C7

#94A3B8#94A3B8

Headline

Body

Label

Color Palette

Brand Palette

Surface Palette

Content Palette

Border Palette

Semantic Colors

Typography

DisplayPlayfair Display · 48px · Black

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

HeadlinePlayfair Display · 36px · Bold

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

SubheadPlayfair Display · 24px · SemiBold

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

Body LargeSource Serif Pro · 20px · Regular

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

BodySource Serif Pro · 18px · Regular

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

Body SmallSource Serif Pro · 16px · Regular

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

CaptionSource Serif Pro · 13px · Regular

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

OverlineSource Serif Pro · 12px · SemiBold

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

CodeIBM Plex Mono · 16px · Regular

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

Spacing

Base: 12px

InkWell is a design system crafted for writer portfolios and long-form essay blogs.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Chips

Filter ChipStatus Chip

Do's & Don'ts

Do

Keep body text line length between 45-75 characters — this is the optimal range for reading comfort.

Use pull quotes with a 4px left border in Burgundy #881337 to break up long passages.

Set body text at 18px minimum with 1.8 line height — reading fatigue is the enemy.

Use Playfair Display at heavy weights (700-900) for headlines to create dramatic typographic contrast.

Include generous paragraph spacing (at least 24px margin-bottom) to let ideas breathe between blocks.

Don't

Use border radius on any element — InkWell's sharp edges are a deliberate editorial choice.

Use shadows — depth is achieved through borders and background color shifts only.

Place more than one article card per row on mobile — long-form content needs full-width presence.

Use Burgundy #881337 for body text — reserve it exclusively for links, pull quotes, and editorial accents.

Distract from the text with autoplay media, floating widgets, or animated elements.

Download .md

Chef @chef

License MIT

Uploaded 2 days ago

Version v1

File size 9.1 KB

Downloads 0

blog brutalist devtools mobile-app portfolio

Use with MCP

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

Don't have the MCP? Install it here