I need more information to generate a GitHub issue title. You've provided a file path (`docs/stories/design-system-lusha.md`) but no bug report or issue description. Could you please provide: - The actual bug report or issue description - What problem occ

Aqui está o Design System completo da Lusha (lusha.com) documentado para você usar no seu site:

---

🎨 DESIGN SYSTEM — LUSHA.COM

---

1. TIPOGRAFIA

Família de fontes:

font-family: 'Social', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

A fonte principal é "Social" (fonte customizada deles). Para substituição, use Inter, DM Sans ou Plus Jakarta Sans — fontes modernas e similares disponíveis no Google Fonts.

Escala tipográfica:
| Elemento | Tamanho | Peso | Line-height |
|---|---|---|---|
| H1 | 90px | 300 (light) | 100px |
| H2 | 70px | 300 (light) | 80px |
| H3 | 35px | 300 (light) | 40px |
| H4 | 20px | 700 (bold) | 32.5px |
| Body | 20px | 400 (regular) | 32.5px |
| Small/Caption | 12.5–15px | 300–500 | — |

Padrão notável: Os headings são intencionalmente leves (font-weight: 300), criando contraste elegante com o body. Isso é a assinatura visual da marca.

---

2. PALETA DE CORES

Cores principais:

/* Roxo primário (CTA, links, destaques) */
--color-primary: #863FFF;        /* rgb(134, 63, 255) */
--color-primary-dark: #600DFF;   /* rgb(96, 13, 255) */

/* Preto (texto principal, fundo escuro) */
--color-black: #151417;          /* rgb(21, 20, 23) */
--color-dark: #141414;           /* rgb(20, 20, 20) */
--color-pure-black: #000000;

/* Branco e cinza de fundo */
--color-white: #FFFFFF;
--color-bg-light: #F6F6F6;       /* fundo geral da página */

/* Amarelo (destaque/acento) */
--color-yellow: #FFFC55;         /* rgb(255, 252, 85) */

/* Cores de texto secundárias */
--color-text-muted: #686868;     /* rgb(104, 104, 104) */
--color-text-lighter: #8B8B8B;   /* rgb(139, 139, 139) */

Cores de superfície/componentes:

/* Roxo claro (tab ativa, popups, badges) */
--color-purple-light: #ECE2FF;   /* rgb(236, 226, 255) */

/* Roxo lilás (texto/ícones secundários) */
--color-purple-soft: #BE97FF;    /* rgb(190, 151, 255) */

/* Amarelo pastel (badges de categoria) */
--color-yellow-light: #F9FFBF;   /* rgb(249, 255, 191) */

/* Azul claro (destaque de seção) */
--color-blue-light: #E0EAFF;     /* rgb(224, 234, 255) */

---

3. BOTÕES

Botão Primário (pill roxo):

.btn-primary {
  background-color: #863FFF;
  color: #FFFFFF;
  border: none;
  border-radius: 41px;
  padding: 12.5px 30px;
  font-size: 20px;
  font-weight: 500;
}

Botão Secundário (outline preto):

.btn-secondary {
  background-color: #FFFFFF;
  color: #141414;
  border: 0.8px solid #000000;
  border-radius: 41px;
  padding: 12.5px 30px;
  font-size: 20px;
  font-weight: 500;
}

Botão Escuro (navbar "Signup"):

.btn-dark {
  background-color: #000000;
  color: #FFFFFF;
  border: 0.8px solid #000000;
  border-radius: 40px;
  padding: 5px 20px;
  font-size: 18px;
  font-weight: 500;
}

Botão Roxo Escuro (navbar "Contact sales"):

.btn-nav {
  background-color: #600DFF;
  color: #000000;
  border: 0.8px solid #FFFFFF;
  border-radius: 5px;
  padding: 0 20px;
  font-size: 20px;
  font-weight: 500;
}

Link com seta (CTA textual):

