minimalist-ui

Apply a strict design protocol that bans default fonts like Inter and Roboto, heavy Tailwind shadows, gradients, and clichéd copy. This Skill enforces warm monochrome palettes, editorial serif headings, and flat bento-grid layouts for a distinctive document-style aesthetic.

It mandates off-black text (#111111), warm bone backgrounds (#F7F6F3), 1px #EAEAEA borders, 8-12px border-radius on cards, muted pastel accents for tags, and generous macro-whitespace. It bans gradients, pill-shaped containers, emojis, and placeholder text like Lorem Ipsum.

It targets Geist Sans or Helvetica Neue for body text, Newsreader or Playfair Display for editorial headings, and Geist Mono or JetBrains Mono for code. For icons it specifies Phosphor Icons in bold or fill weights, or Radix UI Icons, avoiding Lucide and Feather.

Yes, the protocol is designed for HTML, React, Tailwind, and Vue output. It maps rules to Tailwind conventions like py-24 section padding, max-w-4xl content widths, and text-xs uppercase tags, while restricting default utilities like shadow-lg and rounded-full.

Animations use only transform and opacity properties, triggered by IntersectionObserver rather than scroll listeners. Scroll entries use translateY(12px) with a 600ms cubic-bezier ease, and staggered reveals apply per-item animation delays.

Avoid it when a project requires vibrant brand colors, playful illustration-heavy styles, or dense data-visualization dashboards where strict monochrome limits hurt usability. It suits editorial sites, portfolios, and productivity-tool interfaces rather than consumer marketing pages.