Guia de design do papatto

• Sem anúncios

  Nada de banners nem anúncios em vídeo. Nada na tela atrapalha a tarefa.

• Sem upload

  Imagens, arquivos e textos são processados só no aparelho de quem os usa. Fontes e bibliotecas vêm incluídas, então nada é carregado de servidores externos durante o uso.

• Sem cadastro

  Sem conta e sem instalar nada. Abriu, funcionou.

• Pronto num instante

  Cada ferramenta faz uma coisa só. O que quase todo mundo precisa entra; extras pouco usados ficam de fora.

As regras do próprio Hoshimado estão no guia de design do Hoshimado.

• Frases curtas e amigáveis. Uma ideia por frase.
• Evite jargões e termos pouco conhecidos; diga com palavras do dia a dia.
• Os botões dizem a ação com um verbo (“Escolher arquivo”, “Baixar PDF”). As opções de abas e seletores continuam sendo substantivos (“PNG”, “Retrato”).
• As instruções usam exatamente as palavras da tela. Nomes dos botões e instruções batem palavra por palavra.
• As mensagens de erro dizem o que aconteceu e o que fazer em seguida (“Essa data não existe. Confira o ano, o mês e o dia.”).
• Sem pontos de exclamação nem emojis nos textos da interface.
• Diga com honestidade o que uma ferramenta não faz. Escreva fatos como “nada é enviado a lugar nenhum” em vez de superlativos sem base (“o mais rápido”, “o melhor”) ou slogans tranquilizadores.
• Todos os textos existem em 10 idiomas, com o japonês como original. As traduções soam naturais, não literais.

• Use as cores como estão: a versão com texto quase preto em fundos claros e a versão com texto quase branco em fundos escuros.
• No site, o logotipo é desenhado pelo componente Logo. As cores vêm dos tokens, então ele troca sozinho entre claro e escuro.

• --bgFundo da páginaClaro#fffcf6Escuro#17140f
• --surfaceCartões, campos, caixas de etapasClaro#ffffffEscuro#201c16
• --surface-hoverAo passar o cursor, superfícies discretasClaro#fff6e6Escuro#2a241b
• --fgTexto e títulosClaro#26211bEscuro#f3eee6
• --mutedTexto de apoio, notasClaro#6b6157Escuro#aaa093
• --lineLinhas e bordas de cartõesClaro#ece4d6Escuro#342e25
• --controlContornos de campos, seletores, botões com contorno e círculos de corClaro#998c7eEscuro#776d5f
• --sliderControle deslizante: alça e trilhaClaro#c97a00Escuro#f7b13c
• --accentBotões principais, estados selecionados e concluídosClaro#f5a524Escuro#f7b13c
• --accent-strongContornos de foco, links, texto do estado ligadoClaro#9c5e00Escuro#f7b13c
• --accent-fgTexto sobre laranjaClaro#2b1a00Escuro#2b1a00
• --gainSaldo positivoClaro#2e7d32Escuro#74d27a
• --lossSaldo negativo, texto de erro (text-danger)Claro#c0392bEscuro#f4806f

• O laranja de preenchimento (accent) é usado em botões principais, interruptores ligados, números das etapas e marcas do que está selecionado. Nunca como decoração.
• O laranja forte (accent-strong) é usado nos contornos de foco, em links como “Ver tudo” no rodapé e no texto das marcas ligadas. Nunca em erros.
• O texto de erro é vermelho (text-danger, a mesma cor de um saldo negativo).
• Os contornos de campos, seletores, botões com contorno e círculos de cor usam control; cartões e divisórias usam line.
• Só os controles deslizantes usam a cor slider (com accent-strong, o lado ainda vazio da trilha ficaria abaixo de 3:1 em relação ao fundo).
• Um só botão principal com preenchimento laranja por etapa.
• As cores são escritas como tokens de CSS, então funcionam no claro e no escuro.

• M PLUS Rounded 1cTítulos (japonês e idiomas com alfabeto latino e cirílico)
• Noto Sans JPTexto (japonês e idiomas com alfabeto latino e cirílico)
• Noto Sans KR・SC・ArabicTítulos e texto em coreano, chinês e árabe

