Colors Foundation

Design tokens y paletas del sistema e-yellow basadas en Salesforce Lightning Design System v2

📋 Accessibility Guidelines

AAAContrast ratio 7:1+ (Superior)
AAContrast ratio 4.5:1+ (Good)
AContrast ratio 3:1+ (Minimum)
🎨

primary

brand

Color principal e-yellow (amarillo) para elementos de marca y acciones primarias

Copy

primary-50

rgb(255, 253, 231)

vs White:N/A 1.0
vs Black:AAA 20.4
Copy

primary-100

rgb(255, 249, 196)

vs White:N/A 1.1
vs Black:AAA 19.4
Copy

primary-200

rgb(255, 245, 157)

vs White:N/A 1.1
vs Black:AAA 18.7
Copy

primary-300

rgb(255, 241, 118)

vs White:N/A 1.2
vs Black:AAA 17.8
Copy

primary-400

rgb(255, 238, 88)

vs White:N/A 1.2
vs Black:AAA 17.2
Copy

primary-500

rgb(255, 235, 59)

vs White:N/A 1.3
vs Black:AAA 16.6
Copy

primary-600

rgb(253, 216, 53)

vs White:N/A 1.6
vs Black:AAA 13.5
Copy

primary-700

rgb(255, 214, 0)

vs White:N/A 2.5
vs Black:AAA 8.3
Copy

primary-800

rgb(255, 202, 40)

vs White:AA 4.1
vs Black:AA 5.1
Copy

primary-900

rgb(250, 190, 0)

vs White:AA 6.3
vs Black:A 3.3
🎨

secondary

brand

Color secundario azul grisáceo para elementos de soporte y navegación

Copy

secondary-50

rgb(229, 232, 235)

vs White:N/A 1.2
vs Black:AAA 17.7
Copy

secondary-100

rgb(204, 210, 216)

vs White:N/A 1.8
vs Black:AAA 11.9
Copy

secondary-200

rgb(178, 187, 197)

vs White:N/A 2.4
vs Black:AAA 8.6
Copy

secondary-300

rgb(153, 165, 178)

vs White:AA 4.1
vs Black:AA 5.2
Copy

secondary-400

rgb(127, 142, 159)

vs White:AA 5.8
vs Black:A 3.6
Copy

secondary-500

rgb(102, 119, 140)

vs White:AA 7.4
vs Black:A 2.8
Copy

secondary-600

rgb(76, 97, 121)

vs White:AAA 11.6
vs Black:N/A 1.8
Copy

secondary-700

rgb(51, 74, 102)

vs White:AAA 13.9
vs Black:N/A 1.5
Copy

secondary-800

rgb(25, 52, 83)

vs White:AAA 15.9
vs Black:N/A 1.3
Copy

secondary-900

rgb(13, 24, 33)

vs White:AAA 17.3
vs Black:N/A 1.2
🚦

green

state

Verde para estados de éxito, confirmación y acciones positivas

Copy

green-50

rgb(237, 247, 238)

vs White:N/A 1.1
vs Black:AAA 19.1
Copy

green-100

rgb(200, 230, 201)

vs White:N/A 1.3
vs Black:AAA 15.6
Copy

green-200

rgb(173, 218, 175)

vs White:N/A 1.6
vs Black:AAA 13.4
Copy

green-300

rgb(135, 201, 138)

vs White:N/A 1.9
vs Black:AAA 10.8
Copy

green-400

rgb(112, 191, 115)

vs White:N/A 2.2
vs Black:AAA 9.4
Copy

green-500

rgb(76, 175, 80)

vs White:N/A 2.8
vs Black:AAA 7.6
Copy

green-600

rgb(69, 159, 73)

vs White:N/A 3.3
vs Black:AA 6.3
Copy

green-700

rgb(54, 124, 57)

vs White:AA 5.1
vs Black:AA 4.1
Copy

green-800

rgb(42, 96, 44)

vs White:AA 7.5
vs Black:A 2.8
Copy

green-900

rgb(32, 74, 34)

vs White:AAA 10.2
vs Black:N/A 2.1
🚦

orange

state

Naranja para estados de advertencia y notificaciones importantes

Copy

orange-50

rgb(255, 245, 230)

vs White:N/A 1.1
vs Black:AAA 19.5
Copy

orange-100

rgb(255, 223, 176)

vs White:N/A 1.3
vs Black:AAA 16.4
Copy

orange-200

rgb(255, 208, 138)

vs White:N/A 1.4
vs Black:AAA 14.6
Copy

orange-300

rgb(255, 186, 84)

vs White:N/A 1.7
vs Black:AAA 12.4
Copy

orange-400

rgb(255, 173, 51)

vs White:N/A 1.9
vs Black:AAA 11.3
Copy

orange-500

rgb(255, 152, 0)

vs White:N/A 2.2
vs Black:AAA 9.7
Copy

