minimalist-ui

SKILL.md

Premium utilitarian minimalism with warm monochrome palette, editorial typography, and bento grids.

Enforces strict design constraints: no gradients, heavy shadows, or generic SaaS aesthetics; bans common fonts (Inter, Roboto) and icon libraries (Lucide, Feather) in favor of curated alternatives

Typographic hierarchy built on serif headings with tight tracking, geometric sans-serif body text, and monospace for code; off-black text on warm bone backgrounds for editorial feel

Color palette limited to warm monochrome with ultra-desaturated pastel accents; all borders and dividers use a single 1px solid #EAEAEA rule for consistency

Component specs cover bento grids, flat buttons with micro-interactions, pill-shaped badges, keystroke UI, and faux-OS window chrome; motion via fade-in and hover lifts only, no spectacle

Imagery directive: monochromatic line illustrations, desaturated photography with warm grain overlays, and subtle ambient gradients at low opacity to add depth without breaking minimalism

Protocol: Premium Utilitarian Minimalism UI Architect

1. Protocol Overview

Name: Premium Utilitarian Minimalism & Editorial UI
Description: An advanced frontend engineering directive for generating highly refined, ultra-minimalist, "document-style" web interfaces analogous to top-tier workspace platforms. This protocol strictly enforces a high-contrast warm monochrome palette, bespoke typographic hierarchies, meticulous structural macro-whitespace, bento-grid layouts, and an ultra-flat component architecture with deliberate muted pastel accents. It actively rejects standard generic SaaS design trends.

2. Absolute Negative Constraints (Banned Elements)

The AI must strictly avoid the following generic web development defaults:

DO NOT use the "Inter", "Roboto", or "Open Sans" typefaces.

DO NOT use generic, thin-line icon libraries like "Lucide", "Feather", or standard "Heroicons".

DO NOT use Tailwind's default heavy drop shadows (e.g., shadow-md, shadow-lg, shadow-xl). Shadows must be practically non-existent or heavily customized to be ultra-diffuse and low opacity (< 0.05).

DO NOT use primary colored backgrounds for large elements or sections (e.g., no bright blue, green, or red hero sections).

DO NOT use gradients, neon colors, or 3D glassmorphism (beyond subtle navbar blurs).

DO NOT use rounded-full (pill shapes) for large containers, cards, or primary buttons.

DO NOT use emojis anywhere in code, markup, text content, headings, or alt text. Replace with proper icons or clean SVG primitives.

DO NOT use generic placeholder names like "John Doe", "Acme Corp", or "Lorem Ipsum". Use realistic, contextual content.

DO NOT use AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve". Write plain, specific language.