# Feitio

A humanist design system, made by hand.

Before any color or component, an idea: interfaces that show the care of whoever made them and the will to move forward.

[Get started](/en/dev/comecar/)[Read the Design](/en/design/conceito/)

## Three values

Every Feitio rule comes from one of them; when a rule does not cover a case, they decide.

-   ### Refinement
    
    Care in the detail nobody asked for. Few elements, each well finished. If it does not help, it goes.
    
-   ### Process
    
    The marks of the work stay visible when they help understanding: what changed, why, what comes next.
    
-   ### Energy
    
    Orange is movement. It shows where something happens: the main action, what just changed, what needs attention.
    

## Real components

Paper, ink and a rare orange: every piece is drawn to go with the others. Each has its own page, with when to use it and the code.

[See all 49 components](/en/components/)

## Try it

The same screen, with the choices Feitio lets you change. The lettering, the stroke, the corners and the icons stay: they are how the system is recognized.

## Where to start

Four areas, each with its own navigation.

[**Design**The concept, the foundations, the patterns and the brand: the why behind every choice.](/en/design/conceito/) [**Development**Install, themes and modes, tokens, layout and what AI agents need.](/en/dev/comecar/) [**Components**Every piece, with when to use it, when not to, and the code of each example.](/en/components/) [**Resources**The hand-drawn icons and illustrations, to search and copy.](/en/resources/icones/)