Dialog UI Color Palette

Primary UI Colors

Primary Blue
#3b82f6 RGB: 59, 130, 246
Primary actions, links, focus
Primary Hover
#2563eb RGB: 37, 99, 235
Hover state for primary
Primary Active
#1e40af RGB: 30, 64, 175
Active/pressed state
Primary Light
#dbeafe RGB: 219, 234, 254
Backgrounds, highlights
Secondary Gray
#6b7280 RGB: 107, 114, 128
Secondary actions, cancel
Secondary Hover
#4b5563 RGB: 75, 85, 99
Hover state for secondary

Semantic Colors

Success Green
#10b981 RGB: 16, 185, 129
Success, confirm, save
Success Hover
#059669 RGB: 5, 150, 105
Hover state for success
Success Light
#d1fae5 RGB: 209, 250, 229
Success backgrounds
Danger Red
#ef4444 RGB: 239, 68, 68
Errors, delete, danger
Danger Hover
#dc2626 RGB: 220, 38, 38
Hover state for danger
Danger Light
#fee2e2 RGB: 254, 226, 226
Error backgrounds
Warning Orange
#f59e0b RGB: 245, 158, 11
Warnings, caution
Warning Hover
#d97706 RGB: 217, 119, 6
Hover state for warning
Warning Light
#fef3c7 RGB: 254, 243, 199
Warning backgrounds
Info Cyan
#06b6d4 RGB: 6, 182, 212
Information, help
Info Hover
#0891b2 RGB: 8, 145, 178
Hover state for info
Info Light
#cffafe RGB: 207, 250, 254
Info backgrounds

Text & Border Colors

Text Primary
#111827 RGB: 17, 24, 39
Headings, primary text
Text Secondary
#374151 RGB: 55, 65, 81
Body text, labels
Text Tertiary
#6b7280 RGB: 107, 114, 128
Helper text, placeholders
Text Disabled
#9ca3af RGB: 156, 163, 175
Disabled text
Border Default
#e5e7eb RGB: 229, 231, 235
Input borders, dividers
Border Hover
#d1d5db RGB: 209, 213, 219
Hover state borders
Background Light
#f3f4f6 RGB: 243, 244, 246
Disabled backgrounds
Background Subtle
#f9fafb RGB: 249, 250, 251
Dialog backgrounds
Background White
#FFFFFF RGB: 255, 255, 255
Cards, panels, inputs

Button Variations

Primary Buttons

Secondary Buttons

Success Buttons

Danger Buttons

Warning Buttons

Outline Buttons

Ghost Buttons

Disabled State

Dialog Examples

Confirmation Dialog

Delete Account?
Are you sure you want to delete your account? This action cannot be undone and all your data will be permanently removed.

Success Dialog

✓ Payment Successful
Your payment of $49.99 has been processed successfully. A confirmation email has been sent to your inbox.

Warning Dialog

⚠️ Unsaved Changes
You have unsaved changes. Are you sure you want to leave this page? Your changes will be lost.

Input Fields

This is helper text to guide the user
Blue border and shadow when focused
Please enter a valid email address
✓ This username is available
This field is currently disabled
Maximum 500 characters

Sliders & Range Inputs

Volume 75%
Brightness 50%
Quality High

Toggle Switches

Notifications
Dark Mode
Auto-Save
Privacy Mode

Checkboxes

Preferences

Email notifications
Push notifications
SMS notifications
Marketing emails

Features

Advanced mode
Debug mode
Auto-updates
Cloud sync

Radio Buttons

Payment Method

Credit Card
PayPal
Bank Transfer
Cryptocurrency

Subscription Plan

Free - $0/mo
Pro - $9.99/mo
Business - $29.99/mo
Enterprise - Custom

Dropdown Menus

Alert Messages

ℹ️
Information: Your profile has been updated with the latest information from your account settings.
✓
Success: Your changes have been saved successfully. All updates are now live.
⚠️
Warning: Your subscription will expire in 3 days. Please renew to continue using premium features.
✕
Error: Unable to process your request. Please check your connection and try again.