Design System

Componentes

Coleção completa de componentes de interface adaptados do Flowbite para a identidade visual da Keko Shop. Valide cores, contraste e legibilidade.

Tipografia

Escalas tipográficas do tema.

Headline XL

Headline LG

Headline MD

Body LG — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Body MD — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Label SM

Link primário

Link secundário

Botões

Variações de botão usando o componente existente do tema.

Selos

Padrão Secundário Terciário Erro Escuro Sólido Contorno

Alertas

Cards

Card Padrão

Corpo do card com fundo glass e borda sutil, ideal para cards de serviço.

Card Sólido

Variação com fundo mais opaco para hierarquia diferenciada.

Card com Imagem

Card com área para mídia no topo.

Produtos demo

Vitrine falsa para validar cards de produto, preço, tags e estados de interação.

Somente preview

Esqueletos

Placeholders para carregamento de cards, listagens e conteúdo assíncrono.

Produto unnamed 01

Produto unnamed 01

R$ 499,90

Produto unnamed 02

Produto unnamed 02

R$ 389,90

Produto unnamed 03

Produto unnamed 03

R$ 599,90

Formulários

Abas

Conteúdo da aba Perfil.
Conteúdo da aba Dashboard.
Conteúdo da aba Configurações.

Acordeão

Conteúdo expansível do item 1. Use para FAQs, detalhes de produto ou filtros colapsáveis.
Conteúdo expansível do item 2. Use para FAQs, detalhes de produto ou filtros colapsáveis.
Conteúdo expansível do item 3. Use para FAQs, detalhes de produto ou filtros colapsáveis.

Tabelas

Produto Categoria Preço Status
Magento Theme Pro Tema R$ 2.490,00 Ativo
Performance Audit Serviço R$ 4.900,00 Novo
Migration Kit Migração R$ 8.900,00 Pendente

Avatares

KS
AB
CD
+3

Progresso

Progresso 45%
Enviar arquivo 78%

Indicadores de carregamento

Toasts

Tooltips

Tooltip topo
Tooltip base

Avaliação

4.0 de 5

Passo a passo

  1. 1
  2. 2
  3. 3

Timeline

  1. Briefing

    Levantamento de requisitos e definição de escopo.

  2. Desenvolvimento

    Construção do tema e módulos customizados.

  3. Go-live

    Deploy, testes e acompanhamento pós-lançamento.