Design Atlas
Type
documentation
Verdict
Niche
Licence
Ship licence, open source permissiveopen-source-permissiveThe public GitHub repository states MIT for the project; Inter and Redaction 35 fonts retain their SIL Open Font Licences.
Agent channels
skill
Pricing
free
Reviewed

← Atlas · Topics: motion, typography-and-styles, inspiration

Craft ​

Type
documentation
Verdict
Niche
Licence
Ship licence, open source permissiveopen-source-permissiveThe public GitHub repository states MIT for the project; Inter and Redaction 35 fonts retain their SIL Open Font Licences.
Agent channels
skill
Pricing
free
Reviewed

What it is ​

A compact collection of design-engineering concepts grouped by craft, typography, color, layout, motion, sound and data. Published notes combine a short principle, a live interactive example and links to further reading. The public repository also provides an installable craft-design-engineering skill.

When to open it ​

Use it for a focused implementation decision, especially when you need to compare a common interaction with a quieter alternative. It is a small collection rather than a complete handbook; several index topics are marked as coming soon.

Most useful ​

  • Hover Restraint compares a delayed hover highlight with an instant one, then applies the same reasoning to tooltip delays and keyboard-triggered sidebars.
  • Nested Border Radius and Noise are direct examples of small layout and color techniques.
  • The index groups concepts by discipline and keeps a persistent left navigation, with theme and sound controls in the page header.

Using it with agents ​

The project publishes an agent skill through the gustavo-fior/craft GitHub repository. The site also exposes a “Copy as Markdown” control on concept pages. Use either route when an agent needs the written principle; inspect the live demo for behavior that Markdown cannot show.

Watch out for ​

The site notes that unpublished repository articles are AI placeholders, and many index entries are marked coming soon. Use published pages only. The MIT licence covers the project repository; the included fonts have their own licences.

Reusable ideas ​

  • Make an interaction principle concrete with side-by-side wrong and right demos.
  • Explain the user condition behind a rule, then show the effect at the interface scale where it occurs.
  • Put related resources and neighboring concepts beside the example so implementation details remain easy to follow.

Design Motion Principles, Emil Kowalski's skills, Modern CSS Solutions