Awesome DESIGN.md

Telling an assistant to make something look considered gets you its idea of considered. Handing it a written specification gets you the specification. This is a collection of seventy-three such specifications, each one a single DESIGN.md file describing how a known site handles colour, type, spacing, depth (its use of shadow and layering) and components, with the do and do-not list spelled out. Each entry also ships two preview pages you can open in a browser to see the palette and the text sizes before choosing. Where this needs care: these describe other people's brands. Reading how Stripe, the payments company, handles spacing in order to learn from it is ordinary practice. Dressing your own product in Stripe's face is not, and the repository says plainly that it claims no ownership of any of these identities.

Reach for it at the start of something new, when the look is undecided and a reference beats a blank page, or when an assistant keeps drifting off-style across a project and you want one written source to hold it steady. It is also a decent way to learn: reading three of these files side by side teaches more about design systems than most articles do. Treat a file as a starting point to adapt, not a costume to wear.

1. Open the Terminal app, the window where you type commands, and paste the line below to download the whole collection into a folder. It uses git, the tool that copies code folders from the internet, which comes with macOS and is free for Windows from git-scm.com. The collection is text and preview pages, so it is small.
2. Browse the folders and open a preview.html in your browser to see a system before choosing it. Copy the DESIGN.md you want into the top level of your own project.
3. Tell your assistant to follow it, for example: read DESIGN.md and rebuild the settings page to match it. Then edit that file as your own decisions accumulate, because from here it should describe your product rather than someone else's.