minimal

name	minimal
description	Activate when a user requests a warm editorial-style interface, a document-like UI, or a strictly minimal aesthetic with near-zero color and heavy reliance on typography and whitespace.
version	1
category	frontend-code
outputs	code

Minimal

Purpose

This skill generates interfaces modeled after document-style and editorial platforms: warm off-white grounds, typographic hierarchy as the primary structural tool, near-zero decorative color, generous whitespace, and flat bento-style layouts. Suited for writing tools, knowledge bases, editorial products, personal portfolios, and any project where the content — not the chrome — is the focus.

When to Activate

• User requests a "minimal," "document-like," "editorial," or "Notion-style" interface
• User wants an interface where typography and whitespace carry the entire design
• User explicitly wants no gradients, no heavy shadows, and no bright color accents
• The content type is primarily text: articles, documentation, notes, personal writing

When Not to Activate

• User wants a bold, colorful, or motion-rich interface (use frontend)
• User wants an industrial aesthetic (use brutalist)
• User wants a data-heavy dashboard with density > 7
• The project requires strong brand color expression

Core Principles

1. Typography does the layout work. Headlines at 3× or more body text size create structure without containers. Use two type families maximum: a refined geometric or humanist sans for UI, and optionally a modern serif for editorial headings or pull quotes. No decorative display fonts.

2. Color is a scarce resource. The palette is: warm off-white background, near-black body text, one set of ultra-muted pastel chips for semantic tagging (4 maximum), and neutral borders at very low opacity. Introduce no saturated accent unless the user's brand requires it.

3. Borders replace shadows. Structural edges use 1px solid at 6% opacity (rgba(0,0,0,0.06)). Shadows are functionally absent or so diffuse (spread 40px+, opacity < 0.04) that they register as depth only, not decoration.

4. Whitespace is the primary layout tool. Major sections use at minimum py-24 vertical padding in Tailwind. Constrain reading line length to 60–65 characters (max-w-[65ch]). Every element earns its presence — nothing fills space for visual completeness.

5. Bento grid structure. Feature or content grids use asymmetric CSS Grid with interior padding of at least 24px per card. Border-radius maximum 12px on cards; 4–6px on buttons. No rounded-full on large containers or primary buttons.

6. Motion is subtle. Scroll-entry animations use translateY(12px) opacity: 0 resolving over 600ms with a deceleration curve (cubic-bezier(0.16, 1, 0.3, 1)). Use IntersectionObserver, not scroll listeners. No auto-play, no infinite loops, no kinetic text effects. Hover states are micro-scale shifts only.

