ThoughtStream

ThoughtStream mockup preview
Click to expand

Minimal, zen, distraction-free design system for minimalist personal blogs and newsletters. Prioritizes reading flow and typographic clarity with generous white space and warm, neutral palette.

#78716C#78716C
#A8A29E#A8A29E
#1C1917#1C1917
#FAFAF9#FAFAF9
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Brand Palette

Surface Palette

Content Palette

Border Palette

Semantic Colors

Typography

DisplayLibre Baskerville, Georgia, 'Times New Roman', serif · 40px · Bold

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

HeadlineLibre Baskerville, Georgia, 'Times New Roman', serif · 30px · Bold

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

SubheadLibre Baskerville, Georgia, 'Times New Roman', serif · 22px · Regular

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

Body LargeInter, -apple-system, 'Segoe UI', Helvetica, sans-serif · 20px · Regular

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

BodyInter, -apple-system, 'Segoe UI', Helvetica, sans-serif · 17px · Regular

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

Body SmallInter, -apple-system, 'Segoe UI', Helvetica, sans-serif · 15px · Regular

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

CaptionInter, -apple-system, 'Segoe UI', Helvetica, sans-serif · 13px · Regular

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

OverlineInter, -apple-system, 'Segoe UI', Helvetica, sans-serif · 11px · SemiBold

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

CodeSource Code Pro, 'Fira Code', Consolas, monospace · 15px · Regular

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

Spacing

Base: 12px
12px
24px
48px
60px
84px
120px

Minimal, zen, distraction-free design system for minimalist personal blogs and newsletters. Prioritizes reading flow and typographic clarity with generous white space and warm, neutral palette.

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

Elevation & Depth

Focus Ring

Do's & Don'ts

Do

Let white space dominate — margins and padding should feel generous and contemplative.
Keep headlines in Libre Baskerville for literary warmth; never use it for UI labels.
Use #E7E5E4 hairline borders to separate sections instead of shadows or color blocks.
Set body text at 17px or above with 1.8 line height for comfortable long-form reading.
Maintain a maximum content width of 680px for body text to preserve optimal reading measure.
Favor vertical rhythm aligned to the 12px base unit across all spacing decisions.

Don't

Add decorative elements, gradients, or illustrations that compete with the text.
Use more than two font weights on a single screen — restraint is the ethos.
Use color to convey meaning alone — pair with text or icons for accessibility.
Introduce rounded corners — sharp edges reinforce the clean geometric identity.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 9.6 KB
Downloads 1
design-tokens minimal personal-blog saas

Use with MCP

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

Don't have the MCP? Install it here