CASO DE ESTUDIO · 02
Craftie: la identidad de tu marca a partir de una imagen
Empieza con una inspiración: eliges un estilo curado o subes una imagen y Craftie carga al instante los colores semilla de tu marca. Después ajustas roles, revisas el contraste en contexto, eliges tipografía y exportas tu guía.
- ROL
- Diseño y desarrollo completo
- TIPO
- Herramienta web · Proyecto personal
- TECNOLOGÍAS
- Next.js 16 · React 19 · TypeScript · culori (OKLCH) · Vitest
- ESTADO
- En vivo · 2026
EL PROBLEMA
Elegir colores que se vean bien juntos y que además se lean bien es difícil. La mayoría de las herramientas te dan colores bonitos, pero no te dicen si el texto encima va a ser legible.
EL OBJETIVO
Pasar de una imagen o una idea a un sistema de marca completo (colores, contraste y tipografía) sin necesitar saber de teoría del color.
PROCESO
De una paleta a un sistema de marca
- 01
Inspiración
Eliges un estilo curado o subes una imagen. Los colores dominantes se extraen en tu navegador.
- 02
Roles de color
Los colores se convierten en roles (fondo, texto, principal, acento) con versiones para modo claro y oscuro.
- 03
Legibilidad
Cada combinación se evalúa con WCAG 2.2, con una lectura complementaria en APCA.
- 04
Tipografía y exportación
Parejas curadas, Google Fonts o fuentes locales, y una guía que descargas en el formato que necesites.
DECISIONES TÉCNICAS
Lo que pasa detrás de la interfaz
Toda la lógica de color vive en funciones puras y testeadas, separada de la interfaz.
// lib/utils/colorMath.ts: ajusta solo la luminosidad hasta cumplir el contraste
export function adjustLightnessForContrast(colorHex: string, againstHex: string, targetRatio: number) {
const normalized = normalizeHex(colorHex);
if (contrastRatio(normalized, againstHex) >= targetRatio) return normalized;
const { c, h, l: originalL = 0 } = parseOklch(normalized);
const ratioAt = (lightness: number) => contrastRatio(oklchToHex(lightness, c, h), againstHex);
const darker = findLightnessBound(ratioAt, targetRatio, 0, originalL, true);
const lighter = findLightnessBound(ratioAt, targetRatio, originalL, 1, false);
// ...se elige el candidato más cercano al color original
}¿Por qué OKLCH?
Cambia la luminosidad sin alterar el tono, así un color se puede ajustar para que pase el contraste sin dejar de parecerse al original.
Sugerencias, no solo errores
Si una combinación no pasa AA o AAA, Craftie te propone el ajuste mínimo de luminosidad para que sí lo haga.
Todo en tu navegador
Las imágenes y las fuentes que subes nunca salen de tu computadora: no hay servidor ni cuentas.
Más de 500 tests
El motor de color y contraste está cubierto por pruebas con Vitest, así los resultados son predecibles.
LA SOLUCIÓN
Así funciona
Empieza con una inspiración
Eliges un estilo curado o subes una imagen (JPG, PNG o WebP, hasta 5 MB). Craftie extrae los colores y los clasifica como pastel, vivos, oscuros o neutros.
Toca un rol y ajústalo
Cambias el color de cualquier rol y revisas el contraste en contexto: AA o AAA con WCAG, más una lectura en APCA.
Exporta tu guía
Eliges tipografía (parejas curadas, Google Fonts o tus propias fuentes) y exportas a CSS, design tokens (JSON), Figma, DESIGN.md o brand kit.
RESULTADO
En números
Tests automáticos
Lógica de color, contraste y exportación cubierta con Vitest.
Combinaciones tipográficas
Recomendadas según el estilo que elijas.
Formatos de exportación
CSS, JSON, Figma Tokens, DESIGN.md y brand kit.
LO QUE APRENDÍ
Una herramienta de accesibilidad tiene que ser accesible primero.
Mantener la lógica de color en funciones puras, lejos de la interfaz, me permitió cambiar el diseño muchas veces sin romper los cálculos.
Mostrar el número de contraste junto con una sugerencia concreta ayuda más que un simple "no pasa".