Components
Forms
Labels sit above fields. Validation shows as a colored bar on the left edge so it never relies on color alone — always pair it with a message.
Field states
Radio buttons & checkboxes
22px controls with a 2px line. Radios pick one; checkboxes pick any. Click to try them.
Radio buttons
Checkboxes
Option lists
When choices stretch across a card, the label stays left and the control right. Rows have 16px padding and dividers between them — never above the first or below the last.
Dietary options
Add-ons
Example: checkout
A working form assembled from the parts above.