Cores

Paleta completa de tokens de cor do sistema. Todas as cores são definidas como variáveis CSS para garantir consistência em toda a plataforma.

--bg

#FDFCF8

--bg-alt

#F5F1E8

--bg-dark

#1C1814

--bg-dark-alt

#252018

--accent

#F5D000

--accent-dark

#C8AA00

--accent-soft

rgba(245,208,0,.12)

--green

#22A06B

--red-soft

#C94040

--blue

#2563EB

Texto

--text

#1C1814

--text-2

#3D3529

--text-muted

#6B6055

--text-light

#A09080

--text-inv

#F5F1E8

Tipografia

Três famílias tipográficas com funções distintas: Bangers para a marca, Fredoka para títulos e UI, Nunito para corpo de texto.

Bangers — Fonte da Marca

--font-brand · Bangers · Uso: logo, títulos de impacto, destaque emocional

Fredoka — Títulos e UI

Peso 600 — Subtítulos e labels

Peso 500 — Botões e navegação

Peso 400 — Labels secundários

--font-head · Fredoka 300–700 · Uso: headings, botões, labels, navegação

Nunito — Texto de corpo regular. Usado para parágrafos, descrições e conteúdo longo. Oferece excelente legibilidade em tamanhos menores.

Peso 600 — Destaque em texto de corpo

Itálico — Citações, ênfase suave, datas relativas

--font-body · Nunito 400–700 + italic · Uso: corpo, descrições, parágrafos

Display

2.25rem / 700 / 1.1

1.75rem / 700 / 1.2

1.35rem / 600 / 1.3

Body

1rem / 400 / 1.65

Small

0.83rem / 400 / 1.5

Caption

0.72rem / 400 / 1.4

Espaçamento

Escala de espaçamento baseada em múltiplos de 4px. Use sempre esses valores para padding, margin e gap.

4px — 0.25rem

xs · gap mínimo

8px — 0.5rem

sm · ícones, inline gaps

12px — 0.75rem

md · padding interno

16px — 1rem

lg · padding de card

20px — 1.25rem

xl · seções internas

24px — 1.5rem

2xl · gap entre cards

32px — 2rem

3xl · padding de página

48px — 3rem

4xl · espaço entre seções

64px — 4rem

5xl · seções hero

Sombras & Raios

Sombras sutis multicamadas sem deslocamento comic. Raios progressivos do menor ao maior.

shadow-xs

shadow-sm

shadow-md

shadow-lg

radius-sm 0.5rem

radius-md 0.875rem

radius-lg 1.25rem

radius-xl 1.75rem

radius-full 999px

Ícones

Use ícones inline SVG ou unicode para compatibilidade máxima. Tamanhos padrão: 14px (small), 16px (default), 20px (large), 24px (xl).

user

cart

plus

check

chevron-r

clock

star

add-box

trash

Motion

Três curvas de easing para diferentes situações. Use durations de 150–350ms para UI interactions.

--ease

cubic-bezier(.4,0,.2,1)

Uso: transições gerais de UI, hover states, toggles. Aceleração rápida, desaceleração suave.

--ease-out

cubic-bezier(0,0,.2,1)

Uso: entradas de elementos (modais, toasts, dropdowns). Começa rápido, termina devagar.

--ease-spring

cubic-bezier(.34,1.4,.64,1)

Uso: botões, avatares, elementos interativos com "bounce" sutil. Overshoot controlado.

Durações recomendadas

100ms — micro feedback

150ms — hover, focus

200ms — toggle, switch

250ms — modal entrada

350ms — page transition

Botões

6 variantes de botão com 4 tamanhos, estados interativos completos e suporte a ícone. Hierarquia: primary > dark > ghost > danger > link.

Variantes

btn-primary

btn-dark

btn-ghost

btn-danger

btn-link

Ghost Invertido (fundo escuro)

btn-ghost-inv

btn-primary

Tamanhos

