Patina Deep carries every action. One primary button per view, and the rest recede — if two things on a screen are both the most important, neither is.
Patina Deep, white text, 6.0:1. The single most important action in the view. One per screen.
White with a Slate 300 border. The alternative path — equally valid, less urgent.
Patina Deep text with no container. Navigational and low-stakes actions.
Cinnabar. Withdrawing, cancelling, deleting. Always paired with a confirmation.
Default is 48 px tall, which clears the 44 px minimum touch target with room to spare. Small is for dense tables and toolbars only; it should never be the primary action on a page.
Hover darkens to Patina Dark. Focus draws a 3 px Patina ring offset by 2 px, so it stays visible on both light and dark grounds. Disabled drops to Slate 100 with Slate 500 text and takes no border.
Primary keeps Patina Deep, which reads at 3.6:1 against ink — enough for a 16 px semibold label inside a filled shape. Secondary switches to a white outline.
“Submit an asset”, not “Submit”. The label should make sense read on its own, away from the heading above it.
Capitalize the first word only. No all-caps buttons anywhere in the product.
Long enough to be specific, short enough not to wrap at any width.
Or “Learn more” on its own. Say what is on the other side.
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
height:48px;padding:0 24px;border-radius:3px;
font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:16px;font-weight:600;
line-height:1;border:1.5px solid transparent;cursor:pointer;
transition:background .12s,border-color .12s,color .12s}
.btn-primary {background:#00705E;color:#fff}
.btn-primary:hover{background:#005A4B}
.btn-secondary{background:#fff;color:#11202A;border-color:#C3CDD6}
.btn-secondary:hover{border-color:#11202A}
.btn-tertiary {background:none;color:#00705E;padding:0 4px;height:auto}
.btn-tertiary:hover{text-decoration:underline;text-underline-offset:3px}
.btn-danger {background:#C24138;color:#fff}
.btn-danger:hover{background:#9E3129}
.btn-sm{height:38px;padding:0 17px;font-size:14.5px}
.btn-lg{height:56px;padding:0 30px;font-size:17.5px}
.btn:disabled{background:#EDF2F7;color:#697B8C;border-color:transparent;cursor:not-allowed}
.btn:focus-visible{outline:3px solid #008C76;outline-offset:2px}