Design Styles Easy

Minimalist UI

A stripped-back aesthetic built on generous whitespace, neutral palettes, and typographic hierarchy — nothing decorative, everything functional.

Open in Lab

html css

Targets: JS HTML

Code

/* ─────────────────────────────────────────────
   Minimalist UI — style.css
   Palette: white, off-white, near-black, single
   accent blue. No shadows. No gradients.
───────────────────────────────────────────── */

:root {
  --bg: #ffffff;
  --bg-subtle: #fafafa;
  --border: #e5e5e5;
  --text-primary: #111111;
  --text-secondary: #555555;
  --text-tertiary: #999999;
  --accent: #0066ff;
  --accent-hover: #0052cc;
  --badge-bg: #f5f5f5;
  --badge-text: #555555;

  --font: "Inter", system-ui, sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;

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

/* ── 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 {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

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

.brand {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

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

.header-nav a {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 0.15s;
}

.header-nav a:hover {
  color: var(--text-primary);
}

/* ── 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 {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  padding: var(--space-md);
}

/* ── Profile card ── */
.profile-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.profile-avatar {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-initials {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
}

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

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

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

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

.stat-value {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.stat-label {
  font-size: 11px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-divider {
  width: 1px;
  height: 28px;
  background: var(--border);
}

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

.section-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ── 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: 13px;
  font-weight: 500;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}

.btn-primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn-secondary {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--text-primary);
}

.btn-secondary:hover {
  background: var(--bg-subtle);
}

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

.btn-ghost:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

.field-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.field-input {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 8px 0;
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
}

.field-input::placeholder {
  color: var(--text-tertiary);
}

.field-input:focus {
  border-bottom-color: var(--text-primary);
}

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

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-size: 11px;
  font-weight: 500;
  border-radius: 2px;
  letter-spacing: 0.02em;
}

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

// Minimalist UI — script.js
// Subtle button press feedback and input focus state class toggling.

document.querySelectorAll(".btn").forEach((btn) => {
  btn.addEventListener("mousedown", () => {
    btn.style.opacity = "0.75";
  });
  btn.addEventListener("mouseup", () => {
    btn.style.opacity = "";
  });
  btn.addEventListener("mouseleave", () => {
    btn.style.opacity = "";
  });
});

// Add a small "Copied!" flash on primary button click
const primaryBtn = document.querySelector(".btn-primary");
if (primaryBtn) {
  const originalText = primaryBtn.textContent;
  primaryBtn.addEventListener("click", () => {
    primaryBtn.textContent = "Done ✓";
    primaryBtn.style.background = "#222";
    primaryBtn.style.borderColor = "#222";
    setTimeout(() => {
      primaryBtn.textContent = originalText;
      primaryBtn.style.background = "";
      primaryBtn.style.borderColor = "";
    }, 1200);
  });
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Minimalist UI</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=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- Header -->
  <header class="site-header">
    <div class="header-inner">
      <span class="brand">Minimal</span>
      <nav class="header-nav">
        <a href="#">Work</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </div>
  </header>

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

    <!-- Profile card -->
    <section class="card profile-card">
      <div class="profile-avatar" aria-hidden="true">
        <span class="avatar-initials">AK</span>
      </div>
      <div class="profile-info">
        <h2 class="profile-name">Anna Kovacs</h2>
        <p class="profile-role">Product Designer</p>
        <div class="profile-stats">
          <div class="stat">
            <span class="stat-value">142</span>
            <span class="stat-label">Projects</span>
          </div>
          <div class="stat-divider" aria-hidden="true"></div>
          <div class="stat">
            <span class="stat-value">38k</span>
            <span class="stat-label">Followers</span>
          </div>
          <div class="stat-divider" aria-hidden="true"></div>
          <div class="stat">
            <span class="stat-value">4.9</span>
            <span class="stat-label">Rating</span>
          </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">Get started</button>
        <button class="btn btn-secondary" type="button">Learn more</button>
        <button class="btn btn-ghost" type="button">Dismiss</button>
      </div>
    </section>

    <!-- Input section -->
    <section class="section">
      <h3 class="section-label">Input</h3>
      <div class="field">
        <label class="field-label" for="email">Email address</label>
        <input
          class="field-input"
          id="email"
          type="email"
          placeholder="you@example.com"
          autocomplete="email"
        />
      </div>
    </section>

    <!-- Badges section -->
    <section class="section">
      <h3 class="section-label">Tags</h3>
      <div class="badge-row">
        <span class="badge">Design</span>
        <span class="badge">Systems</span>
        <span class="badge">Typography</span>
        <span class="badge">Whitespace</span>
        <span class="badge">UX</span>
      </div>
    </section>

  </main>

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

Minimalist UI

Minimalism in interface design is the deliberate act of subtraction — removing every element that doesn’t earn its place. Born from the Bauhaus school and the “less is more” philosophy of architect Ludwig Mies van der Rohe, digital minimalism strips UI down to its functional skeleton: sharp type, open space, and a single restrained accent color. The result is interfaces that feel calm, trustworthy, and effortlessly readable.

The visual grammar is strict: a white or off-white ground, near-black text for maximum contrast, and borders so thin they read more as guides than boundaries. The only color — a single, considered accent — appears exclusively where action is required, making the primary CTA impossible to miss without ever shouting. Spacing is generous to the point of feeling extravagant; that tension is intentional. Whitespace is not empty — it is structure.

Typography does all the heavy lifting. Size, weight, and tracking replace decorative elements entirely. A well-chosen sans-serif at varied weights can convey hierarchy, tone, and even personality without a single icon or illustration.

Key characteristics

Pure white / off-white (#ffffff, #fafafa) backgrounds with zero gradients
Near-black body text (#111, #222) for maximum readability
Single accent color (#0066FF) reserved for primary actions only
1px borders in #e5e5e5 — never thicker, never colored
No box shadows, no drop shadows, no decorative effects
Extreme padding and margin — whitespace as a design element
Typographic hierarchy via weight and size, not color or ornament

When to use

SaaS dashboards where cognitive load must stay low
Documentation or reading-focused interfaces
Professional tools: dev tools, analytics, CMS editors
Any brand that needs to signal precision, restraint, or premium quality
Portfolios and personal sites where the work should speak louder than the wrapper