btn-sm

btn-md (default)

btn-lg

btn-xl

Estados

default

disabled

dark disabled

danger loading

Com Ícone

icon-left

icon-right

icon + dark

Inputs

Campos de formulário com estados visuais claros. Sempre use labels, hints e mensagens de erro acessíveis.

Nome completo Estado padrão

Email Estado preenchido

Campo desabilitado disabled

E-mail inválido Insira um e-mail válido

Senha

Com botão show/hide

Buscar aula

Search com ícone esquerdo

Mensagem Textarea redimensionável

Valor

Prefixo de moeda

linkedin.com/in/ .br

Prefixo + sufixo

Select & Menu

Select nativo estilizado, dropdown customizado interativo e estilo combobox.

Módulo (nativo) select nativo estilizado

Nível (dropdown custom) clique para abrir/fechar

Instructor (combobox) estilo combobox com avatar

Toggle / Switch

Switches binários para preferências e configurações. Clique para alternar estado.

Notificações por email — Desativado

Receber novidades do curso — Ativado

Modo Professor — Desabilitado

Reprodução automática — Ativado

Cards

5 variantes de card para diferentes contextos: fundo creme, branco, escuro, aula e estatística.

Card Padrão

Background creme alt. Ideal para listagens e seções de conteúdo secundário.

card (bg-alt)

Card Branco

Background branco com borda sutil. Destaque em tela creme.

card-white

Card Escuro

Fundo escuro para áreas de destaque ou hero sections.

card-dark

▶ 12min

Introdução ao Character Design

12 min

Progresso75%

lesson-card (desbloqueada)

Cor & Paleta para Personagens

28 min

lesson-card (bloqueada)

🎓

142

Alunos ativos este mês

▲ 12% vs mês anterior

stats-card

Badges & Labels

Labels para categorias e metadados, badges para contadores de notificação, status badges contextuais e tags removíveis.

Labels

Padrão

default

Destaque

accent

Sucesso

green

Escuro

dark

Erro

danger

Info

blue

Badges (notificação)

badge (notif)

badge-accent

badge-green

Status Badges

✦ Novo ⏳ Em breve ✓ Concluído 🔒 Bloqueado

Tags Removíveis

Cartoon Character Design Iniciante Anatomia

Avatares

5 tamanhos com dots de status, fallback de iniciais e avatar group com sobreposição.

Tamanhos (fallback iniciais)

xs 24px

sm 32px

md 40px

lg 56px

xl 80px

Com Status Dot

online

offline

ocupado

lg + online

Avatar Group

avatar group

Alertas

4 variantes de alerta com borda esquerda colorida, ícone, título, descrição e botão de fechar.

✅

Aula concluída com sucesso!

Parabéns! Você completou o Módulo 2. Seu progresso foi salvo automaticamente.

⚠️

Certificado expira em 7 dias

Renove seu acesso antes de 29/03 para manter seu progresso e certificados.

🚫

Erro ao carregar o vídeo

Houve um problema ao carregar a aula. Verifique sua conexão e tente novamente.

ℹ️

Nova aula disponível

O Módulo 5 — Animação foi liberado! Você pode começar a assistir agora.

Progress

Barras lineares com percentual, progress ring em SVG e barra de conclusão de curso estilizada.

Módulo 10%

Módulo 235%

Módulo 375%

Módulo 4100%

50%concluído

ring 50%

85%concluído

ring 85%

15%concluído

ring 15%

Barra de Conclusão de Curso

Seu Progresso

68%

17 de 25 aulas concluídas

Modais

Overlays com backdrop blur. Clique fora ou no × para fechar. 3 variantes: padrão, confirmação e formulário.

Toast / Notificações

Notificações não-intrusivas no canto inferior direito. Auto-dismiss em 3s com barra de progresso implícita.

Preview estático (todos 4)

✅

Aula concluída!

Parabéns, continue para a próxima.

🚫

