Flat Design

Bold, solid colors with zero shadows or depth — crisp geometry and strong iconography-driven interfaces.

html css

Targets: JS HTML

Code

/* ─────────────────────────────────────────────
   Flat Design — style.css
   Zero shadows. Zero gradients. Bold geometry.
   Palette: coral, teal, yellow, near-black, near-white
───────────────────────────────────────────── */

:root {
  --coral: #ff6b6b;
  --coral-dark: #e85555;
  --teal: #4ecdc4;
  --teal-dark: #3ab7af;
  --yellow: #ffe66d;
  --yellow-dark: #f5d84a;
  --dark: #292f36;
  --white: #f7fff7;
  --bg: #f7fff7;

  --text-primary: #292f36;
  --text-secondary: #555d63;
  --text-on-color: #ffffff;

  --font: "Nunito", system-ui, sans-serif;
  --radius-pill: 999px;
  --radius-md: 12px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 56px;
  --space-xl: 72px;
}

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ── Header ── */
.site-header {
  background: var(--dark);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  font-size: 18px;
  font-weight: 800;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.02em;
}

.brand-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--coral);
}

.header-nav {
  display: flex;
  gap: var(--space-sm);
}

.header-nav a {
  font-size: 13px;
  font-weight: 700;
  color: rgba(247, 255, 247, 0.65);
  text-decoration: none;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  transition: background 0.15s, color 0.15s;
}

.header-nav a:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--white);
}

/* ── Main layout ── */
.main {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* ── Card ── */
.card {
  background: #ffffff;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.card-accent-bar {
  height: 6px;
  background: var(--coral);
}

.card-body {
  padding: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* ── Profile card ── */
.profile-avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-initials {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-on-color);
  letter-spacing: -0.01em;
}

.profile-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}

.profile-role {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.profile-stats {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-value {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.stat-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ── Section ── */
.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ── Buttons ── */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  padding: 11px 24px;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}

.btn:active {
  transform: scale(0.96);
}

.btn-primary {
  background: var(--coral);
  color: var(--text-on-color);
}

.btn-primary:hover {
  background: var(--coral-dark);
}

.btn-secondary {
  background: var(--teal);
  color: var(--text-on-color);
}

.btn-secondary:hover {
  background: var(--teal-dark);
}

.btn-ghost {
  background: transparent;
  color: var(--dark);
  border: 2px solid var(--dark);
}

.btn-ghost:hover {
  background: var(--dark);
  color: var(--white);
}

/* ── Input ── */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}

.field-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.field-input {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  background: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: var(--radius-md);
  padding: 10px 16px;
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
}

.field-input::placeholder {
  color: #b0b0b0;
}

.field-input:focus {
  border-color: var(--teal);
}

/* ── Badges ── */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  font-family: var(--font);
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  letter-spacing: 0.02em;
  color: var(--text-on-color);
}

.badge-coral {
  background: var(--coral);
}
.badge-teal {
  background: var(--teal);
}
.badge-yellow {
  background: var(--yellow);
  color: var(--dark);
}
.badge-dark {
  background: var(--dark);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .header-inner {
    padding: 14px var(--space-sm);
  }
  .main {
    padding: var(--space-lg) var(--space-sm);
    gap: var(--space-md);
  }
  .card-body {
    flex-direction: column;
    align-items: flex-start;
  }
  .header-nav {
    gap: 4px;
  }
  .header-nav a {
    padding: 6px 10px;
  }
}

// Flat Design — script.js
// Bouncy press feedback on buttons.

document.querySelectorAll(".btn").forEach((btn) => {
  btn.addEventListener("click", () => {
    btn.style.transform = "scale(0.93)";
    setTimeout(() => {
      btn.style.transform = "";
    }, 150);
  });
});

