Minimal Whimsy Style Review

Style review notes for UI/design work. Use when reviewing or implementing visual style, layout, components, typography, icons, cards, themes, or dark mode. Bias toward minimal, simple interfaces with a slight note of whimsy.

mikker Updated

File contents

Minimal Whimsy Style Review

Use this lens when reviewing or implementing UI.

Principles

  • Keep the style minimal, simple, and lightly whimsical.
  • Use no more elements than necessary.
  • Avoid duplicate heading stacks: no eyebrow + heading + repeated section title saying the same thing.
  • Avoid “eyebrow” elements: no small-font, all-caps labels above headings.
  • Actively find and remove “boxes inside boxes” card/panel stacks.
  • Keep typography restrained: minimal fonts, sizes, and weights. If two can do, use two.
  • Icons are good, but use them sparingly and deliberately.
  • Prefer existing style variables/tokens whenever applicable.
  • Always consider dark mode where applicable.

Review checklist

  • Can any wrapper, border, shadow, label, or nested panel be removed?
  • Does the page rely on hierarchy instead of decoration?
  • Are font choices and weights doing only necessary work?
  • Are icons helping recognition, not adding noise?
  • Are colors, spacing, radii, and shadows using project vars/tokens?
  • Does the design still feel intentional in dark mode?

mikker/dotfiles/tree/main/agents.symlink/skills/minimal-whimsy-style-review commit 3d6e004210

Frequently asked questions

npx skillmds@latest add mikker/minimal-whimsy-style-review