Buttons

Persimmon is the brand primary. One filled primary per page; every other action uses soft, outline, or ghost. Two sizes max per surface.

Variants

Sizes

Default (≈36px) for form submits and primary page actions. Small (≈28px) for inline actions like "Change photo" or "Resend code".

With icons

Asymmetric padding: icon side matches vertical padding.

Rules

• Only one solid/filled button per page. Dialogs count as their own page.
• Secondary buttons must never be higher contrast than the primary.
• Destructive actions use the soft/outline style unless they are the primary action on the page.
• Rings on primary buttons match the fill color — never use reduced-opacity rings on solid buttons.
• Focus rings use focus-visible:outline-persimmon-400 with outline-offset-2.