orange-600

rgb(232, 138, 0)

vs White:N/A 2.6
vs Black:AAA 8.1
Copy

orange-700

rgb(181, 108, 0)

vs White:AA 4.1
vs Black:AA 5.1
Copy

orange-800

rgb(140, 84, 0)

vs White:AA 6.2
vs Black:A 3.4
Copy

orange-900

rgb(107, 64, 0)

vs White:AAA 8.9
vs Black:N/A 2.4
🚦

red

state

Rojo para estados de error, peligro y acciones destructivas

Copy

red-50

rgb(254, 236, 235)

vs White:N/A 1.1
vs Black:AAA 18.4
Copy

red-100

rgb(252, 197, 193)

vs White:N/A 1.5
vs Black:AAA 13.9
Copy

red-200

rgb(250, 169, 163)

vs White:N/A 1.9
vs Black:AAA 11.3
Copy

red-300

rgb(248, 129, 120)

vs White:N/A 2.5
vs Black:AAA 8.4
Copy

red-400

rgb(246, 105, 94)

vs White:N/A 3.0
vs Black:AA 7.1
Copy

red-500

rgb(244, 67, 54)

vs White:N/A 3.7
vs Black:AA 5.7
Copy

red-600

rgb(222, 61, 49)

vs White:AA 4.3
vs Black:AA 4.8
Copy

red-700

rgb(173, 48, 38)

vs White:AA 6.5
vs Black:A 3.2
Copy

red-800

rgb(134, 37, 30)

vs White:AAA 9.1
vs Black:N/A 2.3
Copy

red-900

rgb(102, 28, 23)

vs White:AAA 12.1
vs Black:N/A 1.7
🚦

blue

state

Azul para estados informativos y elementos de navegación

Copy

blue-50

rgb(235, 243, 254)

vs White:N/A 1.1
vs Black:AAA 18.8
Copy

blue-100

rgb(208, 225, 253)

vs White:N/A 1.3
vs Black:AAA 15.9
Copy

blue-200

rgb(171, 201, 251)

vs White:N/A 1.7
vs Black:AAA 12.5
Copy

blue-300

rgb(132, 176, 249)

vs White:N/A 2.2
vs Black:AAA 9.6
Copy

blue-400

rgb(94, 153, 248)

vs White:N/A 2.8
vs Black:AAA 7.4
Copy

blue-500

rgb(59, 130, 246)

vs White:N/A 3.7
vs Black:AA 5.7
Copy

blue-600

rgb(50, 111, 209)

vs White:AA 4.8
vs Black:AA 4.3
Copy

blue-700

rgb(42, 92, 175)

vs White:AA 6.5
vs Black:A 3.3
Copy

blue-800

rgb(34, 74, 140)

vs White:AAA 8.7
vs Black:N/A 2.4
Copy

blue-900

rgb(27, 58, 111)

vs White:AAA 11.2
vs Black:N/A 1.9
⚫

neutral

neutral

Escala de grises para textos, bordes, fondos y elementos neutros

Copy

neutral-0

rgb(255, 255, 255)

vs White:N/A 1.0
vs Black:AAA 21.0
Copy

neutral-50

rgb(253, 253, 253)

vs White:N/A 1.0
vs Black:AAA 20.6
Copy

neutral-100

rgb(245, 246, 246)

vs White:N/A 1.1
vs Black:AAA 19.4
Copy

neutral-200

rgb(240, 241, 242)

vs White:N/A 1.1
vs Black:AAA 18.6
Copy

neutral-300

rgb(219, 220, 222)

vs White:N/A 1.4
vs Black:AAA 15.3
Copy

neutral-400

rgb(195, 197, 200)

vs White:N/A 1.7
vs Black:AAA 12.1
Copy

neutral-500

rgb(146, 151, 155)

vs White:N/A 3.0
vs Black:AAA 7.1
Copy

neutral-600

rgb(98, 105, 111)

vs White:AA 5.6
vs Black:A 3.8
Copy

neutral-700

rgb(78, 86, 93)

vs White:AA 7.5
vs Black:A 2.8
Copy

neutral-800

rgb(49, 59, 66)

vs White:AAA 11.4
vs Black:N/A 1.8
Copy

neutral-900

rgb(42, 52, 60)

vs White:AAA 12.7
vs Black:N/A 1.6
Copy

neutral-950

rgb(32, 42, 51)

vs White:AAA 14.6
vs Black:N/A 1.4
Copy

neutral-1000

rgb(13, 24, 33)

vs White:AAA 17.9
vs Black:N/A 1.2

✅ Tokens Implementados

Todos los tokens de color están implementados en src/styles/colors.css y listos para usar con Tailwind CSS.

🚀 Uso Rápido

Clases Tailwind:

bg-primary-500 text-neutral-900

Variables CSS:

var(--color-primary-500)