# Começar

Do zero a uma página no Feitio em poucos passos. Escolha o seu caminho; os dois terminam no mesmo lugar.

## Dois caminhos

[**Para desenhar**Vai pensar uma tela antes de ela existir: o que ler, em que ordem, e o que não fazer.](#desenhar) [**Para programar**Vai montar a página: instalar, carregar o CSS, escolher tema e densidade, usar os componentes.](#programar)

## Para desenhar

1.  **Leia o Conceito.**
    
    Os três valores e os três "nunca" decidem tudo que as regras não cobrem. Dez minutos, e o resto faz sentido. [Conceito](/pt/design/conceito/)
    
2.  **Comece pelo mobile e pelas palavras.**
    
    Antes de qualquer caixa: o que a tela precisa dizer e qual é a ação principal, numa tela estreita. Uma ação principal por tela.
    
3.  **Escolha a densidade.**
    
    Página para ler respira; tela de trabalho, com tabelas e formulários, é compacta.
    
4.  **Monte com componentes, não com caixas.**
    
    Cada componente diz quando usar e, principalmente, quando não usar. Se nenhum serve, veja os padrões.
    
5.  **Confira de dia, à noite, no mobile e só com o teclado.**
    
    E tire uma coisa antes de dar por pronto. Na dúvida, tire.
    

## Para programar

1.  **Instale.**
    
    Ou copie a pasta `css/` e o `icons/sprite.svg` para o seu projeto: o Feitio é CSS puro.
    
    ```shell
    npm install @feitio/core
    ```
    
    ```shell
    pnpm add @feitio/core
    ```
    
    ```shell
    yarn add @feitio/core
    ```
    
    ```shell
    bun add @feitio/core
    ```
    
2.  **Carregue as fontes e o CSS.**
    
    As fontes vêm junto, no `fonts.css`, sem pedir nada a outro site; quem já serve as fontes do seu jeito pula esse arquivo.
    
    ```html
    <link rel="stylesheet" href="feitio/css/fonts.css">
    <link rel="stylesheet" href="feitio/css/feitio.css">
    ```
    
3.  **Use os componentes.**
    
    HTML com as classes do Feitio, os componentes do Astro (`@feitio/astro`) ou os do React (`@feitio/react`). Os três dão o mesmo 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.  **Valores só dos tokens.**
    
    Nenhuma cor, espaço ou duração escrita à mão.
    
    ```css
    .minha-area {
      padding: var(--feitio-space-5) var(--feitio-space-4);
      background: var(--feitio-color-surface-raised);
    }
    ```
    
5.  **Confira.**
    
    O Feitio já testa contraste e ícones; na sua página, rode o axe-core e percorra tudo só com o teclado.
    

## Tema, modo, densidade e movimento

Tudo por atributo, em qualquer elemento, e tudo transiciona quando muda.

```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 -->
```

### Uma fachada para um trabalho de fora

Crie `tokens/themes/<nome>.light.tokens.json` preenchendo os mesmos papéis de cor da casa, rode `bun run build` e `bun run check` (o contraste precisa passar) e use `data-theme="<nome>"`. Só as cores mudam; a noite vem quando o trabalho pedir.

## Para agentes de IA

Se quem programa é um agente, ele lê antes de começar:

-   `AGENTS.md`: as regras para quem mexe no repositório.
-   `skills/feitio/SKILL.md`: como construir uma interface com o Feitio, e o que nunca fazer.
-   Os tokens em JSON (`tokens/`) e, no site publicado, cada página também em Markdown e um `llms.txt`.

O que cada arquivo tem, e o link para ele: [Para agentes](/pt/dev/agentes/).