StudioBlank Design System

StudioBlank Design System mockup preview
Click to expand

StudioBlank is an ultra-minimal design system where whitespace is the primary design feature. Built for photographer and visual artist portfolios, every UI element recedes so the work itself commands attention. The system uses no shadows, no border radius, and a monochromatic palette with weight contrast in a single type family. Geometry is pure, grids are strict, and ornamentation is entirely absent.

Color Primary#0A0A0A
Color Secondary#FAFAFA
Color Tertiary#D4D4D8
Color Success#16A34A
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

text-heroInter · 64px · Bold

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

text-h1Inter · 40px · Bold

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

text-h2Inter · 28px · SemiBold

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

text-h3Inter · 20px · SemiBold

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

text-bodyInter · 16px · Light

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

text-body-smInter · 14px · Regular

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

text-captionInter · 12px · Regular

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

text-monoIBM Plex Mono · 13px · Regular

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

Spacing

Base: 16px

StudioBlank is an ultra-minimal design system where whitespace is the primary design feature. Built for photographer and visual artist portfolios, every UI element recedes so the work itself commands attention. The system uses no shadows, no border radius, and a monochromatic palette with weight contrast in a single type family. Geometry is pure, grids are strict, and ornamentation is entirely absent.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

Filter DefaultFilter SelectedFilter HoverStatus PublishedStatus DraftStatus ArchivedStatus Featured

list

default

checkbox

Unchecked

Checked

Disabled

radio-button

Unselected

Selected

Disabled

tooltip

default

Do's & Don'ts

Do

let images speak -- the portfolio work is the design, not the interface.
use generous margins (minimum 64px between major sections) to create visual breathing room.
keep UI chrome to an absolute minimum -- navigation should nearly disappear.
use weight contrast within Inter (300 vs 700) to establish hierarchy instead of size alone.
prioritize loading performance; lazy-load gallery images with simple fade-in transitions.

Don't

add decorative elements such as gradients, patterns, or ornamental shapes.
introduce more than one accent color across the entire site. Monochrome is the identity.
use rounded corners, shadows, or any depth effect. The system is strictly flat and geometric.
overlay text on images unless absolutely necessary -- image integrity is paramount.
use animations or transitions longer than 200ms. Movement should be barely perceptible.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 5.9 KB
Downloads 0
clean creative light minimal portfolio

Use with MCP

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

Don't have the MCP? Install it here