Design Styles Easy

Dark Blue

A deep navy and midnight-blue palette — professional, trustworthy, and atmospheric, perfect for SaaS products and dashboards.

Open in Lab

html css javascript

Targets: JS HTML

Code

/* ============================================================
   Dark Blue — Design Style Showcase
   ============================================================ */

:root {
  /* Surfaces */
  --bg-body: #0d1b2a;
  --bg-card: #1b2a3b;
  --bg-input: #243447;
  --bg-hover: #2a3d52;
  --bg-elevated: #1f3145;

  /* Borders */
  --border: rgba(56, 189, 248, 0.15);
  --border-hover: rgba(56, 189, 248, 0.3);
  --border-focus: #38bdf8;

  /* Text */
  --text-primary: #e8f4fd;
  --text-muted: #8bafc8;
  --text-placeholder: #5c7a94;

  /* Accent */
  --accent: #38bdf8;
  --accent-dark: #0ea5e9;
  --accent-dim: rgba(56, 189, 248, 0.1);
  --accent-glow: rgba(56, 189, 248, 0.25);

  /* Status */
  --green: #34d399;

  /* Radius */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px rgba(56, 189, 248, 0.15);
}

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

body {
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: inherit;
  text-decoration: none;
}
button {
  font-family: inherit;
  cursor: pointer;
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 27, 42, 0.88);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.3px;
  flex-shrink: 0;
}

.logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.nav-link {
  padding: 6px 13px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color 0.15s, background 0.15s;
}

.nav-link:hover {
  color: var(--text-primary);
  background: var(--accent-dim);
}
.nav-link.active {
  color: var(--accent);
  background: var(--accent-dim);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.icon-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.icon-btn:hover {
  background: var(--bg-hover);
  color: var(--accent);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.15);
}

.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-body);
}

.avatar-sm {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(56, 189, 248, 0.15);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
}

/* ---- Layout ---- */
.main {
  padding: 48px 0 80px;
}

.container {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ---- Page title ---- */
.page-title-area {
  padding: 8px 0 16px;
}

.page-title {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.1;
  color: var(--text-primary);
}

.page-tagline {
  margin-top: 7px;
  font-size: 15px;
  color: var(--text-muted);
}

/* ---- Card ---- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-card);
  transition: border-color 0.2s, box-shadow 0.25s;
}

.card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-card), var(--shadow-glow);
}

.section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

/* ---- Profile card ---- */
.profile-card {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.profile-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.profile-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(14, 165, 233, 0.3));
  border: 2px solid var(--accent);
  color: var(--accent);
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.25);
}

.status-dot {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--bg-card);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
}

.profile-info {
  flex: 1;
  min-width: 160px;
}

.profile-name {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
}

.profile-role {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 3px;
}

.profile-stats {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}

.stat {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

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

.profile-badge-area {
  margin-left: auto;
}

.role-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(56, 189, 248, 0.12);
  color: var(--accent);
  border: 1px solid rgba(56, 189, 248, 0.3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- Buttons ---- */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.2s, transform 0.1s;
}

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

.btn-primary {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
  color: #fff;
}

.btn-primary:hover {
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
}

.btn-secondary {
  background: rgba(56, 189, 248, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

.btn-secondary:hover {
  background: rgba(56, 189, 248, 0.18);
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}

.btn-ghost {
  background: transparent;
  border-color: rgba(56, 189, 248, 0.3);
  color: var(--text-muted);
}

.btn-ghost:hover {
  border-color: rgba(56, 189, 248, 0.6);
  color: var(--text-primary);
}

/* ---- Input ---- */
.input-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.input-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.input-wrap {
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(56, 189, 248, 0.2);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-input);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.input-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12), 0 0 16px rgba(56, 189, 248, 0.1);
}

.input-prefix {
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(56, 189, 248, 0.06);
  border-right: 1px solid rgba(56, 189, 248, 0.15);
  flex-shrink: 0;
}

.input {
  flex: 1;
  height: 44px;
  padding: 0 14px;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
}

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

.input-hint {
  font-size: 12px;
  color: var(--text-muted);
}

/* ---- Badges ---- */
.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(56, 189, 248, 0.1);
  color: var(--accent);
  border: 1px solid rgba(56, 189, 248, 0.25);
  letter-spacing: 0.02em;
}

