Craftie
Volver al estudio
Docs

Qué es Craftie

Crear, probar y documentar identidad visual antes de implementarla en tu producto.

Los colores y la tipografía pueden funcionar bien por separado y producir resultados distintos cuando se aplican a una interfaz real. Craftie es una herramienta para experimentar con paletas, roles semánticos y fuentes mientras observas el resultado en componentes e interfaces de ejemplo — en un solo estudio en `/`, sin wizard ni cuenta en la nube.

Cómo se usa el estudio

Un solo workspace en la página de inicio. Cuatro momentos, sin wizard de pantallas.

Abrir el estudio

  1. 01

    Inspiración

    Estilo curado o imagen local (JPG/PNG/WebP).

    Vacío → «Elegir estilo curado» o subir imagen.

  2. 02

    Panel Colores

    Sistema (marca, fundaciones, estados) y Acentos (6 slots).

    Pestañas Sistema / Acentos en la barra lateral.

  3. 03

    Guía de marca

    Abre la vista previa con «Ver guía de marca» (Ctrl/⌘+Enter).

    Progreso «X de 7 listos» en el footer del panel.

  4. 04

    Revisar y exportar

    Maquetas, tipografía y menú Exportar del header.

    Activo con primary, background y on-background.

Qué obtienes

  • Roles con temas claro/oscuro y estados (Éxito, Advertencia, Peligro).
  • Contraste WCAG y lectura APCA al editar.
  • Parejas tipográficas y maquetas (Dashboard, Landing, Analytics…).
  • Export: CSS, tokens JSON, DESIGN.md y brand kit.

Cómo empezar

  • Abre `/` → estilo curado o imagen.
  • Asigna roles en panel Colores → «Ver guía de marca».
  • Revisa tipografía y maquetas → Exportar.

Limitaciones

  • Las maquetas usan contenido de ejemplo, no tu app completa.
  • Propone valores; tú confirmas la intención de cada rol.

El problema

Una paleta no muestra por sí sola cómo se verá un producto. Un color puede parecer correcto en un swatch y fallar en un botón, un texto, una superficie o un estado interactivo. Una pareja tipográfica puede verse bien en un título corto y perder legibilidad en tablas, formularios o párrafos largos.

Probar todas esas combinaciones en tu app, en Figma o en un design system suele requerir tiempo y trabajo repetitivo.

La propuesta

Craftie permite explorar estas decisiones antes de implementarlas. Empieza con un estilo curado, tus propios colores o una paleta extraída de una imagen. Asigna colores a roles semánticos, deriva temas claro y oscuro, comprueba accesibilidad y combina familias tipográficas.

Los cambios se reflejan en interfaces de ejemplo para evaluar el sistema completo, no solo muestras aisladas.

Qué puedes hacer

  • Crear una base visual — inspiración, imagen o colores propios.
  • Asignar roles semánticos — fondo, texto, superficie, acción principal, borde y estados.
  • Trabajar en OKLCH — luminosidad, intensidad y matiz para variantes y escalas.
  • Revisar accesibilidad — contraste WCAG; APCA como lectura perceptual complementaria.
  • Probar tipografías — parejas titular/cuerpo, Google Fonts o fuentes locales en contenido real.
  • Afinar la escala — sobrescribe niveles individuales y ajusta interlineado/tracking por separado en titulares y cuerpo.
  • Previsualizar interfaces — botones, navegación, paneles y datos en maquetas del canvas.
  • Exportar el sistema — CSS, design tokens, JSON para Tokens Studio, DESIGN.md y brand kit.

Flujo recomendado

  • Elige inspiración o introduce tus colores.
  • Asigna los colores principales a roles semánticos.
  • Revisa tema claro y oscuro.
  • Corrige problemas de contraste.
  • Selecciona y ajusta la tipografía.
  • Comprueba distintas interfaces y anchos de ventana.
  • Exporta o comparte el resultado.

Craftie no reemplaza tu producto

Las interfaces del estudio sirven para explorar y detectar problemas rápido. Antes de publicar una identidad visual, pruébala también en tus componentes, contenidos, dispositivos y condiciones reales.

Qué no es

  • No es un clon de Coolors ni Adobe Color.
  • No hay plugin de Figma ni sincronización remota automática.
  • No persiste el kit completo entre sesiones (solo preferencias parciales en el navegador).