Black Belt Design Library
El design system publicado de la app Black Belt para iOS: un grid, tres radios, siete funciones tipográficas y una sola anatomía de tarjeta, en claro y oscuro, con la misma hoja de estilos que renderiza las pantallas de la app.
Black Belt es una app de entrenamiento de jiu-jitsu brasileño. Esta es su biblioteca de diseño: no un documento que describe el sistema, sino el propio sistema renderizado.
Qué contiene
- Fundamentos — un grid de base 8 con un medio paso de 4pt, tres radios, siete funciones tipográficas en cinco tamaños y tres pesos, y una paleta neutra con un acento y un solo matiz para gráficos por pantalla
- La tarjeta — todas las tarjetas de todas las pantallas comparten una anatomía: etiqueta, título, línea de contexto, cuerpo, leyenda y acción. Solo cambia lo que llena el cuerpo
- Componentes — cada uno dibujado en las cuatro capas del método de grid de píxeles: grid, espaciado interior y áreas, estructura y tipografía
- Superficies — pantallas completas y ejemplos de gráficos, todos en claro y oscuro
- Nunca publicar — las reglas que rechazan un diseño antes de que llegue a una build
Por qué renderiza en vez de describir
La biblioteca es una sola página independiente que no importa nada. Cada ejemplo se dibuja con la misma hoja de estilos que renderiza el canvas de las pantallas de la app, así que un componente no puede alejarse de su documentación: la documentación es el componente. Escribirla así obligó a que cada regla funcionara al dibujarla: un valor de espaciado sin un ejemplo concreto no llegaba a la página.
Las restricciones que incorpora
Sin negrita ni seminegrita; el énfasis usa peso 500 o el color secundario, nunca un tamaño mayor. Las tarjetas de contenido pasivo permanecen opacas y accesibles, mientras que la navegación y la interfaz transitoria reciben el tratamiento de vidrio nativo. Los gráficos usan un matiz por pantalla y cada marca es un gradiente dentro de él.