Color
Usa color para expresar identidad, guiar la atención y comunicar significado.
#4429CC
Paleta de marca
Estos son los colores oficiales de Lexy según el Manual de Marca. Se aplican en logotipo y están presentes en todos los puntos de contacto. La paleta parte de Indigo Lexy y se extiende a una familia neutra y semántica construida para producto. Es crucial usar los códigos exactos para garantizar coherencia entre plataformas.
Navy oscuro
#0B013C
Navy oscuro
Fondos profundos · texto sobre claro
Color de apoyo para superficies de alto contraste, fondos profundos y piezas donde la marca necesita una presencia más sobria.
- HEX
- #0B013C
- RGB
- 11 / 1 / 60
- CMYK
- 100 / 97 / 40 / 58
Indigo Lexy ( #4429CC ) ancla la identidad. Las variantes oscuras (#0B013C, #27198E) sirven como fondos profundos y texto sobre claro. La lavanda #9D90FC actúa como acento claro, y el crema #EFEFEF como neutro de fondo.
Submarcas
Lexy se desdobla en dos submarcas verticales, cada una con un color exclusivo que refleja su temática. Estos colores nunca reemplazan al Indigo Lexy: se aplican como acento que identifica la línea de servicio.
Lexy Deudor
#9D1AEE
Lexy Deudor
Submarca · Deudas
Color exclusivo para la línea Lexy Deudor. Identifica la vertical sin reemplazar al Indigo Lexy como color institucional.
- HEX
- #9D1AEE
- RGB
- 157 / 26 / 238
- CMYK
- 71 / 81 / 0 / 0
Scales
Las escalas organizan el sistema de color de Lexy desde superficies claras hasta tonos de alto contraste. Mantienen las mismas familias de trabajo que Geist: backgrounds, gray, gray alpha, blue, red, amber, green, teal, purple y pink.
Backgrounds
Gray
Gray alpha
Blue
Red
Amber
Green
Teal
Purple
Pink
Backgrounds
Hay dos fondos base para páginas y componentes. Usa Background 1 como default, especialmente cuando vas a colocar color encima. Background 2 sirve para diferenciar regiones con un cambio sutil.
Background 1
Fondo principal para páginas y contenido donde el color se coloca encima.
#FFFFFF
Background 2
Fondo secundario para diferenciar una región sin crear una tarjeta innecesaria.
#EFEFEF
Colors 1-3: Component backgrounds
Estos tres colores están diseñados para fondos de componentes. Si un componente vive sobre Background 1, usa Color 1 para hover y Color 2 para active. En elementos pequeños como badges puedes usar Color 2 o Color 3 como superficie.
Color 1
Background de hover sobre superficies blancas.
#F8F7FF
Color 2
Background activo o seleccionado en componentes pequeños.
#EEEBFE
Color 3
Background de mayor énfasis para badges y estados suaves.
#DAD4FF
Colors 4-6: Borders
Estos tres colores están pensados para bordes de componentes. El default es discreto, el hover sube un nivel de presencia y el activo puede usar lavanda para comunicar foco o selección.
Color 4
Borde por defecto en contenedores y controles.
#E6E4F2
Color 5
Borde hover cuando el control necesita responder sin llenarse.
#D6D2EA
Color 6
Borde activo o de foco de marca.
#9D90FC
Colors 7-8: High contrast backgrounds
Estos dos colores están diseñados para fondos de alto contraste. Color 7 usa el violeta principal para acciones de marca. Color 8 usa el navy de Lexy para superficies oscuras, navegación o estados que necesitan máxima profundidad.
Color 7
Background de alto contraste para acciones primarias.
#4429CC
Color 8
Background de alto contraste para estados oscuros o navegación.
#0B013C
Colors 9-10: Text and icons
Estos dos colores están diseñados para texto e iconos accesibles. Color 9 cubre contenido secundario y metadatos. Color 10 es el texto principal y el color más cercano al wordmark de Lexy.
Color 9
Texto e iconos secundarios sobre fondos claros.
#3A3368
Color 10
Texto e iconos primarios sobre fondos claros.
#0B013C
Tokens
| Token | Valor | Uso |
|---|---|---|
| Navy oscuro | #0B013C | Fondos profundos · texto sobre claro. |
| Indigo profundo | #27198E | Brand secundario. Estados activos / hover intensos. |
| Indigo Lexy | #4429CC | Brand primario. Color principal de identidad y CTAs. |
| Lavanda | #9D90FC | Acento claro · fondos suaves · énfasis secundarios. |
| Crema neutro | #EFEFEF | Base neutra para superficies claras. |
| Lexy Deudor | #9D1AEE | Submarca exclusiva línea Deudor. |
| Lexy Salud | #00B7B7 | Submarca exclusiva línea Salud. |
| --colorBrandBackground | #4648d4 | Bg de marca para buttons primary, links, focus ring. |
| --colorBrandBackgroundHover | #4b41e1 | Hover de marca. |
| --colorBrandBackgroundPressed | #313396 | Pressed/active de marca. |
| --colorBrandBackgroundSelected | #3d3faf | Selected persistente. |
| --colorBrandBackground2 | #ebf3fc | Tinted bg muy claro — alertas info. |
| --colorBrandForeground1 | #4648d4 | Texto / icono brand sobre fondo claro. |
| --colorBrandForegroundLink | #4b41e1 | Links inline. |
| --colorBrandStroke1 | #4648d4 | Borde brand de inputs activos / botones secondary. |
| --colorNeutralBackground1 | #ffffff | Superficie de página por defecto. |
| --colorNeutralBackground2 | #fafafa | Cards y áreas pasivas. |
| --colorNeutralBackground3 | #f5f5f5 | Fondos sutiles, hover áreas. |
| --colorNeutralBackground4 | #f0f0f0 | Highlight / hover persistente. |
| --colorNeutralBackground5 | #ebebeb | Selected persistente. |
| --colorNeutralBackground6 | #e6e6e6 | Divider muy contrastado. |
| --colorNeutralForeground1 | #242424 | Texto principal. Máximo contraste. |
| --colorNeutralForeground2 | #424242 | Texto secundario / body extenso. |
| --colorNeutralForeground3 | #616161 | Texto terciario / metadatos. |
| --colorNeutralForeground4 | #707070 | Texto deshabilitado / placeholder. |
| --colorNeutralForegroundDisabled | #bdbdbd | Texto disabled. |
| --colorNeutralStroke1 | #d1d1d1 | Borde por defecto de inputs, cards. |
| --colorNeutralStroke2 | #e0e0e0 | Borde sutil. |
| --colorNeutralStroke3 | #f0f0f0 | Divider muy sutil entre filas. |
| --colorNeutralStrokeAccessible | #616161 | Borde AA-compliant para checkbox/radio. |