Minimalist Design Prompts

Design a minimalist portfolio website. Use a single-column layout, max-width 680px centered. Typography: system serif font for headings, system sans-serif for body, generous line-height (1.8). Color: only black text on white background, with a single accent color for links. Navigation: just 3-4 text links in the header. Project section: image + title + one-line description. Footer: just name and email. No borders, no shadows, no icons. Let the whitespace and typography do all the work.

Create a minimal blog layout with shadcn/ui. Single-column content area (max-w-2xl, centered). Header with site name (text only, no logo) and 3 nav links. Post list showing title, date, and a 2-line excerpt. Post page with large serif heading, metadata line, and prose content using the Tailwind Typography plugin. Footer with just copyright text. Entire palette: zinc-950 text, zinc-50 background, zinc-400 for muted text. No cards, no shadows, no decorative elements.

Build a minimalist note-taking app in Next.js. Design principles: single sans-serif font family (Inter), 4px base grid, only 3 colors (black, white, one muted gray), no box shadows, no rounded corners larger than 4px, 1px borders only where essential. Layout: narrow sidebar (200px) with text-only navigation, main editor area with generous padding (48px). Transitions: only opacity and transform, 200ms duration. Every element should feel purposeful and calm.

Generate a React component library with strict minimalist principles. Components: Page, Section, Heading, Text, Link, List, Image, Divider. Constraints: maximum 2 font sizes per component, no box shadows, no gradients, border-radius max 4px, only black/white/gray palette. Section spacing should follow a consistent scale (16, 32, 48, 64, 96px). Include a prose/article layout component optimized for long-form reading with comfortable line length (60-75 characters).

Design a minimalist landing page for a single hardware product. Structure: a text-only header (product name left, one Buy link right), a hero that is just the product photo on #fafafa with 120px of vertical padding, one headline at 40px medium weight in Suisse-style grotesque (Inter works), and a 18px #525252 paragraph capped at 55 characters per line. Below: a specs list as a two-column definition table with 1px #e5e5e5 row dividers and 20px row padding, then a single centered black CTA button (#111111, white text, no radius). No icons, no cards, no gradients. Total palette: #fafafa, #111111, #525252, #e5e5e5.

Create a minimalist pricing page with shadcn/ui. Two plans only, presented as side-by-side columns separated by a single 1px vertical zinc-200 divider — no cards, no borders around plans. Plan name 14px uppercase tracking-widest zinc-500, price 56px light weight zinc-950 with 16px /month suffix, features as a plain list with 12px gaps and en-dashes instead of check icons. One black button per plan (the free plan gets an outline button). Page: max-w-3xl centered, 96px top padding, background white. Add a single-line FAQ link at the bottom in zinc-500 underlined. Ensure focus states use a visible 2px zinc-950 outline.

Build a minimalist documentation site in Next.js. Left sidebar: 220px, text-only links at 14px, current page marked by weight (600) and color #111111 versus #737373 — no background pills. Content: max-w-2xl, 17px/1.75 body in a humanist sans, headings only two sizes (28px and 20px), code blocks in 14px JetBrains Mono on #f5f5f5 with no border and 4px radius. Links underlined with text-underline-offset 3px, one accent #2563eb used only for links. Spacing scale strictly 8/16/24/40/64px. Include keyboard-accessible skip-to-content link and a search input styled as a bare 1px-underline field.

Generate a minimalist mobile habit tracker screen as a React component. Background #ffffff, one accent #16a34a used solely for completed states. Header: the date in 15px #737373 over a 32px medium-weight greeting. Habit list: full-width rows 64px tall separated by 1px #f0f0f0 hairlines, each with habit name 17px #111111 and a 28px tap-to-complete circle outline that fills with the accent and a checkmark on completion (150ms ease-out scale). No cards, no shadows, no tab bar icons with labels removed — keep 11px labels under the 3 tab icons for accessibility. All touch targets at least 44px; completed state must also show a strikethrough so color is not the only indicator.