Sobre este template
Beauty Categories preserva o rastro das decisões: o briefing que produziu esta seção de recursos tem 4.038 caracteres. A página inteira é construída sobre branco #EBEBEB por baixo, laranja profundo #251E18 para a tipografia e laranja #593C2D carregando os destaques. A entrega é React e Tailwind CSS, capturada em 640x470 para a moldura estar fixada antes de qualquer linha de código. A página mantém o movimento em transições de 150ms. Se você está briefando uma seção de recursos de e-commerce, parta desta composição e substitua o assunto.
Feito para
- Feito para quem cuida do conteúdo e reescreve uma seção de recursos cujo título precisa continuar tão longo quanto o da Beauty Categories.
- Times de produto que escrevem o texto da Seção de recursos e precisam que cada linha respeite o comprimento para o qual o display foi dimensionado.
- Feito para um fundador solo lançando uma seção de recursos para uma marca de e-commerce, sem nenhum design system atrás.
O que está incluído
- Uma escala para tipo e moldura. Os tamanhos são declarados, não herdados: passos de espaçamento de 20px e transições de 150ms. Troque a família tipográfica ou o texto e essas relações continuam valendo. Todo valor pode ser conferido contra o prompt capturado, e é isso que torna uma reconstrução verificável em vez de aproximada.
- Cor com descrição de cargo. Laranja #593C2D é o único valor saturado da composição; todo o resto fica sobre branco #EBEBEB. Botões, links e pequenos destaques tomam emprestado dele, e é isso que mantém legível uma primeira tela cheia de elementos. O contraste entre #593C2D e branco #EBEBEB é o que torna o destaque legível em tamanhos pequenos.
- Varrer vence ler aqui. A grade de cards é o recurso de organização: painéis iguais, uma ideia cada, sem hierarquia entre eles. A grade colapsa para uma coluna só sem mudar a ordem dos painéis.
- A composição é o conteúdo. A composição de seção de recursos é construída para o texto chegar antes de tudo: a tipografia carrega a hierarquia, a moldura em 640x470 segura a composição e os valores de apoio ficam discretos. A página é uma composição só em 640x470, e é por isso que ela se sustenta quando o texto muda. O briefing é a especificação.
Movimento e interação
Durações vindas do briefing
As mudanças de estado estão especificadas em 150ms, então o feedback dos controles é um valor projetado, não o padrão do navegador. Os tempos curtos são o motivo de a página parecer autoral; um padrão lento desfaria a composição.
Hover onde faz sentido
A camada interativa é pequena e previsível: estados de hover nos botões e links, não em todos os cards. Todo o resto fica parado, e isso mantém a ênfase na composição. Como os estados são simples, eles portam para qualquer sistema de componentes. Confira os estados em um dispositivo de toque.
O que mudar primeiro em Beauty Categories
Componha o texto novo no tamanho de display que o briefing nomeia (passos de espaçamento de 20px e transições de 150ms), e o resto da escala acompanha sem um novo design. Coloque o texto novo no mesmo tamanho de display e confira o contraste de novo antes de acrescentar qualquer coisa.
O argumento que esta seção de recursos faz
Uma tela significa uma decisão para o leitor, e esse é o custo deste layout: todo o resto vai para baixo da dobra. O briefing declara passos de espaçamento de 20px e transições de 150ms para que as seções de baixo mantenham o mesmo ritmo. Dá ao leitor de e-commerce a rota honesta mais curta até a oferta.
Como Beauty Categories ordena a primeira leitura
O briefing tem 4.038 caracteres e nomeia a ordem de leitura explicitamente: a linha de estatísticas, a grade de cards e o clipe de fundo, com passos de espaçamento de 20px e transições de 150ms entre eles. O leitor de e-commerce recebe a oferta antes das opções.
Perguntas frequentes
Qual é o tamanho do prompt por trás de Beauty Categories?
O briefing capturado tem 4.038 caracteres e cobre a moldura, a escala tipográfica, a paleta e as transições. Ao copiá-lo você recebe esse texto; ao enviá-lo ao Studio, o mesmo pedido é preparado com a página já descrita.
Por que a entrada cita React e Tailwind CSS?
Beauty Categories foi construído em React e Tailwind CSS, e a entrada registra isso para dar procedência. O briefing descreve posições, tamanhos e tempos, então ele se reconstrói em qualquer framework capaz de definir tipografia e posicionar elementos.
Quanto de Beauty Categories é animado?
O movimento é especificado no mesmo nível de detalhe do layout: as mudanças de estado assentam na faixa de 150ms. Porte a composição primeiro e os tempos depois, porque é mais fácil igualá-los depois que o layout está de pé.
