Cores
Todas as variáveis usam o prefixo --cp- (Classplay).
Clique em qualquer swatch para copiar o valor hex para a área de transferência.
Primária (Roxo)
XP (Âmbar)
Streak (Laranja)
Success (Esmeralda)
Info (Azul)
Danger (Vermelho)
Bonus (Rosa)
Level (Cyan)
Superfícies
As cores de superfície são definidas por tema via data-theme.
Abaixo estão os valores de referência para cada modo.
Dark Mode
Light Mode
Tipografia
Fonte principal: Nunito (400, 600, 700, 800, 900). Fonte mono: JetBrains Mono (400, 700). Escala baseada em rem com raiz de 16px.
Escala
Pesos
Monospace
console.log(`Parabéns! +${score} XP`);
// JetBrains Mono — fonte monospace do Classplay DS
Espaçamento
Escala de espaçamento baseada em múltiplos de 4px.
Tokens: --cp-space-{n}.
Border Radius
Tokens: --cp-radius-{name}.
Sombras
Tokens: --cp-shadow-{size}.
A variável --cp-shadow-color é definida por tema.
Botões
Todos os botões usam a classe base .cp-btn combinada com uma variante.
Botões primário, sucesso e perigo usam efeito 3D com box-shadow + translateY.
Primário (3D)
Secundário (Flat)
Ghost
Sucesso & Perigo (3D)
Formulários
Inputs, selects e textareas compartilham a mesma base visual.
O toggle usa um <input type="checkbox"> oculto com role="switch" para acessibilidade.
Search Input
Barra de busca com ícone, campo de texto e botão de envio em formato pill. Use .cp-search como wrapper e .cp-search--lg para a variante grande.
Input
Select
Textarea
Toggle
Cards
Cards são os contêineres de conteúdo do Classplay. Existem variantes para cursos, aulas, e conteúdo destacado.
Card Padrão
Introdução ao Vibe Coding
Aprenda a construir produtos digitais usando IA como co-piloto. Sem precisar de experiência anterior em programação.
Card de Curso
65% concluído
Card de Curso Showcase
Cards verticais com imagem de destaque e revelação de detalhes ao passar o mouse. Ideal para catálogos de cursos e vitrines de conteúdo.
Card de Módulo
Cards horizontais (16:9) com imagem de fundo e revelação de detalhes ao hover. Ideal para listar módulos dentro de um curso, com acesso direto e contagem de aulas.
Card Hub
Cards de acesso a áreas ou comunidades. Imagem de destaque no topo, título, descrição e botão CTA. Suporta estado ativo com borda destacada via .cp-card-hub--active.
Card de Aula
Introdução à IA Generativa
8 min · Concluída
Prompts que funcionam
12 min · Em andamento
Agents e Automações
15 min · Bloqueada
Card Elevado
Conteúdo Premium
Masterclass: Deploy com IA
Aula exclusiva para membros Pro. Aprenda a publicar projetos completos com zero infraestrutura manual.
Card de Trilha
Cards de trilha representam passos sequenciais em uma jornada de aprendizado. Suportam estados expandido/recolhido, e variantes para passo ativo, concluído e pendente.
Antes de começar, o primeiro passo é preencher sua ficha de matrícula. Depois disso, vamos te mostrar o melhor caminho para aprender de forma prática e estratégica. Se surgir qualquer dúvida no meio do caminho, é só nos chamar!
Nesta etapa, você vai aprender a usar o Lovable para construir interfaces incríveis sem precisar escrever código. Vamos criar juntos seu primeiro projeto!
Parabéns! Você completou a introdução à plataforma e já está pronto para avançar nas próximas etapas da trilha.
Badges & Tags
Badges comunicam conquistas, progresso e métricas de gamificação. Tags categorizam conteúdo.
Progresso
Barras de progresso animadas com efeito bounce. A transição usa cubic-bezier para dar sensação de satisfação ao completar.
Padrão
35%
65%
100%
Variantes
Sucesso — 80%
XP — 55%
Large (12px) — 45%
Avatar
Sidebar (componente — mockup)
Modal
Tooltip
Gamificação
Componentes que comunicam progresso, recompensas e engajamento. O sistema de gamificação é o coração do Classplay.
Painel de XP
Streak Counter
Conquistas
Leaderboard
Missões Diárias
Indicador de Nível
Tarefas
Lista de tarefas com progresso, checkboxes interativos e recompensas em XP. Cada tarefa pode estar pendente, em foco ou concluída.
Lista de Tarefas
Estados Individuais
Animações
Demos interativas das animações disponíveis. Clique nos botões para ver cada animação em ação. Todas respeitam prefers-reduced-motion.
Demos de Animação
XP Fly-Up
Loading States
Spinners e skeletons para estados de carregamento. Use spinners para ações curtas e skeletons para carregamento de conteúdo.
Spinner
sm (16px)
padrão (24px)
lg (40px)
Skeleton
Toasts
Notificações não-intrusivas que aparecem no canto superior direito. Desaparecem automaticamente após 4 segundos.
Gradientes & Fundos
Classes utilitárias de gradientes pré-definidos para headers, cards destaque e contextos de gamificação. Padrões decorativos para backgrounds de seções.
Índice de Aulas
Painel lateral de navegação de aulas dentro de um módulo. Exibe progresso, seções colapsáveis e estados de cada aula (concluída, ativa, pendente, bloqueada).