Kbd
A 20-tall key that fits inside anything: sixteen variants covering two backgrounds, optional icons at either end, and groups of one to four keys joined or spelled out with plus signs.
It inverts: base.primary-foreground for the key, base.primary for the letter. That is what you drop into a black tooltip or a filled button, where the Default key's base.muted block would disappear into nothing.
Left and right are separate Yes/No properties, so the key is 30, 46 or 62 wide depending on how many it carries. They ship hidden in every variant, which is why turning one on costs nothing but a property change.
Every key in the kit is 20 high on radius.sm with 4 of side padding and a 12/500 label. That is what lets one sit inside a 32-tall input, a tooltip or a button without any of them changing height to make room.
One to four keys, joined or spelled out
Default sets Mac modifiers side by side with nothing between them, because ⌘⇧⌥ reads as one chord. + Separated writes it out for the platforms that say it aloud: Ctrl + Alt + Shift + B.
Seven places a key turns up
900 by 1100. A lone Esc, a separated shortcut, Mac modifiers, a row of arrow keys, a key with a leading icon, and then the three that matter most: inside a search field, inside a tooltip and inside a button.
The tooltip is the one to look at. It is the only place the Primary background earns its keep, and the only place in the file where a key sits on something dark.
Two components, sixteen variants
Read straight out of the Penpot file. The axes below are the property names you will see in the variant dropdown.
Using the Kbd
Dark surfaces. It inverts the key: base.primary-foreground for the block, base.primary for the letter. On a black tooltip or a filled button the Default key's base.muted would vanish, which is the whole reason the second background exists.
So it can sit inside anything without making room for itself. A 32-tall input, a tooltip and a button all take a 20-tall key with 4 of side padding and a 12/500 label, and none of them grow to fit it. The height is the one measurement that never varies.
Default sets Mac modifiers side by side with nothing between them, because ⌘⇧⌥ reads as a single chord. + Separated writes the shortcut out for the platforms that say it aloud, with a 12/400 plus between each key: Ctrl + Alt + Shift + B.
Because a key can carry one at either end independently, and the width follows: 30 with none, 46 with one, 62 with both. They ship hidden in all eight variants, so turning one on is a property change rather than an edit.