Design System — Jeito de Educar v3

01Paleta de cores

Core palette — clique para copiar o hex.

Primary Pink

#E8307A

Black

#000000

White

#FFFFFF

Surface Light

#F5F4F0

Text Muted

#3D3D3A

Text Subtle

#AAAAAA

Illustration accents — fundos das ilustrações nos cards.

Illus Pink

#D63B8F

Illus Amber

#E8920C

Illus Blue

#2BAAD4

Illus Green

#2CB87C

Illus Purple

#7B52D4

Illus Coral

#E04830

Illus Teal

#2DC4B8

CSS tokens — clique na linha para copiar.

Token	Valor	Uso
--brand-pink	#E8307A	CTA, links ativos
--text-primary	#0A0A09 / #F0EFEC	Texto primário (adapta ao tema)
--surface	#F5F4F0 / #1A1917	Fundo de página
--card-bg	#FFFFFF / #1E1D1B	Cards, inputs, sidebar
--text-muted	#3D3D3A / #C5C4C0	Texto secundário
--text-subtle	#AAAAAA / #666662	Labels, captions

02Contraste & Acessibilidade WCAG

Pares de cor — verificação AA / AAA

Texto branco

4.52:1

✓ AA Normal✓ AA Large

#fff sobre #E8307A

Pink sobre preto

4.52:1

✓ AA Normal✓ AA Large

#E8307A sobre #000

Preto sobre surface

18.6:1

✓ AA✓ AAA

#000 sobre #F5F4F0

Muted sobre surface

7.2:1

✓ AA✓ AAA

#3D3D3A sobre #F5F4F0

Subtle sobre surface

2.3:1

✗ Falha AA

Usar apenas decorativo/disabled

Pink sobre branco

4.52:1

✓ AA Normal✓ AA Large

#E8307A sobre #fff

Nível	Ratio mínimo	Aplica-se a
AA Normal	4.5:1	Texto ≤ 18px regular / ≤ 14px bold
AA Large	3.0:1	Texto ≥ 18px regular / ≥ 14px bold
AAA Normal	7.0:1	Máxima acessibilidade
Focus ring	3.0:1	Indicador de foco em relação ao fundo

WCAG 2.1 · Focus: outline 2px brand-pink + offset 2px em todos os elementos interativos · :focus-visible (não aciona no mouse)

03Tipografia

Escala tipográfica — Poppins

Logo

italic · 700

Jeito de Educar·

H1 Hero

28–36px · 800

Sim, também temos
aluguel pra pagar.

H2 Section

20–22px · 800

Conteúdo com didática impecável

H3 Card

16px · 800

Curso de Métodos Criativos

Body

13px · 400 · lh 1.6

Um curso que te ajuda a sair do senso comum e ter ideias criativas para seus conteúdos e projetos.

Button

13px · 600

Saiba mais / Me avise!

Mono / Code

DM Mono · 11px

--brand-pink: #E8307A

Caption

11px · 400

Clique na linha para copiar CSS · Poppins + DM Mono

04Espaçamento

Escala — múltiplos de 4 · Clique para copiar token

--sp-1
4px

--sp-2
8px

--sp-3
12px

--sp-4
16px

--sp-5
24px

--sp-6
32px

--sp-7
48px

--sp-8
64px

05Border Radius

Tokens de arredondamento · Clique para copiar

4

--radius-sm
4px

6

--radius-btn
6px

12

--radius-card
12px

∞

--radius-pill
999px

06Sombras / Elevation

Tokens de sombra · Clique para copiar

--shadow-xs

0 1px 2px rgba(0,0,0,.06)

--shadow-sm

0 2px 6px rgba(0,0,0,.08)

--shadow-md

0 4px 16px rgba(0,0,0,.10)

--shadow-lg

0 8px 32px rgba(0,0,0,.12)

--shadow-xl

0 16px 56px rgba(0,0,0,.16)

--shadow-2xl

0 24px 80px rgba(0,0,0,.22)

--shadow-pink

0 4px 20px rgba(pink,.28)

xs → dropdowns leves · sm → cards em repouso · md → cards hover · lg → drawers · xl → modais · 2xl → overlays de tela cheia

07Z-Index Scale

Escala de empilhamento · Clique para copiar token

