uiguide.org

Buttons & Tap Targets

Best-performing text background (sweetspot)

  • Page background: #F6F7F9 (reduces visual noise)
  • Text surface: #FFFFFF (highest clarity)
  • Primary text: #111111
  • Secondary text: #4B5563
  • Border/divider: #E5E7EB

CTA color (sweetspot)

  • CTA background: #0047FF
  • CTA text: #FFFFFF
  • Focus ring: #0B5FFF
  • Rule: do not use the CTA color for non-CTA decoration
  • Rule: links are always underlined

Neutral scale (use for 90% of UI)

Neutral 0
#FFFFFF
Neutral 50
#F6F7F9
Neutral 100
#EEF0F3
Neutral 200
#E5E7EB
Neutral 300
#D1D5DB
Neutral 400
#9CA3AF
Neutral 500
#6B7280
Neutral 600
#4B5563
Neutral 700
#374151
Neutral 800
#1F2937
Neutral 900
#111111

Primary scale (use sparingly)

Blue 50
#E8F0FF
Blue 100
#D6E4FF
Blue 200
#ADC8FF
Blue 300
#84A9FF
Blue 400
#5B8CFF
Blue 500
#2E6BFF
Blue 600 (CTA)
#0047FF
Blue 700
#0038CC

Semantic colors (use only for meaning)

Success
#16A34A
Warning
#F59E0B
Error
#D72638
Info
#2563EB

State rules (non-negotiable)

Buttons state preview (visual)

Default
Primary action
Hover
Primary action
Focus
Primary action
Disabled
Primary action

Buttons, Tap Targets, Links

Buttons are conversion levers. Your default should be “easy to hit, easy to understand, impossible to miss”.