← Back to Skills / Marketplace / hyper-minimal
PRO

Hyper Minimal.

Warm paper, near-black ink, hairline grids and giant light numerals. Interfaces stripped back until only what matters is left.

UNLOCK WITH PRO →
Live preview · Hyper Minimal demo
This is real CSS, not a screenshot
↗ New tab

The Vibe

Hyper Minimal strips your interface back until only what matters is left. Warm paper grounds, near-black ink, hairline grids, tiny uppercase labels and giant light numerals. It feels like a precision instrument made by someone with strong opinions.

Looks Like
Dieter Rams and Braun hardwareTeenage Engineering product pagesSwiss print designMinimal phone launchersGallery exhibition sitesQuiet editorial portfolios
About the Style

What is hyper minimal web design?

Hyper minimal design strips an interface back until only what matters is left. It uses a warm paper or fog background, near-monochrome ink, hairline module grids, tiny uppercase labels, oversized light numerals and text used as navigation, with instrument-like controls in place of heavy components. It draws on Dieter Rams' work for Braun, Teenage Engineering product pages and Swiss print design. The result feels calm, expensive and precise. It suits portfolios and personal sites, premium product and hardware launches, and galleries, studios and editorial brands. It is the wrong choice for brands that run on bright color or pages that need lots of imagery to sell.

Best For / Avoid If

＋ Best For
+Portfolios and personal sites
+Premium product and hardware launches
+Studios, galleries and editorial brands
+Calm dashboards and focused tools
+Any brand that wants to feel confident and quiet
× Avoid If
×Your brand runs on bright color and loud energy
×Your page needs lots of imagery or decoration to sell
×You have little real content, since this style puts every word and number on display

Design Philosophy

Remove it and see

Every element has to earn its place. If you take something out and nothing breaks, it stays out.

Type does the work

Hierarchy comes from size and weight, never color. A giant light numeral next to a tiny bold label carries the whole page.

Precise, never plain

Hairline modules, tick meters, thin rings and pill toggles make it feel like hardware. Small details in the corners reward a second look.

Use With Claude / Cursor

Claude
01Click 'Customize', then go to 'Skills'
02Go to 'Create Skills' and upload the skill.md file
03Put the design.md file in your project's knowledge base
04Mention the skill name as you build, and Claude applies it automatically
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build as usual and mention the skill name when you want it applied
PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction. Then hand those references to Claude Code. It makes a big difference in the final output.

Watch Out For

! WARNING
Generic and empty
Plain white space with Inter isn't the look. Use the module grid, micro-labels and one oversized numeral per view.
! WARNING
Sneaking color back in
The accent covers 2% of the screen at most, or none at all. Let the ink do the emphasis.
! WARNING
Too many signature moves
Pick three to five details that fit your content. Using all of them turns minimal into busy.
! WARNING
Weak copy
Short, literal labels like "Battery 94%" fit this style. Hype words and exclamation marks break it fast.
Download

Beautiful designs in minutes.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →