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 |
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.
Feedback
Cor nunca vem sozinha: todo estado tem ícone e texto. Toast confirma o que já aconteceu; alerta explica o que ainda precisa de atenção.
Toast
- 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
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.
Profile Themes
A página pública só lê as variáveis do tema, nunca as cores do painel. Cada tema novo passa pela checagem de contraste antes de entrar na galeria. Temas que vieram da v1 ficam como estão.
Contrato do canvas
[data-canvas]| Variável | Controla | Regra |
|---|---|---|
--t-bg | Fundo da página | Base para medir contraste |
--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 |
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 dois ajustes desta versão: --ui-ink-3 mais escuro para passar no contraste e o novo --ui-danger-strong para texto de erro.
Versões
- 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.
- Proposta inicial: separação entre Onne Core e Profile Themes, princípios e primeira página de referência.