Lattafa

Levar a Lattafa, perfumaria árabe de luxo, ao Brasil com a sofisticação que a marca pede, dentro de um template proprietário e com um prazo curto.

CLIENTE

Lattafa

SEGMENTO

Perfumaria

Meu papel

UI Designer

Solução

E-commerce

Ano

2026

Hero da Home, frasco Lattafa sobre fundo dourado
Hero da Home, frasco Lattafa sobre fundo douradoHero da Home, frasco Lattafa sobre fundo dourado

Quem é a Lattafa

A Lattafa é uma marca de perfumaria árabe conhecida por fragrâncias intensas e de alta fixação, com forte presença internacional.

O desafio

O desafio não era só técnico, era de percepção e de tempo. O site precisava comunicar luxo e sofisticação para conquistar o público classe A, nascendo dentro de um template proprietário da empresa b8one e com um prazo de entrega curto: cerca de 5 semanas, do briefing à aprovação do cliente.

Minha atuação

UI das páginas de marca e descoberta (Home, página de produto, Departamento e Sobre), com liberdade para redesenhar componentes visuais dentro da arquitetura já definida pelo template. As decisões passaram por hero, banners editoriais, hover nos cards, tipografia e a interface de filtro, seguindo as diretrizes do brandbook do cliente. Fluxos transacionais como sacola, login e checkout seguiam estrutura fixa e ficaram fora do escopo.

Design system

As cores da marca entram como primitivas e viram tokens semânticos de texto, preenchimento, borda e camada. Sobre essa base ficam tipografia, espaçamento e raios,
e só então os componentes, do botão ao checkout.

77

cores primitivas

61

tokens de cor

66

estilos de texto

96

componentes

1.974

variantes

Tipografia

Paleta de cores

Preto e dourado sustentam a sensação de exclusividade da Lattafa em toda a loja.
A combinação preto e dourado é um recurso recorrente em perfumaria de luxo: remete a frascos, embalagens e à associação cultural do dourado com elegância.

Da primitiva ao componente

Um único dourado, o Primary/500, vira três tokens com funções diferentes, e cada token chega a um componente.

Espaçamento e raios

Uma escala única de espaçamento e outra de raios, usadas em padding, gaps e cantos de todos os componentes.

Espaçamento

0,5

2 px

1

4 px

2

8 px

3

12 px

4

16 px

6

24 px

8

32 px

10

40 px

12

48 px

16

64 px

20

80 px

24

96 px

Raios

none 0 px

sm 2 px

base 4 px

md 6 px

lg 8 px

xl 12 px

2xl 16 px

3xl 24 px

full 9999 px

Componentes

Cada componente é documentado em fragmentos e na versão montada, com estados e variações para desktop e mobile.

Biblioteca

Base

1.544

variantes

Botão

Input

Checkbox

Radio

Toggle

Tooltip

Tabs

Badge

Avaliação

Alerta

Loading

Divisor

Toast

Navegação e vitrine

201

variantes

Header

Menu

Busca

Filtro

Breadcrumb

Paginação

Banners

Carrosséis

Newsletter

Footer

Compra e conta

207

variantes

Página de produto

Carrinho

Minicart

Checkout

Login

Minha conta

Os fluxos de compra seguem a estrutura do template, mas também estão na biblioteca, com a identidade aplicada.

Estados do botão

Padrão

Hover

Pressionado

Foco

Carregando

Desabilitado

Primário

Secundário

Terciário

Da peça à página

A documentação segue a mesma ordem da construção: peças de base formam fragmentos, fragmentos formam componentes, e os componentes montam as páginas.

Base

Ícones, setas, indicadores e avaliação.

Fragmento

O card de produto combina peças da base.

Componente

A vitrine organiza os cards em carrossel.

Página

A Home é montada com componentes.

→

→

→

A Home desktop, montada com as peças do sistema.

Página de produto