.badge-live {
  background: rgba(52, 211, 153, 0.1);
  color: var(--green);
  border-color: rgba(52, 211, 153, 0.3);
}

.badge-beta {
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.25);
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
  .header-nav {
    display: none;
  }
  .profile-card {
    flex-direction: column;
    text-align: center;
  }
  .profile-stats {
    justify-content: center;
  }
  .profile-badge-area {
    margin-left: 0;
  }
  .page-title {
    font-size: 26px;
  }
}

/* Dark Blue — Showcase interactions */

// ── Card glow on hover ────────────────────────────────────────
const profileCard = document.getElementById("profile-card");

if (profileCard) {
  profileCard.addEventListener("mouseenter", () => {
    profileCard.style.boxShadow = "0 8px 32px rgba(0,0,0,0.4), 0 0 40px rgba(56,189,248,0.18)";
  });
  profileCard.addEventListener("mouseleave", () => {
    profileCard.style.boxShadow = "";
  });
}

// ── Button: sky-blue glow pulse on click ──────────────────────
document.querySelectorAll(".btn-primary").forEach((btn) => {
  btn.addEventListener("click", () => {
    btn.style.boxShadow = "0 0 30px rgba(56,189,248,0.6)";
    btn.style.transition = "box-shadow 0.1s";
    setTimeout(() => {
      btn.style.boxShadow = "";
      btn.style.transition = "box-shadow 0.4s";
    }, 150);
  });
});

// ── Nav link active state ─────────────────────────────────────
document.querySelectorAll(".nav-link").forEach((link) => {
  link.addEventListener("click", function (e) {
    e.preventDefault();
    document.querySelectorAll(".nav-link").forEach((l) => l.classList.remove("active"));
    this.classList.add("active");
  });
});

// ── Input: animated glow sweep on focus ───────────────────────
const inputWrap = document.querySelector(".input-wrap");

if (inputWrap) {
  const input = inputWrap.querySelector(".input");
  if (input) {
    input.addEventListener("focus", () => {
      inputWrap.style.boxShadow = "0 0 0 3px rgba(56,189,248,0.12), 0 0 20px rgba(56,189,248,0.12)";
    });
    input.addEventListener("blur", () => {
      inputWrap.style.boxShadow = "";
    });
  }
}

