Vitrine do design
Os tokens e os componentes do LeverPro Academy, como as telas vão usar. Tudo nesta página é exemplo: nas telas, os números vêm do dado real.
Casca por papel
A casca desta página é a das áreas autenticadas, com uma pessoa de exemplo. A aluna tem o cabeçalho; gestão, administração e operação têm a barra lateral com grupos. Até 960 px, o topo de 60 px e a barra inferior.
Pessoa de exemplo
- Marina Azevedo, aluna
- Juliana Teles, aluna em duas empresasna casca agora
- Rafael Nogueira, gestor
- Sofia Albuquerque, admin
- Olívia Sarmento, operadora da plataforma
Com dois vínculos, o seletor de empresa aparece no cabeçalho. Trocar de empresa anuncia a troca e recarrega a casca.
O que o domínio liberou
A casca mostra agora a área do aluno, no caminho /perfil#desenvolvimento.
- Área do aluno
- Início, Formações, Certificados, Perfil
Troca de empresa
Use o seletor de empresa da casca. Aqui se escolhe como a troca termina, para conferir cada estado.
Barra inferior do celular
A área do aluno cabe em cinco lugares; a de gestão, em quatro. Quando os itens passam dos lugares, o último vira o item Mais, que guarda o resto na mesma ordem.
Marca
O logotipo LeverPro Academy, como veio do pacote: sem redesenhar nem recolorir. 28 px no cabeçalho, 26 px na barra lateral, o símbolo no topo do celular e no ícone da aba.
Tipografia
Source Sans 3 na interface; Source Serif 4 só em título de curso, título de aula e número que importa. Caixa de frase sempre.
Cores
Os tokens do :root do academy-v8.css, em OKLCH. Nenhuma cor fora deles: nada de preto ou branco puros.
Superfícies e linhas
--bg--surface--layer--layer-2--hover--line--line-strong
Tinta
--ink--text--muted--subtle--on-dark
Cobalto: ação e progresso
--cobalt--cobalt-hover--cobalt-press--cobalt-text--cobalt-soft--cobalt-tint--cobalt-line
Âmbar: meta, XP, nível
--amber--amber-deep--amber-ink--amber-soft--amber-trk--amber-line
Verde: concluído
--green--green-ink--green-soft--green-line
Vermelho: atraso e erro
--red--red-ink--red-soft--red-line
Player e capas
--night--cv-ink
Botões
Link quando navega, botão quando age. Um primário por região. Desabilitado sempre com o motivo ao lado.
Badges, XP e contadores
Todo estado com palavra e ícone. O XP a ganhar é âmbar em pílula; o XP recebido é um badge verde.
Avisos
cp-notice: informação, atenção, erro e sucesso.
Tabela de gestão
Cabeçalho em --layer e a legenda para o leitor de tela.
| Pessoa | Formação de exemploprazo 31/10 | Curso avulso |
|---|---|---|
| Pessoa de exemplo | Atrasado 2 d · 25% | Não iniciou |
| Outra pessoa | 50% | Concluiu |
Indicadores (KPI)
Número em serifa, minigráfico com aria-label dos valores, delta sempre com palavra. Gestão usa contagens e médias do time.
Trilha com marcos
Horizontal no computador e vertical abaixo de 720 px. Nós: feito, você está aqui, próximo, quiz, bloqueado. O marco é o cofre com o XP visível.
- FundamentosCertificado
- Extratos e arquivosCertificado
- 3Curso de exemplo2 de 6 aulasVocê está aqui
- Certificado do curso 3quiz com mínimo de 70%+100 XP
- 4Próximo cursoabre depois do curso 3
- Quiz final10 perguntas
- Curso bloqueadoexige o curso 4
- Certificado da formaçãodepois de todos+500 XP
Compacta (coluna lateral e celular)
- Extratos e arquivosCertificado
- 3Curso de exemplo2 de 6 aulasVocê está aqui
- Certificado do curso 3quiz com mínimo de 70%+100 XP
- 4Próximo cursoabre depois do curso 3
- Quiz final10 perguntas
Anel da meta e nível
O anel âmbar da meta da semana é a assinatura; verde quando cumprida. O nível leva o anel de progresso até o próximo.
Sequência
Só dias úteis contam; o congelamento é o dia protegido.
Régua de subida
Quanto falta para a zona de subida, em % do XP do primeiro colocado.
Insígnias
Medalha com aro gravado e o nome em texto. A bloqueada mostra no aro o progresso para desbloquear.
- Primeira formação02/10
- 10 dias seguidos21/10
- Nota máximacurso 3
- 15 dias seguidos12 de 15
- Curso antes do prazocurso 4 · 33%
- Formação concluída3 de 17