Design for AIcolor-mix tint scale
color-mix tint scale: a CSS button. Copy the rules, or the prompt that rebuilds it.
CSS
.btn-198{--c:#0d9488;font:600 14px/1 system-ui,sans-serif;color:#fff;background:var(--c);border:0;border-radius:8px;padding:12px 24px;cursor:pointer;transition:background .15s,box-shadow .15s}
.btn-198:hover{background:#0f766e}
.btn-198:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.btn-198:active{background:#115e59}
@supports (background:color-mix(in oklch,red,blue)){
.btn-198:hover{background:color-mix(in oklch,var(--c),black 12%);box-shadow:0 4px 12px -4px color-mix(in oklch,var(--c),transparent 40%)}
.btn-198:active{background:color-mix(in oklch,var(--c),black 24%)}
}
HTML
<button class="btn-198">Publish</button>Prompt
A teal #0d9488 button (8px radius, white 14px semibold text, 12px by 24px padding) whose hover and active shades are derived from one --c custom property with color-mix in oklch (12% and 24% black), plus a hover shadow that is the brand colour mixed 40% with transparent. Hard-coded #0f766e/#115e59 fallbacks sit outside an @supports block so it degrades cleanly. Focus 2px outline in the brand colour.