What this is

Motif is a free, open, interactive field guide to modern interface craft — fundamentals, visual design, design systems, motion, the modern web platform, accessibility, conversion psychology, brand, and generative UI.

Every lesson follows one loop: read a tight explanation, see it run as a live demo you can manipulate, copy code that works on first paste, make it yours by changing parameters, and reproduce it with a copy-paste prompt for any LLM. The site is built to be the best demonstration of its own lessons: accessible, fast, and distinctively designed.

Original by rule

Every explanation, code sample, illustration, and example here is original. Where a lesson needs a brand, it uses invented, fictional ones. Nothing is copied, embedded, or re-hosted from elsewhere. Facts and ideas are shared knowledge; the words, code, and assets are ours and yours to reuse under the licenses below.

Licensing

• Code & components are under the MIT license. Copy them and use them anywhere — that's the point.
• Written lesson content is under CC BY 4.0. Share and adapt it with attribution.

How to contribute

Contributions of every size are welcome — new lessons, new interactive components, fixes, and accessibility improvements. The bar is real: every lesson is a working demo with copy-paste code and a reproduction prompt, and must hold the accessibility and performance floor. Start from the gold-standard concept and match it on all five axes: tone, rigor, runnable code, accessibility, and the prompt.

Read CONTRIBUTING.md and AGENTS.md in the repository for the full workflow, and see the accessibility statement for the standard we hold ourselves to.

Privacy

There are no accounts and we collect no personal data. Lessons that run a real model use your API key, kept in your browser and never sent to our servers — you can manage it anytime in settings.