Notas e especiarias traduzidas em imagem, e a galeria de produto fixa durante o scroll até o fim do bloco de informações, inspirada na referência da Kayali.

Departamento

Estado padrão e filtro ativo dentro de uma grade de produtos que eu não podia reestruturar. O foco foi a clareza do chip selecionado e a organização visual dos resultados.

Estado padrão / Filtro ativo na frente / Detalhe: o filtro selecionado ganha check dourado

Versão em mobile

Home, página de produto, Departamento e Sobre adaptados para 360 px, com a mesma hierarquia e os mesmos componentes da versão desktop, em suas variantes mobile.

No ar, aprovado pelo cliente

O site está no ar em lattafabrasil.com, aprovado pelo cliente e pela liderança de UX e UI. O projeto mostrou que dá para criar identidade de marca dentro de um sistema restrito, um exercício comum em
e-commerce corporativo, onde a marca precisa respirar dentro das regras técnicas da plataforma.

Prazo

Cerca de 5 semanas, do briefing à aprovação

Entregas

Home, página de produto, Departamento, Sobre, Carrinho, Checkout e Minha Conta

TECNOLOGIA

VTEX

DESENVOLVIDO POR

b8one

EQUIPE

UX Design, UI Design, Desenvolvimento, Gestão de Projeto

↗

PRÓXIMO PROJETO

Linde White Martins

Redesign de e-commerce B2B da maior empresa de gases industriais da América do Sul. Do wireframe à alta fidelidade: hierarquia, componentes e brandbook aplicado.

UI Design

B2B

E-commerce

→

White Martins, capa do projeto

Lattafa

Levar a Lattafa, perfumaria árabe de luxo, ao Brasil com a sofisticação que a marca pede, dentro de um template proprietário e com um prazo curto.

CLIENTE

Lattafa

SEGMENTO

Perfumaria

Meu papel

UI Designer

Solução

E-commerce

Ano

2026

Hero da Home, frasco Lattafa sobre fundo dourado
Hero da Home, frasco Lattafa sobre fundo douradoHero da Home, frasco Lattafa sobre fundo dourado

Quem é a Lattafa

A Lattafa é uma marca de perfumaria árabe conhecida por fragrâncias intensas e de alta fixação, com forte presença internacional.

O desafio

O desafio não era só técnico, era de percepção e de tempo. O site precisava comunicar luxo e sofisticação para conquistar o público classe A, nascendo dentro de um template proprietário da empresa b8one e com um prazo de entrega curto: cerca de 5 semanas, do briefing à aprovação do cliente.

Minha atuação

UI das páginas de marca e descoberta (Home, página de produto, Departamento e Sobre), com liberdade para redesenhar componentes visuais dentro da arquitetura já definida pelo template. As decisões passaram por hero, banners editoriais, hover nos cards, tipografia e a interface de filtro, seguindo as diretrizes do brandbook do cliente. Fluxos transacionais como sacola, login e checkout seguiam estrutura fixa e ficaram fora do escopo.

Design system

As cores da marca entram como primitivas e viram tokens semânticos de texto, preenchimento, borda e camada. Sobre essa base ficam tipografia, espaçamento e raios, e só então os componentes, do botão ao checkout.

77

cores primitivas

61

tokens de cor

66

estilos de texto

96

componentes

1.974

variantes

Tipografia

Avenir LT Pro

Avenir é uma fonte sans serif geométrica, criada para unir clareza e elegância, equilíbrio que sustenta a leitura de preços, descrições e detalhes técnicos sem perder a sofisticação que a marca pede.

ORIGEM

LINOTYPE

DESIGN BY

ADRIAN FRUTIGER

VARIAÇÕES

REGULAR / MEDIUM / SEMIBOLD

Card - escala tipográfica
Card - escala tipográfica

Paleta de cores

Preto e dourado sustentam a sensação de exclusividade da Lattafa em toda a loja.
A combinação preto e dourado é um recurso recorrente em perfumaria de luxo: remete a frascos, embalagens e à associação cultural do dourado com elegância.

