Trabajo / Front-end / Kacho Cano · Sistema de diseño
Tungsteno 3200 K y luz día 5600 K, en 28 componentes
Proyecto 14 de 28 del archivo 05 de 08 en Desarrollo front-end Ver la disciplina completa ↗
Ábrela y úsala: 28 componentes con su código listo para copiar
La web de documentación completa, con el buscador, el disco funcionando y los tres anchos. Se abre en una pestaña nueva y trae su propio botón para volver aquí.
Un sistema para una sala a oscuras
La tentación en un encargo así es reutilizar el sistema que ya tienes. Sería más rápido y sería peor: este sitio no es un portfolio de diseño, es una sala de cine, y las decisiones que sirven en uno no sirven en el otro.
De ahí sale lo primero que hay escrito en el archivo, y es una prohibición: no hay tema claro y no debe haberlo. No es una limitación técnica; es la regla que evita que alguien «mejore» el sistema dentro de seis meses añadiendo un modo día.
Lo segundo es la paleta, y tampoco sale de una rueda de color: son las dos temperaturas con las que trabaja un director de fotografía.
Componentes documentados
En siete grupos, de fundamentos a piezasTokens en tokens.css
Líneas de librería
180 de tokens · 810 de componentes · 306 de JSModo de color
Oscuro. Y está escrito que no habrá otroLa regla dura de la paleta
--tungsteno nunca se aplica a texto por debajo de 18 px. Para eso está --tungsteno-alto. Es la diferencia entre cumplir el contraste AA y no cumplirlo, y por eso está escrito en el archivo y no en la cabeza de quien maqueta.
Cuatro decisiones y ninguna excepción
Como en cualquier sistema pequeño, lo que lo mantiene en pie no es la cantidad de componentes sino el número de reglas que nadie se salta. Aquí son cuatro, y están en el README antes que en ningún componente.
01 · Dos temperaturas, y no compiten
Tungsteno 3200 K (#c46b05) es la marca. Luz día 5600 K (#7fb2e0) es el sistema: foco, datos y estados. De ahí sale una consecuencia que sorprende y que es correcta: el anillo de foco siempre es azul y nunca naranja, porque el foco es sistema, no marca.
Figma · 01 Foundations — Colorcss/tokens.css
02 · La escala es fluida, no son tres maquetas
Figma representa tipografía y espaciado con tres modos (390 · 768 · 1440). En código son clamp(): el navegador interpola y no hay saltos entre breakpoints. El gutter es clamp(1.25rem, 4vw, 4rem).
Ese detalle hay que decirlo en la entrega: a 768 px el navegador calcula 30,72 y en Figma se redondea a 32 para no salir de la escala de 4. No hay que clavar los píxeles contra el diseño, y quien no lo sepa perderá una tarde intentándolo.
Anton · Inter · IBM Plex MonoEscala fluida 390 → 1440
03 · El borde vivo
Casi todo va a radio 0: botones, campos, tarjetas y modales. La pastilla es del chip y el radio de 34 es la esquina del teléfono, y de nada más. Sólo hay dos sombras en todo el sistema, y las dos tienen un trabajo concreto: recortar el dispositivo sobre el negro y levantar el centro del disco.
Todo lo demás separa por superficie y filete, que es como se comporta una sala a oscuras.
Radios · 0 · 2 · 4 · 8 · 999 · 34Dos sombras, y ninguna más
04 · El movimiento no es decoración
Cinco duraciones, cada una con un trabajo: 180 para lo que responde al puntero, 420 para modales y menú, 620 para el viaje de la foto al centro del disco, 900 para el fundido entre piezas y 7000 para cada segmento de la bobina.
Con prefers-reduced-motion todo cae a 0,001 ms. No es un extra: es lo que hace usable el disco para quien lo necesita, y va escrito así en el sistema para que no se caiga en el primer refactor.
Duraciones · 180 · 420 · 620 · 900 · 7000 msTodas apagadas con reduced-motion
El disco, medido sobre la fotografía
La sección de fotografía coloca diez imágenes en el lugar de los diez números de un disco de marcar. Es la pieza que da personalidad al sitio y la que más fácil es romper, porque su geometría no está ajustada a ojo: está medida contra la fotografía del teléfono.
Centro al 47,79 % / 48,07 % de la imagen; caja del disco al 40 % del ancho; radio del anillo al 34,875 % de la caja; cada foto al 14 %; centro al 40 %; paso angular de 36°. Cambia cualquiera de esos números y las fotografías dejan de caer sobre la banda de latón.
Y la corrección central del proyecto: las unidades son cqw contra la pantalla del dispositivo, ni vw ni vh. Con unidades de viewport el disco se descolocaba en cuanto el teléfono cambiaba de tamaño dentro de la página.
El agujero vacío no es un olvido
Cuando una fotografía viaja al centro, su hueco en el anillo se queda vacío. Es lo que hace legible el viaje: sin ese hueco, la imagen del centro parece aparecer de la nada. Está documentado para que nadie lo «arregle» rellenándolo.
Lo que no se puede dejar a criterio de quien maqueta
Los botones de icono miden 44 px de objetivo táctil: WCAG 2.5.8 pide 24 y aquí se aplica el criterio más exigente. Los enlaces del pie llevan relleno vertical para llegar a esos 24 con texto de 11 px. Los controles de pausa y sonido del reel son obligatorios, porque hay movimiento de más de cinco segundos. El anillo de foco es de 2 px en luz día, con 3 px de separación, en todo el sistema.
Y un detalle que sale de una prueba real: el hueco del mensaje de error del campo está siempre reservado. La capa existe en las tres variantes y sólo cambia de opacidad. Si apareciera y desapareciera, la maqueta saltaría y el botón se movería bajo el cursor justo cuando alguien va a pulsarlo.
«La O no es una letra, es un objetivo»
La marca se pinta con mask-image sobre currentColor, así que un solo archivo sirve para tinta, para tungsteno y sobre fondo claro. El tope de dedo del isotipo es la única pieza que no es tinta —va en tungsteno— y por eso se dibuja aparte, como pseudo-elemento. Por debajo de 40 px se quita el tope; por debajo de 24, queda sólo la C.
La librería, funcionando
Aquí debajo está la web de documentación entera: busca un componente, gira el disco, abre la ficha modal, estrecha el ejemplo a tableta o a móvil y copia el código. Todo lo que se ve es la librería usándose a sí misma.
Para recorrerla de verdad, ábrela con el botón de arriba — y desde allí, el botón Volver al portfolio de la barra superior te trae de vuelta a esta ficha.
También en inglés · un solo archivo autocontenido de 244 KB
De dónde sale
Kacho Cano es un proyecto de cuatro piezas repartidas en tres disciplinas. Esta librería es la herramienta con la que se construyó el sitio; el diagnóstico y el diseño están en la ficha de auditoría y UX/UI, y la marca que lo firma, en la de identidad.
El control de la derecha salta entre las cuatro.
Siguiente en Desarrollo front-end
Proyecto Djehuty · La web en React
