Guía de diseño de papatto

• Sin anuncios

  Ni banners ni anuncios de vídeo. Nada en la pantalla estorba la tarea.

• Sin subir archivos

  Las imágenes, los archivos y el texto se procesan solo en el dispositivo de quien los usa. Las fuentes y las bibliotecas van incluidas, así que nada se descarga de servidores externos mientras trabajas.

• Sin registro

  Sin cuenta y sin instalar nada. Abres y funciona.

• Listo en un momento

  Cada herramienta hace una sola cosa. Entra lo que casi todo el mundo necesita; lo que apenas se usa se queda fuera.

Las reglas propias de Hoshimado están en la guía de diseño de Hoshimado.

• Frases cortas y cercanas. Una idea por frase.
• Evita la jerga y los términos poco conocidos; dilo con palabras de todos los días.
• Los botones nombran su acción con un verbo («Elegir un archivo», «Descargar PDF»). Las opciones de pestañas y selectores siguen siendo sustantivos («PNG», «Vertical»).
• Las instrucciones usan las palabras exactas que aparecen en pantalla. Los nombres de los botones y las instrucciones coinciden palabra por palabra.
• Los mensajes de error dicen qué pasó y qué hacer a continuación («Esa fecha no existe. Revisa el año, el mes y el día.»).
• Sin signos de exclamación ni emojis en los textos de la interfaz.
• Di con honestidad lo que una herramienta no puede hacer. Escribe hechos como «no se envía nada a ningún sitio» en lugar de superlativos sin fundamento («el más rápido», «el mejor») o lemas tranquilizadores.
• Todos los textos existen en 10 idiomas, con el japonés como original. Las traducciones suenan naturales, no literales.

• Usa los colores tal cual: la versión con texto casi negro sobre fondos claros y la versión con texto casi blanco sobre fondos oscuros.
• En el sitio, el logotipo lo dibuja el componente Logo. Sus colores salen de los tokens, así que cambia solo entre claro y oscuro.

• --bgFondo de la páginaClaro#fffcf6Oscuro#17140f
• --surfaceTarjetas, campos, cajas de pasosClaro#ffffffOscuro#201c16
• --surface-hoverAl pasar el cursor, superficies discretasClaro#fff6e6Oscuro#2a241b
• --fgTexto y títulosClaro#26211bOscuro#f3eee6
• --mutedTexto secundario, notasClaro#6b6157Oscuro#aaa093
• --lineLíneas y bordes de tarjetasClaro#ece4d6Oscuro#342e25
• --controlContornos de campos, selectores, botones con borde y círculos de colorClaro#998c7eOscuro#776d5f
• --sliderControl deslizante: tirador y pistaClaro#c97a00Oscuro#f7b13c
• --accentBotones principales, estados seleccionados y completadosClaro#f5a524Oscuro#f7b13c
• --accent-strongContornos de foco, enlaces, texto del estado activadoClaro#9c5e00Oscuro#f7b13c
• --accent-fgTexto sobre naranjaClaro#2b1a00Oscuro#2b1a00
• --gainSaldo positivoClaro#2e7d32Oscuro#74d27a
• --lossSaldo negativo, texto de error (text-danger)Claro#c0392bOscuro#f4806f

• El naranja de relleno (accent) se usa en botones principales, interruptores activados, números de paso y marcas de lo seleccionado. Nunca como decoración.
• El naranja intenso (accent-strong) se usa para los contornos de foco, los enlaces como «Ver todo» del pie de página y el texto de las marcas activadas. Nunca para errores.
• El texto de error es rojo (text-danger, el mismo color que un saldo negativo).
• Los contornos de campos, selectores, botones con borde y círculos de color usan control; las tarjetas y los separadores usan line.
• Solo los controles deslizantes usan el color slider (con accent-strong, el lado aún vacío de la pista quedaría por debajo de 3:1 frente al fondo).
• Un solo botón principal con relleno naranja por paso.
• Los colores se escriben como tokens de CSS, así funcionan en claro y en oscuro.

• M PLUS Rounded 1cTítulos (japonés e idiomas con alfabeto latino y cirílico)
• Noto Sans JPTexto (japonés e idiomas con alfabeto latino y cirílico)
• Noto Sans KR・SC・ArabicTítulos y texto en coreano, chino y árabe

