Craft: Curated Design Engineering Concepts by Gustavo Fior

X postAdham DannawayResource

Adham Dannaway highlights Gustavo Fior's project »Craft«, an online collection of brief essays explaining essential design engineering principles, spanning typography, layout math, motion, sound, and colour handling.

Key points

  1. Focused essay collection: Gustavo Fior's »Craft« provides concise practical guides and micro-concepts for design engineering rather than exhaustive documentation.
  2. Typography and color mechanics: Covers practical details such as tabular numbers, optical centering, font smoothing nuances, OKLCH lightness values, and grain/noise.
  3. Layout precision: Outlines mathematical interface rules, including nested border radii (outer radius minus padding), hit target sizing, and squircle corners.
  4. Animation and feedback: Explores motion details like interruptible transitions, instant hover states, and scale feedback on button presses.
  5. Skill integration: The project is accessible on the web, hosted on GitHub, and can be integrated via the command »npx skills add gustavo-fior/craft«.

Why it matters

The gap between static Figma mockups and polished, fluid applications is often bridged by design engineers. Collections like Craft distill subtle tactile details—from easing curves to correct corner radii—into actionable rules that elevate overall software craftsmanship.

Analysis

Fior's resource stands out because it treats interaction and visual polish as engineering problems with concrete formulas. While several modules remain marked as upcoming, the available guides provide clear rules of thumb that developers and UI designers can immediately verify and apply in production interfaces.

Original post

Adham Dannaway

@AdhamDannaway · 26 October 2026

📓 A collection of design engineering concepts These essays are short and simple, meant as a collection of useful ideas and tricks rather than an exhaustive resource. → t.co/v2wotCVRa2 By Gustavo Fior t.co/2WGZBKN8yR

412 likes3 replies568 bookmarks14.3k views

View on X
Selected replies (3)
  • @easedui @AdhamDannaway Saving this, short ones like these are the only design reading I actually finish
  • @eclarkhalid @AdhamDannaway the interruptibility example makes a useful test case: open, close and reopen a sheet before it settles. also run the same sequence with reduced motion enabled so the final state and controls stay consistent.
  • @sarveshsea @AdhamDannaway Thanks for sharing Gustavo’s collection. Short, focused explanations are a useful way to explore the details behind interface craft.

Mentioned links

Links and tools from this entry

Summary generated by AI (Gemini 3.8 Flash, 27 October 2026). It may contain errors – the original source is authoritative.

Related entries

Similar in content, found by the AI search.

  • Link:Gustavo Fior

    Craft: A Collection of Design Engineering Concepts

    Craft by Gustavo Fior is a curated reference collection of concise essays and practical tips covering design engineering. Topics span typography, colour, layout, motion, sound, and data visualisation.

    Web development· Resource

  • Link:Jakub Krehel

    Make Interfaces Feel Better: Design Engineering Principles for Polished UIs

    Jakub Krehel shares 'make-interfaces-feel-better', a design engineering skill and guideline package for building and reviewing UI details. It covers rules across typography, surfaces, animations, icons, and performance, alongside a structured review methodology.

    Web development· Resource

  • X post:Noah

    Curated Resource List for Design Engineers

    Noah (@noahelhadedy) shared a curated list of five websites and learning resources tailored for design engineers, focusing on interface craft, animation, and micro-interactions.

    4.1kbookmarks115.9kviews

    Web development· Resource

  • X post:Adham Dannaway

    Design Skills for AI Agents: Equipping Coding Agents with UX and UI Knowledge

    Adham Dannaway highlights 'Design Skills for AI Agents', an open collection developed by Carlos Cuéllar. The repository provides structured design heuristics, WCAG 2.2 accessibility rules, and design system frameworks for tools such as Claude Code, Cursor, and Codex.

    100bookmarks5.2kviews

    AI & LLMs· Resource

Back to the knowledge base

Let's talk about your project

Get in touch

Locations

  • Mattersburg
    Johann Nepomuk Bergerstraße 7/2/14
    7210 Mattersburg, Austria
  • Vienna
    Ungargasse 64-66/3/404
    1030 Wien, Austria

Parts of this content were created with the assistance of AI.