# Minimalist Design

> Clean editorial-style interfaces with warm monochrome palettes and flat bento grids.

- Skill: `kok-o/minimalist-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kok-o/minimalist-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kok-o/minimalist-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: kok-o (https://skillmd.com/u/kok-o)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kok-o/minimalist-design

---

# 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

```tsx
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

- [ ] Macro-whitespace established with generous vertical section padding (`py-24` to `py-32`).
- [ ] No pure black (`#000000`) for text or backgrounds.
- [ ] Borders use crisp `1px solid #EAEAEA` or `rgba(0,0,0,0.06)`.
- [ ] No generic AI buzzwords or emojis used in copy.
- [ ] Typography uses editorial serif headers paired with clean sans-serif body.
- [ ] Card corners constrained to crisp 8px-12px radius; no pill containers.

## 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.