Design for AI

Soft dark mode

Soft dark mode: a CSS button. Copy the rules, or the prompt that rebuilds it.

neumorphicsoft-uidarkrounded

CSS
.btn-041 {
  font: 600 14px/1 system-ui,sans-serif;
  color: #c7d0e0;
  background: #1f2430;
  border: 0;
  border-radius: 12px;
  padding: 14px 28px;
  cursor: pointer;
  box-shadow: 6px 6px 12px #151920,-6px -6px 12px #292f40;
  transition: box-shadow .15s,color .15s
}
.btn-041:hover {
  color: #fff
}
.btn-041:focus-visible {
  outline: 2px solid #c7d0e0;
  outline-offset: 3px
}
.btn-041:active {
  box-shadow: inset 4px 4px 8px #151920,inset -4px -4px 8px #292f40
}
HTML
<div style="background:#1f2430;padding:28px"><button class="btn-041">Enable</button></div>
Prompt

A dark neumorphic button on a #1f2430 surface: same background, pale text #c7d0e0 at 14px semibold, 12px radius, 14px by 28px padding, raised with a darker shadow 6px 6px 12px #151920 and a lighter one -6px -6px 12px #292f40. Hover whitens the text; active inverts to inset 4px shadows. Focus outline 2px pale.

Same shelf