The why of Feitio

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

Where it comes from

Feitio is an old Portuguese word for the way something is made, by hand. A tailored jacket has feitio; a piece of furniture has feitio. It is about the hand that made it, not only the result.

The system was decided from scratch, one choice at a time, by looking: sixteen drafts, each answering one question, kept from the first to the last. The path itself became part of the system.

The idea: a living workshop

Feitio sits between two images: the bench of someone who makes things by hand, with care and the marks of work, and a workshop full of people and movement, eager to make things happen. Human, never technical. Warm, never solemn.

From it come three values, which say what to do, and three "nevers", which say where not to go. Every rule in the system comes from one of them; when a rule does not cover a case, they decide.

Three values

Refinement

Care in the detail nobody asked for. Few elements, each well finished. If it does not help, it goes.

Why: a screen with fewer things, all of them right, is less tiring and quicker to understand. Refinement is not in what you add, it is in what you take away.

Where it shows: a single type family (Alegreya); a scale of seven spaces; few color roles; the 1px ink stroke; no blurred shadow.

Process

The marks of the work stay visible when they help understanding: what changed, why, what comes next.

Why: an interface that hides how it got there asks for blind trust. Showing the process, in measure, treats people as able to understand.

Where it shows: the slightly uneven corners, like paper cut by hand; the drawn icons, where every joint is two strokes crossing; the history of drafts, kept.

Energy

Orange is movement. It shows where something happens: the main action, what just changed, what needs attention.

Why: energy is not noise. A strong color is only strong when it is rare; orange kept for the action makes the screen point the way by itself.

Where it shows: one orange button per screen; paper that arrives like a cut-out settling on the table; no change of state that happens in a jump.

Three "nevers"

The values say where to go; the "nevers" mark the edge of the road. Each is a common temptation that would pull Feitio away from the idea.

Tech vibes

No neon, glowing dark screens, terminal grids or decorative mono type. The feeling is a workshop, not a server room: the "tech" look says "this is complicated" before any word.

Convoluted

One column, one idea per block, few kinds of component. If something needs explaining to be used, it is wrong: every extra element is one more decision for whoever looks.

Noisy

Orange shows up rarely so it counts. Motion only answers an action, and at most one moment per page arrives on its own. When everything shouts, nothing is heard.

Humanist

Humanist means made for people and with a human mark: lettering born from calligraphy, warm paper and ink colors, drawing with a slightly shaky hand, text written for the person.

In Feitio, this becomes choices you can see: a lively orange; slightly uneven corners; icons drawn by hand; the hard shadow of glued paper.

Mobile first

Today most people reach the internet through a smartphone. So every Feitio screen is born on mobile (phone and tablet) and grows to the computer, never the other way round.

• Mobile is designed first. The wide screen gains columns and side navigation; the switch follows the width of the box the component sits in, not the window.
• The main task comes first, without scrolling.
• 40px targets, with space between them: a finger is not a pointer.
• Nothing depends on hover.
• All the way to 4K: content has a measure and stays centered, and the feedback of an action appears where it happened.
• The screen belongs to the content: what is not used all the time stays tucked away.

Just enough JavaScript

Feitio uses JavaScript where it makes the screen better: the menu drawer, the animated opening, a reply without reloading. It does not have to work without it. What stays out is excess: a big library for a small effect, a script on every page out of habit, the whole screen built in the browser when the server would deliver it ready. Before writing a script, check whether the browser already does it.

When the rule is silent

No documentation covers everything. When a case is not written down, these sentences break the tie:

When in doubt, take it out.

If you cannot say what an element does for the person, it goes.

The word beats the icon.

The drawing helps recognition; the text explains.

Clarity beats personality.

Feitio’s style may never cost understanding.

Process only when it helps.

Showing the way is for understanding, not decoration.

The thumb decides.

If it cannot be done with one hand, it is not ready yet.

Accessible is not optional.

If a beautiful idea leaves someone out, it changes.

The home and the facades

Feitio has a home: the cream and orange theme, by day and at night. For outside work, like a shop page, it lends its structure with another facade: only the colors change. Lettering, shape, space and motion stay Feitio’s. When a job asks for more than other colors, it is made outside the system.