flat-minimal

name	Flat & Minimal
description	Content-first design with zero ornament. Clean typography, generous whitespace, and purposeful color. Use this for professional products, documentation, corporate sites, and premium brands that prioritize clarity and trust—think Apple, Stripe, high-end SaaS.

What is Flat & Minimal?

Flat & Minimal is a design philosophy rooted in Swiss International Style: clarity through restraint. Core tenets:

• Content hierarchy: Typography and whitespace do all the work; no decorative elements
• Zero embellishment: No shadows, no gradients, no textures—every pixel serves content
• Purposeful color: 1-2 accent colors max; rest is neutral (white, gray, black)
• Generous spacing: 32-64px padding between sections creates breathing room
• Legible iconography: Outlined strokes, consistent 2-3px weights, simple geometry
• Typography-driven: Large, clear headlines; comfortable body text; meticulous hierarchy

Historical context: Evolved from modernism and Swiss design (1950s-60s). Popularized by Dieter Rams ("Good Design is as Little Design as Possible"), adopted by Apple, Stripe, Vercel docs. Signals sophistication, trustworthiness, and design maturity.

Core Principles

1. No shadows, no gradients — Every effect must communicate function, not decoration
2. Strong typographic hierarchy — h1 (2.5-3rem), h2 (2rem), h3 (1.5rem), body (1-1.125rem, 1.5-1.75 line-height)
3. Generous whitespace — Minimum 32px padding on sections, 64px+ between major blocks
4. Limited color palette — Neutrals (white, light gray #F5F5F5, dark gray #333, black) + 1-2 accent colors
5. Outline iconography — 2-3px strokes, consistent sizing (16px-24px), never filled
6. High contrast text — Dark text on light (minimum 7:1 for body), never mid-gray on mid-gray
7. Purposeful borders — Only to separate distinct sections (1px #E5E5E5 max)

Visual Language

/* Flat & Minimal core values */

/* No shadows, no gradients */
box-shadow: none;
background: no-gradient;

/* Color palette */
--color-white: #FFFFFF;
--color-light-gray: #F5F5F5;
--color-neutral: #999999;
--color-dark-gray: #333333;
--color-black: #000000;
--color-accent: #0066CC; /* Or any single, purposeful accent */

/* Typography hierarchy */
h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 24px;
  color: #000000;
}

h2 {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 20px;
  color: #000000;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 16px;
  color: #000000;
}

body {
  font-size: 1rem;
  line-height: 1.6;
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Whitespace */
section {
  padding: 64px 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Minimal borders */
border: 1px solid #E5E5E5;
border-radius: 0px; /* Or 4-6px for subtle softness */

Component Patterns

Button (Minimal)

.btn-minimal {
  border: 1px solid #0066CC;
  background: transparent;
  color: #0066CC;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-minimal:hover {
  background: #0066CC;
  color: #FFFFFF;
}

.btn-minimal:active {
  opacity: 0.8;
}

/* Primary button (solid background) */
.btn-minimal-primary {
  border: 1px solid #0066CC;
  background: #0066CC;
  color: #FFFFFF;
}

.btn-minimal-primary:hover {
  background: #0052A3;
  border-color: #0052A3;
}

Card (Minimal)

.card-minimal {
  border: 1px solid #E5E5E5;
  background: #FFFFFF;
  padding: 40px;
  border-radius: 6px;
}

.card-minimal h3 {
  margin-top: 0;
  color: #000000;
}

.card-minimal p {
  color: #333333;
  line-height: 1.6;
}

Input Field (Minimal)

.input-minimal {
  border: 1px solid #E5E5E5;
  background: #FFFFFF;
  padding: 12px 16px;
  font-size: 1rem;
  font-family: inherit;
  color: #333333;
  transition: border-color 0.2s ease;
}

.input-minimal::placeholder {
  color: #999999;
}

.input-minimal:focus {
  outline: none;
  border-color: #0066CC;
  box-shadow: none; /* Minimal: no shadow on focus */
}

Navigation (Minimal)

.nav-minimal {
  border-bottom: 1px solid #E5E5E5;
  padding: 24px 0;
}

.nav-minimal ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 40px;
}

.nav-minimal a {
  font-size: 1rem;
  font-weight: 500;
  color: #333333;
  text-decoration: none;
  transition: color 0.2s ease;
}

.nav-minimal a:hover,
.nav-minimal a[aria-current="page"] {
  color: #0066CC;
}

Code Generation Guidance

When generating flat & minimal design:

1. Typography first — Establish hierarchy before adding any visual chrome
2. Color decision: Pick ONE accent color (#0066CC, #FF6B35, #10B981, etc.). Everything else is neutral.
3. Spacing formula:
   • Baseline unit: 8px
   • Content padding: 24-40px
   • Section spacing: 64px
   • Element gaps: 16-24px
4. Borders only to separate, never to decorate (1px #E5E5E5)
5. Avoid: Shadows, gradients, rounded corners >8px, opacity effects, textures
6. Buttons: Outline (transparent bg, colored border) or solid (colored bg, white text)
7. Icons: Outlined style, 2-3px stroke, consistent sizing (16px, 20px, 24px)

For React (Marketing Hero):

const MinimalHero = () => (
  <section style={{ padding: '96px 32px', textAlign: 'center' }}>
    <div style={{ maxWidth: '800px', margin: '0 auto' }}>
      <h1 style={{
        fontSize: 'clamp(2rem, 5vw, 3rem)',
        fontWeight: 700,
        lineHeight: 1.2,
        marginBottom: '24px',
        color: '#000000',
      }}>
        A Better Way to Work
      </h1>
      <p style={{
        fontSize: '1.125rem',
        lineHeight: 1.6,
        color: '#333333',
        marginBottom: '32px',
        maxWidth: '600px',
        margin: '0 auto 32px',
      }}>
        Simple, elegant tools designed for teams that move fast.
      </p>
      <button style={{
        border: '1px solid #0066CC',
        background: '#0066CC',
        color: '#FFFFFF',
        padding: '12px 32px',
        fontSize: '1rem',
        fontWeight: 600,
        cursor: 'pointer',
      }}>
        Get Started
      </button>
    </div>
  </section>
);

Accessibility Notes

• High contrast requirement: All text must meet WCAG AAA (7:1). Test #333 on #FFFFFF (21:1 ✓), #0066CC on #FFFFFF (8.6:1 ✓)
• Font sizing: Minimum 16px for body text; 1rem baseline is acceptable with proper line-height (1.6)
• Line height critical: 1.5-1.75 for body text improves readability; don't reduce below 1.5
• Focus states obvious: Outline on all interactive elements; can be simple (1-2px border color change)
• Icon meaning: Never rely on icon alone; always pair with text label or clear aria-label
• Whitespace as communication: 64px gaps signal section breaks; maintain consistency for predictability

Examples

Input: SaaS Pricing Section

Output (Flat & Minimal):

<section style={{ padding: '96px 32px', background: '#FFFFFF' }}>
  <div style={{ maxWidth: '1200px', margin: '0 auto' }}>
    <h2 style={{
      fontSize: '2.5rem',
      fontWeight: 700,
      lineHeight: 1.2,
      textAlign: 'center',
      marginBottom: '64px',
      color: '#000000',
    }}>
      Simple, Transparent Pricing
    </h2>
    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '32px' }}>
      {[
        { name: 'Starter', price: '$29', features: ['Up to 5 users', 'Basic analytics', 'Email support'] },
        { name: 'Pro', price: '$79', features: ['Unlimited users', 'Advanced analytics', 'Priority support'] },
        { name: 'Enterprise', price: 'Custom', features: ['Custom integrations', 'Dedicated support', 'SLA'] },
      ].map((tier) => (
        <div key={tier.name} style={{
          border: '1px solid #E5E5E5',
          padding: '40px',
          borderRadius: '6px',
        }}>
          <h3 style={{ fontSize: '1.25rem', fontWeight: 600, marginTop: 0, color: '#000000' }}>
            {tier.name}
          </h3>
          <p style={{ fontSize: '1.75rem', fontWeight: 700, color: '#000000', margin: '16px 0' }}>
            {tier.price}
          </p>
          <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0' }}>
            {tier.features.map((feature) => (
              <li key={feature} style={{ color: '#333333', lineHeight: 1.8 }}>
                ✓ {feature}
              </li>
            ))}
          </ul>
          <button style={{
            width: '100%',
            border: tier.name === 'Pro' ? '1px solid #0066CC' : '1px solid #E5E5E5',
            background: tier.name === 'Pro' ? '#0066CC' : 'transparent',
            color: tier.name === 'Pro' ? '#FFFFFF' : '#0066CC',
            padding: '12px 24px',
            fontSize: '1rem',
            fontWeight: 600,
            cursor: 'pointer',
            borderRadius: '6px',
          }}>
            Get Started
          </button>
        </div>
      ))}
    </div>
  </div>
</section>

Input: Feature List with Icons

Output (Flat & Minimal):

<section style={{ padding: '64px 32px' }}>
  <div style={{ maxWidth: '900px', margin: '0 auto' }}>
    <h2 style={{
      fontSize: '2rem',
      fontWeight: 700,
      marginBottom: '48px',
      color: '#000000',
    }}>
      Why Choose Us
    </h2>
    <div style={{ display: 'grid', gap: '40px' }}>
      {[
        { icon: '→', title: 'Fast Integration', desc: 'Connect in minutes, not months. Our API is clean and well-documented.' },
        { icon: '◆', title: 'Enterprise Ready', desc: 'Built for scale. Handle millions of requests without breaking a sweat.' },
        { icon: '⚙', title: 'Developer Friendly', desc: 'Clear documentation, SDKs in all major languages, responsive support.' },
      ].map((feature) => (
        <div key={feature.title} style={{ display: 'flex', gap: '24px' }}>
          <div style={{
            fontSize: '1.5rem',
            fontWeight: 700,
            color: '#0066CC',
            minWidth: '40px',
          }}>
            {feature.icon}
          </div>
          <div>
            <h3 style={{ fontSize: '1.125rem', fontWeight: 600, margin: '0 0 8px 0', color: '#000000' }}>
              {feature.title}
            </h3>
            <p style={{ color: '#333333', lineHeight: 1.6, margin: 0 }}>
              {feature.desc}
            </p>
          </div>
        </div>
      ))}
    </div>
  </div>
</section>