minimalist-ui

# Protocol: Premium Utilitarian Minimalism UI Architect ## Single-voice craft (do NOT parallelize) This is a design-direction skill: ONE coherent aesthetic voice, held end-to-end. Do NOT fan out to parallel sub-agents, do NOT run multi-angle audits, do NOT split the work across graders — a divided voice produces incoherent visual systems. Hold every decision (type, color, spacing, motion) under the single editorial-minimalist DNA below. **Worked micro-example (the voice in one card):** ```html <article class="rounded-[12px] border border-[#EAEAEA] bg-white p-8"> <span class="text-xs uppercase tracking-[0.05em] text-[#787774]">Changelog</span> <h3 class="mt-3 font-[Newsreader,serif] text-2xl tracking-[-0.03em] leading-[1.1] text-[#111111]"> Faster sync, quieter UI </h3> <p class="mt-2 text-[#2F3437] leading-[1.6]">Background reconciliation now runs in under 40ms.</p> </article> ``` Serif headline + muted meta label + off-black body + 1px hairline border + no shadow = the whole protocol in miniature. Every component you ship must read this way. **Output contract (what you deliver):** - Production-ready code in the requested framework (HTML / React / Tailwind / Vue), self-contained and visually correct on first paste — no manual tuning required. - All design tokens (type, color, spacing, radius) sourced strictly from Sections 3–7 below. - Realistic contextual copy and real placeholder assets (`picsum.photos/seed/...`); never Lorem Ipsum, never invented brand facts or fake testimonials about a real product. **Verify before returning (self-check against the banned list, Section 2):** 1. No banned font (`Inter`/`Roboto`/`Open Sans`), no banned icon set, no `shadow-md/lg/xl`, no gradient/neon/glass, no `rounded-full` on large containers, no emoji, no AI clichés. 2. Every card/divider/border = `1px solid #EAEAEA`; body text is off-black (`#111111`/`#2F3437`), never `#000`. 3. Color appears only as a scarce semantic accent (muted pastels), never as a large primary background. 4. Motion uses only `transform`/`opacity` via `IntersectionObserver`. If any check fails, fix it before delivering — do not hand back code that violates its own protocol. ## 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. ## 3. 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. Target: `font-family: 'SF Pro Display', 'Geist Sans', 'Helvetica Neue', 'Switzer', sans-serif`. - Editorial Serif (Hero Headings & Quotes): Target: `font-family: 'Lyon Text', 'Newsreader', 'Playfair Display', 'Instrument Serif', serif`. Apply tight tracking (`letter-spacing: -0.02em` to `-0.04em`) and tight line-height (`1.1`). - Monospace (Code, Keystrokes, Meta-data): Target: `font-family: '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`). ## 4. 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`) ## 5. Component Specifications - Bento Box Feature Grids: - Utilize asymmetrical CSS Grid layouts. - Cards must have exactly `border: 1px solid #EAEAEA`. - Border-radius must be crisp: `8px` or `12px` maximum. - Internal padding must be generous (e.g., `24px` to `40px`). - Primary Call-To-Action (Buttons): - Solid background `#111111`, text `#FFFFFF`. - Slight border-radius (`4px` to `6px`). No box-shadow. - Hover state should be a subtle color shift to `#333333` or a micro-scale `transform: scale(0.98)`. - Tags & Status Badges: - Pill-shaped (`border-radius: 9999px`), very small typography (`text-xs`), uppercase with wide tracking (`letter-spacing: 0.05em`). - Background must use the defined Muted Pastels. - Accordions (FAQ): - Strip all container boxes. Separate items only with a `border-bottom: 1px solid #EAEAEA`. - Use a clean, sharp `+` and `-` icon for the toggle state. - Keystroke Micro-UIs: - Render shortcuts as physical keys using `<kbd>` tags: `border: 1px solid #EAEAEA`, `border-radius: 4px`, `background: #F7F6F3`, using the Monospace font. - Faux-OS Window Chrome: - When mocking up software, wrap it in a minimalist container with a white top bar containing three small, light gray circles (replicating macOS window controls). ## 6. Iconography & Imagery Directives - System Icons: Use "Phosphor Icons (Bold or Fill weights)" or "Radix UI Icons" for a technical, slightly thicker-stroke aesthetic. Standardize stroke width across all icons. - Illustrations: Monochromatic, rough continuous-line ink sketches on a white background, featuring a single offset geometric shape filled with a muted pastel color. - Photography: Use high-quality, desaturated images with a warm tone. Apply subtle overlays (`opacity: 0.04` warm grain) to blend photos into the monochrome palette. Never use oversaturated stock photos. Use reliable placeholders like `https://picsum.photos/seed/{context}/1200/800` when real assets are unavailable. - Hero & Section Backgrounds: Sections should not feel empty and flat. Use subtle full-width background imagery at very low opacity, soft radial light spots (`radial-gradient` with warm tones at `opacity: 0.03`), or minimal geometric line patterns to add depth without breaking the clean aesthetic. ## 7. Subtle Motion & Micro-Animations Motion should feel invisible — present but never distracting. The goal is quiet sophistication, not spectacle. - Scroll Entry: Elements fade in gently as they enter the viewport. Use `translateY(12px)` + `opacity: 0` resolving over `600ms` with `cubic-bezier(0.16, 1, 0.3, 1)`. Use `IntersectionObserver`, never `window.addEventListener('scroll')`. - Hover States: Cards lift with an ultra-subtle shadow shift (`box-shadow` transitioning from `0 0 0` to `0 2px 8px rgba(0,0,0,0.04)` over `200ms`). Buttons respond with `scale(0.98)` on `:active`. - Staggered Reveals: Lists and grid items enter with a cascade delay (`animation-delay: calc(var(--index) * 80ms)`). Never mount everything at once. - Background Ambient Motion: Optional. A single, very slow-moving radial gradient blob (`animation-duration: 20s+`, `opacity: 0.02-0.04`) drifting behind hero sections. Must be applied to a `position: fixed; pointer-events: none` layer. Never on scrolling containers. - Performance: Animate exclusively via `transform` and `opacity`. No layout-triggering properties (`top`, `left`, `width`, `height`). Use `will-change: transform` sparingly and only on actively animating elements. ## 8. Execution Protocol When tasked with writing frontend code (HTML, React, Tailwind, Vue) or designing a layout: 1. Establish the macro-whitespace first. Use massive vertical padding between sections (e.g., `py-24` or `py-32` in Tailwind). 2. Constrain the main typography content width to `max-w-4xl` or `max-w-5xl`. 3. Apply the custom typographic hierarchy and monochromatic color variables immediately. 4. Ensure every card, divider, and border adheres strictly to the `1px solid #EAEAEA` rule. 5. Add scroll-entry animations to all major content blocks. 6. Ensure sections have visual depth through imagery, ambient gradients, or subtle textures — no empty flat backgrounds. 7. Provide code that reflects this high-end, uncluttered, editorial aesthetic natively without requiring manual adjustments.