Web Design System & Style Guide Kit

Details

A design system is what stops the fourth page of a website from looking like a different website, and small teams skip building one because the setup cost lands before any benefit. This kit removes that cost. It supplies a token architecture in CSS custom properties covering colour, typography, spacing, radius, elevation and motion, with a documented naming convention that scales; a type scale and a spacing scale that are mathematically consistent rather than assembled by eye; colour ramps with contrast ratios recorded against accessibility thresholds; and specifications for the core component set covering states, sizing and behaviour. Documentation templates let a team record their own decisions as they extend it. Also included is a contribution and governance guide, because a design system without an agreed way to change it decays within months.

Download Contents: 46 files · token sets (CSS/JSON), type and spacing scales, colour ramps with contrast data (XLSX), 25 × component specifications, documentation templates (HTML/DOCX), governance guide (PDF), README, licence · 9.4 MB

Licence: Developer Licence — Developer Licence — unlimited end products. Use across unlimited websites and applications including paid client work, with full modification and rebranding. The source files themselves may not be resold, redistributed or offered as a template.