---
name: forge-minimalist
description: Editorial product UI register. Restrained palette (3 colors), crisp structure, generous whitespace, single accent moment, type carries the entire weight. Notion / Linear / Vercel / Stripe vibe at the editorial end. Contains ready-to-paste palettes, type stack, component patterns. Use when the brief is "calm, expensive, restrained, mostly black and white." Mutex with `forge-brutalist` and `forge-soft`.
license: MIT
---
# forge-minimalist
You are designing in the minimalist register. Default agent attempts at "minimalist" produce washed-out beige UIs with three near-identical greys and a single emoji as personality. Real minimalism is harder: every element earns its presence, the palette is deliberate, type carries the entire visual weight. This skill exists to do it correctly.
The mental model: **minimalism is reduction, not absence.** You remove until removing more would lose meaning, then stop. Remaining elements are exact.
## Quick reference (the things you must never ship)
1. More than three distinct hue families.
2. The accent color covering >5% of pixels.
3. Pure `#FFFFFF` on pure `#000000`.
4. Foreground text contrast under 7:1 for primary.
5. Default Inter at default tracking on every heading.
6. Gradient backgrounds of any kind.
7. Drop shadow on every card uniformly heavy.
8. Section vertical padding under 5rem.
9. Centered single-column layout (default AI move).
10. Colorful icon set mixed with monochrome design.
## Hard rules
### Palette
**1. Three colors total. No more.** Background, foreground, one accent. Greys count as colors when they read as colors (cool vs warm grey are different).
**2. Accent appears in fewer than 5% of pixels.** If accent dominates, the register is no longer minimal - it is brand-led. Reserve accent for active state, primary CTA, selection.
**3. Backgrounds near-white or near-black, not pure.** `#FAFAFA`, `#F9F9F7`, `#0B0E13`, `#111114`. Pure `#FFFFFF` and `#000000` read default.
**4. Foreground text contrast: 12:1 or better for primary, 7:1 for secondary.** Lower is insufficient care, not design choice.
**5. No gradients on backgrounds.** A solid color is more confident.
### Canonical palettes
```
EDITORIAL WHITE
--bg: #FAFAFA
--fg: #1A1A1A
--fg-dim: #5C5854
--fg-mute: #ACA9A4
--accent: #FF5C2B /* warm orange-red */
--line: #E8E5E0
EDITORIAL OFF-BLACK
--bg: #0B0E13
--fg: #F4F2EE
--fg-dim: #A39C95
--accent: #FF7A45
--line: rgba(244, 242, 238, 0.10)
LINEAR-STYLE COOL
--bg: #0B0E13
--fg: #F4F4F2
--accent: #5E6AD2 /* deep blue */
PURE MONOCHROME
--bg: #FFFFFF /* or #0A0A0A */
--fg: #1A1A1A /* or #FFFFFF */
--fg-mute: #8A8A8A
--accent: none /* even more restrained */
```
### Typography
**6. One display face and one body face. They can be the same.** Editorial minimalism often uses a single high-quality sans for both (Söhne, GT America, Inter Display) at varying weights.
```css
:root {
--font-display: "Söhne", "GT America", "Inter Display", "Inter", sans-serif;
--font-body: "Inter", system-ui, sans-serif;
/* often: same family for both */
}
```
**7. Type is the visual.** When you remove ornament, type carries the entire register. Choose a face with character: sharp terminal, tight aperture, distinctive numeral.
**8. Type scale geometric, 5-7 steps.** 1.25x or 1.333x ratio. Memorize the steps; use only those.
```css
:root {
--text-xs: 0.75rem; /* 12 */
--text-sm: 0.875rem; /* 14 */
--text-base: 1.0625rem; /* 17 */
--text-lg: 1.25rem; /* 20 */
--text-xl: 1.5rem; /* 24 */
--text-2xl: 2rem; /* 32 */
--text-3xl: 3rem; /* 48 */
--text-4xl: clamp(4rem, 6vw, 7rem);
}
```
**9. Tracking per size.** Display gets tight (-0.02em to -0.04em). Body stays at default. Captions get loose (+0.04em).
**10. Line height: 1.5-1.7 for body, 1.05-1.15 for display.**
**11. No more than three weights per page.** Often two: regular + medium, or regular + semibold.
### Whitespace
**12. Section padding LARGE.** 6rem-10rem vertical between major sections. Cramped spacing is the single largest tell of "trying to be minimal but failing."
**13. Container max-width conservative.** 720px for prose, 1200px for grids. Wide layouts dilute the editorial feel.
**14. Negative space is a positive design element.** If you fill because it looks "empty," you misunderstood the register. Empty is correct.
**15. One-column layouts beat two-column for content.** Reserve multi-column for grids of equivalent items.
### Components
**16. Buttons: solid fill in accent (primary) or border-only (secondary).** No drop shadows. No gradients. No icon-button-without-label unless space genuinely constrained.
```tsx
// primary
// secondary
```
**17. Cards: thin 1px border in low-contrast grey, no shadow.** Or no border and rely on whitespace.
**18. Inputs: subtle bottom border or full thin border.** Focus state: change accent, not border weight.
**19. Tables: visible only when scanning is the primary task. Otherwise prose.**
### Iconography
**20. Hairline icons, single stroke weight, monochrome.** Lucide, Phosphor, Tabler at thinnest weight.
**21. Icons appear sparingly.** If every label has an icon, you have decoration not signal.
### Motion
**22. Subtle, almost imperceptible.** Transitions 150-200ms ease-out. Larger movements 300-400ms.
**23. No spring animations in minimalist register.** Springs read playful; minimalism is restrained.
**24. Page transitions: fades only.** Slides and morphs are too much.
## Common AI-output patterns to reject
| Pattern | Why off-register | Fix |
| --- | --- | --- |
| 5 greys + 3 blues + 1 beige labeled "minimal" | Color sprawl | 3 colors total |
| `#FFFFFF` + `#000000` | Default, not designed | Near-white + near-black |
| `from-gray-100 to-gray-50` | Filling empty | Solid color, embrace whitespace |
| `text-4xl font-bold` hero | Too small | clamp(3rem, 5vw, 6rem), weight 500 |
| Colorful icons + monochrome design | Inconsistent | Monochrome icons, single weight |
| `rounded-full` buttons | 2023 capsule | `rounded-md` (4-8px) or square |
| 2rem section padding | Cramped | 6-10rem vertical |
| `bg-gradient-to-r` accent | Decorative | Solid accent, sparingly |
| Spring bounce on hover | Playful | 180ms ease-out, brightness up 5% |
| Multiple display fonts | Personality sprawl | One face for whole page |
## Worked example: minimalist landing hero
```tsx
export function MinimalistHero() {
return (
The journal app for thinking out loud.
One file per day. Plain markdown. No folders, no databases, no syncing-of-syncing.
Just notes, in order, forever.