Temas por cliente
Un tema adapta Konfront UI a la marca de un cliente cambiando solo tokens. Los componentes, sus reglas y su accesibilidad se quedan igual.
Lo que puede cambiar
Todo lo que ves aquí vive en un archivo de configuración pequeño. La base de Konfront (konfront, phosphor, Inter Tight, radio 12 px) es el punto de partida.
- Estilo
konfrontnovavegamaialyramiralumaserarhea- Librería de iconos
phosphorlucidetablerhugeiconsremixicon- Fuentes
- Una para texto y otra para títulos. Pueden ser la misma.
- Radio
- Un radio base de 0 a 24 px. Toda la escala se deriva de él.
- Colores de marca
- Primario, secundario, títulos y tres auxiliares.
- Acento del menú
- Sutil (gris) o marcado (tono suave del primario).
{
"name": "Andina Salud",
"slug": "andina-salud",
"version": "0.1.0",
"style": "maia",
"iconLibrary": "lucide",
"font": { "body": "Figtree", "heading": "Figtree" },
"radius": 16,
"menuAccent": "subtle",
"colors": {
"primary": "#0E6B5C",
"brandSecondary": "#14A38B",
"heading": "#0B3B33",
"auxiliary": ["#7FD1C3", "#F2C14E", "#E07A5F"]
}
}Personalizar componentes
Además de los tokens, un tema puede ajustar algunos componentes: radio, altura, peso, sombra, borde o mayúsculas. El cambio viaja en el tema, se ve en la vista previa y llega al registro ya horneado: npx shadcn add @konfront-cliente/button entrega el botón personalizado. El código del componente no cambia.
| Componente | Qué se puede ajustar |
|---|---|
| Botón | Radio · Altura · Peso · Sombra · Mayúsculas |
| Campos | Radio · Altura · Sombra |
| Tarjeta | Radio · Sombra · Borde |
| Badge | Radio · Peso · Mayúsculas |
| Diálogos | Radio · Sombra |
| Menús y popovers | Radio · Sombra |
Lo que queda fijo
Estas decisiones protegen el significado y la calidad del sistema. Si un cliente las necesita distintas, es una conversación con Diseño, no un ajuste del tema.
- Significado de los estadosVerde es éxito, ámbar es advertencia, rojo es peligro y azul es información, en todos los clientes.
- Violeta de IASolo para contenido generado por IA y controles de demo. Ningún cliente lo reasigna.
- Escala de espacioBase 4, igual en todos los proyectos. Las medidas de componentes no cambian.
- Anatomía de componentesQué partes tiene cada componente y cómo se comporta. El tema cambia la piel, no el esqueleto.
- Reglas de accesibilidadContraste AA, foco visible, objetivos táctiles y operación con teclado.
Cómo cuidamos el contraste
Cada vez que cambias un color, el solver revisa todos los pares de la tabla de accesibilidad en modo claro y oscuro. Su regla es simple: restringe el uso, nunca recolorea la marca.
- Si el primario no se lee como texto, los links pasan al secundario o al texto principal subrayado, y el primario se queda como fondo.
- Si el blanco no alcanza sobre el primario, el botón usa texto oscuro.
- Si ninguna alternativa cumple AA, el par queda bloqueado y el tema no se puede publicar hasta corregirlo.
Así se ve el resultado con el cliente de ejemplo, Andina Salud:
| Uso | Muestra | Contraste | Resultado |
|---|---|---|---|
Botón primario | Aa | 6.41:1 | Cumple |
Botón primario en hover | Aa | 7.46:1 | Cumple |
Links y pestaña activa | Aa | 6.41:1 | Cumple |
Badge de marca | Aa | 5.36:1 | Cumple |
Anillo de foco | Aa | 6.41:1 | Cumple |
Títulos de vista cliente | Aa | 12.44:1 | Cumple |
Subtítulos de 24 px o másSolo texto ≥24 px o ≥19 px Bold | Aa | 3.16:1 | Uso restringido |
Encabezado con degradadoTítulo de 28 px o más | Aa | 3.16:1 | Cumple |
Versiones
Cada tema avanza por tres estados y se versiona con semver: un cambio de color es patch, una fuente o un estilo nuevo es minor, y un cambio que obliga a revisar pantallas es major.
- Paso 1draft
Borrador
Lo editas en el Studio cuantas veces quieras. Nadie más lo instala.
- Paso 2review
En revisión
Diseño revisa el resultado y los avisos del solver antes de liberar.
- Paso 3published
Publicado
Queda disponible en el registro del cliente con una versión semver.
Crea el tema de tu cliente
En el Studio eliges marca, fuentes y estilo, ves los componentes en vivo y exportas el tema para código, Figma e IA.
Abrir el Studio