Architect Premium Minimalist UI
This skill directs frontend code toward a premium, editorial minimalist UI - warm monochrome palette, crisp 1px borders, bento grids, and quiet motion
Why it matters
Generate highly refined, ultra-minimalist web interfaces inspired by top-tier workspace products. This protocol enforces a specific aesthetic with warm monochrome palettes, bespoke typography, and meticulous whitespace, rejecting generic SaaS trends.
Outcomes
What it gets done
Design interfaces with a warm monochrome palette and muted pastel accents.
Implement editorial-style typographic hierarchies.
Generate code adhering to strict negative constraints (e.g., specific fonts, no gradients).
Structure layouts using bento-grid and generous whitespace.
Install
Add it to your toolbox
Run in your project directory:
curl -fsSL https://spark.entire.vc/get/ag-minimalist-ui | bash Overview
Protocol: Premium Utilitarian Minimalism UI Architect
This skill directs frontend code toward a premium, editorial minimalist UI - specifying exact fonts, warm monochrome colors, 1px border components, bento-grid layouts, and subtle IntersectionObserver-based motion - while explicitly banning generic SaaS defaults like heavy shadows, gradients, and AI-copywriting clichés. Use it when a project wants a refined, editorial minimalist aesthetic and can support a restrained palette without overriding an existing brand system. Validate scannability and accessibility (keyboard, screen reader) with real content rather than assuming the minimalist style is automatically accessible.
What it does
This skill ("Premium Utilitarian Minimalism & Editorial UI" protocol) directs frontend code generation toward highly refined, document-style interfaces resembling Notion or Linear, enforcing a warm monochrome palette, bespoke typography, generous macro-whitespace, bento-grid layouts, and an ultra-flat component architecture. It opens with a list of absolute negative constraints: no Inter/Roboto/Open Sans fonts, no generic thin-line icon sets (Lucide, Feather, Heroicons), no heavy Tailwind drop shadows (shadows must be near-invisible, opacity under 0.05), no bright primary-colored hero sections, no gradients/neon/glassmorphism, no pill-shaped large containers or buttons, no emojis anywhere, no generic placeholder content ("John Doe", "Lorem Ipsum"), and no AI-copywriting clichés ("Elevate", "Seamless", "Next-Gen").
Typography specifies a geometric sans body font (SF Pro Display/Geist Sans/Switzer), an editorial serif for headings (Newsreader/Playfair Display/Instrument Serif with tight -0.02em to -0.04em tracking), and a monospace for code/keystrokes (Geist Mono/JetBrains Mono), with body text never pure black (#111111/#2F3437 instead) and generous 1.6 line-height. The color system treats color as scarce: a warm off-white canvas (#F7F6F3/#FBFBFA), ultra-light gray borders (#EAEAEA), and only desaturated pastel accents (pale red/blue/green/yellow, each with a matching darker text color) for tags or subtle backgrounds.
/* Card spec */
border: 1px solid #EAEAEA;
border-radius: 8px to 12px max;
padding: 24px to 40px;
/* Scroll-entry animation */
transform: translateY(12px); opacity: 0;
/* resolves over 600ms, cubic-bezier(0.16, 1, 0.3, 1), via IntersectionObserver */
Component specs cover bento-box feature grids, primary CTA buttons (solid #111111 background, 4-6px radius, no shadow, subtle hover scale), pill-shaped tag/status badges using the pastel palette, border-only accordions (no container boxes), <kbd>-styled keystroke UI, and faux-OS window chrome for software mockups. Motion guidance keeps animation "invisible but present": scroll-entry fades via IntersectionObserver (never scroll-event listeners), subtle hover shadow/scale shifts, staggered list reveals, and an optional very slow ambient background gradient - animating only transform/opacity for performance, never layout-triggering properties.
When to use - and when NOT to
Use it when a project explicitly wants a refined, editorial, minimalist aesthetic in the style of premium workspace tools rather than a generic SaaS look. Per the skill's own limitations: minimalism can hide hierarchy in dense content, so scannability, contrast, and navigation clarity need validation with real content; it assumes the product can support a restrained palette and typography-led layout, so it should not override an established brand system without cause; and subtle motion/flat surfaces still need responsive, keyboard, and screen-reader verification in the actual target project rather than being assumed accessible by design.
Inputs and outputs
Input is a frontend task (HTML, React, Tailwind, or Vue) needing UI design direction. Output is code following the execution protocol: macro-whitespace established first, typography and color variables applied immediately, strict 1px border adherence, scroll-entry animations added, and visual depth added via subtle imagery/gradients rather than empty flat backgrounds.
Integrations
Applies to any frontend stack producing HTML/CSS - React, Vue, or Tailwind-based projects - specifying concrete font stacks, color hex values, and CSS animation techniques (IntersectionObserver, transform/opacity-only animation).
Who it's for
Frontend developers and designers building a premium, editorial-style minimalist interface who want concrete typography, color, component, and motion specifications rather than a vague "make it minimal" direction.
FAQ
Common questions
Discussion
Questions & comments · 0
Sign In Sign in to leave a comment.