Acervo /Sistema

Regras simples para todo fluxo.

O Acervo vai crescer em novos fluxos: o painel do escritório, o envio de um projeto, a especificação de mobiliário. Todos saem dos mesmos poucos ingredientes, dos mesmos tokens e dos mesmos movimentos. Esta página é onde essas regras vivem, rodando no mesmo arquivo do site.

01

Origem

A ideia por trás de todo movimento: as coisas começam onde você tocou e voltam para lá. Uma foto cresce até o visualizador a partir do próprio card; um painel abre de dentro do botão que o pediu; a página do projeto sobe sobre a lista, e a lista espera na mesma rolagem.

02

Ingredientes

Cinco peças montam toda tela. A foto é a única coisa com cor; a interface em volta fica quieta. Fotos têm cantos retos, tudo o que se pressiona é arredondado, e as linhas são finas, nunca bordas.

03

Tipografia

Uma família só, a do próprio sistema: SF Pro em aparelhos Apple, Inter nos demais. Cada tamanho tem um papel, então uma tela nova escolhe um papel, não um número.

04

Forma e elevação

Três alturas acima da página, mais a barra de vidro. Flutuar se conquista: barras sobre o conteúdo flutuam, painéis e menus sobem, e só modais e gavetas ficam na camada mais alta.

05

Tokens de movimento

Quatro durações, três curvas e uma mola física para o que viaja pela tela. Entrada rápida, pouso suave; o que sai sai mais rápido do que o que chega. Com movimento reduzido, toda duração vira zero.

06

Padrões de movimento

Sete movimentos com nome. Um fluxo novo escolhe entre eles, em vez de inventar o próprio tempo. Cada um diz quais tokens usa e onde o Acervo já o usa.

07

Componentes

As peças reais, direto do acervo.css: não desenhos delas. Um fluxo novo parte delas primeiro; um componente novo ganha seu card aqui, com seus estados.

08

Regras para crescer

O que mantém o próximo fluxo com a cara deste, seja quem for que o construa.

  1. Tokens primeiro. Duração, curva, sombra, raio, tamanho ou camada que não está no tokens.css não entra num componente. Se um fluxo precisar de um, ele é adicionado lá, com seu papel. node tools/check-tokens.mjs confere isso antes de qualquer coisa ir ao ar.
  2. Comece da origem. Todo painel, folha e página sabe o que o abriu, sai de dentro disso e volta para lá.
  3. Escolha um padrão, não um tempo. Pressionar, Revelar, Crescer, Dobrar, Chegar, Passagem, Página. Um movimento novo ganha nome e card aqui antes de ir ao ar.
  4. A foto conduz. A cor vem das fotos. O laranja é só do símbolo; o bege marca o que a IA leu e o escritório ainda não confirmou.
  5. Fotos retas, controles redondos, linhas finas. Sem bordas, sem sombras pesadas, nada decorativo em volta das imagens.
  6. Macro antes de micro. Busca e filtros oferecem escolhas amplas; nada neles pode crescer a milhares de opções.
  7. Nunca force uma ordem. Toda opção diz quantos resultados deixa, para o beco sem saída aparecer antes de você chegar nele.
  8. Movimento é opcional. Com movimento reduzido, todo token vira zero; a página precisa ler igual sem ele.