# Get started

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

## Two paths

[**To design**You will think through a screen before it exists: what to read, in what order, and what not to do.](#desenhar) [**To build**You will build the page: install, load the CSS, pick theme and density, use the components.](#programar)

## To design

1.  **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](/en/design/conceito/)
    
2.  **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.
    
3.  **Pick the density.**
    
    A page for reading breathes; a work screen, with tables and forms, is compact.
    
4.  **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.
    
5.  **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

1.  **Install.**
    
    Or copy the `css/` folder and `icons/sprite.svg` into your project: Feitio is plain CSS.
    
    ```shell
    npm install @feitio/core
    ```
    
    ```shell
    pnpm add @feitio/core
    ```
    
    ```shell
    yarn add @feitio/core
    ```
    
    ```shell
    bun add @feitio/core
    ```
    
2.  **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">
    ```
    
3.  **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>
    ```
    
    ```jsx
    import { Button } from '@feitio/react';
    
    <Button variant="primary" type="submit">Salvar alterações</Button>
    ```
    
4.  **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);
    }
    ```
    
5.  **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](/en/dev/agentes/).