Colors
Colors used across AppSignal products. The light theme is used in the app, whereas the dark theme is used for the homepage and in specific cases in the app.
Primary colors
Text colors
Primary text
text-gray-800
Secondary text
text-gray-700
Link text
text-blue-500
Placeholder text
text-gray-500
Backgrounds
Background
bg-gray-100
Content
bg-white
Border
border-gray-200
States
Success
bg-green-500
Warning
bg-orange-500
Error
bg-red-500
All colors
Gray
bg-gray-100
bg-gray-200
bg-gray-300
bg-gray-400
bg-gray-500
bg-gray-600
bg-gray-700
bg-gray-800
bg-gray-900
Red
bg-red-100
bg-red-200
bg-red-300
bg-red-400
bg-red-500
bg-red-600
bg-red-700
bg-red-800
bg-red-900
Orange
bg-orange-100
bg-orange-200
bg-orange-300
bg-orange-400
bg-orange-500
bg-orange-600
bg-orange-700
bg-orange-800
bg-orange-900
Yellow
bg-yellow-100
bg-yellow-200
bg-yellow-300
bg-yellow-400
bg-yellow-500
bg-yellow-600
bg-yellow-700
bg-yellow-800
bg-yellow-900
Green
bg-green-100
bg-green-200
bg-green-300
bg-green-400
bg-green-500
bg-green-600
bg-green-700
bg-green-800
bg-green-900
Teal
bg-teal-100
bg-teal-200
bg-teal-300
bg-teal-400
bg-teal-500
bg-teal-600
bg-teal-700
bg-teal-800
bg-teal-900
Blue
bg-blue-100
bg-blue-200
bg-blue-300
bg-blue-400
bg-blue-500
bg-blue-600
bg-blue-700
bg-blue-800
bg-blue-900
Azure
bg-azure-100
bg-azure-200
bg-azure-300
bg-azure-400
bg-azure-500
bg-azure-600
bg-azure-700
bg-azure-800
bg-azure-900
Purple
bg-purple-100
bg-purple-200
bg-purple-300
bg-purple-400
bg-purple-500
bg-purple-600
bg-purple-700
bg-purple-800
bg-purple-900
Pink
bg-pink-100
bg-pink-200
bg-pink-300
bg-pink-400
bg-pink-500
bg-pink-600
bg-pink-700
bg-pink-800
bg-pink-900
Hot Pink
bg-hot-pink-100
bg-hot-pink-200
bg-hot-pink-300
bg-hot-pink-400
bg-hot-pink-500
bg-hot-pink-600
bg-hot-pink-700
bg-hot-pink-800
bg-hot-pink-900