Form follows function.
If a stroke does not separate or signal, remove it.
UI KITS/ INDEX
Submit a kit →
DESIGN SYSTEM / v1.0/EXTRACTED FROM PRODUCTION
The system
behind
the index. Five
rules,
a tiny
palette.
A working catalogue of every token, primitive, and composition the site uses — pulled directly from the codebase so it cannot drift.
FIG. SYS / 9-UP
§ 01
Principles
FIVE RULESThree colours and a paper.
Red, blue, yellow, ink, paper.
Geometry over illustration.
Marks are made from squares, circles, and triangles.
Type does the heavy lifting.
Space Grotesk for voice; JetBrains Mono for metadata.
Every page is a document.
Page numbers, figures, marginalia.
§ 02
Palette
Paper#F2EEE3
Ink#111111
Red#D7263D
Blue#1F4E9D
Yellow#F4C300
Muted#8A857A
§ 03
Typography
DisplayForm follows function88 / .95
HeadlineThe index56 / 1.0
Body LargeA working catalogue17 / 1.55
Label / MonoFORM FOLLOWS FUNCTION12 / 1.2
§ 04
Components
Button
Catalog card
EST. 2011
Bootstrap
The original component grid.
168k
★ Stars
60
Components
MIT
License
Open file →