Falha ao carregar

Verifique sua conexão com a internet.

⚠️

Acesso expirando

Sessão expira em 5 minutos.

ℹ️

Nova aula disponível

Módulo 5 liberado agora.

Tables

Tabela de dados com avatar, badge de status, ações e variante com zebra striping e cabeçalho ordenável.

Tabela de Alunos

Aluno	Progresso ↕	Status	Último acesso
AS Ana Santos ana@email.com	82%	✓ Ativo	há 2 horas
CL Carlos Lima carlos@email.com	45%	⏳ Em pausa	há 3 dias
MF Maria Fontes maria@email.com	100%	✓ Concluído	hoje
PR Pedro Ramos pedro@email.com	8%	🔒 Expirado	há 1 mês

Tabela Striped

Aula	Módulo	Duração	Visualizações
Introdução ao character design	Módulo 1	12min	234
Proporções e anatomia básica	Módulo 1	18min	198
Expressões faciais	Módulo 2	22min	165
Posições e poses dinâmicas	Módulo 2	31min	147
Teoria de cores	Módulo 3	25min	112

Navegação

Top navbar com glass effect, sidebar da área de membros, breadcrumb e tabs em dois estilos.

Top Navbar

Sidebar Membro (dark)

Breadcrumb

Tabs — Underline

Visão Geral

Aulas

Comentários

Certificado

Tabs — Pill

Todos

Em andamento

Concluídos

Favoritos

Accordion

Dois estilos: FAQ sem bordas (apenas borda inferior) e Card accordion com caixa. Clique para abrir/fechar.

Estilo FAQ (borderless)

Não! O curso foi desenhado do zero para quem nunca tocou em um lápis de forma profissional. Você aprende desde os conceitos básicos de proporção até técnicas avançadas de expressão e movimento.

O curso tem aproximadamente 12 horas de conteúdo em vídeo. Estudando 1 hora por dia, você consegue terminar em cerca de 2 semanas. Mas você tem acesso vitalício, então pode ir no seu ritmo!

Sim! Ao completar 100% das aulas e os exercícios práticos, você recebe um certificado digital de conclusão que pode ser compartilhado no LinkedIn.

Estilo Card (boxed)

✓ Aula 1 — Introdução (12min)

✓ Aula 2 — Proporções (18min)

▶ Aula 3 — Esboço (15min)

Conteúdo do módulo 2 aparece aqui.

Skeleton

Placeholders animados com shimmer enquanto o conteúdo carrega. 3 variantes: texto, card e lista.

Texto

Card

Lista

Empty State

Estados vazios com ícone, título, descrição e CTA. Comunica contexto e orienta o próximo passo.

📚

Nenhum curso ainda

Você ainda não se matriculou em nenhum curso. Explore nossa biblioteca!

🔍

Nenhum resultado

Sua busca por "animação 3D" não retornou resultados. Tente outros termos.

🔔

Sem notificações

Você está em dia! Novas aulas e atualizações aparecerão aqui.

Paginação

Paginação padrão com ellipsis e versão simples anterior/próximo.

Padrão

…

Simples

Aula 3 de 12

Dashboard

Bloco completo de dashboard com 4 stats cards, atividade recente e widget de progresso.

👥

248

Alunos ativos

▲ 18% este mês

🎬

1,842

Aulas concluídas

▲ 8% esta semana

⏱️

312h

Horas assistidas

▲ 5% vs mês ant.

📈

68%

Progresso médio

▼ 2% vs mês ant.

Atividade Recente

Ana Santos concluiu a Aula 8

Módulo 2 — Expressões · há 20 min

✓

Carlos Lima iniciou Módulo 3

Cor & Paleta · há 45 min

Novo

Maria Fontes obteve certificado

Character Design · há 1h

🏆

Meu Progresso

68%concluído

Módulo 1100%

Módulo 275%

Módulo 330%

Player de Aula

