O botão “Entrar com Atos”
O kit do login com a Conta Atos para o seu site: os botões (em SVG e em HTML sem script), o menu de conta que fica no topo depois do login e as regras de uso. Serve a quem já integrou o Login Atos (Atos Workspace › Integrações).
Os botões
Três temas, para o fundo do seu site; três tamanhos, todos com área de toque de pelo menos 44 px; quatro textos (“Entrar com Atos”, “Continuar com Atos”, “Criar conta com Atos” e o curto “Entrar”, para topbars) e o ícone só, quadrado, para barras estreitas. Os cantos são retos em todos: é a forma da marca da Atos, como o quadrado do “A”.
Claro fundo branco, com borda
Escuro para fundos escuros
Neutro cinza claro, sem borda
“Continuar com Atos” é o texto do “Continuar como”: no Chrome e no Edge, o clique abre a janela do navegador com a Conta Atos aberta nele; nos outros, o mesmo botão leva ao login de sempre.
O código
Os dois caminhos dão o mesmo HTML: um <a> com a folha https://atos.dev.br/marca/botao.css, sem estilo inline nem script (passa numa CSP sem 'unsafe-inline'). O texto usa a fonte do sistema (a Inter Tight, se o seu site já a tiver); nos SVG, o texto é desenho.
No HTML, sem script
<link rel="stylesheet" href="https://atos.dev.br/marca/botao.css">
<a class="atos-entrar atos-entrar--claro atos-entrar--medio" href="/entrar">
<svg class="atos-entrar__marca" viewBox="0 0 64 64" aria-hidden="true" focusable="false"><rect width="64" height="64" fill="#131312"/><path fill="#d8d8d8" d="M26.93 48.65V50H15.73V48.65L19.59 47.97L31.19 15.67H36.02L48.08 47.97L52.4 48.65V50H38V48.65L42.57 47.97L39.19 38.14H25.79L22.36 47.97ZM32.39 19.33 26.55 35.86H38.41Z"/></svg>
<span class="atos-entrar__texto">Entrar com Atos</span>
</a>Classes: o tema (--claro, --escuro, --neutro), o tamanho (--grande, --medio, --pequeno), --icone (só o quadrado; o texto fica para leitores de tela) e --largo (a largura toda). O href é o caminho do seu sistema que começa o login.
Pelo pacote
import { botaoEntrarComAtos } from "@atos.dev.br/entrar";
lugar.innerHTML = botaoEntrarComAtos({
tema: "escuro",
tamanho: "grande",
texto: "continuar",
href: "/entrar",
});
// tema: "claro" | "escuro" | "neutro"
// tamanho: "grande" | "medio" | "pequeno"
// texto: "entrar" | "continuar" | "criar-conta" | "curto"
// icone: true (só o quadrado); largo: true (a largura toda)O @atos.dev.br/entrar 0.5.0 ou mais novo (o texto "curto" e o menu são desta versão): npm install @atos.dev.br/entrar. Numa página sem empacotador, o mesmo código num arquivo só, servido pela Atos: https://atos.dev.br/pacotes/entrar/0.5.0/entrar.js. A folha vai junto, em @atos.dev.br/entrar/botao.css.
Regras de uso
Pode
- Usar os arquivos daqui, o HTML acima ou o pacote, sem pedir licença, para o login com a Conta Atos no seu sistema.
- Escolher o tema que combina com o fundo, o tamanho e um dos quatro textos.
- Pôr o botão ao lado de outros botões de login (Google, e-mail e senha), com o mesmo destaque que eles.
- Usar a largura toda (
--largo) num formulário estreito.
Não pode
- Mudar a marca: as cores, o “A”, a proporção, o desenho; nem arredondar os cantos, esticar, girar ou pôr sombra e efeito.
- Trocar o texto por outro que não os quatro, ou escrever o nome de outro jeito (“ATOS”, “Atos Login”).
- Usar o botão ou a marca para outra coisa que não o login com a Atos: não para pagamento, não para dizer que o seu sistema é da Atos, parceiro ou recomendado por ela.
- Pedir a senha da Conta Atos no seu site: o botão leva à Atos (ou à janela do navegador, no “Continuar como”), e só a Atos pede a senha.
- Diminuir abaixo do pequeno (44 px de altura).
Espaço livre
Deixe em volta do botão um espaço livre de pelo menos um quarto da altura dele (14 px no grande, 12 px no médio, 11 px no pequeno), sem outro texto, ícone ou borda.
Os arquivos
SVG com o texto em contorno (não dependem de fonte instalada). Clique para baixar.
| Texto | Claro | Escuro | Neutro |
|---|---|---|---|
| Entrar com Atos | grandemédiopequeno | grandemédiopequeno | grandemédiopequeno |
| Continuar com Atos | grandemédiopequeno | grandemédiopequeno | grandemédiopequeno |
| Criar conta com Atos | grandemédiopequeno | grandemédiopequeno | grandemédiopequeno |
| Entrar | grandemédiopequeno | grandemédiopequeno | grandemédiopequeno |
| Só o ícone | grandemédiopequeno | grandemédiopequeno | grandemédiopequeno |
- A marca
- atos-marca.svg o quadrado com o “A”, 64 × 64
- A coroa
- atos-coroa.svg clara, para fundos escuros · atos-coroa-escura.svg escura, para fundos claros (64 × 64, sem fundo)
A fonte do texto é a Inter Tight (SIL Open Font License 1.1); o “A” é desenhado a partir da Tinos (Apache 2.0); a coroa é o contorno do desenho original da Atos. Os SVG são gerados por tools/gerar-marca.py.
Monte o seu
Escolha e veja ao vivo, depois copie o código. No Atos Workspace › Integrações, o mesmo passo sai no cartão “Como integrar” de cada acesso, já com o client_id dele.
Veja também o Login Atos, os Termos de uso e a Política de privacidade.