minimalist-ui

Apply a strict design protocol that bans default fonts like Inter and Roboto, heavy shadows, gradients, and clichéd copy. This Skill enforces warm monochrome palettes, editorial serif headings, and precise component rules so output reads as a refined document-style interface.

Body text uses geometric sans fonts such as SF Pro Display, Geist Sans, or Helvetica Neue. Hero headings use editorial serifs like Newsreader, Playfair Display, or Instrument Serif with tight tracking, and code uses Geist Mono or JetBrains Mono.

Yes, the protocol explicitly supports Tailwind alongside plain HTML, React, and Vue. It maps its rules to Tailwind conventions such as py-24 section spacing, max-w-4xl content widths, and custom color variables instead of default utility shadows.

Backgrounds use pure white or warm off-white like #F7F6F3, borders use #EAEAEA, and text uses off-black #111111 or muted gray #787774. Accents are limited to desaturated pastels such as pale blue #E1F3FE and pale yellow #FBF3DB for tags and badges.

Animations use only transform and opacity, triggered by IntersectionObserver rather than scroll listeners. Scroll entries fade in over 600ms with translateY(12px), lists stagger via animation-delay, and ambient background blobs run on fixed pointer-events-none layers.

Avoid it for products that need strong brand color expression, playful consumer aesthetics, or dense data-visualization interfaces. The protocol deliberately restricts color, iconography, and decoration, which suits editorial and workspace-style products but not marketing-heavy campaigns.