A base que deixa cada página parecer de quem fez.
Tokens, componentes e padrões do Onne.link. O Core cuida do painel, do Estúdio e do dinheiro. Os Themes cuidam da página pública de cada criador, dentro de limites de contraste, toque e desempenho.
Quatro regras para decidir quando o caso não estiver aqui.
O criador aparece primeiro
O painel organiza a identidade de quem usa e sai da frente. Cor de marca forte fica no Core; a página pública usa só o tema.
página pública nunca lê --accentUm verbo por tela
Cada tela tem uma ação principal visível, com o resultado escrito no botão: "Publicar página", "Adicionar bloco".
1 botão primário por contextoDinheiro sem surpresa
Valor, taxa, prazo e quem recebe aparecem antes da confirmação. Números em colunas usam algarismos tabulares.
valor + taxa + prazo + statusFeito para o polegar
A criação acontece no celular. Alvos de 44 px, ação principal ao alcance e nada essencial escondido atrás de hover.
mobile primeiro, min-width depoisMarca
Quatro formas: três azuis e um quadrado rosa, o ponto de cor que também marca o ".link". Use os arquivos oficiais; não redesenhe o logo.
Área de proteção: no mínimo a altura do quadrado rosa em volta do logo. Altura mínima na tela: 20 px para o logo, 16 px para o ícone.
×Não troque as cores do logo nem aplique filtros.
×Não distorça. Redimensione só na proporção original.
×Não coloque sobre fundos que apagam o quadrado rosa.
Cor
Cada cor tem um papel. O contraste ao lado de cada amostra é calculado na hora, contra branco e contra a tinta. Toque numa amostra para copiar.
Marca e estado
Neutros
os mesmos nomes nos dois modos| Token | Claro | Escuro | Uso |
|---|---|---|---|
--ui-app | #EEF1F8 | #0B1020 | Fundo do painel |
--ui-surface | #FFFFFF | #141A2B | Cards, painéis, modais |
--ui-surface-2 | #F5F7FC | #1C2438 | Áreas de apoio, canvas |
--ui-ink | #0F1B30 | #F2F5FF | Títulos e texto principal |
--ui-ink-2 | #475069 | #B8C1DA | Texto de apoio |
--ui-ink-3 | #5E6780 | #8A94B0 | Metadados, ajuda |
--ui-line | #D6DCEA | #26304A | Bordas e divisores |
--ui-line-2 | #C6CDDE | #33405F | Bordas de campos |
Apoio: texto sobre fundo claro
pares fundo + texto| Token | Claro | Escuro | Uso |
|---|---|---|---|
--ui-placeholder | #858DA3 | #67718C | Texto de exemplo nos campos, 3:1 no mínimo |
--ui-accent-ink | #0B4FD1 | #9DB8FF | Texto azul sobre --ui-accent-soft |
--ui-pro-strong | #6D28D9 | #C4B5FD | Texto roxo sobre --ui-pro-soft |
--ui-pro-soft | #F3F0FE | #231B45 | Avisos Pro, selo de quem pode assinar, cartão do teste |
--ui-pro-gradient | 120°, --ui-pro → 55% pro + 45% accent | Ícone de brilho e selo de quem já tem o Pro | |
--ui-danger-strong | #C8284F | #FF7A93 | Texto de erro, ação destrutiva |
--ui-danger-soft | #FFF1F4 | #2A1620 | Fundo do aviso de erro |
--ui-warning-soft | #FFF1C7 | #2E2410 | Fundo do aviso de atenção |
--ui-warning-line | #E9B949 | #6B5216 | Contorno em atenção |
--ui-warning-ink | #8A5A00 | #F5C24B | Texto de atenção |
Tipografia
Inter em 400, 500, 600 e 700, carregada de forma explícita com fallback do sistema. Nenhum texto abaixo de 11 px; campos de formulário em 16 px para o iOS não dar zoom.
Espaço e forma
Escala de 4 px para espaço, cinco raios por função e três níveis de elevação. Grupos usam gap; nada de margens soltas entre irmãos.
Espaçamento
--sp-*Raios
--rad-*campos, chips
botões, cards
painéis, modais
sheets no mobile
badges, pílulas
Elevação
--sh-*Movimento
Movimento explica o que mudou. Duração curta, só transform e opacity, e nada animado quando o sistema pede menos movimento. Toque em "Testar" para ver cada curva.
Durações
--dur-fast140 ms: hover, cor, pressionar--dur220 ms: toggles, abas, toasts--dur-slow340 ms: sheets e troca de tema
Regras
- Feedback começa no toque (pointer-down), não ao soltar.
- Ação feita pelo teclado não anima: o indicador pula direto.
- No máximo uma cascata por tela, 30 a 50 ms entre itens.
- Nada bloqueia o próximo toque.
Ações
Botões dizem o que acontece. Um primário por contexto, altura de 44 px no toque, e o rótulo continua lá durante o carregamento para o botão não mudar de largura.
Button
hierarquiaQuando usar
- Primário: a ação que fecha a tarefa. Um por tela.
- Secundário: alternativa segura, como Prévia.
- Discreto: cancelar, voltar, ações de baixo risco.
- Pro: só em upgrade. Destrutivo: sempre com confirmação.
Tente
Toque em "Publicar página": carregando, publicado e volta ao normal.
Estados
todo botão documenta os seteComportamento
- Pressionar: escala 0,97 em 90 ms, no pointer-down.
- Foco: anel de 2 px na cor de ação, mais um halo suave.
- Carregando:
aria-busy, loader da marca no lugar do rótulo. - Desabilitado só quando o motivo estiver escrito por perto.
Formulários
Rótulo sempre visível, ajuda abaixo do campo e erro que diz como resolver. A validação acontece enquanto a pessoa digita, sem esperar o envio.
Input com prefixo e validação ao vivo
endereço públicoTente
Apague e digite outro endereço. "marina", "maike" e "admin" já estão em uso.
Regras
- Campos com 46 px de altura e fonte de 16 px.
- Erro aparece ao lado do campo e é anunciado pelo leitor de tela.
- Quando der erro, ofereça a saída: sugestões que a pessoa toca e usa.
- Contador só aparece onde existe limite real.
Seleção
switch, checkbox, abasComportamento
- Switch aplica na hora; checkbox entra num formulário que se salva.
- Abas: setas trocam, Home e End vão às pontas. Pelo teclado o indicador pula, pelo toque ele desliza.
- A área de toque do switch tem 44 px, maior que o desenho.
Telefone e texto de exemplo
vale para todo campo de telefone e WhatsAppTente
Cole +351 912 345 678 ou 001 415 555 0132 no campo de WhatsApp.
Telefone
- Bandeira e código do país à esquerda, editáveis pelo seletor sobre a bandeira.
- Número com a máscara do país escolhido.
- Colar com + ou 00 escolhe o país sozinho.
Texto de exemplo
- Sempre em
--ui-placeholder, em todos os campos do painel e no campo do cartão do Stripe. - Nunca com a cor do texto digitado.
- Contraste mínimo de 3:1 no fundo do campo.
Feedback
Cor nunca vem sozinha: todo estado tem ícone e texto. O toast confirma o que já aconteceu, o aviso explica o que ainda pede atenção e a etiqueta mostra o estado de um bloco.
Aviso
substitui o antigo AlertaAnatomia
- Alinhado à esquerda, ícone de 16 px, texto de 14 px, fundo levemente colorido. Sem borda e sem barra colorida na lateral.
- A ação é um link de texto com seta, nunca um botão preenchido. Fechar com "x" de 44 px.
- Variações: info, pro, atenção e erro, sempre o par fundo claro + texto da mesma cor.
Posição
- Faixa no topo de uma superfície: largura toda, sem cantos.
- Painel: dentro de painéis, cantos de 8 px.
- Nunca no meio do conteúdo da página do criador como se fosse um bloco. Aviso sobre uma página interna fica numa faixa no topo do quadro do Estúdio, acima do "voltar".
Quando o aviso some
informação fica, cobrança saiSome
- Todo aviso de Pro pode ser fechado, e o fechamento vale em qualquer aparelho.
- "Seu teste do Pro acabou": some ao fechar ou sozinha 14 dias depois do fim do teste.
- Lembrete de momento de valor ("Sua página teve N visitas esta semana..."): só quando a semana tem pelo menos 50 visitas e o dobro da média das 4 semanas anteriores, no máximo uma vez a cada 30 dias.
Fica sempre
- Selo PRO nos recursos travados.
- Cadeado em páginas fora do ar.
- "+ Página PRO".
- O menu Planos.
São informação, não cobrança.
Selo PRO e etiqueta de estado
nenhum dos dois é clicávelSelo PRO
- Quem já tem: preenchido com
--ui-pro-gradient, texto branco, com check. - Quem pode assinar: fundo
--ui-pro-soft, texto--ui-pro-strong, sem check.
Etiqueta de estado
- Pequena, não clicável, com cadeado opcional.
- Fica na borda de cima do bloco no Estúdio.
- Não pode parecer botão: sem sombra, sem hover, sem cor de ação.
Toast e badges
confirmação e statusToast
- Some sozinho em 4 s; pausa com o cursor em cima.
- Erro com saída: "Tentar de novo" dentro do toast.
- Lido pelo leitor de tela via
aria-live.
Carregamento
O loader é a marca da v2 em movimento: os quadrados acendem em sentido horário e o rosa fecha o ciclo. Ele aparece só quando a espera é real.
Loader da marca
tela inteira, inline, botãoQuando mostrar
- Espere 300 ms antes de mostrar. Se carregar antes, ninguém vê o loader.
- Uma vez na tela, fica no mínimo 500 ms para não piscar.
- Ao terminar: o loader encolhe e some em 260 ms enquanto o conteúdo entra.
Acessibilidade
role="status"com rótulo "Carregando".- Com pouco movimento, os quadrados só respiram em opacidade.
Skeleton, autosave e envio
quando o formato já é conhecidoEscolha
- Skeleton quando o desenho da tela já é conhecido: lista, perfil, números.
- Loader quando não é: abertura do app, troca de rota.
- Barra quando o progresso é medido: upload, importação.
Autosave
Três estados visíveis: salvando, salvo e falha com "Tentar de novo". Na falha, nada se perde.
Dinheiro
Onde tem dinheiro, a interface mostra tudo antes do clique: valor, taxa, prazo e quem recebe. Os exemplos abaixo seguem o escopo do botão de Pix desta versão.
O pagador não vê seu nome nem seu banco. A Onne recebe e repassa para você.
Regras do componente
- Valores pré-definidos: 5, 50 e 100 por padrão, mais "Outro". O criador pode trocar.
- Pix direto é recurso Pro e avisa que o pagador vê nome e banco.
- Depois do QR, o visitante responde "Já enviei" ou "Não vou enviar", para estimarmos as doações.
- Pix anônimo aparece como "Em breve", já com taxa e prazo, para medir interesse.
Números
- Formato brasileiro:
R$ 1.284,50. - Algarismos tabulares em valores e colunas.
- Desconto e taxa com sinal de menos, nunca só em vermelho.
Estúdio
Blocos, prévia e inspetor no mesmo fluxo. A prévia usa o mesmo código da página pública, então o que a pessoa vê editando é o que o visitante vê. Mude o formato e a cor no inspetor.
Estilo dos botões
Topo do Estúdio no celular
três linhas, da mais forte para a mais leveLinhas
- 1. Endereço (só "/usuario" no celular), compartilhar, Salvo, prévia e notificações.
- 2. Aparência, Perfil e Configurações como barra discreta de ícone e texto, sem borda, alinhada às bordas da linha 1.
- 3. Páginas, menor e mais leve. Sem páginas internas, aparece só "+ Nova página".
Estados de tela
Todo fluxo principal documenta os quatro. O texto diz o que aconteceu e qual é o próximo passo.
Comece pelo primeiro link
Cole um endereço e ele vira um botão na sua página.
Buscando seus números
Os cards ficam no lugar enquanto os dados chegam.
O link do bloco não abre
O endereço precisa começar com https://. Corrija e publique de novo.
Página no ar
Copie o endereço e coloque na bio do Instagram.
Páginas de sistema
Privacidade, termos, denúncia, "Sobre esta página" e páginas de "não encontrada" têm o seletor de idioma no canto superior direito.
Regras
- Pílula "Português | English" no canto superior direito.
- A página abre no idioma do navegador de quem visita.
- A escolha fica lembrada nas próximas visitas.
- Vale para privacidade, termos, denúncia, "Sobre esta página" e "não encontrada".
Profile Themes
Os temas são dinâmicos: a galeria real vive no app e muda sem passar por aqui. O design system define só o contrato que todo tema segue e os limites de contraste. Os quatro abaixo são exemplos dos tipos de fundo possíveis.
Tipos de fundo
exemplos ilustrativosContrato do canvas
[data-canvas]| Variável | Controla | Regra |
|---|---|---|
--t-bg | Cor de fundo | Base para medir contraste |
--t-bg-image | Degradê, imagem ou vídeo | Sempre com --t-bg de reserva |
--t-overlay | Camada sobre imagem e vídeo | Escurece até o texto passar 4,5:1 |
--t-btn / --t-btn-text | Botões de link | 4,5:1 entre os dois |
--t-name / --t-bio | Nome e bio | 4,5:1 sobre o fundo |
--t-radius | Formato dos botões | Livre |
--t-font | Fonte do perfil | Com fallback declarado |
E-mails
Imagem de topo no estilo "Blocos claros", só cores do sistema, um botão principal e título e preço sempre em texto.
Sua página teve 214 visitas esta semana
É o dobro da sua média. Veja de onde veio esse público e o que mais foi clicado.
Imagem de topo
- Fundo lilás claro; os quadrados da logo viram os recursos; o celular com uma página; o quadrado rosa da logo como detalhe.
- Um desenho por assunto, sem texto dentro da imagem, 600 × 240 no e-mail.
Conteúdo
- Só cores do sistema. Ícones de recursos em círculos de
--ui-accent,--ui-pro,--ui-mint,--ui-dangere--ui-ink. - Um botão principal por e-mail.
- Título e preço sempre em texto, nunca dentro da imagem.
Frequência
exemplo de uma semanaRegra
- E-mails não essenciais: no máximo 1 por dia e 3 por semana.
- Fora do limite: códigos de acesso, pagamento, compras, verificação, início e fim do teste.
Acessibilidade
Faz parte do contrato de cada componente e é conferida com medição, não no olho.
Tab, Enter, Espaço, Esc e setas operam cada controle, na ordem da leitura.
foco visível: 2 px + haloTexto com 4,5:1; texto grande e partes de controle com 3:1. Esta página calcula os números ao vivo.
ink sobre surface: …Alvos de 44 por 44 px com espaço entre eles. Nada essencial depende de hover.
botão md: 44 px · campo: 46 pxCom a preferência do sistema ligada, animações viram corte seco e o loader só respira.
prefers-reduced-motionTodo campo tem rótulo visível ligado a ele. Imagens de bloco pedem descrição.
label[for] + aria-describedbyIdioma da página declarado, um h1, títulos em ordem e marcos de navegação.
lang="pt-BR" · main · navTokens
Base: client/src/styles/chrome.css da v2, com o ajuste de --ui-ink-3 mais escuro para passar no contraste. Na 1.1 entram placeholder, azul de texto, Pro (forte, claro e degradê), erro e atenção.
Versões
- Tokens de placeholder, Pro (forte, claro e degradê) e azul de texto; erro e atenção documentados.
- Aviso no lugar do Alerta, com regras de quando some.
- Etiqueta de estado e selo PRO nas duas versões.
- Campo de telefone com país e texto de exemplo em todos os campos.
- Topo do Estúdio no celular, seletor de idioma das páginas de sistema e padrão visual e de frequência dos e-mails.
- Valores alinhados ao código da v2 (
chrome.css): azul de ação #105FF5 e rosa #F7456C, os mesmos do logo. - Loader da v2 animado e documentado, com regras de atraso e duração mínima.
- Componentes de dinheiro: botão de Pix direto e Pix anônimo "em breve".
- Modo escuro, contraste calculado ao vivo e tokens de movimento.
- Profile Themes como exemplos por tipo de fundo: cor sólida, degradê, imagem e vídeo.
- Proposta inicial: separação entre Onne Core e Profile Themes, princípios e primeira página de referência.