Protocol: Premium Utilitarian Minimalism UI Architect
Overview
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.
When to Use
- When designing clean, editorial, or Notion-like document interfaces, workspaces, or notes apps.
- When creating minimalist SaaS dashboards, personal essays, portfolios, or agency landing pages.
- When asked for a "clean", "minimalist", "warm monochrome", or "flat bento-box" layout.
Rules & Patterns
1. 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.
2. Typographic Architecture
The interface must rely on extreme typographic contrast and premium font selection to establish an editorial feel.
- Primary Sans-Serif (Body, UI, Buttons): Use clean, geometric, or system-native fonts with character (
'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif).
- Editorial Serif (Hero Headings & Quotes): (
'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif). Apply tight tracking (-0.02em to -0.04em) and tight line-height (1.1).
- Monospace (Code, Keystrokes, Meta-data): (
'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace).
- Text Colors: Body text must never be absolute black (
#000000). Use off-black/charcoal (#111111 or #2F3437) with a generous line-height of 1.6 for legibility. Secondary text should be muted gray (#787774).
3. Color Palette (Warm Monochrome + Spot Pastels)
Color is a scarce resource, utilized only for semantic meaning or subtle accents.
- Canvas / Background: Pure White
#FFFFFF or Warm Bone/Off-White #F7F6F3 / #FBFBFA.
- Primary Surface (Cards):
#FFFFFF or #F9F9F8.
- Structural Borders / Dividers: Ultra-light gray
#EAEAEA or rgba(0,0,0,0.06).
- Accent Colors: Exclusively use highly desaturated, washed-out pastels for tags, inline code backgrounds, or subtle icon backgrounds:
- Pale Red:
#FDEBEC (Text: #9F2F2D)
- Pale Blue:
#E1F3FE (Text: #1F6C9F)
- Pale Green:
#EDF3EC (Text: #346538)
- Pale Yellow:
#FBF3DB (Text: #956400)
4. Component Specifications
- Bento Box Feature Grids: Asymmetrical CSS Grid layouts. Cards have
border: 1px solid #EAEAEA, crisp border-radius (8px to 12px max), and generous internal padding (24px to 40px).
- Primary Call-To-Action (Buttons): Solid
#111111, text #FFFFFF, radius 4px to 6px, no box-shadow. Micro-scale transform: scale(0.98) on active.
- Tags & Status Badges: Pill-shaped (
rounded-full), small typography (text-xs), uppercase with wide tracking (0.05em), pastel background.
- Accordions (FAQ): Separated by
border-bottom: 1px solid #EAEAEA without card boxes. Crisp + / - toggle icons.
- Keystroke Micro-UIs:
<kbd className="border border-[#EAEAEA] rounded bg-[#F7F6F3] font-mono px-1.5 py-0.5 text-xs">.
5. Iconography & Imagery
- System Icons: Phosphor Icons (Bold/Fill) or Radix UI Icons for crisp, technical strokes.
- Photography: Desaturated images with warm tint and subtle grain overlay (
opacity: 0.04).
- Depth: Subtle ambient gradients (
radial-gradient with warm tones at opacity: 0.03) or minimal geometric line patterns.
6. Subtle Motion & Micro-Animations
- Scroll Entry: Fade-in +
translateY(12px) over 600ms via IntersectionObserver.
- Hover States: Subtle card lift with ultra-diffuse shadow (
0 2px 8px rgba(0,0,0,0.04)).
- Staggered Reveals: Cascading delay (
calc(var(--index) * 80ms)).
Code Examples
export function BentoFeatureCard({ title, description, badge, tagColor = "blue" }: { title: string; description: string; badge: string; tagColor?: string }) {
return (
<div className="bg-[#FFFFFF] border border-[#EAEAEA] rounded-xl p-8 hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)] transition-all duration-200">
<div className="flex items-center justify-between mb-4">
<span className="text-xs uppercase tracking-wider font-mono font-medium px-2.5 py-0.5 rounded-full bg-[#E1F3FE] text-[#1F6C9F]">
{badge}
</span>
</div>
<h3 className="font-serif text-2xl tracking-tight text-[#111111] mb-2">{title}</h3>
<p className="text-sm text-[#787774] leading-relaxed">{description}</p>
</div>
);
}
Validation Checklist
Common Mistakes
- Using heavy saturated primary colors for hero backgrounds.
- Adding default Tailwind drop-shadows (
shadow-lg).
- Cluttering interfaces with emojis instead of clean SVG icons.
- Using default Inter or Roboto fonts without editorial contrast.
Integration Notes
- Complements
ui-ux-pro for color tokens and accessibility.
- Integrates with
impeccable-design for QA and anti-pattern enforcement.
1---2name: minimalist-ui3description: Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.4---56# Protocol: Premium Utilitarian Minimalism UI Architect78## Overview910An 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.1112## When to Use1314- When designing clean, editorial, or Notion-like document interfaces, workspaces, or notes apps.15- When creating minimalist SaaS dashboards, personal essays, portfolios, or agency landing pages.16- When asked for a "clean", "minimalist", "warm monochrome", or "flat bento-box" layout.1718## Rules & Patterns1920### 1. Absolute Negative Constraints (Banned Elements)2122The AI must strictly avoid the following generic web development defaults:2324- DO NOT use the "Inter", "Roboto", or "Open Sans" typefaces.25- DO NOT use generic, thin-line icon libraries like "Lucide", "Feather", or standard "Heroicons".26- 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).27- DO NOT use primary colored backgrounds for large elements or sections (e.g., no bright blue, green, or red hero sections).28- DO NOT use gradients, neon colors, or 3D glassmorphism (beyond subtle navbar blurs).29- DO NOT use `rounded-full` (pill shapes) for large containers, cards, or primary buttons.30- DO NOT use emojis anywhere in code, markup, text content, headings, or alt text. Replace with proper icons or clean SVG primitives.31- DO NOT use generic placeholder names like "John Doe", "Acme Corp", or "Lorem Ipsum". Use realistic, contextual content.32- DO NOT use AI copywriting clichés: "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve". Write plain, specific language.3334### 2. Typographic Architecture3536The interface must rely on extreme typographic contrast and premium font selection to establish an editorial feel.3738- **Primary Sans-Serif (Body, UI, Buttons):** Use clean, geometric, or system-native fonts with character (`'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif`).39- **Editorial Serif (Hero Headings & Quotes):** (`'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif`). Apply tight tracking (`-0.02em` to `-0.04em`) and tight line-height (`1.1`).40- **Monospace (Code, Keystrokes, Meta-data):** (`'Geist Mono', 'SF Mono', 'JetBrains Mono', monospace`).41- **Text Colors:** Body text must never be absolute black (`#000000`). Use off-black/charcoal (`#111111` or `#2F3437`) with a generous line-height of `1.6` for legibility. Secondary text should be muted gray (`#787774`).4243### 3. Color Palette (Warm Monochrome + Spot Pastels)4445Color is a scarce resource, utilized only for semantic meaning or subtle accents.4647- **Canvas / Background:** Pure White `#FFFFFF` or Warm Bone/Off-White `#F7F6F3` / `#FBFBFA`.48- **Primary Surface (Cards):** `#FFFFFF` or `#F9F9F8`.49- **Structural Borders / Dividers:** Ultra-light gray `#EAEAEA` or `rgba(0,0,0,0.06)`.50- **Accent Colors:** Exclusively use highly desaturated, washed-out pastels for tags, inline code backgrounds, or subtle icon backgrounds:51 - Pale Red: `#FDEBEC` (Text: `#9F2F2D`)52 - Pale Blue: `#E1F3FE` (Text: `#1F6C9F`)53 - Pale Green: `#EDF3EC` (Text: `#346538`)54 - Pale Yellow: `#FBF3DB` (Text: `#956400`)5556### 4. Component Specifications5758- **Bento Box Feature Grids:** Asymmetrical CSS Grid layouts. Cards have `border: 1px solid #EAEAEA`, crisp border-radius (`8px` to `12px` max), and generous internal padding (`24px` to `40px`).59- **Primary Call-To-Action (Buttons):** Solid `#111111`, text `#FFFFFF`, radius `4px` to `6px`, no box-shadow. Micro-scale `transform: scale(0.98)` on active.60- **Tags & Status Badges:** Pill-shaped (`rounded-full`), small typography (`text-xs`), uppercase with wide tracking (`0.05em`), pastel background.61- **Accordions (FAQ):** Separated by `border-bottom: 1px solid #EAEAEA` without card boxes. Crisp `+` / `-` toggle icons.62- **Keystroke Micro-UIs:** `<kbd className="border border-[#EAEAEA] rounded bg-[#F7F6F3] font-mono px-1.5 py-0.5 text-xs">`.6364### 5. Iconography & Imagery6566- **System Icons:** Phosphor Icons (Bold/Fill) or Radix UI Icons for crisp, technical strokes.67- **Photography:** Desaturated images with warm tint and subtle grain overlay (`opacity: 0.04`).68- **Depth:** Subtle ambient gradients (`radial-gradient` with warm tones at `opacity: 0.03`) or minimal geometric line patterns.6970### 6. Subtle Motion & Micro-Animations7172- **Scroll Entry:** Fade-in + `translateY(12px)` over 600ms via `IntersectionObserver`.73- **Hover States:** Subtle card lift with ultra-diffuse shadow (`0 2px 8px rgba(0,0,0,0.04)`).74- **Staggered Reveals:** Cascading delay (`calc(var(--index) * 80ms)`).7576## Code Examples7778```tsx79export function BentoFeatureCard({ title, description, badge, tagColor = "blue" }: { title: string; description: string; badge: string; tagColor?: string }) {80 return (81 <div className="bg-[#FFFFFF] border border-[#EAEAEA] rounded-xl p-8 hover:shadow-[0_2px_8px_rgba(0,0,0,0.04)] transition-all duration-200">82 <div className="flex items-center justify-between mb-4">83 <span className="text-xs uppercase tracking-wider font-mono font-medium px-2.5 py-0.5 rounded-full bg-[#E1F3FE] text-[#1F6C9F]">84 {badge}85 </span>86 </div>87 <h3 className="font-serif text-2xl tracking-tight text-[#111111] mb-2">{title}</h3>88 <p className="text-sm text-[#787774] leading-relaxed">{description}</p>89 </div>90 );91}92```9394## Validation Checklist9596- [ ] Macro-whitespace established with generous vertical section padding (`py-24` to `py-32`).97- [ ] No pure black (`#000000`) for text or backgrounds.98- [ ] Borders use crisp `1px solid #EAEAEA` or `rgba(0,0,0,0.06)`.99- [ ] No generic AI buzzwords or emojis used in copy.100- [ ] Typography uses editorial serif headers paired with clean sans-serif body.101- [ ] Card corners constrained to crisp 8px-12px radius; no pill containers.102103## Common Mistakes104105- Using heavy saturated primary colors for hero backgrounds.106- Adding default Tailwind drop-shadows (`shadow-lg`).107- Cluttering interfaces with emojis instead of clean SVG icons.108- Using default Inter or Roboto fonts without editorial contrast.109110## Integration Notes111112- Complements `ui-ux-pro` for color tokens and accessibility.113- Integrates with `impeccable-design` for QA and anti-pattern enforcement.