BrushStroke Design System

BrushStroke Design System mockup preview
Click to expand

BrushStroke is a textured, organic, and hand-made design system crafted for illustrators and fine artists. It embraces warmth and imperfection with a cream-toned canvas, earthy palette, and handwritten headline typography. Every component feels approachable and artisanal, as if sketched before being rendered. The system prioritizes the artist's work above all else, keeping the UI inviting but never competing with the art.

Primary#B45309
Secondary#65A30D
Tertiary#7E22CE
Background#FFFDF7
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

Headline FontKalam · 36px · Bold

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

Body FontDM Sans · 16px · Regular

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

Mono FontSource Code Pro · 16px · Regular

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

DisplayKalam · 48px · Bold

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

SubheadKalam · 24px · Regular

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

Body LargeDM Sans · 18px · Regular

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

BodyDM Sans · 16px · Regular

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

Body SmallDM Sans · 14px · Regular

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

CaptionDM Sans · 12px · Medium

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

OverlineDM Sans · 11px · Bold

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

CodeSource Code Pro · 14px · Regular

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

Spacing

Base: 8px

BrushStroke is a textured, organic, and hand-made design system crafted for illustrators and fine artists. It embraces warmth and imperfection with a cream-toned canvas, earthy palette, and handwritten headline typography. Every component feels approachable and artisanal, as if sketched before being rendered. The system prioritizes the artist's work above all else, keeping the UI inviting but never competing with the art.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

FilterStatus

Checkbox

Default

Checked

Indeterminate

Disabled

Radio Button

Default

Selected

Disabled

Elevation & Depth

Subtle
Medium
Large
Overlay
Brushed

Do's & Don'ts

Do

embrace the warm cream background throughout; never switch to pure white
use Kalam for headlines only to preserve the hand-crafted feel without hurting readability
let artwork take center stage with generous whitespace and minimal UI chrome
use the brushed shadow sparingly for featured or hero elements only
pair Burnt Sienna with Plum for visual interest on feature callouts

Don't

use sharp 0px radii; the system relies on soft, rounded corners
introduce neon or high-saturation colors that clash with the earthy palette
set body text in Kalam; it becomes unreadable at small sizes
over-apply texture effects; one textured element per view is enough
stack more than two shadow levels on a single component
Download .md

License MIT
Uploaded yesterday
Version v1
File size 5.6 KB
Downloads 0

Use with MCP

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

Don't have the MCP? Install it here