• Las cifras se alinean en tablas y contadores (números tabulares).
• Los campos usan texto de 16 px en el móvil para que el iPhone no amplíe la pantalla en cada toque.

• Los escalones de 4, 8, 16, 24, 32 y 48 px se usan para el espacio entre elementos y el relleno interior de las cajas. Ante la duda: cerca = 16, grupo = 32.
• Los rellenos pequeños dentro de los componentes (arriba y abajo de una etiqueta, los lados de un botón) son una excepción y también usan valores fuera de la escala, como 2, 6, 10 y 12 px.
• Las páginas miden como máximo 1152 px; el texto de lectura se corta a 672 px. Los márgenes laterales son de 16 px en el móvil.
• Nada se desborda hacia los lados a 360 px (idealmente 320 px).

• Al cambiar de página, el contenido entra deslizándose un poco desde el lado (0,2–0,3 s). Al volver, entra desde el otro lado.
• Al cambiar el tema de color, la pantalla anterior y la nueva se funden en 0,3 s.
• El aviso de «guardado» sube desde abajo y vuelve a bajar.
• Los vídeos de la guía solo se reproducen mientras se ven y se pausan al salir de la pantalla.
• Con «Reducir movimiento» activado, la animación se detiene y los resultados aparecen al instante.

• PrimaryButtonLa acción clave de un paso. Un solo botón naranja por paso
  Elegir un archivo
• SecondaryButtonBotón con borde bajo el principal
  Copiar todo
• SmallButtonAcciones pequeñas cercanas (copiar, deshacer)
  DeshacerDeshacer
• IconButtonBotón redondo solo con icono. Siempre con nombre para lectores de pantalla
• SegmentedControlElegir una de 2–4 opciones

  Formato

  PNGJPGWebP
• SwitchUn ajuste de sí/no que se aplica al momento
  Mantener el tamaño original
• ToggleButtonOpciones de activar/desactivar en una barra estrecha. Activado muestra borde naranja y marca
  Ordenar las claves por nombre
• TextFieldCampo de una línea con la etiqueta encima
  Nombre
• ColorSwatchesCírculos para los colores habituales y un círculo arcoíris para cualquier otro color

  Color

  Otro color#e53935
• CardButton・CardLinkTarjeta pequeña que se pulsa entera
  Usar como appÁbrela directamente desde la pantalla de inicio
• BadgeEtiqueta pequeña, no pulsable, para un estado breve
  VigenteCaducado

• Los iconos de las herramientas son dibujos de línea dentro de un cuadrado redondeado, en el color del texto. Sin naranja, para que las filas de iconos se vean tranquilas.
• Los conversores muestran el formato de salida (como PNG) en pequeño dentro del icono.
• Las guías muestran un vídeo corto de la pantalla real en cada paso: el escritorio dentro de un marco de navegador y el móvil dentro de un marco de teléfono.
• La zona que se toca se rodea con un recuadro naranja.
• El texto de cada paso usa las palabras de la pantalla y dice dónde pulsar y qué ocurre.

• El texto mantiene un contraste de 4,5:1 o más con el fondo en ambos temas, y los contornos de los controles, de 3:1 o más.
• Todo funciona con el teclado; en todos los componentes, el foco se ve como un contorno naranja intenso de 2 px separado 2 px del elemento.
• Las acciones principales miden al menos 44 px. Las acciones pequeñas cercanas miden 36 px (por encima de los 24 px de WCAG 2.2, 2.5.8) y guardan al menos 8 px con las vecinas. La × dentro de los campos y los círculos de color miden 32 px.
• Los idiomas que se escriben de derecha a izquierda, como el árabe, reflejan la disposición y las flechas.
• Los botones solo con icono tienen nombre para lectores de pantalla, y ningún estado se indica solo con color.
• El modo oscuro y «Reducir movimiento» nunca rompen la maquetación.

• Sin anuncios, sin subir archivos y sin peticiones a servidores externos
• Revisada en escritorio y móvil, claro y oscuro, en japonés, inglés y árabe, sin desbordes laterales a 360 px
• Un solo botón principal naranja por paso
• El espacio entre elementos y dentro de las cajas usa los escalones definidos, y los componentes son los compartidos
• Los botones nombran su acción, sin signos de exclamación ni emojis; el texto de error es rojo y dice qué hacer
• Los 10 idiomas están completos y los nombres de los botones coinciden con las instrucciones
• Los pasos de la guía se entienden a la primera