Token	Valor	Uso	Componentes
--z-base	0	Fluxo normal	Texto, imagens
--z-raised	10	Elementos elevados	Cards com hover, badges
--z-dropdown	100	Menus flutuantes	Dropdown, autocomplete
--z-sticky	200	Elementos fixos	Topbar, sidebar
--z-overlay	400	Overlays de busca	Search overlay
--z-modal	500	Modais e dialogs	Modal, drawer
--z-toast	600	Notificações	Toast, snackbar
--z-tooltip	700	Tooltips	Tooltip (sempre acima de tudo)

08Iconografia

Sistema de ícones · Clique para copiar emoji/código

Atributo	Valor
Biblioteca recomendada	Phosphor Icons / Heroicons (stroke, not fill)
Tamanho padrão	16px (inline) · 20px (botão) · 24px (destaque)
Stroke width	1.5px (padrão) · 2px (ênfase)
Cor	Sempre herdar do contexto (currentColor)
Fill	Nunca — apenas stroke / outline

Ícones do sistema — clique para copiar

busca

fechar

menu

voltar

avançar

subir

baixar

check

aviso

info

curtir

mais

cmd

adicionar

remover

claro

escuro

copiar

currentColor · stroke-only · 1.5px stroke width · tamanho 16/20/24px

09Botões

Variantes

primary · accent · outline · ghost · danger · icon · sm · lg · disabled · loading · :focus-visible com outline brand-pink

10Formulários

Campos e estados

Nome completo

E-mailNunca compartilhamos.

Área de atuação

ErroE-mail inválido.

Mensagem

Desabilitado

Checkbox, Radio & Toggle

11Badges & Tags

Badges · Clique para copiar classe

Novo Destaque ✓ Disponível Em breve Info Esgotado Gratuito

Tags interativas

Todos Criatividade Copywriting Marketing Design Liderança

12Alertas & Feedback

Variantes · ✕ para fechar

Informação

Sua inscrição foi recebida. Aguarde confirmação por e-mail.

Sucesso!

Pagamento confirmado. Você tem acesso imediato ao curso.

Atenção

Restam apenas 3 vagas para essa turma. Garanta a sua!

Erro no pagamento

Não foi possível processar. Verifique os dados do cartão.

Toasts · Clique para testar

13Cards

Card de produto — layout horizontal

Novo

Métodos Criativos

Saia do senso comum e desenvolva ideias criativas para seus projetos.

Em breve

Copywriting Pro

Domine a escrita persuasiva e crie textos que engajam e convertem.

14Navegação

Topbar

Home Sobre Blog Produtos Palestras Mentoria

Dropdown · Clique para abrir

Tabs

Aprenda técnicas criativas com didática impecável. Este curso foi desenhado para quem quer sair do senso comum e criar conteúdos únicos.

12 módulos · 48 aulas · 8h de conteúdo · Certificado incluso.

— 4.9 de 5 · 312 avaliações.

Dúvidas frequentes sobre o curso, pagamento e acesso.

Breadcrumb

Pagination

Stepper — progresso multi-etapa

✓

Dados pessoais

✓

Pagamento

3

Confirmação

4

Acesso

15Loading & Skeletons

Spinners

sm · md · lg

Progress bars

Progresso do curso68%

Upload35%

Concluído100%

Skeleton loaders — shimmer animation

Shimmer 1.4s infinite · gradient 90deg · adapta ao tema escuro

16Data Table

Tabela com sort, seleção e hover · Clique no cabeçalho para ordenar

Nome	Categoria	Preço	Status
Métodos Criativos	Criatividade	R$ 297	Ativo
Copywriting Pro	Escrita	R$ 197	Em breve
Palestra Motivacional	Palestras	R$ 497	Ativo
Mentoria 1:1	Mentoria	R$ 1.200	Info
Workshop Design	Design	R$ 149	Esgotado

Clique na linha: toggle selected · Clique no cabeçalho: sort asc/desc · checkbox master seleciona tudo

17Stats / KPI Cards

Indicadores de desempenho

Alunos ativos

4.812

↑ 12% vs mês anterior

Receita mensal

R$48k

↑ 8.3%

Taxa de conclusão

76%

↓ 2%

NPS

89

↑ 4 pts

18Avatar & Media

Avatares

M

JS

AB

RS

PL

Avatar group

M

J

A

R

+8

Aspect ratios padrão

1:1
Square

Avatar / Logo

4:3
Standard

Card thumb

16:9
Widescreen

Video / Banner

9:16
Story

Reels / Story

19Modal & Overlay

Modal · ESC ou clique fora para fechar

backdrop blur(4px) · scale + translateY spring · focus-trap · role="dialog" · aria-modal

20Rodapé

Footer completo

21Estilo de ilustração

