Material Design

Google's design language — elevation through shadows, bold color, responsive animations, and a structured 8px grid.

html css javascript

Targets: JS HTML

Code

/* ─────────────────────────────────────────────
   Material Design — style.css
   Elevation via shadows. Roboto. 8dp grid.
   Primary #6200EE, Secondary #03DAC6
───────────────────────────────────────────── */

:root {
  /* Color */
  --md-primary: #6200ee;
  --md-primary-variant: #3700b3;
  --md-secondary: #03dac6;
  --md-bg: #fafafa;
  --md-surface: #ffffff;
  --md-error: #b00020;
  --md-on-primary: #ffffff;
  --md-on-secondary: #000000;
  --md-on-bg: #000000;
  --md-on-surface: #000000;
  --md-divider: rgba(0, 0, 0, 0.12);

  /* Text emphasis */
  --md-text-high: rgba(0, 0, 0, 0.87);
  --md-text-medium: rgba(0, 0, 0, 0.6);
  --md-text-disabled: rgba(0, 0, 0, 0.38);

  /* Elevation shadows */
  --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.14), 0 2px 1px
    rgba(0, 0, 0, 0.12);
  --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.14), 0 3px 4px rgba(0, 0, 0, 0.12), 0 1px 5px
    rgba(0, 0, 0, 0.2);
  --elevation-4: 0 4px 5px rgba(0, 0, 0, 0.14), 0 1px 10px rgba(0, 0, 0, 0.12), 0 2px 4px
    rgba(0, 0, 0, 0.2);
  --elevation-8: 0 8px 10px rgba(0, 0, 0, 0.14), 0 3px 14px rgba(0, 0, 0, 0.12), 0 5px 5px
    rgba(0, 0, 0, 0.2);

  --font: "Roboto", system-ui, sans-serif;
  --radius: 4px;
  --radius-pill: 16px;

  /* 8dp grid */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s6: 48px;
  --s8: 64px;
}

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

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

/* ── App Bar ── */
.app-bar {
  background: var(--md-primary);
  box-shadow: var(--elevation-4);
  position: sticky;
  top: 0;
  z-index: 100;
}

.app-bar-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--s3);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.app-bar-title {
  font-size: 20px;
  font-weight: 500;
  color: var(--md-on-primary);
  letter-spacing: 0.005em;
}

.app-bar-nav {
  display: flex;
  gap: var(--s3);
}

.app-bar-nav a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.15s;
}

.app-bar-nav a:hover {
  color: rgba(255, 255, 255, 1);
}

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

/* ── Card (surface + elevation 2) ── */
.card {
  background: var(--md-surface);
  border-radius: var(--radius);
  box-shadow: var(--elevation-2);
  padding: var(--s3);
}

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

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

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

.profile-name {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.005em;
  margin-bottom: 2px;
}

.profile-role {
  font-size: 14px;
  color: var(--md-text-medium);
  margin-bottom: var(--s2);
}

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

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

.stat-value {
  font-size: 16px;
  font-weight: 500;
}

.stat-label {
  font-size: 12px;
  color: var(--md-text-medium);
  letter-spacing: 0.04em;
}

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

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

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 var(--s2);
  height: 36px;
  border: none;
  cursor: pointer;
  border-radius: var(--radius);
  transition: box-shadow 0.15s, background 0.15s;
  white-space: nowrap;
}

.btn-label {
  position: relative;
  z-index: 1;
}

/* Contained */
.btn-contained {
  background: var(--md-primary);
  color: var(--md-on-primary);
  box-shadow: var(--elevation-2);
}

.btn-contained:hover {
  box-shadow: var(--elevation-8);
}

/* Outlined */
.btn-outlined {
  background: transparent;
  color: var(--md-primary);
  border: 1px solid rgba(98, 0, 238, 0.5);
}

.btn-outlined:hover {
  background: rgba(98, 0, 238, 0.04);
  border-color: var(--md-primary);
}

/* Text */
.btn-text {
  background: transparent;
  color: var(--md-primary);
}

.btn-text:hover {
  background: rgba(98, 0, 238, 0.08);
}

/* Ripple */
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  transform: scale(0);
  animation: ripple-expand 0.5s linear;
}