// ── Badge hover: subtle lift ──────────────────────────────────
document.querySelectorAll(".badge").forEach((badge) => {
  badge.style.transition = "transform 0.15s, box-shadow 0.15s";
  badge.addEventListener("mouseenter", () => {
    badge.style.transform = "translateY(-1px)";
    badge.style.boxShadow = "0 4px 12px rgba(56,189,248,0.2)";
  });
  badge.addEventListener("mouseleave", () => {
    badge.style.transform = "";
    badge.style.boxShadow = "";
  });
});

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

  <!-- Header -->
  <header class="site-header">
    <div class="header-inner">
      <div class="header-logo">
        <div class="logo-icon">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
            <polygon points="12,2 22,20 2,20" fill="#38BDF8" opacity="0.9"/>
          </svg>
        </div>
        <span class="logo-text">Horizon</span>
      </div>
      <nav class="header-nav">
        <a href="#" class="nav-link active">Overview</a>
        <a href="#" class="nav-link">Analytics</a>
        <a href="#" class="nav-link">Reports</a>
        <a href="#" class="nav-link">Team</a>
      </nav>
      <div class="header-actions">
        <button class="icon-btn" aria-label="Search">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
          </svg>
        </button>
        <button class="icon-btn" aria-label="Notifications">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
            <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
          </svg>
          <span class="notif-badge">5</span>
        </button>
        <div class="avatar-sm">SL</div>
      </div>
    </div>
  </header>

  <!-- Main -->
  <main class="main">
    <div class="container">

      <!-- Hero text -->
      <div class="page-title-area">
        <h1 class="page-title">Dark Blue</h1>
        <p class="page-tagline">Professional navy surfaces for SaaS &amp; dashboards</p>
      </div>

      <!-- Profile card -->
      <section class="card profile-card" id="profile-card">
        <div class="profile-avatar-wrap">
          <div class="profile-avatar">SL</div>
          <span class="status-dot"></span>
        </div>
        <div class="profile-info">
          <h2 class="profile-name">Sarah Lin</h2>
          <p class="profile-role">Product Lead · Horizon Inc.</p>
          <div class="profile-stats">
            <div class="stat">
              <span class="stat-value">2.4K</span>
              <span class="stat-label">Followers</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat">
              <span class="stat-value">86</span>
              <span class="stat-label">Projects</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat">
              <span class="stat-value">98%</span>
              <span class="stat-label">Uptime</span>
            </div>
          </div>
        </div>
        <div class="profile-badge-area">
          <span class="role-chip">Admin</span>
        </div>
      </section>

      <!-- Buttons -->
      <section class="card">
        <h3 class="section-label">Actions</h3>
        <div class="btn-row">
          <button class="btn btn-primary">Deploy Now</button>
          <button class="btn btn-secondary">View Logs</button>
          <button class="btn btn-ghost">Cancel</button>
        </div>
      </section>

      <!-- Input -->
      <section class="card">
        <h3 class="section-label">Configuration</h3>
        <div class="input-group">
          <label class="input-label" for="api-key">API Endpoint</label>
          <div class="input-wrap">
            <span class="input-prefix">https://</span>
            <input
              id="api-key"
              class="input"
              type="text"
              placeholder="api.yourservice.com/v1"
            />
          </div>
          <p class="input-hint">Enter your service's base API URL.</p>
        </div>
      </section>

      <!-- Badges -->
      <section class="card">
        <h3 class="section-label">Stack &amp; Tags</h3>
        <div class="badge-row">
          <span class="badge">Next.js</span>
          <span class="badge">PostgreSQL</span>
          <span class="badge">Kubernetes</span>
          <span class="badge badge-live">Live</span>
          <span class="badge badge-beta">Beta</span>
        </div>
      </section>

    </div>
  </main>

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

Dark Blue

A full-page component showcase rooted in the dark navy palette — the go-to language for SaaS dashboards, fintech applications, and enterprise tools that want to project authority and calm precision. The deep #0D1B2A body sits behind layered blue-tinted surfaces, creating an atmosphere that feels polished and trustworthy rather than harsh. Sky-blue accents (#38BDF8) cut through the darkness with clarity, guiding the eye to every interactive element.

The palette uses transparent, blue-tinted borders across all components, tying the system together with a cohesive blue warmth. Hover states add a soft glow effect, giving the interface subtle life without breaking the professional tone. DM Sans from Google Fonts brings geometric confidence and strong weight differentiation for the heading hierarchy.

Key characteristics

Navy layering — #0D1B2A → #1B2A3B → #243447 creates three distinct elevation levels from body to input
Blue-tinted borders — rgba(56,189,248,0.15) borders unify every component under a coherent chromatic theme
Sky-blue accent — #38BDF8 carries all interactive affordances; glows on hover for tactile feedback
Glow micro-interactions — box-shadow: 0 0 20px rgba(56,189,248,0.2) on hover adds atmospheric depth
Transparent secondary actions — secondary and ghost buttons use alpha fills rather than solid colors, staying light on the dark canvas

When to use

Ideal for SaaS dashboards, B2B analytics platforms, fintech products, and any tool that must feel simultaneously premium and approachable. The navy palette conveys trustworthiness — a key signal for products handling financial data, enterprise workflows, or sensitive user information. The sky-blue glow effects add just enough visual interest for modern audiences without crossing into the gaming or entertainment aesthetic territory.