Ink style — clique para copiar hex

Personagem	Mascote masculino, cabelos espetados
Traço	Nanquim / line art, sem fill interno
Estilo	Editorial BR — influência CN / DC anos 90
Fundo	Sólido — sempre da accent palette
Combinação	Linhas pretas sobre fundo colorido

Fundos · Clique para copiar

22Motion

Easings · Hover para ver · Clique para copiar

Ease Out

cubic-bezier(.22,1,.36,1)

Spring

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

Slide In

translate + opacity

Spin

rotate 0→360deg

Pulse

opacity 1→.3→1

Shake

translateX ±6px

23Grid & Layout

Grid de produtos

Card 1

Card 2

Card 3

Card 4

grid-template-columns: 1fr 1fr · gap: 24px · max-width: 800px · mobile: 1 coluna

24Voz & Tom

Princípios de comunicação

Humano

Fala como amigo, não como corporação

Direto

Vai ao ponto sem rodeios

Ousado

Não tem medo de opinião

Empático

Sabe da realidade do aluno

✓ Use assim

"Sim, também temos aluguel pra pagar."

"Me avise!" — CTA direto e pessoal

"Um curso pra quem quer sair do óbvio."

✗ Evite assim

"Adquira já o seu produto digital!"

"Clique aqui para acessar nossa plataforma"

"Solução inovadora para sua carreira profissional"

✓ Erros & alertas

"E-mail inválido." — curto, claro

"Vagas quase esgotadas — garanta a sua!"

"Algo deu errado. Tenta de novo?"

✗ Erros & alertas

"O campo e-mail apresentou formato inválido."

"Erro 422: Unprocessable Entity"

"Por favor, tente novamente mais tarde."

Glossário de CTAs

Contexto	✓ Use	✗ Evite
Curso disponível	Saiba mais	Compre agora / Adquira
Lançamento futuro	Me avise!	Cadastre-se para notificações
Newsletter	Quero receber	Inscreva-se na newsletter
Formulário	Enviar / Pronto!	Submeter / Processar
Inscrição	Quero minha vaga!	Registre-se no evento

25Playground — Botão

Editor interativo de botões

Variante

Tamanho

Texto

Estado

Ícone

25bPlayground — Badge

Editor interativo de badges

Variante

Texto

Ícone prefixo

25cPlayground — Card

Editor interativo de cards

Cor accent

Título

Descrição

Badge

Exibir CTA

Texto do CTA

25dPlayground — Input

Editor interativo de campos de formulário

Tipo

Label

Placeholder

Hint text

Estado

26Como implementar no WordPress

Opção 1 — Apenas os tokens (tema filho)

Ideal quando você já tem um tema e quer apenas consumir as variáveis CSS do sistema sem carregar os componentes.

/* Em functions.php do tema filho */
function jeito_enqueue_tokens() {
    wp_enqueue_style(
        'jeito-tokens',
        get_stylesheet_directory_uri() . '/jeito-tokens.css',
        [],
        '4.0'
    );
}
add_action( 'wp_enqueue_scripts', 'jeito_enqueue_tokens' );

Depois, use os tokens diretamente no seu CSS: .meu-componente { color: var(--brand-pink); gap: var(--space-inline-md); }

Opção 2 — Sistema completo (novo tema ou plugin)

Usa todos os arquivos modulares. Recomendado ao construir um tema do zero ou um plugin de page builder.

/* Em functions.php */
function jeito_enqueue_design_system() {
    // CSS principal (importa todos os módulos)
    wp_enqueue_style(
        'jeito-ds',
        get_stylesheet_directory_uri() . '/design-system/style.css',
        [],
        '4.0'
    );

    // Google Fonts (Poppins + DM Mono)
    wp_enqueue_style(
        'jeito-fonts',
        'https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,600;1,700&family=DM+Mono:wght@400;500&display=swap',
        [],
        null
    );

    // JS (playground, dark mode, etc.)
    wp_enqueue_script(
        'jeito-ds-script',
        get_stylesheet_directory_uri() . '/design-system/script.js',
        [],
        '4.0',
        true  // carrega no footer
    );
}
add_action( 'wp_enqueue_scripts', 'jeito_enqueue_design_system' );

Opção 3 — @import no style.css do tema filho (Hello Elementor)

Para o projeto Frassati ou qualquer tema Hello Elementor child, basta importar os tokens no topo do style.css do tema filho:

/*
 * Theme Name: Jeito de Educar Child
 * Template: hello-elementor
 */

