> For the complete documentation index, see [llms.txt](https://laura-arual1986.gitbook.io/popcorntime/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://laura-arual1986.gitbook.io/popcorntime/disenar/sistema-de-diseno.md).

# Sistema de diseño

Respecto a los **colores**, se eligió como base un gris muy oscuro que hemos llamado negro. La mayoría de apps de cine suelen utilizar fondos oscuros, quizá porque evoca la oscuridad del cine y así los carteles de las películas resaltan más. Para generar un buen contraste y cumplir con los estándares de accesibilidad se utilizó el amarillo y el blanco. Los tonos grises se han empleado en algunos detalles.

Se ha utilizado una **tipografía** más informal y fresca como la Special Elite para el el logotipo, los títulos y la letra del onboarding. Para el body y la navegación se utilizó poppins y roboto ya que eran más legibles y le aportaban más sencillez al diseño.

Se han utilizado **iconos** sencillos que al ser seleccionados no solo cambian de color sino también aparecen rellenos facilitando la accesibilidad. Los iconos también aparecen en color blanco o amarillos para facilitar el contraste.

Para el logo y el nombre busqué palabras e iconos relacionados con el cine, pero al ser una aplicación que también trataba contenidos de series, quería que evocara ambas. Finalmente encontré un elemento que está claramente asociado en nuestros modelos mentales al cine, pero que, además, es perfectamente válido para las series. Ya que sea una película o un capítulo de una serie, esta se puede disfrutar con un bol de palomitas.

{% embed url="<https://zeroheight.com/90f9505ef>" %}

![](/files/-MZSM0b1etORQwe5L2x9)

![](/files/-MZSM7caMyMxVzkxcEP0)

![](/files/-MZSMSIKXLNOcYqzpH9g)

Para el onboarding se utilizaron ilustraciones de StorySet <https://storyset.com/>

![](/files/-MZT_kXegOoeHk1lK1gu)

![](/files/-MZT_u2zoY7CKzeputMT)

El logotipo fue creado mediante Taylor Brands <https://www.tailorbrands.com/?utm_source=Tune&utm_medium=Tune&utm_campaign=1055&coupon=cbq>

![](/files/-MZTa3Moq3mgRNsWv1_q)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://laura-arual1986.gitbook.io/popcorntime/disenar/sistema-de-diseno.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.