Design System Falex · versão 1.0

Manual da marca Falex

A base visual do catálogo da Falex Alimentos e da linha José Pepper. Cores, letras, selos e componentes saíram das embalagens que a Falex entrega desde 1998 a supermercados e conveniências de estrada, num raio de 800 km de Limeira.

Marcas: Falex Alimentos e José Pepper
Quem compra: Lojistas com CNPJ
Temas: Claro e escuro
Famílias: Bricolage, Figtree e Geist Mono

Ponto de partida

Princípios

Quem abre o catálogo é o comprador de uma loja: sabe o que vende, quer achar o pacote certo e fechar o pedido em poucos minutos. As regras deste manual existem para isso.

A embalagem é a vitrine

O comprador reconhece o pacote antes de ler o nome. Todo packshot fica sobre fundo branco fixo, grande e sem nada por cima, nos dois temas.

O pedido é em caixa fechada

A unidade de compra é a caixa. Quantidade, subtotal e pedido mínimo aparecem em caixas, com o total de unidades como apoio.

Festa na borda, calma no meio

Listras e recortes de rótulo ficam em cabeçalhos, faixas sazonais e no selo de novidade. Área de leitura, dados técnicos e tabelas ficam limpos.

Duas marcas no mesmo sistema

Falex e José Pepper dividem todos os componentes. Só os tokens de marca mudam, com o atributo data-brand.

Identidade

Marca

O logotipo com os dois mascotes é o ativo mais reconhecido da Falex: está no caminhão, em todo rótulo e no perfil do Instagram. O sistema mantém o desenho como está e define onde ele entra e quanto espaço recebe.

Falex Alimentos. Marca principal. O PNG tem fundo transparente.Baixar PNG

José Pepper. Linha de molhos e pimentas artesanais. Os blocos da linha usam data-brand="jose-pepper".Baixar PNG

Espaço, tamanho e fundo

¼ L

Área de proteçãoUm quarto da largura (¼ L)Nenhum texto, borda ou foto entra nesse espaço em volta do logotipo.

Tamanho mínimo96 px de larguraAbaixo disso os mascotes viram borrão e o nome deixa de ser lido.

EviteMexer no desenhoSombra, contorno novo, rotação, recorte redondo ou outra cor.

Branco, o preferido

Gema clara

Escuro do tema noturno

Branco é o fundo preferido. Gema clara e o escuro do tema noturno também funcionam, porque o círculo do logotipo é branco. Evite fundo vermelho, onde o anel some, e fotos com muita informação atrás.

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.

Versão 3D. Campanhas e Instagram.

Caminhão baú branco da frota Falex com o logotipo, os mascotes e balas coloridas na lateral. — **Frota.** Entrega própria: o caminhão também é mídia da marca.

Paleta

Cor

A paleta sai de dois lugares: o arquivo do logotipo (vermelho, gema, espiral e anil) e as listras das embalagens (folha). Os neutros têm um leve tom de amendoim torrado, para que nenhum cinza pareça frio ao lado dos packshots.

Primitivas

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

Vermelho Falex

Ação principal, preço, marca

100

200

300

400

500

logo600

700

800

900

Gema

Destaque, contador do pedido, adesivo Novo

100

200

300

logo400

500

600

700

800

Espiral

Detalhe de ilustração e campanha

100

300

pirulito500

700

Anil

Informação e anel de foco

100

300

500

mascote600

800

Folha

Sucesso, sem glúten, WhatsApp

100

400

listras600

800

Amendoim

Neutros de toda a interface

100

200

300

400

500

600

700

800

900

950

José Pepper

Medido no logotipo da linha de molhos

Vermelho pimenta--fx-jp-red-600

Verde--fx-jp-green-600

Sombreiro--fx-jp-yellow-400

Pimenta escura--fx-jp-red-700

Tokens semânticos

O que o catálogo consome. Cada token tem um valor no tema claro e outro no escuro, que é uma torra de amendoim, sem preto puro. As amostras abaixo seguem o tema do seu aparelho.

Token	Classe Tailwind	Uso
--fx-bg	bg-bg	Fundo da página
--fx-surface	bg-surface	Cards, painéis, campos
--fx-surface-2	bg-surface-2	Hover, faixa alternada
--fx-sunken	bg-sunken	Trilho, skeleton, código
--fx-vitrine	bg-vitrine	Fundo do packshot, branco nos dois temas
--fx-text	text-fg	Texto principal
--fx-text-muted	text-fg-muted	Texto de apoio
--fx-text-subtle	text-fg-subtle	Rótulo, legenda
--fx-border	border-line	Divisória
--fx-brand	bg-brand	Ação principal
--fx-brand-text	text-brand-text	Link, texto de marca
--fx-accent	bg-accent	Contador, adesivo, campanha
--fx-info	text-info	Informação
--fx-success	text-success	Sem glúten, pedido confirmado
--fx-warning	text-warning	Alergênico, pedido mínimo
--fx-danger	text-danger	Erro de campo
--fx-whatsapp	bg-whatsapp	Envio do pedido
--fx-focus	ring-focus	Anel de foco

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

62% neutros e vitrine

18% vermelho

12% gema

As cores fortes das embalagens já enchem a tela, e 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.

Letra

Tipografia

O catálogo usa três famílias do Google Fonts, cada uma com um papel fixo.

TítulosBricolage GrotesquePesos 700 e 800. Largura de 78 a 84 nos títulos grandes, lembrando os nomes gordos dos rótulos.

PaçoquinhaDoces de Amendoim · Pote 300 g

Interface e textoFigtreePesos 400 a 700. Botões, campos, descrições e parágrafos.

Presente no mercado desde 1998, a Falex atende supermercados e conveniências de estrada com entrega própria e promotores treinados no ponto de venda.