/* Importa todos os tokens do design system */
@import url('../jeito-design-system/jeito-tokens.css');

/* Seus estilos customizados a partir daqui */
.site-header {
  background: var(--surface);
  border-bottom: 0.5px solid var(--border-mid);
}
.elementor-button {
  background: var(--brand-pink);
  color: #fff;
  border-radius: var(--radius-btn);
  font-family: var(--font);
  padding: 9px var(--sp-4);
}

Estrutura de arquivos recomendada

wp-content/themes/jeito-child/
├── style.css                    ← tema filho (Template: hello-elementor)
├── functions.php                ← enqueue do design system
├── jeito-tokens.css             ← tokens standalone (wp_enqueue_style)
└── design-system/
    ├── style.css                ← entry point (importa os módulos)
    ├── script.js                ← dark mode, playgrounds, interações
    └── css/
        ├── tokens.css           ← @import jeito-tokens.css + reset
        ├── layout.css           ← sidebar, topbar, main, responsive
        ├── components.css       ← todos os componentes UI
        └── utilities.css        ← classes utilitárias

Dark mode via data-theme no WordPress

O sistema lê o atributo data-theme no <html>. Para ativá-lo no WordPress, o script já cuida disso via localStorage e prefers-color-scheme. Para forçar dark mode no servidor (evitar flash):

/* Em functions.php — injeta script inline antes do CSS para evitar FOUC */
function jeito_prevent_fouc() { ?>
<script>
  (function(){
    var t = localStorage.getItem('ds-theme') ||
      (window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light');
    document.documentElement.setAttribute('data-theme', t);
  })();
</script>
<?php }
add_action( 'wp_head', 'jeito_prevent_fouc', 1 );

27Changelog

Histórico de versões

v4.0

Mar 2026

newTokens semânticos de feedback: --color-{info|success|warning|error}-{bg|border|text|icon}

newPlayground expandido: Badge, Card e Input com editor interativo

newSeção "Como implementar no WordPress" com 4 estratégias documentadas

newjeito-tokens.css — arquivo standalone para wp_enqueue_style()

newAliases semânticos de espaçamento: --space-inline-*, --space-stack-*, --space-component, --space-section, --space-page

newTokens de duração de animação: --duration-fast/normal/slow

newcss/utilities.css — 40+ classes utilitárias (flex, spacing, typo, border)

changedCSS dividido em módulos: tokens / layout / components / utilities

changedAlertas e badges migrados de cores hardcoded para tokens semânticos

changedSpacing tokens legíveis (1 por linha) com aliases semânticos

Snippet anti-FOUC (flash of unstyled content) para dark mode no WP

v3.0

Mar 2025

newDark mode completo com toggle e tokens semânticos

newTabela de contraste WCAG AA/AAA com 6 pares verificados

newEscala de sombras tokenizada (xs → 2xl + pink)

newEscala de z-index com 8 níveis documentados

newSistema de iconografia com diretrizes e 18 ícones

newDropdown menu animado com variante danger

newTabs (line + pill) com animação de painel

newBreadcrumb + Pagination interativa

newStepper multi-etapa com estados done/current

newSkeletons com shimmer + Spinners (3 tamanhos) + Progress bars

newData Table com sort, seleção de linha e checkbox master

newStats/KPI Cards com deltas positivo/negativo

newAvatar system (5 tamanhos + group)

newAspect ratios padrão documentados (1:1, 4:3, 16:9, 9:16)

newPlayground interativo do botão

newVoz & Tom com exemplos + glossário de CTAs

:focus-visible global em todos os elementos interativos

role, aria-label e aria-current adicionados

prefers-reduced-motion respeitado

changedBotões ganham variante danger + estados disabled/loading

changedTokens de cor agora semânticos (text-primary adapta ao tema)

v2.0

Fev 2025

newFormulários completos: checkbox, radio, toggle, select, textarea

newBadges (7 variantes) e Tags interativas

newAlertas (4 variantes) com fechar

newModal de inscrição com animação spring

newSearch overlay (⌘K) com navegação por teclado

newMotion section com 6 animações demonstradas

newScroll progress bar · Mobile topbar + drawer + bottom nav

newCopy-on-click em tokens, cores e componentes

v1.0

Jan 2025

newPaleta de cores (core + illustration accents)

newEscala tipográfica Poppins + DM Mono

newTokens de espaçamento e border radius

newBotões (primary, accent, outline)

newCard de produto + Navegação + Rodapé

newGuidelines de ilustração e grid