Player de vídeo com controles, barra de progresso, título e navegação entre aulas.

AO VIVO

▶

28:14

Aula 5 — Expressões Faciais Extremas

Card de Curso

Card completo com thumbnail, badge de categoria, instrutor, progresso e CTA.

FDT

🎨 Cartoon

⭐ 4.9

Character Design do Zero

Ana Santos · 25 aulas

Seu progresso68%

ANM

🎬 Animação

Novo

Animação de Personagens

Carlos Lima · 32 aulas

Seu progresso0%

COR

🎨 Cor & Luz

🔒

Teoria da Cor para Cartoon

Maria Fontes

Sidebar Membro

Sidebar completa da área de membros com logo, navegação com ícones e perfil do usuário no rodapé.

Card de autenticação com logo, campos de email e senha, lembrar acesso, CTA principal e links secundários.

E-mail

SenhaEsqueceu?

Lembrar acesso por 30 dias

ou continue com

Novo por aqui? Criar conta grátis

Perfil

Header de perfil com cover, avatar sobreposto, nome, badge de função, botão de editar e stats.

Design Tokens

Todas as variáveis CSS do sistema organizadas por categoria. Use sempre os tokens — nunca valores hardcoded.

Cores

Token	Valor	Uso
`--bg`	`#FDFCF8`	Fundo principal da página
`--bg-alt`	`#F5F1E8`	Fundo alternativo, áreas de demo
`--bg-dark`	`#1C1814`	Fundo escuro, sidebar, player
`--bg-dark-alt`	`#252018`	Fundo escuro secundário, cards dark
`--text`	`#1C1814`	Texto principal, headings
`--text-2`	`#3D3529`	Texto secundário, subtítulos
`--text-muted`	`#6B6055`	Texto terciário, descrições
`--text-light`	`#A09080`	Placeholders, hints, labels
`--text-inv`	`#F5F1E8`	Texto em fundo escuro
`--accent`	`#F5D000`	Amarelo primário, CTA, active states
`--accent-dark`	`#C8AA00`	Amarelo hover/pressed, borders
`--accent-soft`	`rgba(245,208,0,.12)`	Fundo suave accent, active nav
`--border`	`#E4DDD0`	Bordas em fundo claro
`--border-dark`	`#2E2820`	Bordas em fundo escuro
`--green`	`#22A06B`	Sucesso, progresso completo
`--red-soft`	`#C94040`	Erro, danger, alertas críticos
`--blue`	`#2563EB`	Info, links, estados intermediários

Tipografia

Token	Valor	Uso
`--font-brand`	`'Bangers', cursive`	Logo, títulos de impacto
`--font-head`	`'Fredoka', sans-serif`	Headings, botões, labels, UI
`--font-body`	`'Nunito', sans-serif`	Corpo de texto, descrições
`--font-mono`	`'Courier New', monospace`	Código, tokens, valores técnicos

Border Radius

Token	Valor	Uso
`--radius-sm`	`0.5rem (8px)`	Inputs, labels, code snippets
`--radius-md`	`0.875rem (14px)`	Dropdowns, tooltips, alerts
`--radius-lg`	`1.25rem (20px)`	Cards, tabelas, demo areas
`--radius-xl`	`1.75rem (28px)`	Modais, blocos compostos
`--radius-full`	`999px`	Botões pill, avatares, badges, toggles

Sombras

Token	Valor	Uso
`--shadow-xs`	`0 1px 3px rgba(0,0,0,.06)…`	Inputs em focus, badges
`--shadow-sm`	`0 2px 8px rgba(0,0,0,.06)…`	Cards hover, navbar
`--shadow-md`	`0 4px 16px rgba(0,0,0,.07)…`	Dropdowns, popovers
`--shadow-lg`	`0 8px 32px rgba(0,0,0,.09)…`	Modais, toasts

Easings

