# Color Usa color para expresar identidad, guiar la atención y comunicar significado. ## 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. **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. ## 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 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. ## 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. ## 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. ## 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. ## 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. ## Tokens Paleta de marca + submarcas + tokens funcionales canónicos del tema. Para overrides shadcn, --primary y --ring apuntan al Indigo Lexy (#4648d4). | 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. |