← Back to Skills / Marketplace / hyper-minimal-dashboard
PRO

Hyper Minimal Dashboard.

Warm clay grounds, near-black ink, hairline modules and one giant number per view. Dashboards that stay calm even when they're full of data.

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

The Vibe

Hyper Minimal Dashboard brings the hyper minimal look to data-heavy screens. Warm clay grounds, near-black ink, hairline module grids, tiny uppercase labels and one giant light numeral per view. It feels like a precision instrument for your numbers, calm and easy to read even when there's a lot going on.

Looks Like
Dieter Rams and Braun hardware panelsTeenage Engineering product UISwiss print designFinancial terminals with the noise removedAnalog instrument dialsQuiet editorial data stories
About the Style

What is a hyper minimal dashboard?

A hyper minimal dashboard applies Braun and Teenage Engineering-style restraint to data. Each view uses a warm clay ground, near-black ink, hairline modules and one giant number that answers the main question, with supporting figures in small uppercase labels and simple instrument-style charts such as rings, tick meters and dials. The approach removes the noise of typical dashboards, like financial terminals with the clutter stripped out, so screens stay calm even when they are full. It suits sales and revenue dashboards, admin panels, internal tools and reporting screens. It is not built for color-coded alerts everywhere or for brands that depend on bright, loud energy.

Best For / Avoid If

＋ Best For
+Sales and revenue dashboards
+Admin panels and internal tools
+Analytics and reporting screens
+Finance, ops and SaaS metrics
+Any product where people look at numbers all day
× Avoid If
×Your dashboard needs color-coded alerts everywhere
×Your brand runs on bright color and loud energy
×You want dozens of charts on one screen, since this style keeps each view focused on one main number

Design Philosophy

One number leads

Every view has one giant, light numeral, like this month's revenue. Everything else stays small, so you always know where to look first.

Type does the work

Status comes from words and weight instead of colored badges. "Lost" in gray and "Won" in ink says everything you need.

Precise, never plain

Thin bar strokes, tick meters, rings and hairline tables make your data feel like readouts on a piece of hardware. No gridlines, no legend boxes, no clutter.

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
Showing everything at once
Dashboards tempt you to cram it all in. Pick one lead number per view and let modules and tables hold the rest.
! WARNING
Color for status
Red and green badges break the look fast. Use words, weight and one accent mark at most.
! WARNING
Chart clutter
Gridlines, legends, 3D bars and gradient fills all fight the style. Thin strokes and tiny axis labels are enough.
! WARNING
Cramped spacing
App screens run denser, but keep 20 to 24px inside every module and hairlines between them so it still breathes.
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 →