Token	Valor	Uso
`--ease`	`cubic-bezier(.4,0,.2,1)`	Transições gerais de UI, hover states
`--ease-out`	`cubic-bezier(0,0,.2,1)`	Entradas de elementos, fade in
`--ease-spring`	`cubic-bezier(.34,1.4,.64,1)`	Bounce em botões e interações diretas

Guia de Uso

Regras de uso, hierarquias visuais, padrões de validação e exemplos de como usar cada componente corretamente.

Hierarquia de Botões

Cada página ou seção deve ter apenas um botão primário. Use a hierarquia para guiar o usuário pela ação mais importante.

Quando usar cada variante

btn-primary (amarelo): A ação principal e mais importante da tela. Ex: "Continuar", "Matricular-se", "Salvar".
btn-dark: Segunda ação importante, como CTA de marketing ou ação que acompanha o primário.
btn-ghost: Ações secundárias, cancelar, "ver mais". Sem preenchimento para não competir com o primário.
btn-danger: Ações destrutivas irreversíveis: excluir, remover acesso, cancelar plano.
btn-link: Ações terciárias em texto, como "Esqueceu a senha?" ou links contextuais.

✓ Faça

Use um único botão primário por seção. Combine primary + ghost para ação principal + secundária.

✗ Não faça

Nunca coloque dois botões primários lado a lado. Não use botões danger para ações reversíveis.

Uso de Cores

Amarelo (--accent)

O amarelo é a cor de identidade do Fazdetoon. Use para CTAs principais, active states, progresso. Nunca use texto branco sobre amarelo — sempre use --text (quase preto) para garantir contraste.

Verde (--green)

Exclusivo para estados de sucesso, conclusão e progresso positivo. Não use decorativamente.

Vermelho (--red-soft)

Apenas para erros, estados danger e alertas críticos. Nunca use de forma decorativa.

Azul (--blue)

Estados informativos, links primários, status intermediários (ex: "Em andamento").

✓ Faça

Use --text (escuro) como cor de texto em elementos com fundo --accent. Mantenha contraste mínimo 4.5:1.

✗ Não faça

Nunca texto branco sobre amarelo. Não misture verde e vermelho no mesmo contexto semântico.

Validação de Formulários

Validação deve ser contextual e aparecer após o usuário interagir com o campo (on blur), não enquanto ele digita.

Padrão de erro

Borda vermelha (--red-soft) + glow suave no input
Ícone de alerta + mensagem abaixo do campo em --red-soft
Mensagem clara e acionável: "Insira um e-mail válido" (não "Campo inválido")

Padrão de sucesso

Borda verde (--green) apenas em campos críticos (ex: senha forte)
Não use verde em todos os campos preenchidos — gera poluição visual

✓ Mensagem boa

"Insira um e-mail válido no formato usuario@exemplo.com"

✗ Mensagem ruim

"Erro no campo 3" ou "Formato inválido"

Acessibilidade

Contraste

Texto normal: mínimo 4.5:1 (WCAG AA)
Texto grande (+18px bold): mínimo 3:1
Componentes interativos e foco: mínimo 3:1

Foco de teclado

Nunca remova outline sem substituir por alternativa visível
Use box-shadow: 0 0 0 3px --accent-soft como indicador de foco
Todos os componentes interativos devem ser acessíveis via Tab

Semântica HTML

Use <button> para ações, <a> para navegação
Modais devem ter role="dialog" e aria-labelledby
Inputs sempre precisam de <label> associado
Ícones decorativos: aria-hidden="true"

Motion e Animações

Animações devem ser funcionais, não decorativas. Sempre respeite prefers-reduced-motion.

Feedback de hover: 150–180ms com --ease
Entradas de modais/toasts: 250ms com --ease-spring
Saídas: mais rápidas que entradas (150–200ms)
Skeleton shimmer: 1.5s linear infinite
Nunca anime propriedades que causam reflow (width, height). Prefira transform e opacity

Componentes em Contexto Escuro