.btn-link {
  background: transparent;
  color: #863FFF;
  font-size: 20px;
  font-weight: 500;
  text-decoration: none;
}
/* Exemplo: "Try Lusha Workspace →" */

---

4. CARDS

Card padrão (com borda sutil):

.card {
  background-color: transparent; /* ou #FFFFFF */
  border: 0.8px solid rgba(20, 20, 20, 0.25);
  border-radius: 10px;
  padding: 30px;
  gap: 30px; /* para itens internos com flexbox */
}

.card-header {
  background-color: #141414;
  border-radius: 6px;
  padding: 30px;
  color: #FFFFFF;
}

Card de testimonial (gradiente):

.card-quote {
  background-image: linear-gradient(158deg, #F6F6F6 9.17%, #FFFFFF 90.83%);
  padding: 50px;
}

---

5. BADGES / TAGS

Badge de categoria (ex: "OPS", "CASE STUDY"):

.badge {
  background-color: #F9FFBF;  /* amarelo pastel */
  color: #8B8B8B;
  border-radius: 5px;
  padding: 12px 17.6px;
  font-size: 17.5px;
  font-weight: 500;
}

/* Badge roxo (ex: "CASE STUDY" no logo carousel) */
.badge-purple {
  background-color: #ECE2FF;
  color: #141414;
  border-radius: 5px;
  padding: 0 15px;
  font-size: 12.5px;
  font-weight: 500;
}

---

6. TABS / ABAS

/* Tab inativa */
.tab {
  background-color: #F6F6F6;
  color: #141414;
  font-size: 25px;
  font-weight: 300;
  padding: 36px 0;
  text-transform: uppercase;
}

/* Tab ativa */
.tab.active {
  background-color: #ECE2FF;
  font-weight: 500;
}

---

7. SEÇÕES / LAYOUT

/* Seção clara (padrão) */
.section {
  background-color: #FFFFFF;
  color: #151417;
  padding: 100px 150px;
}

/* Seção escura */
.section-dark {
  background-color: #141414;
  color: #FFFFFF;
  padding: 150px;
}

/* Fundo geral da página */
body {
  background-color: #F6F6F6;
}

/* Announcement bar */
.announcement-bar {
  background-color: #151417;
  color: #FFFFFF;
  padding: 12.4px;
}

---

8. NAVBAR

nav {
  background-color: #FFFFFF;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 400;
}

---

9. FOOTER

footer {
  background-color: #FFFFFF;
  color: #151417;
  padding: 90px 0 45px 0;
  font-size: 20px;
}

/* Links do footer */
footer a {
  color: #863FFF; /* links coloridos (produto) */
  /* ou */
  color: #000000; /* links normais */
  font-weight: 350;
  text-decoration: none;
}

---

10. BORDAS E SOMBRAS

/* Borda padrão sutil */
--border-default: 0.8px solid rgba(20, 20, 20, 0.25);

/* Border-radius padrão */
--radius-sm: 5px;
--radius-md: 6px;
--radius-lg: 10px;
--radius-pill: 40px; /* botões arredondados */

/* A Lusha NÃO usa box-shadow nos cards — usa bordas sutis no lugar */

---

11. IDENTIDADE VISUAL — PADRÕES NOTÁVEIS

• Contraste escuro/claro: Alterna seções brancas com blocos 100% pretos (#141414), criando ritmo visual forte.
• Imagens com fundo colorido: Fotos em P&B com fundo nas cores da paleta (rosa, roxo, azul).
• Tipografia ultra-leve em headings: Font-weight 300 em títulos grandes cria sofisticação.
• Roxo como cor de ação: Todo CTA, link e destaque usa #863FFF ou #600DFF.
• Amarelo como acento: #FFFC55 usado pontualmente para chamar atenção (announcement bar).
• Sem sombras: A hierarquia visual é criada com bordas, cor de fundo e espaçamento — não com box-shadow.