Minimal vs Refined

Awesome Design Skills · Awesome Design Skills

Tied at 3/5 on the same brief. Pick by fit: the rows below show where each one is stronger.

Both built the Tally landing page in the same Claude Code test, and both design the Minimalist way: white space, one accent, and the confidence to leave things out. Both are best for: visual direction.

Minimal3/5
After: Tally landing page, made with Minimal (Awesome Design Skills)
Refined3/5
After: Tally landing page, made with Refined (Awesome Design Skills)

Scroll either page; the other follows.

Minimal gives Tally lots of white space, a near-black and indigo palette on warm off-white, and big Inter headlines over Open Sans. The dashboard is mostly black and white, with indigo for the $640 and red for the over-budget envelope. It is calm and clean, but the mobile dashboard scrolls sideways. Pick it for products that want quiet, simple pages.

Refined gives Tally a quiet editorial page: Playfair Display headlines, JetBrains Mono figures, white and warm off-white with thin lines and one deep blue accent. The dashboard uses Playfair for big numbers and keeps color to blue and red. It is clean and calm, though it is a familiar look. Pick it for understated premium products.

Side by side

FieldMinimal (Awesome Design Skills)Refined (Awesome Design Skills)
Fonts
  • Inter
  • Open Sans
  • Inconsolata
  • Playfair Display
  • JetBrains Mono
  • Inter (dashboard)
Colors
  • #f4f4f1 off-white
  • #ffffff white
  • #0c0c09 near-black
  • #312c85 indigo
  • #16a34a green
  • #dc2626 red
  • #ffffff white
  • #f8f7f4 off-white
  • #1d4ed8 deep blue
  • #3b82f6 blue
  • #111827 ink
  • #e5e3de hairline
Pick it for
  • minimal SaaS
  • personal-finance apps
  • portfolio sites
  • calm dashboards
  • premium SaaS
  • personal-finance apps
  • editorial landing pages
  • calm dashboards
Skip it for
  • playful brands
  • image-led marketing
  • dark-mode products
  • playful brands
  • dark-mode products
  • dense admin tools
Observations
  • landing: the bright green buttons sit apart from the indigo and black palette
  • dashboard mobile: 465 px wide on a 390 px screen, so it scrolls sideways
  • close to many serif-plus-blue templates

How the brief works

Install Minimal (Awesome Design Skills)

1 Run in your terminal

npx degit bergside/awesome-design-skills/skills/minimal#main .claude/skills/minimal

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

This install is for Claude Code only; for other agents use Copy prompt or copy the skill folder.

Copies just this skill's folder into your project's .claude/skills.

Check the source for the latest instructions.

Install Refined (Awesome Design Skills)

1 Run in your terminal

npx degit bergside/awesome-design-skills/skills/refined#main .claude/skills/refined

2 Or paste a prompt into Claude Code, Codex, Cursor or Gemini

It tells your tool to install this from its source repository.

This install is for Claude Code only; for other agents use Copy prompt or copy the skill folder.

Copies just this skill's folder into your project's .claude/skills.

Check the source for the latest instructions.