El sistema de diseño de Pipepath.

Una sola línea de diseño para todos los productos: tokens e íconos compartidos, dos bibliotecas de componentes React y reglas de accesibilidad que CI verifica. La identidad, los logos y la voz están enbrand.pipepath.com.

• Product UI

  Componentes React para las interfaces de producto: el panel de Spawn y las ventanas de escritorio.

• Brand UI

  Componentes React para brand.pipepath.com, landings y páginas de producto; estáticos por defecto.

• Íconos

  Íconos pixel de 16 y 24 px: pixelarticons seleccionados y glifos propios de túneles, juegos y regiones.

• Accesibilidad

  WCAG 2.2 AA en cada sitio y app: contraste, foco, teclado, lectores de pantalla, movimiento e idioma.

Cómo nace un componente

1. Un producto lo necesita: una propuesta corta dice el caso de uso, las variantes y si ya existe algo parecido.
2. Se decide dónde vive: Product UI, Brand UI o solo en el producto. Entra al sistema si lo usan dos pantallas o productos, o si es una pieza base.
3. Empieza como experimental: la API puede cambiar.
4. Está terminado con tipos exportados, ambos temas, textos de accesibilidad en es, pt-BR y en, pruebas de comportamiento y de accesibilidad, prueba de teclado si es interactivo y su página aquí.
5. Pasa a estable después de una revisión manual con VoiceOver y NVDA.