ZenGrid Design System

ZenGrid Design System mockup preview
Click to expand

ZenGrid is a calm, grid-perfect design system built around breathability and visual silence. Crafted for minimal portfolio sites and curated content platforms, it uses muted stone tones and generous spacing to let content occupy the center of attention. There are no shadows, no bold colors, no loud contrasts -- only a quiet, warm grid that organizes with precision and recedes with grace.

Surface Base#FAF9F6
Stone#78716C
Sage#A8A29E
Success#65A30D
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

h1Raleway · 40px · Light

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

h2Raleway · 32px · Light

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

h3Raleway · 24px · Medium

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

h4Raleway · 18px · Medium

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

bodyDM Sans · 15px · Regular

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

smallDM Sans · 13px · Regular

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

tinyDM Sans · 11px · Medium

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

monoFira Code · 13px · Regular

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

Spacing

Base: 12px

ZenGrid is a calm, grid-perfect design system built around breathability and visual silence. Crafted for minimal portfolio sites and curated content platforms, it uses muted stone tones and generous spacing to let content occupy the center of attention. There are no shadows, no bold colors, no loud contrasts -- only a quiet, warm grid that organizes with precision and recedes with grace.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Chips

FilterActive FilterStatusStatus DraftStatus ArchivedStatus Removed

List

Default Item

Active Item

Checkbox

Unchecked

Checked

RadioButton

Unchecked

Checked

Tooltip

Default

Do's & Don'ts

Do

Let the grid dictate every layout decision; no element should break the column rhythm.
Use light headline weights (300) for H1 and H2 to maintain the calm aesthetic.
Use generous vertical spacing (48-120px) between major content sections.
Keep images unadorned -- no borders, no rounded corners, no overlays.
Use content-tertiary for timestamps and metadata to keep them receded.

Don't

Introduce any color outside the stone/sage palette for UI elements.
Add shadows or glows; visual separation comes only from borders and background shifts.
Use bold or heavy font weights for body text; 400-500 maximum.
Center-align large blocks of text; always left-align for a clean reading line.
Use semantic colors for decorative purposes; reserve them strictly for functional states.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.1 KB
Downloads 0
clean minimal minimalist portfolio warm

Use with MCP

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

Don't have the MCP? Install it here