Falex Design System

Espaço, tamanho e fundo

¼ L

Área de proteçãoUm quarto da larguraNenhum texto, borda ou foto entra nesse espaço em volta do logotipo.

Tamanho mínimo96 px de larguraAbaixo disso os mascotes viram borrão. Para favicon e avatar, usar o selo redondo quando o arquivo chegar.

Branco é o fundo preferido; gema clara e o escuro do tema noturno também funcionam porque o círculo do logotipo é branco. Evite fotos com muita informação atrás, fundo vermelho (o anel some) e qualquer sombra, contorno novo, rotação ou recoloração.

Favicon e ícone de app

Gerados a partir do logotipo completo e já aplicados nesta página. Os arquivos ficam em assets/favicon/, com o site.webmanifest usando caminhos relativos à própria pasta.

Falex Design System

Os ícones recebidos vinham marcados como maskable, mas o logotipo encosta na borda: o Android cortaria os mascotes. Eles seguem como ícone comum, e as versões maskable novas trazem fundo branco com o logotipo dentro da zona segura de 80%. Em 16 e 32 px os mascotes viram mancha e o nome não se lê; quando chegar o selo redondo em vetor, ele deve assumir o favicon pequeno. O favicon.svg recebido ficou fora do cabeçalho: pesa 760 KB e é uma imagem PNG embrulhada em SVG, sem vantagem sobre o PNG.

Mascotes e aplicações

A menina e o menino carregam a memória afetiva da marca. No catálogo, entram só em momentos de marca: boas-vindas, estado vazio e campanhas sazonais. Nunca ao lado de preço ou de dado técnico. A versão 3D fica para redes sociais e campanhas; a frota usa o logotipo plano.

Primitivas

Escala crua. Os componentes nunca usam estes valores direto: passam pelos tokens semânticos. O selo marca o tom medido na fonte original.

Tokens semânticos

O que o catálogo consome. Cada token tem valor próprio no tema claro e no escuro; o escuro é uma torra de amendoim, sem preto puro.

Erro e marca são vermelhos. Por isso, todo erro vem com ícone e frase explicando o que corrigir; cor sozinha nunca sinaliza problema.

Proporção numa tela de catálogo

As cores fortes das embalagens já enchem a tela. A interface em volta fica quieta para não competir com elas. Categoria não ganha cor própria: com 16 categorias, qualquer código de cor bateria de frente com as listras dos pacotes.

Contraste

Pares usados na interface, com razão de contraste calculada (WCAG 2.2).

Escala

Regras de escrita

• Nome de produto em caixa normal. "Pé de moleque crocante", mesmo que o rótulo venha em maiúsculas.
• Peso com espaço antes da unidade, como manda o SI: 300 g, 1 kg, 5 × 20 g.
• Números técnicos sempre em Geist Mono, para que EAN e preço fiquem alinhados em coluna.
• Largura condensada só acima de 38 px. Em texto de interface a Bricolage fica na largura normal.

Espaço

Raio

Elevação

Sombra só onde há objeto que se move ou flutua. Painéis parados usam borda de 1 px.

Padrões de rótulo

As embalagens Falex usam listras verticais e uma borda de meia-lua com furinhos. No sistema elas viram duas peças: .fx-listra e .fx-recorte, sempre juntas e sempre na borda de cima de um bloco.

Movimento

Transições de 120 a 320 ms com saída suave (--fx-ease-out). O único salto elástico do sistema é o contador do pedido quando uma caixa entra. Com "reduzir movimento" ativo no aparelho, tudo fica estático.

Botões

Campos

Filtros

Chip selecionado inverte para o tom mais escuro do tema; o vermelho fica livre para a ação principal. As 16 categorias abaixo são as do site atual.

Alertas

Card de produto

Três estados: sem login (preço fechado, botão de adicionar), com login e caixas no pedido (preço e contador), e produto sem foto, aqui da José Pepper. Os botões funcionam e alimentam o mesmo pedido do catálogo abaixo.

Linha de lista

Para recompra: o comprador que já conhece o mix digita a quantidade sem abrir ficha.

Vazio, carregando e aviso

Nenhum produto para "pacoca doce"

Tente com cedilha, "paçoca", ou busque pelos 13 dígitos do EAN que está no pacote.

Ver todas as categorias

2 caixas de Torrone de amendoim no pedido

Arquivos

index.html

Esta documentação

tokens/tokens.css

Primitivas, semânticas, tema escuro e escopo de marca

tokens/components.css

Componentes de referência com prefixo fx-

tokens/tailwind.css

Bloco @theme para Tailwind v4, com a paleta padrão removida

assets/marca/

Logotipos Falex e José Pepper em PNG e WebP, versão 3D, caminhão

assets/produtos/

8 packshots em WebP, 1200 px e 480 px

assets/favicon/

Favicon ICO e PNG 96 px, ícone Apple 180 px, ícones de app 192 e 512 px (comum e maskable) e site.webmanifest

Uso com Tailwind v4

/* globals.css */
@import "tailwindcss";
@import "./falex/tokens.css";
@import "./falex/tailwind.css";

<button class="rounded-pill bg-brand px-5 text-on-brand hover:bg-brand-hover">
  Adicionar caixa
</button>

<!-- tudo aqui dentro usa vermelho e verde José Pepper -->
<section data-brand="jose-pepper"> ... </section>

Decisões pendentes com a Falex

1. Quem vê preçoTodo CNPJ logado, tabela por região ou rede, ou só cotação. O card já tem o espaço reservado, com cadeado.
2. Lista oficial de SKUCódigo interno, EAN, unidades por caixa e pedido mínimo. Há divergência: o site lista Paçoca Rolha com 350 g e 200 g, e o pote atual traz 300 g com a redução impressa no rótulo.
3. Fechamento do pedidoWhatsApp (19) 99799-1690, e-mail ou integração com o sistema de pedidos da Falex.
4. Arquivos de marcaVetor do logotipo, o selo redondo "Tradição em Qualidade" que aparece no site e os nomes dos mascotes.
5. FotosFaltam packshots da José Pepper e da maior parte das 16 categorias.