design_mockups.md

@@ -3,7 +3,9 @@
 
 ## Design/Mockups
 
-TODO
+Esta página é dedicada aos mockups e protótipo interativo criados para o projeto.
+
+[**Acesso a projeto do Figma**](https://www.figma.com/design/fQrnTXBuVxBkLzvVksII1u/Point-Tils?node-id=0-1&t=ATgabH7UMF5uDhzd-1)
 
 ## Sumário
 
@@ -19,13 +21,49 @@ TODO
 
 Antes de iniciar o desenvolvimento dos protótipos de tela, o primeiro passo foi estabelecer uma identidade visual para o projeto. Essa identidade serviria como um guia para as cores, fontes e logotipo que seriam usados posteriormente. Abaixo, está a definição da identidade visual do projeto
 
-### Logo e paleta de cores
+### Logo
+
+<img src="./resources/images/design-logo.png" width="400">
+
+<details><summary>Logos com fundo transparente</summary>
+
+- [Logo Azul Escuro em PNG](./resources/images/design-logo-dark-blue.png)
+- [Logo Laranja Escuro em PNG](./resources/images/design-logo-dark-orange.png)
+- [Logo Azul Claro em PNG](./resources/images/design-logo-light-blue.png)
+- [Logo Laranja Claro em PNG](./resources/images/design-logo-light-orange.png)
 
-<center><img src="./resources/images/design-logo-paleta-cores.png" width="500"></center>
+</details>
+
+### Paleta de cores
+
+<img src="./resources/images/design-paleta-de-cores.png" width="500">
 
 ### Tipografia
 
-TODO
+A fonte utilizada foi iFoodRCTextos, cujos estilos podem ser acessados [aqui](./resources/fonts/)
+
+Tamanhos de fonte:
+- Para títulos de páginas - 18
+- Para textos em geral - 14
+- Para textos em menor destaque - 12
+
+### Componentes
+
+<p float="left">
+  <img align="top" src="./resources/images/design-componente-barra-tab.png" height="300">
+  <img align="top" src="./resources/images/design-componente-preferencias.png" height="400">
+</p>
+
+<img src="./resources/images/design-componente-calendario.png" width="300">
+
+<img src="./resources/images/design-componente-upload-arquivo.png" width="200">
+
+<p float="left">
+  <img align="top" src="./resources/images/design-componente-cards-filtro-interprete.png" width="200">
+  <img align="top" src="./resources/images/design-componente-cards-pendentes-interprete.png" width="200">
+  <img align="top" src="./resources/images/design-componente-cards-historico-interprete.png" width="200">
+  <img align="top" src="./resources/images/design-componente-cards-historico-usuario-surdo-empresa.png" width="200">
+</p>
 
 ### Templates de E-mail
 
@@ -41,7 +79,6 @@ TODO
 
 <img src="./resources/images/design-template-email-troca-senha.png" width="500">
 
-
 ## Protótipo Alto Nível
 
 TODO
\ No newline at end of file