Tema Sabiá — style guide
Sandbox para visualizar os componentes reais do tema (templates, tokens e SCSS de
sabia.tema) sem depender de nenhum app consumidor (login, perfil, desenvolvedores).
Tipografia
Headline 1 — Poppins 700 36px
Headline 2 — Roboto 600 26px
Subtitle 1 — Roboto 600 20px
Subtitle 2 — Roboto 400 18px
Body 1 — Roboto 400 18px
Body 2 — Roboto 400 16px
Label — Roboto 700 16px
Caption — Roboto 400 14px
Overline — Roboto 400 14px
Cores (tokens)
Botões
.link-brown · .dark-brown
Mensagens
Faltava no Design System: o form.non_field_errors do Django saía sem nenhum destaque,
só texto puro (ver issue do login — "Usuário ou senha inválidos" sem parecer erro nenhum).
Mensagem de informação — ex.: aviso neutro sobre o estado de algo.
Mensagem de aviso — ex.: atenção antes de uma ação irreversível.
Usuário ou senha inválidos.
Mensagem de sucesso — ex.: cadastro confirmado.
Reprodução exata do form.non_field_errors
Sem nenhuma classe especial no template — só ul.errorlist, do jeito que o Django
renderiza sozinho. O CSS do tema estiliza esse seletor direto.
- Usuário ou senha inválidos.
Formulário
Recuperação de senha
Telas de "Esqueceu a senha?" do login (login/resetar_senha.scss). Não existe frame no
Figma: o visual é derivado da tela de login e dos tokens. Abaixo, cada estado isolado e, no fim, o
layout completo da página (a ilustração só aparece a partir de 992px).
1 · Solicitar
Esqueceu a senha?
Informe seu CPF ou e-mail e enviaremos um link para você criar uma nova senha.
2 · Solicitar — erro de campo
Esqueceu a senha?
Informe seu CPF ou e-mail e enviaremos um link para você criar uma nova senha.
3 · E-mail enviado
Verifique seu e-mail
Se houver uma conta com os dados informados, enviamos um link para o e-mail cadastrado.
O link vale por 2 horas. Não recebeu? Confira a caixa de spam ou peça um novo link em alguns minutos.
4 · Redefinir senha
Crie uma nova senha
Escolha uma senha que você ainda não usou neste serviço.
5 · Redefinir — erro de campo
Crie uma nova senha
6 · Link inválido ou expirado
7 · Senha redefinida
Layout completo da página
Esqueceu a senha?
Informe seu CPF ou e-mail e enviaremos um link para você criar uma nova senha.