Da primitiva ao componente

Um único dourado, o Primary/500, vira três tokens com funções diferentes, e cada token chega a um componente.

Card - arquitetura de tokens
Card - arquitetura de tokens
Card - arquitetura de tokens

Espaçamento e raios

Uma escala única de espaçamento e outra de raios, usadas em padding, gaps e cantos de todos os componentes.

Espaçamento

0,5

2 px

1

4 px

2

8 px

3

12 px

4

16 px

6

24 px

8

32 px

10

40 px

12

48 px

16

64 px

20

80 px

24

96 px

Raios

none 0 px

sm 2 px

base 4 px

md 6 px

lg 8 px

xl 12 px

2xl 16 px

3xl 24 px

full 9999 px

Componentes

Cada componente é documentado em fragmentos e na versão montada, com estados e variações para desktop e mobile.

Anatomia do card de produto

01

Imagem do produto

02

Favoritar

03

Nome do produto

04

Preço original e desconto

05

Preço por

06

Parcelamento

07

Ação de compra

O preço por tem o maior peso do card. O desconto aparece em selo ao lado do preço original, o nome é truncado em uma linha para manter a grade alinhada, e as notas olfativas resumem a fragrância em três palavras.

Biblioteca

Base

1.544

variantes

Botão

Input

Checkbox

Radio

Toggle

Tooltip

Tabs

Badge

Avaliação

Alerta

Loading

Divisor

Toast

Navegação e vitrine

201

variantes

Header

Menu

Busca

Filtro

Breadcrumb

Paginação

Banners

Carrosséis

Newsletter

Footer

Compra e conta

207

variantes

Página de produto

Carrinho

Minicart

Checkout

Login

Minha conta

Os fluxos de compra seguem a estrutura do template, mas também estão na biblioteca, com a identidade aplicada.

Card - estados do botão
Card - estados do botãoCard - estados do botão

Da peça à página

A documentação segue a mesma ordem
da construção: peças de base formam fragmentos, fragmentos formam componentes, e os componentes montam
as páginas.

Base

Ícones, setas, indicadores e avaliação.

Fragmento

O card de produto combina peças da base.

Componente

A vitrine organiza os cards em carrossel.

Página

A Home é montada com componentes.

Home — screenshot completa

A Home desktop, montada com as peças do sistema.

Página de produto

Notas e especiarias traduzidas em imagem, e a galeria de produto fixa durante o scroll até o fim do bloco de informações, inspirada na referência da Kayali.

Departamento

Estado padrão e filtro ativo dentro de uma grade de produtos que eu não podia reestruturar. O foco foi a clareza do chip selecionado e a organização visual dos resultados.

Estado padrão / Filtro ativo na frente / Detalhe: o filtro selecionado ganha check dourado

Versão em mobile

Home, página de produto, Departamento e Sobre adaptados para 360 px, com a mesma hierarquia e os mesmos componentes da versão desktop, em suas variantes mobile.

No ar, aprovado pelo cliente

O site está no ar em lattafabrasil.com, aprovado pelo cliente e pela liderança de UX e UI. O projeto mostrou que dá para criar identidade de marca dentro de um sistema restrito, um exercício comum em e-commerce corporativo, onde a marca precisa respirar dentro das regras técnicas da plataforma.

Prazo

Cerca de 5 semanas, do briefing à aprovação

Entregas

Home, página de produto, Departamento, Sobre, Carrinho, Checkout e Minha Conta

TECNOLOGIA

VTEX

DESENVOLVIDO POR

b8one

EQUIPE

UX Design, UI Design, Desenvolvimento, Gestão de Projeto

↗

PRÓXIMO PROJETO

Linde White Martins

Redesign de e-commerce B2B da maior empresa de gases industriais da América do Sul. Do wireframe à alta fidelidade: hierarquia, componentes e brandbook aplicado.

UI Design

B2B

E-commerce

→

White Martins, capa do projeto