minimalism

Minimalism

"Less is more. Remove until nothing is left but the essential."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Extreme Whitespace: Margins and padding should be double what you initially think is appropriate.
2. Strict Typography: Rely on font weights and sizes to establish hierarchy, not colors or boxes.
3. Absence of Decor: No borders, no drop shadows, no background textures.

Visual DNA

• Colors: Best paired with Minimalist Slate or Modern Editorial palettes. Backgrounds must be absolute (pure or off-white/black).
• Typography: Sans-serif, geometric. (e.g., Inter, Helvetica Neue, SF Pro). Use extreme contrast in weights (Thin vs Black).
• Spacing: Use a generous baseline grid (e.g., multiples of 8px, heavily favoring 48px to 120px padding).

Web Implementation

• Use Flexbox/Grid with large gap properties.
• CSS Example:

.minimal-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 120px 24px;
  background-color: var(--bg-primary);
}
.minimal-title {
  font-size: 3rem;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: 48px;
}
.minimal-btn {
  background: transparent;
  border: 1px solid var(--text-primary);
  paddin