Black Belt Design Library
O design system publicado do app Black Belt para iOS: um grid, três raios, sete papéis tipográficos e uma única anatomia de card, nos modos claro e escuro, usando a mesma folha de estilos que renderiza as telas do app.
Black Belt é um app de treino de jiu-jítsu brasileiro. Esta é sua biblioteca de design — não um documento que descreve o sistema, mas o próprio sistema renderizado.
O que ela reúne
- Fundamentos — um grid de base 8 com meio passo de 4pt, três raios, sete papéis tipográficos em cinco tamanhos e três pesos, e uma paleta neutra com uma cor de destaque e um único matiz para gráficos por tela
- O card — todos os cards de todas as telas compartilham a mesma anatomia: rótulo, título, linha de contexto, corpo, legenda e ação. Só o conteúdo do corpo muda
- Componentes — cada um desenhado nas quatro camadas do método de grid de pixels: grid, espaçamento interno e áreas, estrutura e tipografia
- Superfícies — telas completas e exemplos de gráficos, todos nos modos claro e escuro
- Nunca publicar — as regras que rejeitam um design antes de ele chegar a uma build
Por que renderizar em vez de descrever
A biblioteca é uma única página independente que não importa nada. Cada exemplo usa a mesma folha de estilos que renderiza o canvas das telas do app, então um componente não pode se afastar da documentação — a documentação é o componente. Escrever assim obrigou cada regra a funcionar no desenho: um valor de espaçamento sem um exemplo concreto não entrava na página.
As restrições que ela incorpora
Sem negrito nem seminegrito; a ênfase usa peso 500 ou a cor secundária, nunca um tamanho maior. Cards de conteúdo passivo permanecem opacos e acessíveis, enquanto a navegação e a interface transitória recebem o tratamento de vidro nativo. Os gráficos usam um matiz por tela, e cada marca é um gradiente dentro dele.