Manual da marca · versão 1.0
O sistema visual do PremiaAki, vivo e no ar.
Tudo que define a cara do PremiaAki está nesta página: marca, cores, tipografia, componentes, voz e regras de acessibilidade. Ela é construída com os mesmos componentes do produto, então o que você vê aqui é o que está no site.
O kit traz as logos, os símbolos, o favicon, o ícone do app e os tokens. Prefere ver o CSS? Abra o tokens.css.
Para quem é
Para a equipe
Como montar tela, e-mail e post sem inventar estilo novo. Cada componente aqui tem estado, medida e regra.
Para as lojas parceiras
Como usar a logo no cartaz, na vitrine e nas redes. Arquivos prontos para baixar, com as áreas de proteção.
Para quem desenvolve
Tokens, escala, pontos de quebra e acessibilidade. A página usa os componentes do site: se mudou aqui, mudou lá.
O que tem aqui
- MarcaAs três formas · Quando usar cada uma · Área de proteção e tamanho mínimo
- CoresPaleta · O papel de cada cor · Cores de estado
- TipografiaA fonte · Escala · Regras
- Grade e espaçosContainer e colunas · Escala de espaçamento · Pontos de quebra
- FormasRaio zero · Sombra dura · Filetes
- ÍconesGrade de 24 · Tamanhos · Biblioteca
- ComponentesBotões · Campos · Seleção
- Voz e textoRegistro · Certo e errado · Palavras proibidas
- Movimento e acessibilidadeDurações · Movimento reduzido · Foco e teclado
- AplicaçõesE-mail · Cartaz da loja · Etiqueta da vitrine
Marca
As três formas
A marca tem só três formas. Nada de versão com slogan, com o nome em duas cores ou com a exclamação separada do K.
Horizontal · PREMIAAKI!
Empilhada · PREMI / AAKI!
Símbolo · “!”
Quando usar cada uma
| Forma | Onde | Tamanho mínimo | Regra |
|---|---|---|---|
| Horizontal | Cabeçalho do site e do app, rodapé, e-mail, cartaz, assinatura. | 120 px de largura (20 px de altura) · 30 mm | Sempre que houver largura. É a forma principal. |
| Empilhada | Cabeçalho e rodapé em telas de até 960 px, redes sociais, brindes, etiquetas. | 72 px de largura (34 px de altura) · 18 mm | Quando a horizontal ficaria menor que 120 px. |
| Símbolo | Favicon, ícone do app, avatar, estados vazios, marcador. | 16 px de altura · 4 mm | Só onde a marca já é conhecida ou o nome está por perto. Nunca substitui a logo num cartaz. |
Veja no cabeçalho desta página: a horizontal entra com 30 px de altura (183 px de largura) e, em telas de até 960 px, troca pela empilhada com 40 px de altura (85 px de largura). Quem faz a troca é o componente Brand.
O © faz parte dos arquivos e vai junto em todas as aplicações. A inclinação é parte do desenho, não um efeito: use o arquivo como está, sem girar.
Área de proteção e tamanho mínimo
x = altura da haste do “!”. Nada entra na moldura: texto, foto, outra logo, borda do papel.
Construção
Archivo 900 estendida a 112%, caixa alta, o bloco inteiro inclinado em −2° e cada letra girada entre −3° e +2,5°. Os dois A se sobrepõem. O I final vira a haste do “!”, e a haste termina num rasgo de cupom.
- Tipo
- Archivo 900, largura 112%, caixa alta.
- Inclinação
- Bloco inteiro a −2° (medido no arquivo: −1,9°); cada letra gira em torno do próprio centro (valores embaixo de cada letra).
- AA
- O segundo A entra sobre o primeiro (33% da largura do A); as pernas se fundem num glifo só.
- I!
- Glifo próprio, não é da fonte: caixa 40 × 100, girado −1,5° em relação ao bloco (−3,5° no total, o mesmo giro do arquivo do símbolo).
- ©
- Anel com o C dentro, depois do “!”, no alto da caixa alta.
- Traçado
- Curvas da fonte original: quadrado vermelho é âncora, círculo é alça (161 pontos no arquivo). Não redesenhe: use o arquivo.
Estudos de intenção
A · Rasgo de cupom Escolhido
Base da haste serrilhada como o corte do cupom fiscal. Fala do produto: o cupom vira número da sorte.
B · Carimbo Descartado
Ponto girado +12° e deslocado, como carimbo batido. Simpático, mas frágil em tamanho pequeno.
C · Canto cortado Descartado
Canto superior chanfrado, como canhoto de ingresso. Discreto demais: some abaixo de 48 px.
Tamanhos
16 · favicon- 24
- 32
- 48
96 · ícone do app
Abaixo de 24 px os dentes somem sozinhos (suavização da tela): não desenhe versão lisa, é o mesmo arquivo.
Usos errados
Errado: Esticar ou achatar. A proporção é fixa: redimensione sempre pelo canto. Errado: Girar diferente. A inclinação já está no arquivo: −2°, nem mais, nem menos. Errado: Trocar a cor. Só azul, Papel ou preto. Nunca degradê, nunca duas cores. Errado: Fundo sem contraste. Azul sobre preto (1,58:1), foto escura ou azul claro não passam. Errado: Sombra, contorno ou brilho na logo. A sombra dura é dos componentes, não da marca. - PremiaAki!
Errado: Escrever com a fonte do sistema ou em caixa baixa. Use sempre o arquivo.
Arquivos
| Arquivo | Baixar | Uso |
|---|---|---|
| premiaaki-horizontal-azulpublic/logo-premiaaki.svg | SVG da horizontal azulPNG 512 pixels da horizontal azulPNG 1024 pixels da horizontal azulPNG 2048 pixels da horizontal azul | Sobre Papel ou branco: site, e-mail, impressos. |
| premiaaki-horizontal-negativapublic/logo-premiaaki-negativo.svg | SVG da horizontal negativaPNG 512 pixels da horizontal negativaPNG 1024 pixels da horizontal negativaPNG 2048 pixels da horizontal negativa | Sobre azul: barra lateral do app, faixas, cabeçalho de e-mail. |
| premiaaki-horizontal-monopublic/logo-premiaaki-mono.svg | SVG da horizontal monoPNG 512 pixels da horizontal monoPNG 1024 pixels da horizontal monoPNG 2048 pixels da horizontal mono | Impressão em uma cor, carimbo, documento em preto e branco. |
| premiaaki-empilhada-azulpublic/logo-premiaaki-empilhada.svg | SVG da empilhada azulPNG 512 pixels da empilhada azulPNG 1024 pixels da empilhada azulPNG 2048 pixels da empilhada azul | Telas estreitas, redes sociais, brindes, etiquetas. |
| premiaaki-empilhada-negativapublic/logo-premiaaki-empilhada-negativo.svg | SVG da empilhada negativaPNG 512 pixels da empilhada negativaPNG 1024 pixels da empilhada negativaPNG 2048 pixels da empilhada negativa | Sobre azul, em espaço estreito. |
| premiaaki-empilhada-monopublic/logo-premiaaki-empilhada-mono.svg | SVG da empilhada monoPNG 512 pixels da empilhada monoPNG 1024 pixels da empilhada monoPNG 2048 pixels da empilhada mono | Impressão em uma cor, em espaço estreito. |
| premiaaki-simbolo-azulpublic/simbolo-premiaaki.svg | SVG da símbolo azulPNG 512 pixels da símbolo azulPNG 1024 pixels da símbolo azulPNG 2048 pixels da símbolo azul | Avatar, marcador, ícone sobre Papel ou branco. |
| premiaaki-simbolo-negativapublic/simbolo-premiaaki-negativo.svg | SVG da símbolo negativaPNG 512 pixels da símbolo negativaPNG 1024 pixels da símbolo negativaPNG 2048 pixels da símbolo negativa | Sobre azul: ícone do app, avatar de rede social. |
| premiaaki-simbolo-monogerado de public/simbolo-premiaaki.svg | SVG da símbolo monoPNG 512 pixels da símbolo monoPNG 1024 pixels da símbolo monoPNG 2048 pixels da símbolo mono | Impressão em uma cor. |
| premiaaki-simbolo-claropublic/simbolo-premiaaki-claro.svg | SVG da símbolo claroPNG 512 pixels da símbolo claroPNG 1024 pixels da símbolo claroPNG 2048 pixels da símbolo claro | Só nos estados vazios do produto (fundo branco). |
| Faviconsrc/app/icon.svg · src/app/icon.png | SVG do faviconPNG 512 pixels do favicon | Aba do navegador: só a exclamação azul, fundo transparente. |
| Ícone do appsrc/app/apple-icon.png · public/icone-app-maskable.png | PNG 180 pixels do ícone do appPNG 512 pixels do ícone do app, com margem de recorte | Tela inicial do celular: quadrado azul com a exclamação em Papel; o sistema recorta os cantos. |
| premiaaki-construcao-logo · -simbologerados nesta página a partir dos SVGs | Ver construção | Referência de desenho. |
| premiaaki-kit-da-marca.ziplogos e símbolos em SVG, favicon, ícones do app, tokens.css e LEIA-ME | ZIP do kit da marca | Para loja parceira e agência. |
Cores
Paleta
Clique na amostra para copiar o HEX; no token, para copiar o nome CSS.
Azul
#1200B4 · rgb(18, 0, 180)
Mesmo valor: --blue-ink
A cor da marca. Fundos de destaque, botões primários, links, sombra dura sobre Papel.
Azul escuro
#0B0078 · rgb(11, 0, 120)
Hover e pressionado do azul; também trilho e divisória dentro de áreas azuis.
Azul claro
#DAD6FF · rgb(218, 214, 255)
Fundo de item ativo, trilho de barra e selo informativo. Como texto, só sobre azul ou preto.
Preto
#0A0A0A · rgb(10, 10, 10)
Texto, filetes de 2 px, sombra dura sobre azul, botão preto.
Papel
#F4F1EA · rgb(244, 241, 234)
Mesmo valor: --surface-2, --on-blue, --paper
Fundo de página do site e do app, e o texto sobre azul. É o “branco” da marca.
Branco
#FFFFFF · rgb(255, 255, 255)
Só no que fica em cima do Papel: cartão, campo, tabela e modal.
Linha
#D9D4C7 · rgb(217, 212, 199)
Divisórias e bordas de cartão e painel, fundo de botão desabilitado.
Cinza
#6B6B6B · rgb(107, 107, 107)
Texto secundário (13 px ou mais) e legendas.
Cinza escuro
#3A3A3A · rgb(58, 58, 58)
Mesmo valor: --neut
Texto de apoio: subtítulos, parágrafos longos, rótulos.
O papel de cada cor
- O azul domina: é o fundo dos blocos importantes e a cor de tudo que é clicável.
- Papel é o fundo. A página nunca é branca.
- Branco só no que está em cima do Papel: cartão, campo, tabela, modal.
- Preto é texto e filete. Sombra dura é azul sobre Papel e preta sobre azul.
- Azul claro marca o que está ativo ou selecionado; texto em cima dele, só azul.
- Cinza é apoio: legendas e texto secundário a partir de 13 px.
Cores de estado
Sempre com ícone ou texto junto. A cor sozinha não comunica.
Sucesso
#0B7A42 · rgb(11, 122, 66)
Confirmado, creditado, ganhador.
No produto: Confirmado
Erro
#D0201E · rgb(208, 32, 30)
Erro de campo, recusa, ação destrutiva.
No produto: Recusado
Aviso
#F5A800 · rgb(245, 168, 0)
Pendência, atenção, listras de aviso. Sempre com texto preto.
No produto: Pendente
Contraste (WCAG AA)
4,5:1 para texto comum; 3:1 para texto grande (24 px, ou 19 px em negrito), ícones e bordas de campo. Razões calculadas com os tokens do site, cortadas na segunda casa.
| Combinação | Razão | Resultado |
|---|---|---|
| Azul sobre Papel | 11,05:1 | AA texto |
| Papel sobre azul | 11,05:1 | AA texto |
| Preto sobre Papel | 17,55:1 | AA texto |
| Preto sobre branco | 19,79:1 | AA texto |
| Azul sobre branco | 12,46:1 | AA texto |
| Cinza sobre Papel | 4,72:1 | AA texto |
| Cinza sobre branco | 5,32:1 | AA texto |
| Branco sobre sucesso | 5,41:1 | AA texto |
| Branco sobre erro | 5,37:1 | AA texto |
| Preto sobre aviso | 9,88:1 | AA texto |
| Azul sobre azul claro | 8,92:1 | AA texto |
| Papel sobre azul escuro | 14,48:1 | AA texto |
| Branco sobre aviso | 2,00:1 | Não passa |
| Azul sobre preto | 1,58:1 | Não passa |
| Azul claro sobre Papel | 1,23:1 | Não passa |
| Cinza sobre azul claro | 3,81:1 | Só texto grande e UI |
Regra prática: texto azul ou preto sobre Papel ou branco; texto Papel sobre azul. Amarelo de aviso só com texto preto. Azul claro nunca vira texto sobre fundo claro.
Tipografia
A fonte
Archivo, do Google Fonts (licença OFL), em versão variável: peso de 100 a 900 e largura de 62% a 125%. É a única fonte da marca: títulos, texto, números, códigos e datas.
Archivo 900
112%
Regular 400 para o corpo. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz áéíóú ãõ ç 0123456789 R$ !?%
Rótulo 700 · espaçamento de 0,14 em
- Regular 400Corpo e campo de formulário
- Semibold 600Item do menu lateral, links do rodapé e do sumário
- Bold 700Rótulo, rótulo de campo, título de cartão
- Extrabold 800Botão, cabeçalho de tabela, selo, número da sorte
- Black 900Títulos e valores em destaque, sempre em 112%
Largura 100%
Todo o texto corrido, botões, rótulos, tabelas e números da sorte.
Largura 112%
Só com o peso 900, em títulos e valores em destaque. É a largura da logo.
No site a fonte vem do next/font: arquivo variável hospedado no próprio portal (nenhuma chamada ao Google na visita), com uma Arial de métricas ajustadas como reserva. No e-mail, o link do Google Fonts pede só wdth,wght 100,400; 100,700; 100,800; 112,900, com Arial de reserva (Arial Black nos títulos). Nunca sintetize negrito ou itálico.
Escala
Cada amostra abaixo é a classe do site renderizada ao vivo. Tamanhos em px; entrelinha em múltiplo do tamanho.
Número da sorte
Do cupom ao sorteio
Meus cupons
Cupom já cadastrado
- Números da sorte1.284
Cafeteira elétrica
Cadastre o cupom fiscal da compra e concorra pela Loteria Federal.
Cadastre os cupons fiscais das suas compras nas lojas parceiras e concorra aos sorteios pela Loteria Federal.
Os números saem na hora em que o cupom é lido.
Valem cupons de compras dos últimos 60 dias, em lojas parceiras.
Próximo sorteio
- Cadastrar cupomVer regulamento
- 84.213Concorrendo17.905Premiado03.117Anulado
- EmitidaPendenteRecusado
Regras
- Título sempre em caixa alta, peso 900, largura 112%. É a voz gráfica da marca.
- Corpo nunca em caixa alta e nunca justificado. Linha de até 64 caracteres (de 520 a 640 px).
- Rótulo em caixa alta com espaçamento de +0,12 a +0,14 em. Corpo sem espaçamento; título levemente negativo (−0,03 em).
- Números que se comparam (tabela, número da sorte, valores, datas) com algarismos tabulares: classe .num ou tabular-nums.
- Itálico não existe no sistema. Para destacar, use o peso 800 ou o azul.
- No celular, título com duas linhas no máximo. Se não couber, encurte o texto, não diminua a fonte.
- Texto nunca abaixo de 12 px no site (o rótulo em caixa alta pode ter 11 px) nem abaixo de 14 px no e-mail.
- Só a Archivo: códigos, datas e teclas também. A classe .mono do site já troca a fonte mono pela Archivo com algarismos tabulares.
Grade e espaços
Container e colunas
A página pública tem um container de até 1440 px com margem fixa, que diminui em dois passos; dentro dele, cada bloco monta a própria grade. O painel tem a barra lateral fixa e o conteúdo ao lado.
- Largura máxima
- Página pública até 1440 (conteúdo até 1312); conteúdo do painel até 1200; parágrafo de 520 a 640.
- Margem da página
- Página pública: 64, 28 até 1100 e 16 até 960. Painel: 24, e 16 até 840.
- Painel
- Barra lateral de 248 (--sb); no celular, barra inferior de 64 mais a área segura.
- Tabela
- Pode ocupar a largura toda; até 640 px vira lista.
Escala de espaçamento
Os respiros seguem múltiplos de 4. Dentro de componentes, o produto também usa 6, 10, 14 e 18 (os quadrados vazados).
- 4
- 6 (intermediário)
- 8
- 10 (intermediário)
- 12
- 14 (intermediário)
- 16
- 18 (intermediário)
- 20
- 24
- 28
- 32
- 40
- 48
- 56
- 64
- 80
- 4 · 6 · 8
- Dentro do componente: ponto ao texto no selo (6), entre chips de número (8), ícone ao texto no botão pequeno (6).
- 10 · 12 · 14
- Entre itens: ícone ao texto no botão (10), célula de tabela (10 e 12), entre campos (14), calha das grades do painel (14).
- 16 · 18 · 20 · 24
- Respiro de cartão e painel: KPI (16), cartão (18), hero no celular (20), conteúdo do painel (24).
- 28 · 32 · 40
- Margem da página no notebook (28), calha dos prêmios (32), hero no notebook e seções no celular (40).
- 48 · 56 · 64 · 80
- Entre blocos grandes: texto e ilustração do hero (48), respiro do hero (56), margem da página (64), seções da landing (80 em cima; 40 no celular).
Pontos de quebra
São os pontos que os @media do site usam. A faixa marcada na régua é a da tela em que você está lendo.
- até 520 pxCelular estreitoVocê está aqui
- 521 a 640 pxCelularVocê está aqui
- 641 a 840 pxTabletVocê está aqui
- 841 a 960 pxTablet deitadoVocê está aqui
- 961 a 1100 pxNotebookVocê está aqui
- acima de 1100 pxComputadorVocê está aqui
| Largura | Nome | O que muda |
|---|---|---|
| acima de 1100 px | Computador | Margem de 64 na página pública; cabeçalho de 80 com os links do programa; logo horizontal. |
| até 1100 px | Notebook | Margem cai para 28; calha dos prêmios 24; hero com 40 de respiro. No painel, a partir de 1080, os KPIs passam de 4 para 2 colunas. |
| até 960 px | Tablet deitado | Cabeçalho público de 56 com botão de menu e logo empilhada; margem 16; hero e painéis lado a lado viram uma coluna; o avatar do painel fica só com as iniciais. |
| até 840 px | Tablet | O painel perde a barra lateral e ganha a barra inferior de 64; respiro de 16; botão pequeno, chip e segmento sobem para 44 de altura. |
| até 640 px | Celular | Tabelas viram listas (rótulo e valor em cada linha); ações em coluna, na largura toda; hero de 40; 40 de respiro entre seções; menus do topo viram painel. |
| até 520 px | Celular estreito | KPIs em uma coluna; rodapé centralizado. |
| toque (pointer: coarse) | Qualquer largura | Alvo de toque de 44: botão pequeno, chip, segmento e paginação. |
Alguns módulos têm pontos próprios (1000, 900, 760, 560, 420 e 380 px) para acertar uma tela específica. Em componente novo, use os pontos da tabela.
Formas
Raio zero
Nenhum canto arredondado: botão, campo, cartão, modal, selo, aviso e toast. O globals.css zera o raio de todo elemento (e dos ::before e ::after) com !important; só as exceções abaixo passam por cima.
.btn.pill.input.card.phone): cantos de 34, tela de 27 e entalhe de 12. Também são curvos os furos do picote e do talão e o © da logo.Sombra dura
Deslocamento igual em X e Y, sem desfoque e sem transparência. Azul sobre papel e branco; preta sob bloco de cor cheia; vermelha só na confirmação de perigo. Nunca cinza.
Filetes
Toda caixa tem filete de 2 px: preto no que recebe ação ou pede atenção, Linha (--hairline) em cartão e painel comuns. 1 px de Linha só separa linhas de tabela e de lista. Nunca 1,5 px, nunca cinza-escuro.
| Cupom | Números |
|---|---|
| 12/09 | 3 |
| 14/09 | 1 |
Picote
A linha tracejada com furos nas pontas lembra o canhoto do cupom. Separa a cabeça do corpo no modal, no login, no cadastro, no consentimento, no cartão de prêmio e no e-mail.
.picote (a mesma do topo dos modais, em .modal::before).
- Altura
- 14 px; 12 px nos cartões de prêmio, cadastro, login e no e-mail.
- Traço
- 3 px, em trechos de 10 com 8 de intervalo, em papel (--on-blue) sobre o azul (--blue).
- Furos
- Meio círculo de 7 px de raio em cada ponta, na cor do cartão (--surface).
- Acessibilidade
- Decorativo: sempre com aria-hidden. Nunca é borda de campo nem link.
Listras de aviso
Diagonal de 45°, 8 px de preto e 12 px de cor. Na borda esquerda dos avisos (12 px de largura) e como faixa de 8 px no topo de painéis de atenção.
.linhas-corte).Na borda esquerda: .loja-aviso.warn, o aviso do painel da loja.
No topo: .ct-aviso, o bloco de atenção das páginas de conteúdo.
A cor diz o tipo, mas o texto do aviso sempre diz o que aconteceu: a listra nunca é a única pista.
Ícones
Linha única, pontas retas e cantos em ângulo: o mesmo corte da logo. Tudo o que aparece aqui é o desenho que o produto usa, importado de onde ele mora no código.
Grade de 24
Desenhados numa grade de 24 × 24 com 2 de margem. Traço 2,5, pontas retas, juntas em ângulo e nenhum canto arredondado.
- Grade de 1 unidade (24 × 24)
- Margem de 2: área viva de 20 × 20
- Keylines contínuas: círculo Ø 20 e quadrado 20
- Keylines tracejadas: retângulos 20 × 16 e 16 × 20
- Grade
viewBox="0 0 24 24"com 2 de respiro em cada lado: a área viva é 20 × 20.- Traço
strokeWidth="2.5"em unidades da grade, então escala com o ícone: 1,7 px na tela com 16 px e 3,3 px com 32 px.- Pontas e juntas
- Pontas retas (square) e juntas em ângulo (miter), sem canto arredondado: o mesmo corte da logo. O globals.css força esse corte em todo svg do site.
- Keylines
- Círculo Ø 20 para os redondos, quadrado 20 para os cheios, 20 × 16 para os largos e 16 × 20 para os altos: o mesmo peso ótico entre eles.
- Cor
- Um traço só, em
currentColor: azul sobre papel e branco, papel sobre azul, preto no mono. Nunca cinza claro. - Preenchimento
fill="none". Cheio, só o símbolo da marca (o "!" com o rasgo de cupom).
Tamanhos
O desenho é sempre o mesmo; muda a caixa. Os tamanhos abaixo são os que as regras de estilo do site aplicam hoje.
- 15 pixels
- 16 pixels
- 18 pixels
- 20 pixels
- 32 pixels
- 44 pixels
- 15 px
- Dentro do botão pequeno (36 px).
.btn-sm svg - 16 px
- Menu da conta, busca do topo, paginação e tíquetes do simulador.
.menu-item svg, .cmdbar svg, .pl-sim-tiq svg - 18 px
- Dentro do botão, à esquerda do texto, com 10 px de vão.
.btn svg - 20 px
- Menu lateral, barra de baixo do celular, toasts e avisos.
.sidebar .nav a svg, .mobilenav .mi svg, .lc-toast > svg - 32 px
- Botão central do celular e estados de erro e de sucesso.
.mobilenav a.primary .mi svg, .cn-erro-ic svg, .scan-ok-ic svg - 44 px
- Visor da câmera do scanner.
.scanner-view .ph svg
Cor: o ícone herda a cor do texto (currentColor). Ícone decorativo leva aria-hidden="true"; botão só com ícone exige aria-label e alvo de 44 × 44 (.icon-btn).
Biblioteca
O nome é o que você usa no código: a chave do ICONES_MENU ou o componente da tela. Faltou um? Desenhe na mesma grade e acrescente ao módulo; não use ícone de outro pacote.
58 ícones. Clique num ícone para copiar o SVG.
Menu, casca e conta 44
Vêm de ICONES_MENU em src/components/Sidebar.tsx.
Ações das telas 14
Vêm de módulos _icones.tsx das telas do admin.
Componentes
Cada exemplo abaixo é o componente do site renderizado ao vivo, com as mesmas classes das telas. Se o produto mudar, esta página muda junto. Embaixo de cada um: a classe ou o componente e onde o site usa.
Botões
Caixa alta, peso 800, contorno de 2 px. Altura 52 (.btn-lg), 44 (padrão) e 36 (.btn-sm, que sobe para 44 no toque). Ícone de 18 px à esquerda, 15 no pequeno. Um primário por tela.
.btn.btn-primary.btn-lg.btn-smOnde: a ação principal da tela; hover em azul escuro.btn.btn-ghostOnde: ação secundária; hover em azul claro (no código a classe se chama btn-ghost).btn-danger.btn-danger-ghost.btn-subtleOnde: vermelho cheio só na confirmação dentro do modal; contorno vermelho na linha da tabela; neutro para ação sem peso.btn.cn-btn-textoOnde: ações de linha e estado vazio do cliente; a loja e o admin têm cópias iguais (.lv-, .avt-, .adm-lp- e .adm-com-btn-texto).btn:disabled[aria-disabled="true"]Onde: ação indisponível; o motivo fica escrito ao lado ou no título do botão.btn:disabledaria-busy="true"Onde: botões de salvar e enviar dos formulários; clique para ver (volta em 2 segundos).btn-blockOnde: celular e formulários de acesso.icon-btnOnde: fechar e ações compactas: 44 × 44, sempre com aria-label.btn:focus-visibleOnde: chegue aqui com Tab: sombra dura de 4 px, preta nos botões cheios e azul nos de contornoCampos
Altura mínima 44, texto 15, borda de 2 px preta, rótulo 13/700 acima e dica 12 abaixo. Foco: borda azul e sombra dura de 4 px. Erro: borda vermelha e uma mensagem que diz o que fazer, nunca só a cor.
Só os números; os pontos entram sozinhos.
.field.input.cad-dicaOnde: cadastro, perfil e formulários do painel.input:focusOnde: todo campo; clique ou use Tab para ver a borda azul e a sombra dura de 4 pxSenha fraca: só números. Misture letras e números.
.input[aria-invalid="true"].cad-erroOnde: validação do cadastro; a mensagem fica ligada ao campo por aria-describedby.input:disabledOnde: dado que a pessoa não pode mudar (CNPJ da loja, CPF depois do cadastro)select.inputOnde: categorias, UF, filtros; a seta é desenhada no traço da marca.searchboxOnde: listas do admin e da loja; o texto de exemplo diz o que a busca aceitaSeleção
Caixa de marcar e rádio de 20 px, desenhados pelo globals.css sobre o controle nativo (o teclado e o leitor de tela funcionam como sempre). O interruptor é uma caixa de marcar com role="switch": trilho de 44 × 24 e a linha inteira como alvo.
input[type="checkbox"]Onde: aceites do cadastro, permissões da equipe e seleção em lote das apólicesinput[type="radio"]Onde: escolha única (tipo de prêmio, forma de validade); a única forma redonda do sistema.adm-lp-switch.adm-lp-swrole="switch"Onde: cadastro e edição de loja (CriarLojaForm).adm-com-sw.adm-com-sw-trilhorole="switch"Onde: conteúdo e notificações do admin (EditorBlocos); travado quando o canal é obrigatórioChips e selos
Selo informa estado, com texto em caixa alta e um ponto: a cor ajuda, mas nunca é a única pista. Chip filtra, e só quando está numa linha de filtros.
.pill.good.pill.warn.pill.bad.pill.neut.pill.infoOnde: apólice do número, certificado da loja, listas do admin.pill.marca.pill.tintaOnde: papel da pessoa (super-admin) e grupos da auditoria: cor da marca, não de status.chips.chip.chip.on.chip-nOnde: catálogo de prêmios e auditoria; só filtram quando estão numa linha de filtros.rate-chipOnde: regra de conversão na Identidade do admin; o valor vem da configuraçãoCartões e painéis
O painel é o contêiner neutro do app: fundo branco, borda Linha de 2 px e nenhuma sombra. A sombra dura azul aparece quando o cartão é clicável, no hover.
Últimos cupons
3 novosConteúdo neutro: tabela, formulário ou lista.
.card.card-head.card-pOnde: listas, formulários e tabelas de todas as áreas.card.kpi.lbl.valOnde: painéis da loja e do admin; o valor encolhe com o cartãoa.cardOnde: atalhos do painel da loja; passe o mouse: sobe 2 px com a sombra dura azulTabelas
Texto 14, cabeçalho 11/800 em caixa alta sobre um filete preto, linhas de 44 com filete Linha. As ações ficam à direita, numa linha só, sem menu de três pontos escondendo a principal. Até 640 px de largura a mesma tabela vira lista: cada linha vira um bloco com rótulo e valor, na mesma ordem.
| Loja | Cidade | Cupons | Status | Ações |
|---|---|---|---|---|
| Botic do Salto | Salto/SP | 148 | Ativa | |
| Padaria Aurora | Itu/SP | 27 | Ativa |
.table-wraptable.tbltd[data-label].tactstd.taOnde: listas do admin e da loja; estreite a janela para ver a versão lista do celularAbas e paginação
Abas de 44 px em caixa alta, com contador; a ativa em azul, com o filete por cima da linha preta. Paginação em quadrados de 36 com a página atual em azul, setas nas pontas e reticências nos saltos.
Mostrando: todos (3.412)
.lc-abas.lc-aba.lc-aba-naria-currentOnde: conferir valores da loja; no celular dividem a larguraItens 26 a 50 de 287
<Paginacao />.pg.pg-q.pg-q.aOnde: toda lista com mais de 25 itens; no toque os quadrados sobem para 44 pxAvisos e toasts
Aviso: caixa com as linhas de corte (listras a 45°) à esquerda e, quando houver, a ação à direita. Toast: o resultado de uma ação, verde no sucesso e vermelho no erro, com sombra dura preta.
.loja-aviso.warnOnde: painel da loja: certificado, conferência pendente e estoque baixo.loja-aviso.badOnde: painel da loja, quando algo falhou e precisa de ação.cn-aviso.cn-aviso.i.cn-aviso.eOnde: modal do número da sorte: atenção (amarela), informação (azul) e erro (vermelha).lc-toast.ok.lc-toast.erroOnde: resultado de uma ação na conferência de valores da lojaModais
Fundo branco, picote no topo e sombra dura de 10 px: azul no padrão e vermelha na confirmação de perigo. Título em caixa alta, fechar de 44 px, ações à direita com a principal por último. Abaixo, o desenho parado e, depois, os de verdade.
Número 84.213
Concorrendo agora
84.213
- Validade
- setembro de 2026 a agosto de 2027
- Gerado em
- 12/09/2026, 14:32
- Origem
- Cupom fiscal
- Emitente
- Botic do Salto
- Valor da nota
- R$ 152,90
- Emissão
- 12/09/2026
- Apólice de seguro
- Em preparação
A apólice deste número ainda vai ser emitida.
Remover da vitrine?
A Padaria Aurora sai da página inicial agora. O cadastro da loja não muda.
.modal.modal-detail.cn-modal.modal.cfm.modal::beforeOnde: detalhe do número da sorte (NumeroChip) e confirmação que não tem volta (ConfirmForm); desenho fora do teclado<ModalPortal><ConfirmForm>Onde: o foco entra no modal, o Tab fica preso nele, Escape fecha e o foco volta ao botão; nada aqui altera dadosEstados
Toda lista e toda tela têm os quatro. O vazio explica e oferece o próximo passo; o carregando mantém o layout com esqueleto; o erro diz o que fazer; o sucesso mostra o que mudou.
.empty.t.sOnde: lista sem itens: o símbolo em azul claro, a frase e o próximo passo.cn-carregando.cn-skOnde: loading.tsx das listas do clienteTente de novo. Nada foi perdido.
.cn-erro.cn-erro-icOnde: error.tsx das listas: diz o que fazer e oferece tentar de novo.scan-ok.scan-ok-ic.scan-ok-numOnde: cupom registrado no scanner do clienteTalão e número da sorte
O número da sorte tem 6 dígitos com ponto de milhar, algarismos tabulares, num chip de 44 px com contorno azul de 2 px. O Talão é o bloco do sorteio: canhoto azul com a data, picote, prêmio, contagem e o simulador, que usa a regra em vigor (a cada R$ 50 em compras na mesma loja parceira, 1 número).
- 84.213
- 03.117, premiado
- 00.421, anulado
- 17.905, expirado
- 52.660, expirado
Na ordem: concorrendo, premiado (verde com estrela), anulado (riscado) e, na segunda linha, de uma janela expirada.
.num-chips.num-chip.num-chip.win.num-chip.off.num-chips.expiradoOnde: meus números, painel do cliente e últimos sorteados da página inicial; o azul cheio é o hover do chip clicável (.num-chip.is-btn)Próximo sorteio
31/10
Loteria Federal
resultado oficial
Sorteio 2026-10
Prêmio do mês
R$ 13.333,33
Cada número vale a partir do sorteio do mês seguinte ao da compra e concorre por 12 meses. A apuração segue o resultado oficial da Loteria Federal.
PremiaAki é um produto da Botic do Salto, em parceria com a Seguradora ALM.
Quanto vira número?
Quanto você já gasta por mês em uma loja parceira?
5 números por mês
= 60 números no ano concorrendo · e 250 pontos para o catálogo
A cada R$ 50 em compras na mesma loja parceira, 1 número. O que sobra fica guardado e soma com o próximo cupom da mesma loja. Não precisa gastar a mais: é o que você já compra.
Criar conta e começar a contarCriar minha conta.pl-talao.pl-talao-canhoto.pl-talao-corpo<Contagem /><SimuladorTalao />Onde: faixa de sorteios da página inicial; aqui com o próximo sorteio e a configuração reaisVoz e texto
Registro
Direto, claro e respeitoso. O texto fala com “você”, no imperativo formal (“Tente de novo”, “Cadastre o cupom”). Frases curtas, sem gíria, sem exclamação em série e sem ironia.
- Você, sempre, ao falar com a pessoa. Nunca “o usuário” nem “tu”. Nas telas da loja e do admin, quem participa é o “cliente”.
- Imperativo formal: Tente, Cadastre, Confirme, Escolha, Baixe.
- Sem travessão. Use ponto, vírgula ou dois-pontos.
- Sem emoji e sem reticências para criar suspense.
- Números no padrão brasileiro: R$ 1.250,00 e número da sorte com ponto de milhar, 84.213.
- Título em caixa alta é estilo, não grito: o texto do título é calmo.
Certo e errado
Certo: Tente de novo em instantes.
Errado: Tenta de novo aí!
Certo: Cupom registrado: 3 números da sorte gerados.
Errado: Boa!!! Cupom no bolso, agora é torcer!!
Certo: A cada R$ 50 em compras na mesma loja parceira, você ganha 1 número da sorte.
Errado: Compre mais números e aumente suas chances!
Certo: Sorteio pela Loteria Federal em 31/10.
Errado: Sorteio imperdível: últimas vagas!
Certo: Não foi possível abrir a câmera. Verifique as permissões do navegador.
Errado: Erro 0x42: permission denied.
Certo: Confirme o valor da compra.
Errado: Valor? (obrigatório)
Palavras proibidas
O PremiaAki é um sorteio promocional: o número da sorte vem do cupom fiscal de uma compra numa loja parceira e o sorteio é pela Loteria Federal. Nada no texto pode sugerir rifa, venda de número ou escassez.
Nunca
- rifa
- cota
- bilhete à venda
- compre números
- comprar número
- R$ por número
- % vendido
- últimas vagas
- imperdível
- garantido
- pague com Pix
Sempre
- número da sorte
- cupom fiscal
- gerado
- concorre
- sorteio pela Loteria Federal
- apuração
- número contemplado
- ganhador
- certificado
- pontos
- resgate
- comprovante
- loja parceira
“A cada R$ 50 em compras, 1 número da sorte” pode: é a regra da promoção. “R$ 50 por número” não pode: soa como preço de número.
Erros padrão
Título curto que diz o que houve, texto que diz o que fazer e um botão com a ação. Nunca um código de erro sozinho e nunca a culpa na pessoa.
| Situação | Título | Texto | Ação |
|---|---|---|---|
| Falha ao abrir uma página | Algo deu errado | Não conseguimos carregar esta página agora. Tente de novo em instantes. | Tentar de novo |
| Falha numa tela da conta | Algo deu errado nesta tela | Não foi possível carregar agora. Tente de novo; se continuar, volte ao início. | Tentar de novo |
| Endereço que não existe | Página não encontrada | O endereço pode ter sido digitado errado ou a página mudou de lugar. Confira o link ou volte para uma página conhecida. | Ir para o início |
| Cupom repetido | Cupom já cadastrado | Este cupom fiscal (final 20931457) já foi registrado e não gera novos números. Escaneie outro cupom para continuar. | Escanear outro |
| Nota cancelada | Cupom não reconhecido pela SEFAZ | A SEFAZ informa que esta nota foi cancelada ou teve o uso negado. Ela não vale na promoção. | Tentar de novo |
| Fora do prazo | Cupom fora do prazo | Este cupom é de uma compra com mais de 60 dias. Só valem compras dos últimos 60 dias. | Tentar de novo |
| Loja fora do programa | Loja não cadastrada no sistema | Este cupom é de uma loja que não participa do programa. Só valem cupons das lojas parceiras. | Escanear outro |
| Câmera bloqueada | Sem acesso à câmera | Não foi possível abrir a câmera. Verifique as permissões do navegador. | Enviar foto · Tentar de novo |
| Muitos envios seguidos | Aguarde um pouco | Ainda estamos conferindo o seu cupom anterior. Tente de novo em alguns segundos. | Tentar de novo |
| Sem conexão no caixa | Não dá para validar | Sem conexão com o portal. Confira a internet do caixa e tente de novo. | Ler outro vale |
Mensagens copiadas do leitor de cupom, das páginas de erro e do quiosque do caixa. A do prazo sai da mesma regra que confere o cupom (60 dias). Erro de campo fica no próprio campo e diz o que falta.
Movimento e acessibilidade
Durações
Pouco movimento e sempre com função: mostrar de onde algo veio e para onde foi. Nada de bounce, nada de parallax. Tempos e curvas saem dos tokens abaixo, lidos desta página ao vivo.
| Token | Valor | Onde |
|---|---|---|
--dur-1 | 130ms | Hover e foco: cor de fundo e borda de botão, campo e selo; a etiqueta da vitrine sobe; o botão afunda 1 px no clique. |
--dur-2 | 190ms | Sombra do botão, cartão clicável subindo, menu do topo abrindo, linhas de tabela entrando, barras de gráfico. |
--dur-3 | 280ms | Cartões de lista entrando (40 ms entre um e outro), resultado do leitor de cupom, barra de progresso. |
--ease | cubic-bezier(.4,0,.2,1) | Curva padrão de toda transição. |
--ease-out | cubic-bezier(.16,1,.3,1) | Entradas: o elemento chega rápido e assenta. |
| O quê | Duração | Como |
|---|---|---|
| Modal | 220 ms, ease | Entra com opacidade, sobe 10 px e vai de 96% a 100% do tamanho. Fecha sem animação. |
| Troca de tela na conta | 280 ms, ease | Opacidade e 6 px para cima. |
| Aviso de privacidade | 300 ms, ease | Sobe 12 px com opacidade, no pé da tela. |
| Números gerados no leitor | 420 ms, --ease-out | O total aparece de 82% do tamanho, passa a 104% e assenta. |
| Esqueleto | 1,4 s em loop | Pulso de opacidade de 1 para 0,5 e volta. |
| Giro de espera | 0,8 s a 1,2 s em loop | Ícone girando em velocidade constante enquanto carrega. |
| Ponto “ao vivo” | 1,6 s em loop | Pisca seco (liga e desliga), sem halo. |
| Volta do quiosque | 5 s (validado) · 7 s (erro) | Faixa no pé que esvazia até a tela voltar para a leitura. |
| Contagem regressiva | sem animação | O número troca a cada segundo; nada de flip. |
| Simulador do Talão | sem animação | Recalcula a cada passo do controle, e o resultado é anunciado ao leitor de tela. |
Hover, foco e clique --dur-1 --dur-2Passe o mouse, use Tab e clique: nada é enviado.
Entrada de lista --dur-3 --ease-outCada item entra 40 ms depois do anterior.
Esqueleto 1,4 s em loop
Ao vivo 1,6 s, pisca seco
ao vivo · 14:32Movimento reduzido
Quando o aparelho pede movimento reduzido, o site para tudo: não sobra transição nem animação, e cada estado muda na hora.
- Uma regra só, no globals.css, desliga toda transição e toda animação da página.
- Rede de segurança: telas, listas, linhas de tabela e o resultado do leitor ficam com opacidade 1 e sem deslocamento, então nada fica preso invisível.
- O esqueleto para de pulsar e fica cinza fixo; a faixa de volta do quiosque some.
- Nenhuma informação depende de animação: resultados e avisos também vão para o leitor de tela (
aria-live).
@media (prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}Foco e teclado
O foco é visível em tudo que se alcança pelo teclado. Nos botões e nos campos ele vira a sombra dura da marca; no resto, um contorno de 2 px.
Botão de contorno: sombra dura azul de 4 px
Botão azul (e o vermelho): a sombra é preta
Campo e caixa de marcar: borda azul e sombra dura azul de 4 px
Links e demais elementos: contorno azul de 2 px, com 2 px de folga
Sobre azul (barra lateral): o contorno é papel
Use Tab e Shift+Tab aqui dentro. Nada é enviado.
- Tudo que é clicável se alcança por Tab, na ordem visual. Nunca
outline: nonesem um substituto visível. - Link “Pular para o conteúdo” como primeiro elemento da página.
- O modal prende o foco, fecha com Esc e devolve o foco ao botão que abriu (
ModalPortal). - Ícone sozinho tem
aria-label; decoração (picote, listras, ícone ao lado de texto) temaria-hidden. - Erro de campo fica ligado ao campo por
aria-describedby, e o campo recebearia-invalid. - Tabela com
thescope; no celular cada linha vira um bloco com o nome da coluna ao lado do valor, na mesma ordem.
Toque e contraste
No celular e em tela de toque, todo alvo tem pelo menos 44 × 44 px. O ícone pode ser menor; a área que recebe o toque, não.
Botão só de ícone: 44 × 44, ícone de 18
Botão pequeno: 36 px com mouse, 44 px no toque e até 840 px de largura
Número da sorte: 44 px de altura
Contraste mínimo: texto 4,5:1; ícones, bordas e texto grande 3:1. Pares aprovados na tabela de Cores.
- Alvo de toque de 44 × 44 no mínimo, com 8 px entre um alvo e outro.
- Zoom de 200% sem perder conteúdo nem quebrar o layout; texto nunca em imagem.
- Cor de estado sempre com a palavra (ou um ícone) junto: Ativa Em conferência Recusado
- Só o estado se mexe sozinho: esqueleto e giro (carregando), ponto “ao vivo” e a linha do leitor com a câmera aberta. Tudo para com movimento reduzido.
- Formulários aceitam colar e preenchimento automático (CPF, e-mail, senha).
- Nada só por cor: certo e errado, nesta página, têm visto e X além do verde e do vermelho.
Aplicações
Tabela única de 600 px com o estilo no próprio HTML: fundo papel, cartão branco com sombra dura azul, cabeçalho azul com a logo a 170 px e o tipo do e-mail, picote, título em caixa alta, detalhes em linhas, aviso em bloco preto e um botão só, na largura toda, com o link por extenso embaixo. Abaixo, o e-mail de verdade, montado agora pelo mesmo código que envia, com os textos que a organização configurou e dados de exemplo.
Se a prévia aparecer em Arial, é a política de segurança do site barrando a fonte externa dentro do quadro. O e-mail enviado pede Archivo e cai para Arial no leitor de e-mail que não carrega fonte.
Cartaz da loja
Cada loja baixa o seu no painel da loja, no botão “Cartaz com QR (PDF)”; a organização baixa o de qualquer loja em Lojas. O PDF sai em A4 (595 × 842 pt). O A5 tem a mesma proporção: basta imprimir reduzido.
Seu cupom fiscal vale
números da sorte
Comprou aqui na Loja Parceira Exemplo?
Cada R$ 50 em compras vira 1 número para o sorteio mensal pela Loteria Federal.
premiaaki.com.br/cupom
- 1Aponte a câmera do celular para este QR Code e entre no portal.
- 2Escaneie o QR Code do seu cupom fiscal: os números saem na hora.
- 3Pronto: seus números concorrem aos sorteios pela Loteria Federal.
Valem cupons de compras dos últimos 60 dias em lojas participantes. Sorteio promocional.
Regulamento completo: premiaaki.com.br/regulamento
- Faixa azul com a logo em papel (170 pt de largura) e a chamada “Seu cupom fiscal vale números da sorte”.
- A loja e a regra: “Comprou aqui na [loja]?” e quantos reais valem um número nela (o bônus vigente da loja ou o valor padrão, hoje R$ 50).
- QR Code de 250 pt no centro, com o endereço por extenso embaixo, em azul.
- Três passos numerados em quadrados azuis: apontar a câmera, escanear o cupom, concorrer.
- Rodapé com o prazo dos cupons (60 dias) e o endereço do regulamento.
Etiqueta da vitrine
Logo da loja parceira na landing, em Lojas parceiras: etiqueta branca de 168 × 108 px (150 × 96 no celular), borda preta de 2 px, logo na cor original dentro de 132 × 52 e legenda em caixa alta. Com link, ao passar o mouse ou focar, sobe 3 px com a sombra dura azul e a legenda vira “Nome · Cidade” em azul. Sem logo, o nome entra em Archivo 900 azul e a legenda mostra a cidade.
Ícone e favicon
Em tamanho pequeno vai só a exclamação com o rasgo de cupom, nunca a logo inteira. Os arquivos abaixo são os que o site serve.
apple-icon.png · 180 × 180, fundo azul. O iPhone arredonda os cantos.
Baixar PNG
icone-app-maskable.png · 512 × 512. O Android recorta (círculo, gota ou quadrado): o que importa fica dentro do círculo tracejado.
Baixar PNGicon.svg e favicon.ico (32 e 16 px, ao lado em tamanho real). Só a exclamação azul, fundo transparente.
Baixar SVGO mesmo arquivo do ícone do Android (512 × 512): a rede recorta em círculo.
Baixar PNGEm 32 px o nome some. Ícone pequeno leva só a exclamação.
Versão 1.0 ·
O que mudou
A página usa os componentes do site: quando o produto muda, ela muda junto. Mudança de regra da marca entra nesta lista, com a data.
- Rebrand PremiaAkiNova identidade em todo o site: azul #1200B4, papel e preto, títulos em Archivo 900 expandida, raio zero e sombra dura sem desfoque.
- Logo com o rasgo de cupomA exclamação ganhou a base serrilhada de cupom fiscal em todas as versões da logo (horizontal, empilhada e símbolo), também no PDF e no e-mail.
- Favicon e ícone do appO favicon passou a ser só a exclamação azul, sem fundo. O quadrado azul com a exclamação em papel fica para onde o sistema exige fundo: ícone do app e tela inicial do celular.
- E-mails na identidade novaOs e-mails do portal saem com o cabeçalho azul e a logo em papel, o picote, o título em caixa alta e um botão só.
- Vitrine de lojas parceirasA página inicial mostra as lojas parceiras em etiquetas brancas com borda preta e a logo de cada loja na cor original.
- Manual da marca no arEsta página, montada com os componentes do produto, com o kit da marca e os tokens em CSS para baixar.