@keyframes ripple-expand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ── Material Outlined Text Field ── */
.text-field-outlined {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  max-width: 320px;
  width: 100%;
}

.text-field-input {
  font-family: var(--font);
  font-size: 16px;
  color: var(--md-text-high);
  background: transparent;
  border: none;
  outline: none;
  padding: 12px 16px;
  height: 56px;
  position: relative;
  z-index: 1;
  width: 100%;
}

.text-field-input::placeholder {
  color: transparent;
}

/* Outline (fieldset trick) */
.text-field-outline {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(0, 0, 0, 0.38);
  border-radius: var(--radius);
  padding: 0 12px;
  pointer-events: none;
  transition: border-color 0.15s, border-width 0.15s;
  margin: 0;
}

.text-field-legend {
  font-size: 0; /* collapsed by default */
  line-height: 0;
  padding: 0;
  white-space: nowrap;
  transition: font-size 0.12s;
}

.text-field-legend span {
  padding: 0 2px;
}

/* Floating label */
.text-field-label {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--md-text-medium);
  pointer-events: none;
  transition: top 0.12s, font-size 0.12s, color 0.12s, transform 0.12s;
  z-index: 2;
  background: transparent;
}

/* Focused or filled state */
.text-field-input:focus + .text-field-label,
.text-field-input:not(:placeholder-shown) + .text-field-label {
  top: 0;
  transform: translateY(-50%) scale(0.75);
  transform-origin: left center;
  color: var(--md-primary);
  font-size: 12px;
  left: 13px;
}

.text-field-input:focus ~ .text-field-outline {
  border-color: var(--md-primary);
  border-width: 2px;
}

.text-field-input:focus + .text-field-label + .text-field-outline .text-field-legend,
.text-field-input:focus ~ .text-field-outline .text-field-legend {
  font-size: 12px;
}

.text-field-input:not(:placeholder-shown) ~ .text-field-outline .text-field-legend {
  font-size: 12px;
}

/* ── Chips ── */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

.chip {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  background: #e0e0e0;
  color: var(--md-text-high);
  font-size: 13px;
  font-weight: 400;
  border-radius: var(--radius-pill);
  letter-spacing: 0.01em;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .app-bar-inner {
    padding: 0 var(--s2);
  }
  .main {
    padding: var(--s6) var(--s2);
    gap: var(--s4);
  }
  .profile-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .app-bar-nav {
    gap: var(--s2);
  }
}

// Material Design — script.js
// Ripple effect on buttons with class .ripple

document.querySelectorAll(".ripple").forEach((el) => {
  el.addEventListener("click", function (e) {
    const rect = el.getBoundingClientRect();
    const size = Math.max(rect.width, rect.height) * 2;
    const x = e.clientX - rect.left - size / 2;
    const y = e.clientY - rect.top - size / 2;

    const wave = document.createElement("span");
    wave.className = "ripple-wave";
    wave.style.cssText = `
      width:  ${size}px;
      height: ${size}px;
      left:   ${x}px;
      top:    ${y}px;
    `;

    el.appendChild(wave);
    wave.addEventListener("animationend", () => wave.remove());
  });
});

// Contained button state toggle
const containedBtn = document.querySelector(".btn-contained");
if (containedBtn) {
  let active = false;
  containedBtn.addEventListener("click", () => {
    active = !active;
    containedBtn.querySelector(".btn-label").textContent = active ? "ACTIVE" : "CONTAINED";
    containedBtn.style.background = active ? "var(--md-secondary)" : "";
    containedBtn.style.color = active ? "var(--md-on-secondary)" : "";
  });
}

