Magra em Casa

Design System

Guia Visual da Marca

Este Design System estabelece as diretrizes visuais para todos os produtos e comunicações da Magra em Casa. Seguir este guia garante consistência, coesão e uma identidade visual forte em todos os pontos de contato.

Paleta de Cores

Laranja Primário

#FF9933

Botões, CTAs, ícones e destaques

Azul Claro

#E8F4F8

Fundos de seções e cards

Cinza Escuro

#2C3E50

Títulos e textos principais

Cinza Médio

#666666

Corpo de texto e informações secundárias

Branco

#FFFFFF

Fundo principal e cards

Verde-Água (Dashboard)

#1ABC9C

Botões e elementos do painel

Tipografia

H1 - Título Principal

Lora Bold • Peso: 700

3.5rem
Este é um exemplo de como este estilo de tipografia aparece

H2 - Subtítulo

Lora Bold • Peso: 700

2.5rem
Este é um exemplo de como este estilo de tipografia aparece

H3 - Seção

Lora Bold • Peso: 700

1.875rem
Este é um exemplo de como este estilo de tipografia aparece

Body - Texto Principal

Poppins Regular • Peso: 400

1rem
Este é um exemplo de como este estilo de tipografia aparece

Body - Texto em Destaque

Poppins Bold • Peso: 700

1rem
Este é um exemplo de texto em destaque com a cor laranja

Label - Rótulo

Poppins Bold • Peso: 700

0.875rem
Este é um exemplo de como este estilo de tipografia aparece

Componentes

Botões

Primário (Padrão)

Primário (Hover)

Secundário

Desabilitado

Cards

Card Padrão

Este é um card padrão com fundo branco, borda sutil e sombra leve.

Card de Destaque

Este card usa o azul claro como fundo para destacar conteúdo importante.

Elementos de Formulário

Padrões de Layout

Grid de 3 Colunas

1
Recurso 1

Descrição do recurso ou benefício apresentado neste card.

2
Recurso 2

Descrição do recurso ou benefício apresentado neste card.

3
Recurso 3

Descrição do recurso ou benefício apresentado neste card.

Comparação (Antes/Depois)

ANTES
  • ✕Oportunidades inconsistentes
  • ✕Conversão baixa
META
  • ✓34 oportunidades por dia
  • ✓Conversão de 25%

Diretrizes de Uso

✓ Faça

  • • Use a paleta de cores consistentemente
  • • Mantenha espaçamento generoso
  • • Combine Lora (títulos) com Poppins (corpo)
  • • Use cantos arredondados em containers
  • • Priorize contraste e legibilidade

✗ Não Faça

  • • Não misture fontes sem propósito
  • • Não use cores fora da paleta
  • • Não comprima o espaçamento
  • • Não use texto claro em fundo claro
  • • Não ignore a hierarquia visual