# 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.

Website: https://craft.gustavofior.com/

## What it is 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](https://xiry.app/topics/design.md)
- 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, 17 September 2026](https://x.com/heyimgustavo/status/2100659957267870001): A bookmarkable library of concrete, practical design-engineering lessons — many bookmarked (4.1k) and liked (2.7k).

## Related

- [15 UI Sites You'll Need](https://xiry.app/resources/15-ui-sites-you-ll-need): Curated collection of 15 UI and design resources for polished websites. (List, Free)
- [ABER MONO](https://xiry.app/resources/aber-mono): A clean, modern monospaced typeface with technical styling (Free)
- [Atlassian Typography Cheatsheet](https://xiry.app/resources/atlassian-typography-cheatsheet): Practical rules and ratios for type scale, line height, and length (Framework, Free)
- [Design System Checklist](https://xiry.app/resources/design-system-checklist): Open-source interactive checklist for planning, building, and maintaining design systems (Website, Free)
- [DrumSpirit](https://xiry.app/resources/drumspirit): Belgian percussion group website featured as web design inspiration (Website, Free)
- [iOS UI Font Size Rules & Reference](https://xiry.app/resources/ios-ui-font-size-rules-and-reference): A reference guide to typography rules and sizes for iOS interfaces. (Tip, Free)

Updated 10 October 2026. Page: https://xiry.app/resources/craft

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.