Midnight System Decision Modal
Midnight System kit
A real <button> carrying .btn-outline-blue — the preview is the stylesheet, not a picture of it.
.btn-outline-blue {
display: inline-block;
padding: 12px 26px;
border: 2px solid #3b82f6;
border-radius: 10px;
background: transparent;
color: #3b82f6;
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.btn-outline-blue:hover {
background: #3b82f6;
color: #ffffff;
}
.btn-outline-blue:active {
background: #2563eb;
border-color: #2563eb;
}
.btn-outline-blue:focus-visible {
outline: 2px solid #3b82f6;
outline-offset: 3px;
}
Implementation notes
Outline Blue uses a lightweight treatment that keeps secondary actions visible. Its rounded corners balance product-friendly softness with a clear boundary. Its structure comes from a 2px border. The interaction stays intentionally restrained.
Usage
<button class="btn-outline-blue">Button</button>Pair it with the CSS tab above — the class is self-contained.
:focus-visible state. If you retain motion, include a prefers-reduced-motion override.We matched its palette, surface, geometry and motion to a complete UI system — like composing an outfit, not browsing unrelated parts.
Midnight System kit
Midnight System kit
Midnight System kit
Midnight System kit
Midnight System kit
Midnight System kit
Two optional extras load only if you allow them. Every button, preview and line of code works exactly the same either way. What each one does