// Toggle follow state on primary button
const followBtn = document.querySelector(".btn-primary");
if (followBtn) {
  let following = false;
  followBtn.addEventListener("click", () => {
    following = !following;
    followBtn.textContent = following ? "Following ✓" : "Follow";
    followBtn.style.background = following ? "#4ecdc4" : "";
  });
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Flat Design</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- Header -->
  <header class="site-header">
    <div class="header-inner">
      <span class="brand">
        <span class="brand-dot" aria-hidden="true"></span>
        Flatly
      </span>
      <nav class="header-nav">
        <a href="#">Explore</a>
        <a href="#">Create</a>
        <a href="#">Share</a>
      </nav>
    </div>
  </header>

  <!-- Main content -->
  <main class="main">

    <!-- Profile card -->
    <section class="card profile-card">
      <div class="card-accent-bar" aria-hidden="true"></div>
      <div class="card-body">
        <div class="profile-avatar" aria-hidden="true">
          <span class="avatar-initials">MR</span>
        </div>
        <div class="profile-info">
          <h2 class="profile-name">Marco Rivera</h2>
          <p class="profile-role">Creative Director</p>
          <div class="profile-stats">
            <div class="stat">
              <span class="stat-value">89</span>
              <span class="stat-label">Projects</span>
            </div>
            <div class="stat">
              <span class="stat-value">21k</span>
              <span class="stat-label">Likes</span>
            </div>
            <div class="stat">
              <span class="stat-value">4.8</span>
              <span class="stat-label">Rating</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Buttons section -->
    <section class="section">
      <h3 class="section-label">Actions</h3>
      <div class="button-row">
        <button class="btn btn-primary" type="button">Follow</button>
        <button class="btn btn-secondary" type="button">Message</button>
        <button class="btn btn-ghost" type="button">Dismiss</button>
      </div>
    </section>

    <!-- Input section -->
    <section class="section">
      <h3 class="section-label">Search</h3>
      <div class="field">
        <label class="field-label" for="search">Find creators</label>
        <input
          class="field-input"
          id="search"
          type="text"
          placeholder="Search by name or tag…"
          autocomplete="off"
        />
      </div>
    </section>

    <!-- Badges section -->
    <section class="section">
      <h3 class="section-label">Categories</h3>
      <div class="badge-row">
        <span class="badge badge-coral">Illustration</span>
        <span class="badge badge-teal">Motion</span>
        <span class="badge badge-yellow">Branding</span>
        <span class="badge badge-dark">3D Art</span>
        <span class="badge badge-coral">Type</span>
      </div>
    </section>

  </main>

  <script src="script.js"></script>
</body>
</html>

Flat Design

Flat design emerged as a direct reaction to the skeuomorphic excess of early smartphones — a visual reset that stripped out gradients, drop shadows, textures, and bevels in favor of solid geometry, bold palettes, and crisp two-dimensional form. Microsoft’s Metro UI (2010) and Apple’s iOS 7 redesign (2013) popularized the aesthetic globally, and it quickly became the dominant language of digital interfaces for most of the decade that followed.

The design vocabulary is deliberately reduced: every element is a pure geometric shape. Avatars are perfect circles. Buttons are pills or rectangles filled with opaque, saturated color. Navigation bars are flat colored bands. Cards sit on flat backgrounds without casting any shadow — depth is communicated through color blocking rather than elevation. The palette is equally decisive: two or three strong hues doing all the expressive work, never muddied by tinting or transparency effects.

Typography in flat design tends toward rounded, friendly sans-serifs (Nunito, Poppins, Varela Round) that echo the softness of pill-shaped UI elements, though bolder geometric options (Futura-adjacent) also fit the vocabulary. The key is confidence — flat design does not hedge or qualify; every element has a clear, bold statement to make.

Key characteristics

Zero shadows, zero gradients, zero blur or glow effects
Bold solid color fills — palette of 3–4 decisive hues
Perfect geometric shapes: circles, pills, rectangles
Vibrant but controlled palette: coral, teal, yellow, near-black
Rounded sans-serif typography (Nunito / Poppins)
Color alone carries hierarchy and differentiation
Bright solid-color badges and chips with white text

When to use

Consumer apps targeting general audiences — clear, friendly, accessible
Onboarding flows and landing pages where energy and optimism matter
Mobile-first interfaces where flat rendering improves performance
Kids’ apps, health apps, and any context requiring approachable warmth
Infographics and data visualization contexts