Dado técnicoGeist MonoAlgarismos tabulares para EAN, peso, caixa, quantidade e preço em tabela.

Algarismos0123456789Peso líquido300 gQuantidade12 cx

Escala

--fx-text-5xl	60 px	Abertura de campanha	Festa Junina
--fx-text-3xl	38 px	Título de página	Doces de Amendoim
--fx-text-xl	24 px	Título de seção, ficha	Pé de moleque crocante
--fx-text-md	18 px	Nome no card	Torrone de amendoim
--fx-text-base	16 px	Texto e botão	Adicionar caixa ao pedido
--fx-text-sm	14 px	Descrição, chip	Doce de amendoim com leite condensado
--fx-text-xs	12 px	Ficha técnica	Peso líquido · 190 g
--fx-text-2xs	11 px	Etiqueta, sobretítulo	Contém amendoim

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.

Estrutura

Forma

Base de 4 px, cantos arredondados como o contorno do logotipo e duas texturas de rótulo reservadas para as bordas.

Raio

xs · 6 pxEtiquetas

sm · 10 pxCampos, miniaturas

md · 14 pxVitrine interna, alertas

lg · 20 pxCards, painéis

xl · 28 pxBlocos de campanha

pillBotões, chips, busca

Elevação

shadow-smCampos e chips em repouso

shadow-mdCard sob o cursor

shadow-lgResumo do pedido flutuante, aviso

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. A versão fina, fx-listra--sm, separa o cabeçalho do conteúdo.

FalexVermelho e gema, como a Paçoca Gibi. Cabeçalho do catálogo e abertura.

Festa JuninaVermelho e folha, como Paçoquinha e Torrone. Faixa sazonal de junho e julho.

José PepperVerde e vermelho pimenta, gerado pelo escopo de marca.

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.

Fotografia

Packshot

No catálogo, a embalagem é o que o comprador procura na tela. Todo packshot segue a mesma receita, e o fundo branco da vitrine continua branco no tema escuro.

Proporção: 1:1, quadrado
Fundo: Branco liso, sem sombra projetada
Enquadramento: Produto centralizado, ocupando 89% do lado maior
Ângulo: Frontal, com o nome do produto legível e sem reflexo em cima
Arquivos: 1200 × 1200 em WebP para a ficha, 480 × 480 para a grade
Nome do arquivo: pe-de-moleque-crocante.webp

Informação obrigatória e comercial

Selos

Três famílias com regras diferentes. A lupa da ANVISA tem desenho regulado e aparece exatamente como no rótulo. Alergênicos e selos comerciais são desenhados pelo sistema.

Rotulagem nutricional

Alto emAçúcar adicionadoAlto emGordura saturadaAlto emAçúcar adicionadoGordura saturada

Desenho definido pela RDC 429/2020 e pela IN 75/2020. Fica em preto e branco nos dois temas, sem cor de marca e sem cantos arredondados: não recolorir nem redesenhar. Aparece no card e na ficha sempre que estiver no rótulo. Na dúvida, vale a arte oficial da embalagem.

Alergênicos e restrições

Contém amendoimContém leiteContém sojaSem glútenSem lactose

Amendoim atravessa quase toda a linha. Por isso vira filtro no catálogo, além de etiqueta: a loja que atende público alérgico precisa achar rápido o que pode vender. Classes fx-tag--allergen e fx-tag--free.

Comerciais

NovoNovo pesoFesta JuninaNatalCaixa fechada

O adesivo “Novo” copia o contorno branco com anel de marca do logotipo. No máximo um adesivo por card, sempre no canto superior direito da vitrine. Classes fx-tag--new, fx-tag--season e fx-tag--neutral.

Peças

Componentes

Peças para um catálogo de atacado: a unidade de compra é a caixa, o preço pode depender de login com CNPJ e o pedido fecha com a equipe de vendas. Todas as classes têm o prefixo fx-.

Botões

PrimárioUma ação por área

Secundário

Fantasma

DestaqueCampanha sazonal

WhatsAppFechamento do pedido

José PepperMesmas classes

Campos

Busca

Aceita os 13 dígitos do código de barras.

CNPJ da lojaUsado para liberar tabela de preço e prazo.

CNPJ da lojaFaltam 2 dígitos. O CNPJ tem 14 números.

Ordenar por

Etiquetas

Positivofx-tag--free

Em estoqueSem glúten

Avisofx-tag--allergen

Contém amendoim

Neutrofx-tag--neutral

Sob consulta

Campanhafx-tag--season

Festa Junina

Adesivofx-tag--new, um por card

Novo

Filtros

O chip selecionado inverte para o tom mais escuro do tema, e o vermelho fica livre para a ação principal. Toque para ligar e desligar.

Alertas

Atendemos somente CNPJEntre com o CNPJ da loja para ver preço e prazo da sua região.

Pedido abaixo do mínimoAdicione mais caixas, de qualquer produto, para liberar o envio.

Pedido enviadoA equipe de vendas responde em horário comercial.

CNPJ não encontradoConfira os 14 dígitos ou fale com a equipe de vendas.

Card de produto e estado vazio

Foto sobre a vitrine branca, nome, etiquetas e, abaixo do picote, preço e ação. Sem login, o preço fica fechado. Os cards abaixo são ilustrativos e não representam produtos do catálogo.

Foto em produçãoNovo

Falex · Exemplo

Nome do produto

Formato da embalagem

Contém amendoimSem glúten

Preço liberado após entrar com CNPJ

Foto em produção

José Pepper · Exemplo

Nome do molho

Molho cremoso

Preço liberado após entrar com CNPJ

Nenhum produto para “pacoca doce”

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