Admin Login Pages · Advanced

Mono — Minimal Black & White Login

An ultra-minimal monochrome admin login focused on typography: crisp 1.5px borders, a bold logo block, a keyboard SSO hint and a legal footer.

Uses Bootstrap 5. Bootstrap 5 plus the CDN tag below. The downloaded file already includes everything.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

Full preview Download

<div class="mn-card">
  <div class="mn-logo mb-4">CA</div>
  <h3 class="fw-bolder mb-1" style="letter-spacing:-.5px">Sign in to ConvertAtlas</h3>
  <p class="text-secondary mb-4">Admin access only. All sessions are logged.</p>
  <label class="form-label small fw-semibold">Work email</label>
  <input type="email" class="form-control mb-3" placeholder="name@company.com" autofocus>
  <label class="form-label small fw-semibold">Password</label>
  <input type="password" class="form-control mb-4" placeholder="Enter password">
  <button class="btn btn-mono w-100 mb-4">Continue →</button>
  <div class="d-flex justify-content-between align-items-center small text-secondary">
    <a href="#" class="text-secondary">Forgot password?</a>
    <span>Press <span class="mn-kbd">⌘</span> <span class="mn-kbd">K</span> for SSO</span>
  </div>
  <hr class="my-4">
  <p class="small text-secondary text-center mb-0">By continuing you agree to the <a href="#" class="text-dark">Terms</a> and <a href="#" class="text-dark">Privacy Policy</a>.</p>
</div>
<div style="text-align:center;padding:18px 12px;font:500 12px system-ui;opacity:.6">Template by <a href="https://convertatlas.org" style="color:inherit;font-weight:700;text-decoration:none">ConvertAtlas</a> · Developer Tools</div>

body{min-height:100vh;margin:0;display:grid;place-items:center;background:#fafafa;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;padding:20px}
.mn-card{max-width:380px;width:100%}
.mn-logo{width:52px;height:52px;border-radius:14px;background:#111;color:#fff;display:grid;place-items:center;font-weight:800;font-size:22px}
.form-control{border:1.5px solid #e4e4e7;border-radius:10px;padding:.75rem .9rem;transition:border-color .15s}
.form-control:focus{border-color:#111;box-shadow:none}
.btn-mono{background:#111;color:#fff;border-radius:10px;padding:.75rem;font-weight:600;border:0;transition:.15s}
.btn-mono:hover{background:#333;color:#fff}
.mn-kbd{border:1px solid #e4e4e7;border-bottom-width:2px;border-radius:6px;padding:1px 6px;font-size:.72rem;background:#fff}

Free to use — no attribution required. This is a complete, responsive Bootstrap 5 page. It uses Bootstrap 5 via CDN (linked above). Download a ready-to-open .html file with all CDN links included, or copy the HTML and drop it into your project.

What's included in this template

The Mono — Minimal Black & White Login is a complete admin login pages design with realistic demo content — ready to preview, copy or download as a single responsive HTML file. Key features:

Monochrome design system
Typography-first hierarchy
Keyboard shortcut SSO hint
Crisp high-contrast focus states
Terms & privacy footer
Smallest possible footprint

How to use it

Open the live preview above to see the full design at desktop, tablet and mobile widths. When you are happy with it, use Download to save a single mono-minimal-login.html file, or Copy to grab the source. All required libraries load from public CDNs, so the file works the moment you open it — just replace the demo content with your own and publish.