Design · Website
Craft
A collection of design engineering concepts and practical UI craft lessons
Craft is an open-source library of short, focused essays and visual guides on design engineering concepts. Created by Gustavo Fior, it breaks down practical UI details across typography, layout, motion, color, sound, and data visualization. It is designed as a quick-reference collection of polish techniques and rules of thumb for building refined web interfaces.
What it's for
- Learn practical front-end polish techniques for UI details like nested border radii and optical alignment
- Reference rules of thumb for typography, color spaces, and animation timing
- Install the concepts directly into development projects via the associated CLI skill
Features
- Short, focused guides organized by topic: Craft, Typography, Color, Layout, Motion, Sound, and Data
- Visual demonstrations of interface details like tabular numbers and nested borders
- Available CLI skill to add lessons to local workflows via npx
- Open-source repository open to community contributions
- Curated lists of external resources and design inspiration ('GOATs')
Pricing
Open source
Details
- Type
- Website
- Category
- Design
- Topic
- Design Engineering
- Open source
- Yes
- Platforms
- Web
- For
- Design engineers, front-end developers, and UI/UX designers
- Tags
- design engineering, ui design, front end, typography, microinteractions, css
Why it was saved
- @heyimgustavo: A bookmarkable library of concrete, practical design-engineering lessons — many bookmarked (4.1k) and liked (2.7k).
Related
Curated collection of 15 UI and design resources for polished websites.
A clean, modern monospaced typeface with technical styling
Practical rules and ratios for type scale, line height, and length
Open-source interactive checklist for planning, building, and maintaining design systems
Belgian percussion group website featured as web design inspiration
A reference guide to typography rules and sizes for iOS interfaces.
Updated