Get started

From zero to a Feitio page in a few steps. Pick your path; both end in the same place.

On this page

Two paths

To designYou will think through a screen before it exists: what to read, in what order, and what not to do. To buildYou will build the page: install, load the CSS, pick theme and density, use the components.

To design

Read the Concept.
The three values and the three "nevers" decide everything the rules do not cover. Ten minutes, and the rest makes sense. Concept
Start with mobile and with words.
Before any box: what the screen must say and what the main action is, on a narrow screen. One main action per screen.
Pick the density.
A page for reading breathes; a work screen, with tables and forms, is compact.
Build with components, not boxes.
Each component says when to use it and, above all, when not to. If none fits, look at the patterns.
Check by day, at night, on mobile and with the keyboard only.
And take one thing out before calling it done. When in doubt, take it out.

To build

Install.
Or copy the css/ folder and icons/sprite.svg into your project: Feitio is plain CSS.
```
npm install @feitio/core
```
```
pnpm add @feitio/core
```
```
yarn add @feitio/core
```
```
bun add @feitio/core
```
Load the fonts and the CSS.
The fonts come along, in fonts.css, without asking any other site for anything; if you already serve the fonts your own way, skip that file.
HTML
```
<link rel="stylesheet" href="feitio/css/fonts.css">
<link rel="stylesheet" href="feitio/css/feitio.css">
```

Use the components.

HTML with Feitio’s classes, the Astro components (@feitio/astro) or the React ones (@feitio/react). All three give the same HTML.

HTML

<button type="submit" class="feitio-button" data-variant="primary">Salvar alterações</button>

React

import { Button } from '@feitio/react';

<Button variant="primary" type="submit">Salvar alterações</Button>

Values only from tokens.

No color, space or duration written by hand.

CSS

.minha-area {
  padding: var(--feitio-space-5) var(--feitio-space-4);
  background: var(--feitio-color-surface-raised);
}

Check.
Feitio already tests contrast and icons; on your page, run axe-core and go through everything with the keyboard only.

Theme, mode, density and motion

All by attribute, on any element, and everything transitions when it changes.

HTML

<html lang="pt-BR" data-theme="casa">          <!-- o tema da casa, seguindo o modo do sistema -->
<html lang="pt-BR" data-mode="dark">           <!-- força a noite -->
<section data-density="compact">…</section>   <!-- tela de trabalho -->
<div data-motion="direct">…</div>              <!-- sem transição: arrastar, desenhar -->

A facade for outside work

Create tokens/themes/<name>.light.tokens.json filling the same color roles as the home theme, run bun run build and bun run check (contrast must pass) and use data-theme="<name>". Only the colors change; night comes when the work asks for it.

For AI agents

If an agent is the one building, it reads these first:

AGENTS.md: the rules for whoever works on the repository.
skills/feitio/SKILL.md: how to build an interface with Feitio, and what never to do.
The tokens in JSON (tokens/) and, on the published site, every page also in Markdown plus an llms.txt.

What each file holds, with its link: For agents.