Links (prevent “looks like text” failure)
- Links are always underlined by default.
- Never style links as plain body text.
- If you use blue for CTA, keep links blue but underlined, and keep CTA as a filled button.
Forms and Validation
Forms are where intent dies. Your job is to remove work and remove uncertainty.
- Layout: one column
- Input height: 48px
- Label: always visible, above input
- Help text: 13px, placed under label
- Field spacing: 16px
- Error message: 13px, plain language, directly under the field
- Inline validation: validate on blur, not on every keystroke
Field states (visual)
Email
name@domain.com
We’ll send a receipt here.
Card number
•••• •••• •••• 1234
Payment failed. Try another card.
Promo code
WELCOME10
Focus ring must be obvious.