Design Tokens Reference¶

/* Neutral */
--white: #ffffff
--black: #000000

--gray-50:  #f8fafc
--gray-100: #f1f5f9
--gray-200: #e2e8f0
--gray-300: #cbd5e1
--gray-400: #94a3b8
--gray-500: #64748b
--gray-600: #475569
--gray-700: #334155
--gray-800: #1e293b
--gray-900: #0f172a

/* Blue */
--blue-50:  #eff6ff
--blue-100: #dbeafe
--blue-200: #bfdbfe
--blue-300: #93c5fd
--blue-400: #60a5fa
--blue-500: #3b82f6
--blue-600: #2563eb
--blue-700: #1d4ed8
--blue-800: #1e40af
--blue-900: #1e3a8a

/* Red */
--red-50:  #fef2f2
--red-100: #fee2e2
--red-500: #ef4444
--red-600: #dc2626
--red-700: #b91c1c

/* Yellow */
--yellow-50:  #fefce8
--yellow-100: #fef9c3
--yellow-500: #eab308
--yellow-600: #ca8a04

/* Green */
--green-50:  #f0fdf4
--green-100: #dcfce7
--green-500: #22c55e
--green-600: #16a34a
--green-700: #15803d

@media (min-width: 768px) { /* md and up */ }
@media (min-width: 1024px) { /* lg and up */ }