7. Accessible contrast despite near-monochrome palette. Body text near-black (#2F3437) on warm off-white (#F7F6F3) achieves approximately 13:1 contrast. Secondary text (muted gray in the #787774 range) must still meet 4.5:1 against the background. Verify with a contrast checker before delivering.

8. Sections need visual depth. Empty flat sections feel unfinished. Add one of: a full-width background image at 2–4% opacity, a radial warm-toned gradient at 3% opacity, or a subtle monochromatic noise texture on a fixed pseudo-element. Pure flat solid color sections are only acceptable for CTAs or footers.

Configuration

Parameter	Value	Default
BASE_TONE	#F7F6F3 (warm-white) / #FBFBFA (neutral-white) / #F5F0E8 (warm-cream)	#F7F6F3
TEXT_COLOR	Off-black range	#2F3437
SECONDARY_TEXT	Muted gray range	#787774
BORDER_OPACITY	0.04–0.10	0.06
CARD_RADIUS	4–12px	8px

Workflow

1. Establish the type pairing. Primary sans-serif (UI, body, buttons) from: Geist Sans, Switzer, Instrument Sans, or Helvetica Neue. Optional editorial serif (headings, pull quotes) from: Instrument Serif, Newsreader, or Fraunces. Apply tight tracking (-0.02em to -0.04em) and compressed line-height (1.1) to serif headings. Apply relaxed leading (1.6) to body text.

2. Set the color foundation. Background: #F7F6F3 or #FBFBFA. Body text: #111111–#2F3437. Secondary text: #787774. Borders: rgba(0,0,0,0.06). Pastel chips (optional, max 4 total): pale red, blue, green, yellow — all highly desaturated.

3. Build macro whitespace first. Before adding any components, set section padding to minimum py-24. Set content width to max-w-4xl or max-w-5xl. This prevents the instinct to fill space later.

4. Implement the bento layout. Asymmetric CSS Grid for feature areas. Cards: border: 1px solid rgba(0,0,0,0.06), border-radius: 8px, padding: 24px–40px. Shadow maximum: 0 2px 8px rgba(0,0,0,0.04).

5. Add background depth to key sections. Hero and primary feature sections should have: a low-opacity background image, a radial warm gradient, or a noise texture pseudo-element. Never leave these sections as pure flat color.

6. Implement motion. Scroll-entry: translateY(12px) + opacity: 0 → 600ms resolution, cubic-bezier(0.16, 1, 0.3, 1). Use IntersectionObserver. Stagger grid items: animation-delay: calc(var(--index) * 80ms).

7. Verify accessible contrast. Check primary and secondary text against their backgrounds. Check pastel chip text against chip backgrounds. All must meet 4.5:1.

8. Run Quality Gates.

Forbidden Patterns

Fonts: Inter, Roboto, Open Sans as primary typeface · more than 2 type families · decorative display fonts in body context

Colors: Pure #000000 text · saturated gradients on sections · neon or strongly saturated accents · warm and cool grays mixed in the same component

Shadows: Tailwind's default shadow-md, shadow-lg, shadow-xl · any box-shadow with opacity above 0.06 · colored outer glows

Layout: rounded-full on large containers or primary buttons · border-radius above 12px on cards · emoji anywhere in the interface

Sections: Hero or feature section with pure flat solid background and no depth treatment

Content: Lorem ipsum · "John Doe" / "Jane Smith" · "Acme Corp" / "Nexus" · AI copywriting clichés (Elevate, Seamless, Unleash, Next-Gen)

Output Requirements

• Semantic HTML throughout
• Custom property declarations for palette tokens at the top of the stylesheet or component
• All interactive elements have visible focus indicators
• Background depth applied to at least the hero section
• No placeholder content
• Apply complete behavior — no truncation

Quality Gates

• Two type families or fewer
• No saturated accents unless required by brand
• Secondary text meets 4.5:1 contrast against background
• No shadow above 0 2px 8px rgba(0,0,0,0.04)
• No rounded-full on containers or primary buttons
• Section padding minimum py-24 for major sections
• Content width constrained to max-w-4xl or max-w-5xl
• Hero and key sections have background depth (not pure flat color)
• Focus indicators visible on all interactive elements
• No emoji in the interface
• No placeholder content

Failure Modes

"Sterile flatness": Sections feel completely empty — text floating on a white void with no depth. Detection: no background treatment on hero or feature sections. Fix: add a low-opacity background image or subtle radial gradient to at least the hero and one feature section.

"Color drift": Pastel semantic chips multiply until the interface has 6+ accent colors. Detection: count all non-neutral colors used. Fix: remove all but 4 most essential semantic chips.

"Type weight collapse": All text uses only two weights (400 and 700) — hierarchy feels abrupt. Fix: introduce Medium (500) and SemiBold (600) for nuanced mid-level hierarchy.

"Padding neglect": Section spacing defaults to tight web-app values instead of the generous editorial rhythm this aesthetic requires. Detection: sections feel crowded when scrolling. Fix: audit all section padding values and enforce minimum py-24.

Response Format

Deliver complete, runnable code. Prepend a one-line comment at the top of each major file noting the type pairing and base tone selected. Apply complete behavior.