Alguns componentes têm variantes escuras para uso em seções com --bg-dark:

btn-ghost-inv: Ghost com borda branca para fundos escuros
card-dark: Card com fundo escuro alt e borda dark
player-ctrl-btn: Controles semi-transparentes no player

✓ Faça

Use --text-inv para texto em fundos escuros. Use --border-dark para divisores em dark mode.

✗ Não faça

Não use --text (escuro) diretamente em fundos dark — perda total de legibilidade.

Changelog

Histórico de versões do Design System Fazdetoon.

v1.0.0

22 Mar 2026

Major

🎉 Lançamento inicial do Design System

Definição completa dos tokens: cores (17 variáveis), tipografia (4 famílias), espaçamento (escala de 4px), raios (5 valores), sombras (4 níveis), easings (3 curvas)
Foundations: Cores, Tipografia, Espaçamento, Sombras & Raios, Ícones inline, Sistema de Motion
Botões: 6 variantes (primary, dark, ghost, ghost-inv, danger, link), 4 tamanhos, estados completos (default, hover, disabled, loading), variante com ícone
Inputs: 6 variantes (text, password com toggle, search, textarea, prefix, suffix), estados (default, focus, filled, disabled, error, success)
Select & Menu: select nativo estilizado, dropdown custom com JS, combobox com avatar
Checkbox & Radio: todos os estados incluindo indeterminate, grupos de seleção múltipla
Toggle / Switch: off, on (accent), disabled com label
Cards: 5 variantes (padrão, branco, dark, lesson card, stats card)
Badges & Labels: 6 variantes de label, badges de notificação, status badges (Novo, Em breve, Concluído, Bloqueado), tags removíveis
Avatares: 5 tamanhos (xs 24px a xl 80px), status dots (online/offline/busy), avatar group com sobreposição, fallback de iniciais
Alertas: 4 variantes (success, warning, error, info) com borda colorida, ícone e botão de fechar
Progress: barras lineares (4 estados), com label de percentual, progress ring circular em SVG, barra de curso estilizada
Modais: 3 variantes (padrão, confirmação danger, formulário), backdrop click para fechar, animação de entrada
Toast: 4 variantes (success, error, warning, info), auto-dismiss 3s, demo de botões interativos
Tooltip: posições top e bottom, implementação pura CSS
Tables: tabela completa com avatar+progress+badge+ações, variante striped, cabeçalho com indicador de ordenação
Navegação: top navbar com glass effect, sidebar escura de membro, breadcrumb, tabs underline + pill
Accordion: estilo FAQ borderless, estilo card boxed, ambos com JS para open/close
Skeleton: 3 variantes (texto, card, lista) com animação shimmer CSS
Empty State: 3 variantes (sem cursos, sem resultados, sem notificações)
Paginação: padrão com ellipsis, versão simples anterior/próximo
Bloco Dashboard: 4 stat cards, atividade recente, widget de progresso ring
Bloco Player de Aula: dark, aspect-ratio 16/9, controles de play/pause/volume/fullscreen, scrubber, breadcrumb e navegação
Bloco Card de Curso: 3 cards em grid com variantes (em andamento, novo, bloqueado)
Bloco Sidebar Membro: dark sidebar com logo, nav com badges, rodapé de perfil
Bloco Login / Auth: card completo com logo, email, senha, remember me, divider, OAuth
Bloco Perfil: cover dark, avatar sobreposto, nome + badge, stats row
Tab de Tokens: tabela completa de todas variáveis CSS com swatches e uso
Tab de Guia de Uso: hierarquia de botões, regras de cor, validação de formulários, acessibilidade, motion
Interatividade JS: tab switching, accordion, modais, toasts com auto-dismiss, dropdowns, toggle switch, password show/hide, sidebar collapse, copy-to-clipboard, skeleton shimmer, sidebar search filter
Sidebar com IntersectionObserver para highlight automático ao rolar