Midnight System Decision Modal
Midnight System kit
A real <button> carrying .btn-idle-breathe — the preview is the stylesheet, not a picture of it.
.btn-idle-breathe {
display: inline-block;
padding: 12px 28px;
border: none;
border-radius: 999px;
background: #0ea5e9;
color: #ffffff;
font-family: inherit;
font-size: 15px;
font-weight: 600;
cursor: pointer;
animation: btn-idle-breathe-flow 3s ease-in-out infinite;
}
.btn-idle-breathe:hover {
animation-duration: 1s;
}
@keyframes btn-idle-breathe-flow {
0%, 100% {
transform: scale(1, 1);
}
50% {
transform: scale(1.04, 0.96);
}
}
.btn-idle-breathe:focus-visible {
outline: 2px solid #0ea5e9;
outline-offset: 3px;
}
Implementation notes
Idle Breathe uses a clear, high-contrast treatment for primary product actions. Its pill silhouette makes the label easy to scan in compact layouts. Motion comes from a 3s keyframe animation. The animated, elastic details are included in the copy-paste CSS.
Usage
<button class="btn-idle-breathe">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