LeadCultura Design System

Plataformas

Lovable

Projetos do Lovable já usam React, Tailwind e shadcn/ui. O que falta para ficarem no padrão é o tema da marca e as regras, para a IA gerar telas consistentes.

Instruções para LeadCultura. Troque a marca no topo para ver os valores de outra.

1. Descubra a versão do Tailwind

Abra src/index.css no editor de código do Lovable (ou no repositório do GitHub sincronizado). Se começa com @import "tailwindcss", é Tailwind 4. Se tem @tailwind base e existe um tailwind.config.ts, é Tailwind 3.

2. Aplique o tema

Substitua as variáveis de cor do src/index.css pelo arquivo da marca. Pelo GitHub sincronizado, também dá para rodar o CLI do shadcn (veja React).

Tailwind 4

Cole o conteúdo de leadcultura.css no lugar das variáveis existentes, depois do @import "tailwindcss".

Tailwind 3

Cole leadcultura.tailwind3.css no lugar do bloco @layer base com as variáveis, e ajuste o tailwind.config.ts como abaixo.

tailwind.config.ts (só Tailwind 3)
// tailwind.config.ts: cores lidas das variáveis do tema
const color = (name: string) => `hsl(var(--${name}))`

export default {
  darkMode: ['class'],
  theme: {
    extend: {
      colors: {
        border: color('border'),
        input: color('input'),
        ring: color('ring'),
        background: color('background'),
        foreground: color('foreground'),
        primary: { DEFAULT: color('primary'), foreground: color('primary-foreground'), glow: color('primary-glow') },
        secondary: { DEFAULT: color('secondary'), foreground: color('secondary-foreground') },
        muted: { DEFAULT: color('muted'), foreground: color('muted-foreground') },
        accent: { DEFAULT: color('accent'), foreground: color('accent-foreground') },
        destructive: { DEFAULT: color('destructive'), foreground: color('destructive-foreground'), soft: color('destructive-soft'), 'soft-foreground': color('destructive-soft-foreground') },
        success: { DEFAULT: color('success'), foreground: color('success-foreground'), soft: color('success-soft'), 'soft-foreground': color('success-soft-foreground') },
        warning: { DEFAULT: color('warning'), foreground: color('warning-foreground'), soft: color('warning-soft'), 'soft-foreground': color('warning-soft-foreground') },
        info: { DEFAULT: color('info'), foreground: color('info-foreground'), soft: color('info-soft'), 'soft-foreground': color('info-soft-foreground') },
        card: { DEFAULT: color('card'), foreground: color('card-foreground') },
        popover: { DEFAULT: color('popover'), foreground: color('popover-foreground') },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      fontFamily: {
        sans: ['var(--font-family-sans)'],
        heading: ['var(--font-family-heading)'],
        mono: ['var(--font-family-mono)'],
      },
    },
  },
}

3. Ensine as regras (Knowledge)

Em Project settings > Knowledge, cole o texto abaixo. O Lovable passa a seguir os tokens, a escala tipográfica e os padrões em toda geração.

Knowledge · LeadCultura
Design system: LeadCultura Design System, marca LeadCultura.
Referência completa: https://ds.leadcultura.com.br/marcas/leadcultura

Tema
- As cores, fontes e raios vêm do tema da marca em src/index.css (https://ds.leadcultura.com.br/tokens/leadcultura.css para Tailwind 4, ou https://ds.leadcultura.com.br/tokens/leadcultura.tailwind3.css para Tailwind 3). Não altere esses valores.
- Fonte: Inter (pacote @fontsource-variable/inter).

Regras de cor
- Use só classes de token semântico: bg-background, text-foreground, bg-card, bg-primary, text-primary-foreground, bg-secondary, bg-muted, text-muted-foreground, bg-accent, border-border, ring-ring.
- Nunca use cores cruas do Tailwind (bg-green-600, text-gray-500, bg-red-500) nem hex no código.
- Status com fundo suave: bg-success-soft text-success-soft-foreground, bg-warning-soft text-warning-soft-foreground, bg-info-soft text-info-soft-foreground, bg-destructive-soft text-destructive-soft-foreground.
- Erro e ação destrutiva: bg-destructive text-destructive-foreground. IA e automação: bg-ai-soft text-ai-soft-foreground.
- Redes sociais: bg-social-whatsapp, bg-social-instagram, bg-social-tiktok, bg-social-youtube, bg-social-linkedin, bg-social-facebook.
- Gráficos: séries em chart-1 a chart-6, nesta ordem, sempre com rótulo ou legenda.
- Destaque da marca: bg-brand-gradient (fundo) e text-brand-gradient (título).
- Cor exata do logo: bg-brand e text-brand só em ícones, ilustrações e detalhes decorativos. Botões, links e textos usam primary.

Tipografia
- Títulos: text-display (hero), text-h1 (página), text-h2 (seção), text-h3, text-h4. Elas já trazem peso e tracking; não some font-bold.
- Interface: text-sm. Texto corrido: text-base. Legendas: text-xs text-muted-foreground.

Forma
- Controles (botão, input, badge): rounded-md. Cards e painéis: rounded-xl. Avatares e pílulas: rounded-full.
- Sombras: shadow-xs em controles, shadow-sm em cards; shadow-lg só em overlays.

Componentes
- Use os componentes shadcn/ui do projeto (Button, Card, Badge, Dialog, Table...). Variantes de status no Badge: success, warning, info.
- Texto e rótulos em português do Brasil.