Design System Framework (with sample)

The Design System Framework written out for Lumio, a fictional project collaboration tool. Its DESIGN.md explains every token in nine sections, the Tokens table holds about 100 tokens, chart colours and breakpoints included, whose text, control and main chart colours pass contrast checks in light and dark, and fourteen component pages (Button, Input, Dialog, Toast and ten more), each with a live component under it that has examples, code and props, show finished documentation. Brand keeps Lumio's coral out of buttons and says why, with logo specifications, font licences and a word list of about fifteen words. Component inventory has over twenty components, Design reviews has page, dashboard, brand and AI reviews with findings tied to tokens, pages and WCAG criteria, benchmark tasks show which AI results drifted, and Changes and decisions records why each rule is what it is. Start here explains how to replace it all with your own, tokens first.