# O porquê do Feitio Antes de qualquer cor ou componente, uma ideia: interfaces que mostram o cuidado de quem fez e a vontade de seguir em frente. ## De onde vem Feitio é uma palavra antiga do português para o jeito como uma coisa é feita, à mão. Um paletó tem feitio; um móvel tem feitio. É sobre a mão de quem fez, não só sobre o resultado. O sistema foi decidido do zero, uma escolha por vez, olhando: dezesseis rascunhos, cada um respondendo a uma pergunta, guardados do primeiro ao último. O próprio caminho virou parte do sistema. ## A ideia: um ateliê vivo O Feitio fica entre duas imagens: a bancada de quem faz à mão, com cuidado e marcas do trabalho, e uma oficina cheia de gente e de movimento, com vontade de fazer acontecer. Humano, nunca técnico. Caloroso, nunca solene. Daí vêm três valores, que dizem o que fazer, e três "nunca", que dizem onde não ir. Toda regra do sistema sai de um deles; quando uma regra não cobre um caso, são eles que decidem. ## Três valores ### Requinte Cuidado no detalhe que ninguém pediu. Poucos elementos, cada um bem acabado. Se não ajuda, sai. **Por quê:** uma tela com menos coisas, todas certas, cansa menos e se entende mais rápido. O requinte não está no que se acrescenta, está no que se tira. **Onde aparece:** uma família de letras só (a Alegreya); uma régua de sete espaços; poucos papéis de cor; o traço de tinta de 1px; nenhuma sombra borrada. ### Processo As marcas do trabalho ficam à vista quando ajudam a entender: o que mudou, por quê, o que vem depois. **Por quê:** uma interface que esconde como chegou ali pede confiança cega. Mostrar o processo, com medida, é tratar quem usa como alguém que pode entender. **Onde aparece:** os cantos levemente irregulares, como papel cortado à mão; os ícones desenhados, em que toda junção é um cruzamento de traços; o histórico dos rascunhos guardado. ### Energia O laranja é movimento. Aparece onde algo acontece: a ação principal, o que acabou de mudar, o que pede atenção. **Por quê:** energia não é barulho. Uma cor forte só tem força se for rara; o laranja guardado para a ação faz a tela apontar o caminho sozinha. **Onde aparece:** um botão laranja por tela; o papel que chega como um recorte assentando na mesa; nenhuma mudança de estado que aconteça num salto. ## Três "nunca" Os valores dizem para onde ir; os "nunca" marcam a beira do caminho. Cada um é uma tentação comum, que puxaria o Feitio para longe da ideia. ### Tech vibes Nada de neon, tela escura brilhando, grade de terminal ou fonte mono decorando. A sensação é de ateliê, não de sala de servidores: o visual "tecnológico" diz "isto é complicado" antes de qualquer palavra. Faça assim **Backup concluído** Tudo salvo às 3h12. O próximo é amanhã. A mesma informação, em palavras de gente. Não faça `> backup.status: OK ts=03:12:44Z` Neon, mono e brilho: parece um painel de servidor. ### Convoluto Uma coluna, uma ideia por bloco, poucos tipos de componente. Se algo precisa de explicação para ser usado, está errado: cada elemento a mais é uma decisão a mais para quem olha. Faça assim **Lembretes** Regar as plantas, terça às 9h. Relatório, dia 1. Um bloco, uma coluna, uma ideia. Não faça 3HojeSemanaTagsFiltrosMais… Uma grade de coisas iguais, todas pedindo atenção ao mesmo tempo. ### Barulhento O laranja aparece pouco para valer muito. O movimento só responde a uma ação, e no máximo um momento por página chega sozinho. Quando tudo grita, nada é ouvido. Faça assim Aprovar mudança Um laranja, onde está a ação. Não faça NovoUrgenteBetaDestaque Etiquetas laranja por toda parte: o laranja perde o sentido. ## Humanista Humanista quer dizer feito para gente e com marca de gente: letra nascida da caligrafia, cores quentes de papel e tinta, desenho com a mão tremendo um pouco, texto escrito para a pessoa. No Feitio, isso vira escolhas que se veem: um laranja vivo; cantos levemente irregulares; ícones desenhados à mão; a sombra dura, de papel colado. ## Mobile first Hoje a maior parte das pessoas acessa a internet pelo smartphone. Por isso toda tela do Feitio nasce no mobile (celular e tablet) e cresce para o computador, nunca o contrário. - **Desenha-se primeiro o mobile.** A tela larga ganha colunas e a navegação do lado; a troca é pela largura da caixa onde o componente está, não da janela. - **A tarefa principal vem primeiro**, sem rolar. - **Alvos de 40px**, com espaço entre eles: dedo não é ponteiro. - **Nada depende do mouse por cima.** - **E até o 4K:** o conteúdo tem medida e fica no centro, e o retorno de uma ação aparece no lugar dela. - **A tela é do conteúdo:** o que não se usa toda hora fica guardado. ### JavaScript na medida O Feitio usa JavaScript onde ele deixa a tela melhor: a gaveta do menu, a abertura animada, uma resposta sem recarregar. Não precisa funcionar sem ele. O que não entra é o excesso: biblioteca grande para um efeito pequeno, script em toda página por costume, a tela inteira montada no navegador quando o servidor já entregaria pronta. Antes de escrever um script, veja se o navegador já resolve sozinho. ## Quando a regra não diz Nenhuma documentação cobre tudo. Quando um caso não estiver escrito, estas frases desempatam: Na dúvida, tire. Se não dá para dizer o que um elemento faz pela pessoa, ele sai. A palavra vence o ícone. O desenho ajuda a reconhecer; quem explica é o texto. Clareza vence personalidade. O jeito do Feitio nunca pode custar o entendimento. Processo só quando ajuda. Mostrar o caminho é para entender, não para enfeitar. O polegar decide. Se não dá para fazer com uma mão, ainda não está pronto. Acessível não é opcional. Se uma ideia bonita deixa alguém de fora, ela muda. ## A casa e as fachadas O Feitio tem uma casa: o tema creme com laranja, de dia e à noite. Para trabalhos de fora, como a página de uma loja, ele empresta a estrutura com outra fachada: só as cores mudam. Letra, forma, espaço e movimento continuam do Feitio. Quando um trabalho pede mais do que outras cores, ele é feito fora do sistema.