Block Canvas

Block Canvas is an ultra-minimal, content-first design system where typography is the interface and whitespace is the primary design material. Anchored by near-black text on a clean white canvas, it strips away visual noise to create a workspace that feels like a blank page waiting for ideas. Every element is quiet and precise, revealing functionality through subtle hover states and contextual menus rather than persistent chrome.

Primary#2383E2
Secondary#EB5757
Text Tertiary#B4B4B0
Neutral#787774
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

caption/propertyInter · 12px · Regular

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

small text/codeInter · 14px · Regular

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

bodyInter · 16px · Regular

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

H3Inter · 20px · SemiBold

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

H2Inter · 24px · SemiBold

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

H1Inter · 30px · Bold

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

page titleInter · 40px · Bold

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

Spacing

Base: 4px

Block Canvas is an ultra-minimal, content-first design system where typography is the interface and whitespace is the primary design material. Anchored by near-black text on a clean white canvas, it strips away visual noise to create a workspace that feels like a blank page waiting for ideas. Every element is quiet and precise, revealing functionality through subtle hover states and contextual menus rather than persistent chrome.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Chips

tag

Elevation & Depth

dropdown
modal
drag

Do's & Don'ts

Do

Let whitespace do the heavy lifting — margins and padding are the primary organizational tool
Use hover-reveal patterns for actions; blocks should look clean until interaction
Maintain 16px body text and 1.5 line-height for comfortable long-form content
Support the slash command ("/") as the primary discovery mechanism for block types
Use emoji as page icons — they are a core part of the personality and wayfinding system
Keep the sidebar page tree clean with small icons and concise titles

Don't

Add persistent toolbars or action bars; Notion's aesthetic is invisible until needed
Use strong colors for backgrounds; all tints should be barely visible (pastel at ~15% opacity)
Put borders around individual blocks in page view; blocks flow as a continuous document
Make the UI feel like a traditional app; it should feel like a living document
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 7.9 KB
Downloads 32
Copies 1
clean content-first minimal productivity

Use with MCP

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

Don't have the MCP? Install it here