Começar

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

Nesta página

Dois caminhos

Para desenharVai pensar uma tela antes de ela existir: o que ler, em que ordem, e o que não fazer. Para programarVai montar a página: instalar, carregar o CSS, escolher tema e densidade, usar os componentes.

Para desenhar

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
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.
Escolha a densidade.
Página para ler respira; tela de trabalho, com tabelas e formulários, é compacta.
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.
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

Instale.
Ou copie a pasta css/ e o icons/sprite.svg para o seu projeto: o Feitio é CSS puro.
```
npm install @feitio/core
```
```
pnpm add @feitio/core
```
```
yarn add @feitio/core
```
```
bun add @feitio/core
```
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">
```

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>

React

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

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

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);
}

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.