O Prosperaz é o design system da Jornada Mestre.
Tokens de cor, tipografia e escala, componentes e padrões de página — documentados como qualquer sistema publicado (Material, Polaris, Carbon), com uma regra que poucos escrevem: as cores mudam de papel entre claro e escuro, e cada uma está aqui com o contraste que prova isso.
00 — Fundamentos
Três regras, não um mood board
Contraste primeiro
Toda cor usada como texto tem contraste WCAG calculado, nunca estimado. A seção Acessibilidade mostra a conta, não só o resultado.
Papéis se invertem
A mesma cor pode ser texto seguro no escuro e só decoração no claro, ou o contrário. Ver seção Modos & acento — é o toggle ao lado que prova isso.
Fonte única
Todo valor vem de TEMA PORTAL JM.css. Nenhum hex é reinventado aqui — só reorganizado como token de tema.
01 — Cor
Cada cor com sua regra de uso
Valores fixos — não reagem ao toggle da barra lateral, porque documentam os dois estados lado a lado. O selo é o piso WCAG sobre o fundo do próprio grupo (escuro: #0F0618 · claro: #FFFFFF).
Canon — escuro (produção)
Laranja
--jm-laranja · #FCA457
AAA · 9,99CTA e destaque. Livre para texto, ícone e fundo de botão.
Roxo
--jm-roxo · #A68FD4
AA · 7,08Único roxo texto-seguro no escuro. No claro, o papel inverte.
Roxo forte
--jm-roxo-forte · #6E569C
⚠ 3,28 — só texto grandeNunca em corpo de texto no escuro. Só borda e fundo.
Texto suave
--jm-texto-suave · #A89BC0
AAA · 7,66Corpo de texto secundário sobre o preto do portal.
Preto do portal
--jm-preto · #0F0618
baseFundo padrão — o tom mais escuro da família, pedido explicitamente pelo Dennis.
Azul
--jm-primitive-azul · #6EA8FF
novo · 8,22Pilar "Processos". Existe só na proposta — ainda não está em nenhuma tela em produção.
Proposta — claro (calculada, não ratificada)
Laranja-texto
prosperaz-orange-ink · #A85400
AA · 5,34O laranja de produção (#FCA457) reprova em fundo branco (1,98:1) — este é o substituto para CTA e texto.
Roxo-texto
#6E569C
AA · 6,04Papel invertido: no escuro é só borda, no claro é o texto seguro.
Roxo — decorativo
#A68FD4
⚠ 2,8 — nunca textoPapel invertido: no escuro era texto seguro, no claro é só borda e preenchimento.
Texto suave
#6B6280
AA · 5,7Corpo de texto secundário sobre branco.
Texto principal
#1A0033
AAA · 19,24O roxo-fundo do escuro, invertido: aqui é texto, não fundo.
Fundo
#FFFFFF
baseFundo padrão do estado claro.
Pilares — Método LIDERAR 4P
02 — Modos & acento
O toggle não é decoração, é a prova
Os botões na barra lateral mudam data-theme e data-accent no documento inteiro — não só esta seção. Role até Botões, Campos ou Padrões de página e clique: o roxo-forte (#6E569C), que no escuro só serve de borda, vira o roxo de texto no claro; o laranja de produção sai de cena no claro e entra o laranja-texto (#A85400).
Esta própria página é escura por padrão porque o canon da Jornada Mestre é escuro — o claro é a proposta ainda em validação. Um visitante com o sistema operacional em modo claro já vê essa versão automaticamente, sem precisar clicar em nada.
03 — Tipografia
Sans para tudo, mono para número e rótulo
04 — Espaço, radius, sombra
Grid de 4px e dois passos de elevação
Radius
Sombra & halo
05 — Botões
Variantes, tamanhos, estados
Variantes
Tamanhos
Estados
Ícone
06 — Badges & pills
Rótulo de categoria vs. contador
Pills — rótulo
Badges — contador / estado
07 — Campos
Padrão, hint e erro
Padrão
Erro
08 — Superfícies & ícones
Card base e traço corrente
Card padrão
Borda + sombra sm, superfície um tom acima do fundo.
10 — Feedback
Callout, progresso, avaliação, estatística, passos
Callout
Atenção: este token ainda não foi ratificado como canon.
Progresso
Avaliação
Estatística
Passos
11 — Padrões de página
Web · mobile · app
Mobile
Calculadora de preço
PrecificaçãoPauta automática
ConteúdoApp / painel
Portal de Ferramentas
12 — Nuvemshop
Vitrine, produto, carrinho, checkout
A loja (loja.jornadamestre.com) roda em tema pronto de catálogo — sem acesso de código ao brand-editor. Estas composições são a referência de como cada tela deveria ficar; aplicação real é manual na tela visual, ou via injeção de CSS pelo app Hunt (Scripts API), nunca 1:1 automática.
Grade de produto
Caixa de Ferramentas LIDERAR 4P
Workshop OKR sem Teatro
Diagnóstico LIDERAR 4P
Página de produto
Caixa · Precificação
Caixa de Ferramentas LIDERAR 4P
R$ 47,00
Formato
Carrinho
Seu carrinho
2 itensCaixa de Ferramentas LIDERAR 4P
DigitalWorkshop OKR sem Teatro
1xStatus de pedido
Checkout
Banner de promoção
Virada de trimestre: 20% na Caixa
Válido até domingo · cupom aplicado automaticamente no carrinho.
13 — Apresentação & diagnóstico
Estrutura SOAP e fluxo de pergunta única
Capa de curiosidade, três Atos, densidade mista — nunca "Apresentação Institucional".
Qual pilar do LIDERAR 4P mais te tira o sono hoje?
"Saí de apagar incêndio pra ter um time que roda sem mim no meio de tudo."
14 — Acessibilidade
O que muda na prática
Escuro (canon): --jm-roxo-forte só aparece em borda e fundo, nunca em texto — 3,28:1 reprova corpo de texto.
Claro (proposto): texto #1A0033 → 19,24:1 · texto-suave #6B6280 → 5,7:1 · roxo-texto #6E569C → 6,04:1 · laranja-texto #A85400 → 5,34:1. Todos acima do piso AA (4,5:1 texto normal).
Próximo passo real: lint de contraste automatizado no build, em vez de comentário manual revisado à mão.