uiguide.org

Loading, Empty, Error & Success

Cards

  • Padding: 24px
  • Radius: 12px
  • Border: 1px #E5E7EB
  • Clickable card: entire card is clickable, not only the title
  • Hierarchy: title → one-line explanation → one clear action

Modals

  • Use only for confirmations or short tasks.
  • Provide a visible close button.
  • ESC closes, focus is trapped inside, focus returns on close.
  • Never stack modals.

Cards (visual)

Card title
One sentence that explains value. No fluff.
One clear action
Clickable card
Make the entire area interactive, not just the headline.

Tables (data UI)

  • Row height: 48px
  • Header: sticky for long tables
  • Mobile: horizontal scroll, do not crush columns
  • Alignment: text left, numbers right

Loading, Empty, Error, Success

Missing states reduce trust instantly. Reduced trust reduces clicks.

Loading
Skeleton for page content. Spinner for short actions.
Empty
No saved items yet. Add your first one to get started.
Add item
Error
Payment failed.
Your bank declined the transaction. Try another card. Your cart is saved.
Try another card
Success
Saved. Next: share it with your team.
Share