... | @@ -18,29 +18,27 @@ Aqui podem ser encontrados os protótipos de alto nível do projeto e as cores u |
... | @@ -18,29 +18,27 @@ Aqui podem ser encontrados os protótipos de alto nível do projeto e as cores u |
|
- [Elementos Visuais](#elementos-visuais)
|
|
- [Elementos Visuais](#elementos-visuais)
|
|
|
|
|
|
## Protótipos de Alto Nível
|
|
## Protótipos de Alto Nível
|
|
|
|
|
|
### Tela inicial
|
|
### Tela inicial
|
|
![image](uploads/c095f3359cd20c312dd100dd5c8ab65f/image.png)
|
|
![image](uploads/963d07058356e5b806efa56e7371afe8/image.png)
|
|
|
|
|
|
### Telas de cadastro
|
|
### Telas de cadastro
|
|
![image](uploads/421792846b926876f8b63526d8e716da/image.png)
|
|
![image](uploads/bd6d3c3ec1e23692e14ac839ae64e925/image.png)
|
|
|
|
|
|
### Tela de Frases
|
|
### Tela de Frases
|
|
![image](uploads/668df93cad7363f3246848bbfb1a1f35/image.png)
|
|
![image](uploads/ad1879c0c5570e591ec5618f0214f7bc/image.png)
|
|
|
|
|
|
### Tela de Objetivos
|
|
### Tela de Objetivos
|
|
![image](uploads/08e3ddff21f814f352f823afe5fae910/image.png)
|
|
![image](uploads/ef43c846d908c81db2af1d88cb95ef96/image.png)
|
|
|
|
|
|
### Exemplo de notificação
|
|
### Exemplo de notificação
|
|
![image](uploads/a8c4458bd1fb07a2b627dc08f5420946/image.png)
|
|
![image](uploads/a8c4458bd1fb07a2b627dc08f5420946/image.png)
|
|
|
|
|
|
## Cores
|
|
## Cores
|
|
### Paleta primária
|
|
A paleta inclui cores para os estados de hover, focus, select e active. Também apresenta cores que podem ser usadas para planos de fundo, elementos de alto contraste (como texto e divisores) e elevação e profundidade.
|
|
As cores verdes reforçam o logotipo do aplicativo Focus. Verde 900 é a cor padrão de UI para a maioria das interações principais. Essa paleta também inclui cores para os estados de hover, focus, select e active.
|
|
![image](uploads/e772d6ab72e6f443c8fd606e6694c846/image.png)
|
|
|
|
|
|
![image](uploads/dd87939a9c5703e1b7b7d82b02bace3e/image.png)
|
|
|
|
|
|
|
|
### Paleta Neutra
|
|
## Tipografia
|
|
Esta paleta apresenta cores que podem ser usadas para planos de fundo, elementos de alto contraste (como texto e divisores) e elevação e profundidade.
|
|
![image](uploads/7da62e202d684ed3df367453eb1dc07b/image.png)
|
|
|
|
|
|
![image](uploads/69b51c99ecfca20217b4264db42c9a5e/image.png) |
|
## Elementos Visuais
|
|
|
|
![image](uploads/390ac17468c9430855c340f5a9813ed3/image.png) |