Clean Minimal Beige Light Mode vs shadcn/ui

Meng To · Stitch 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.

Clean Minimal Beige Light Mode3/5
After: Tally landing page, made with Clean Minimal Beige Light Mode (Meng To)
shadcn/ui3/5
After: Tally landing page, made with shadcn/ui (Stitch Skills)

Scroll either page; the other follows.

Clean Minimal Beige Light Mode (Meng To)

3/5

Clean Minimal Beige Light Mode keeps Tally soft and quiet: warm beige shells, Geist on the landing and Inter Tight on the dashboard, a muted sage accent and one dark panel for emphasis. It is closer to the default than most, but the sans type and calm grid set it apart. Pick it for understated products that want to feel calm.

shadcn/ui (Stitch Skills)

3/5

The shadcn/ui skill builds a neat, neutral shadcn-style Tally in Geist: white cards, zinc greys and one green brand color. It's tidy and consistent, but generic, and the mobile dashboard scrolls sideways. Pick it if you're building on shadcn and want that house style done right.

Side by side

FieldClean Minimal Beige Light Mode (Meng To)shadcn/ui (Stitch Skills)
Fonts
  • Geist (landing)
  • Geist Mono (landing)
  • Inter Tight (dashboard)
  • JetBrains Mono (dashboard)
  • Geist
  • Geist Mono
Colors
  • #f3eee6 beige
  • #f9f6f1 surface
  • #2a2620 ink
  • #5f7d5a sage
  • #b9774a clay
  • #2b2823 dark panel
  • #ffffff background
  • #18181b ink
  • #21976b green
  • #ea580c orange
  • #2563eb blue
Pick it for
  • calm consumer apps
  • wellness and lifestyle products
  • minimal SaaS
  • personal finance
  • React and shadcn projects
  • internal tools
  • SaaS dashboards
  • admin panels
Skip it for
  • bold or loud brands
  • dark-mode products
  • data-dense tools
  • brand-led marketing
  • distinct visual identity
  • editorial sites
Observations
  • beige and a sage accent keep it near the default palette
  • low contrast overall; some labels are faint
  • dashboard mobile: 628 px wide on a 390 px screen, so it scrolls sideways
  • looks like the shadcn defaults with a brand color

How the brief works

Install Clean Minimal Beige Light Mode (Meng To)

1 Run in your terminal

npx degit MengTo/Skills/agent-skills/web-design/clean-minimal-beige-light-mode#main .claude/skills/clean-minimal-beige-light-mode

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 shadcn/ui (Stitch Skills)

1 Run in your terminal

npx degit google-labs-code/stitch-skills/plugins/stitch-build/skills/shadcn-ui#main .claude/skills/shadcn-ui

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.