// Fix: Material floating label fieldset legend width sync
// The legend creates a gap in the border when floated.
// We toggle a class so CSS can widen the legend notch.
const inputs = document.querySelectorAll(".text-field-input");
inputs.forEach((input) => {
  const outline = input.closest(".text-field-outlined");
  const legend = outline && outline.querySelector(".text-field-legend");

  function updateNotch() {
    if (!legend) return;
    if (input.value.length > 0 || document.activeElement === input) {
      outline.classList.add("notched");
    } else {
      outline.classList.remove("notched");
    }
  }

  input.addEventListener("focus", updateNotch);
  input.addEventListener("blur", updateNotch);
  input.addEventListener("input", updateNotch);
  updateNotch();
});

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

  <!-- App bar (sticky header) -->
  <header class="app-bar">
    <div class="app-bar-inner">
      <span class="app-bar-title">Material</span>
      <nav class="app-bar-nav">
        <a href="#">Home</a>
        <a href="#">Library</a>
        <a href="#">Profile</a>
      </nav>
    </div>
  </header>

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

    <!-- Profile card (elevation 2) -->
    <section class="card profile-card">
      <div class="profile-avatar" aria-hidden="true">
        <span class="avatar-initials">JS</span>
      </div>
      <div class="profile-info">
        <h2 class="profile-name">Jordan Silva</h2>
        <p class="profile-role">UX Engineer</p>
        <div class="profile-stats">
          <div class="stat">
            <span class="stat-value">212</span>
            <span class="stat-label">Commits</span>
          </div>
          <div class="stat">
            <span class="stat-value">48</span>
            <span class="stat-label">Reviews</span>
          </div>
          <div class="stat">
            <span class="stat-value">4.7</span>
            <span class="stat-label">Score</span>
          </div>
        </div>
      </div>
    </section>

    <!-- Buttons section -->
    <section class="section">
      <h3 class="section-label">Actions</h3>
      <div class="button-row">
        <button class="btn btn-contained ripple" type="button">
          <span class="btn-label">Contained</span>
        </button>
        <button class="btn btn-outlined ripple" type="button">
          <span class="btn-label">Outlined</span>
        </button>
        <button class="btn btn-text ripple" type="button">
          <span class="btn-label">Text</span>
        </button>
      </div>
    </section>

    <!-- Input section (Material outlined text field) -->
    <section class="section">
      <h3 class="section-label">Text field</h3>
      <div class="text-field-outlined">
        <input
          class="text-field-input"
          id="username"
          type="text"
          placeholder=" "
          autocomplete="username"
        />
        <label class="text-field-label" for="username">Username</label>
        <fieldset class="text-field-outline" aria-hidden="true">
          <legend class="text-field-legend"><span>Username</span></legend>
        </fieldset>
      </div>
    </section>

    <!-- Chips section -->
    <section class="section">
      <h3 class="section-label">Chips</h3>
      <div class="chip-row">
        <span class="chip">Material</span>
        <span class="chip">Google</span>
        <span class="chip">Elevation</span>
        <span class="chip">Ripple</span>
        <span class="chip">8dp Grid</span>
      </div>
    </section>

  </main>

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

Material Design

Material Design, introduced by Google at I/O 2014, is a comprehensive design system rooted in a single powerful metaphor: the interface behaves like sheets of physical paper stacked in a lit environment. Paper casts shadows. Paper has surface color. Paper sits at a specific elevation, and that elevation is communicated through a precise, mathematically defined shadow system. Interactions leave ripples — physical traces of contact that confirm every touch or click.

The system is built on a strict 8dp baseline grid that governs spacing, component sizing, and layout margins. Typography follows a typescale derived from Roboto — Google’s geometric humanist sans-serif — with tightly defined role names (Display, Headline, Title, Body, Label) and corresponding sizes, weights, and line heights. Color is guided by the Material color system: a primary hue, a secondary/accent hue, and a surface/background color, each with light/dark variants for on-color text.

Animation in Material is purposeful and physics-informed: elements don’t simply appear or fade — they move along arcs, accelerate from rest, and decelerate to a stop. The ripple effect (a radial ink spread on touch) is the system’s signature micro-interaction, providing tactile feedback on every interactive surface.

Key characteristics

Elevation expressed via layered box-shadow — 5 defined elevation levels
Primary color #6200EE (Material Purple), secondary #03DAC6 (Teal)
Roboto font family throughout
Strict 8dp spacing grid — all padding/margin in multiples of 8px
Buttons: border-radius: 4px, uppercase text, letter-spacing: 0.08em
Ripple effect on interactive elements via injected <span> + CSS animation
Material outlined text field with floating label on focus/fill
Chips: #E0E0E0 pill with dark text, border-radius: 16px

When to use

Android apps and web apps targeting Android/Google ecosystem users
Productivity tools, admin panels, and dashboards following Google’s design language
Projects requiring a proven, accessible, and well-documented component system
Any context where familiar, trustworthy UI patterns reduce friction