• Os números se alinham em tabelas e contadores (algarismos tabulares).
• Os campos usam texto de 16 px no celular, para o iPhone não dar zoom a cada toque.

• Os degraus de 4, 8, 16, 24, 32 e 48 px são usados no espaço entre elementos e no preenchimento interno das caixas. Na dúvida: perto = 16, grupo = 32.
• Os preenchimentos pequenos dentro dos componentes (acima e abaixo de uma etiqueta, nas laterais de um botão) são exceção e também usam valores fora da escala, como 2, 6, 10 e 12 px.
• As páginas têm no máximo 1152 px de largura; o texto de leitura quebra em 672 px. As margens laterais são de 16 px no celular.
• Nada transborda para os lados em 360 px (de preferência 320 px).

• Ao mudar de página, o conteúdo desliza um pouco a partir da lateral (0,2–0,3 s). Ao voltar, vem do outro lado.
• Ao trocar o tema de cor, a tela anterior e a nova se fundem em 0,3 s.
• O aviso de “salvo” sobe de baixo e desce de novo.
• Os vídeos do guia só tocam enquanto estão visíveis e pausam ao sair da tela.
• Com “Reduzir movimento” ativado, a animação para e os resultados aparecem na hora.

• PrimaryButtonA ação principal de uma etapa. Um só botão laranja por etapa
  Escolher arquivo
• SecondaryButtonBotão com contorno abaixo do principal
  Copiar tudo
• SmallButtonAções pequenas ao lado (copiar, desfazer)
  DesfazerDesfazer
• IconButtonBotão redondo só com ícone. Sempre com nome para leitores de tela
• SegmentedControlEscolher uma entre 2–4 opções

  Formato

  PNGJPGWebP
• SwitchUma configuração liga/desliga que vale na hora
  Manter o tamanho original
• ToggleButtonOpções de ligar/desligar lado a lado numa barra estreita. Ligado mostra contorno laranja e marca
  Ordenar as chaves por nome
• TextFieldCampo de uma linha com o rótulo acima
  Nome
• ColorSwatchesCírculos com as cores mais usadas e um círculo de arco-íris para qualquer outra cor

  Cor

  Outra cor#e53935
• CardButton・CardLinkCartão pequeno clicável por inteiro
  Usar como appAbra direto da tela inicial
• BadgeEtiqueta pequena, não clicável, para um estado curto
  VálidoExpirado

• Os ícones das ferramentas são desenhos de linha num quadrado arredondado, na cor do texto. Sem laranja, para as fileiras de ícones ficarem calmas.
• Os conversores mostram o formato de saída (como PNG) pequeno dentro do ícone.
• O guia mostra um vídeo curto da tela real em cada etapa: o computador numa moldura de navegador e o celular numa moldura de celular.
• A área tocada fica contornada em laranja.
• O texto de cada etapa usa as palavras da tela e diz onde tocar e o que acontece.

• O texto mantém contraste de 4,5:1 ou mais com o fundo nos dois temas, e os contornos dos controles, de 3:1 ou mais.
• Tudo funciona pelo teclado; em todos os componentes, o foco aparece como um contorno laranja forte de 2 px, a 2 px do elemento.
• As ações principais têm pelo menos 44 px. As ações pequenas ao lado têm 36 px (acima dos 24 px da WCAG 2.2, 2.5.8) e ficam a pelo menos 8 px das vizinhas. O × dentro dos campos e os círculos de cor têm 32 px.
• Idiomas escritos da direita para a esquerda, como o árabe, espelham o layout e as setas.
• Botões só com ícone têm nome para leitores de tela, e nenhum estado é indicado só pela cor.
• O modo escuro e “Reduzir movimento” nunca quebram o layout.

• Sem anúncios, sem upload e sem requisições a servidores externos
• Conferido no computador e no celular, claro e escuro, em japonês, inglês e árabe, sem rolagem lateral em 360 px
• Um só botão principal laranja por etapa
• O espaço entre elementos e dentro das caixas usa os degraus definidos, e os componentes são os compartilhados
• Os botões dizem a ação, sem pontos de exclamação nem emojis; o texto de erro é vermelho e diz o que fazer
• Os 10 idiomas estão completos e os nomes dos botões batem com as instruções
• As etapas do guia fazem sentido na primeira leitura