Black Belt Design Library
The published design system behind the Black Belt iOS app: one grid, three radii, seven type roles, a single card anatomy, drawn in light and dark from the same stylesheet that renders the app's screens.
Black Belt is a Brazilian Jiu-Jitsu training app. This is its design library — not a document describing the system, but the system itself, rendered.
What it holds
- Foundations — a base-8 grid with a 4pt half step, three radii, seven type roles across five sizes and three weights, and a neutral palette with one accent and a single chart hue per screen
- The card — every card on every screen shares one anatomy: eyebrow, title, context line, body, caption, action. Cards differ only in what fills the body
- Components — each drawn in the four layers of the pixel-grid method: grid, padding and areas, structure, type
- Surfaces — full screens and chart specimens, every one shown in both light and dark
- Never ship — the rules that reject a design before it reaches a build
Why it renders instead of describes
The library is a single self-contained page that imports nothing. Every specimen is drawn by the same stylesheet that renders the app's screens canvas, so a component cannot drift from its documentation — the documentation is the component. Writing it this way forced each rule to survive being drawn: a spacing value with no specimen behind it did not make the page.
Constraints it encodes
No bold and no semibold; emphasis is weight 500 or the secondary colour, never a larger size. Passive content cards stay opaque and accessible while navigation and transient UI take the native glass treatment. Charts get one hue per screen and every mark is a gradient inside it.