Assets

Botões

Primário

São os botões call to action para compra, teste e registro.

Normal: Texto bold em caixa alta e branco, seguido pelo ícone correspondente, alinhados ao centro. Botão delimitado por retângulo de cantos retos rosa e com sombra smooth rosa.

Hover: Retângulo ganha outline preto e a sombra perde tamanho, ficando mais densa.

Pressed: Texto e ícone ficam brancos. Retângulo ganha preenchimento preto e perde a sombra.

Secundário

São os mais utilizados e indicam ao usuário as demais ações.

Normal: Texto bold em caixa alta e azul, seguido pelo ícone correspondente, alinhados ao centro. Botão delimitado por retângulo de cantos retos branco e com sombra smooth azul.

Hover: Texto e ícone se mantém. Retângulo ganha outline azul e a sombra perde tamanho, ficando mais densa.

Pressed: Texto e ícone ficam brancos. Retângulo ganha preenchimento azul e perde a sombra.

Terciário

São os botões com um ícone correspondente no lado direito.

Normal: Texto bold em caixa alta e azul, seguido pelo ícone correspondente.

Hover e Pressed: Mantidos.

Navegação

Normal: Texto bold em caixa alta e baixa, em preto. É seguido pelo ícone de chevron para baixo, se houver submenu.

Hover: Formatação se mantém e texto fica em azul.

Pressed: Formatação do hover se mantém, e caixa ganha preenchimento cinza.

Navegação (submenu)

Normal: Texto bold em caixa alta e baixa, em preto, na fonte Stanley. É precedido pelo ícone correspondente em azul.

Hover: O botão é delimitado por caixa retangular branca com sombra smooth cinza. Atrás do texto, surge grafismo retangular crescente em verde.

Card de depoimento

Os cards são compostos por uma foto em formato quadrado e uma caixa de texto branca deslocada para baixo. Nela, é inserido o depoimento (H3) alinhado ao topo e, alinhado à base, o logo, nome e cargo do funcionário (Body 1 e 2).

Ícones básicos

Os ícones do site são em outline azul ou branco. Não têm preenchimento, a não ser em casos de marcas que não funcionam em outline, como o logo do Android.

Hierarquia de texto

A hierarquia de títulos deve seguir as diretrizes a seguir:

• H1: Stanley Poster, 84 px.
• H2: Stanley Poster, 60 px.
• H3: Stanley Poster, 48 px.
• H4: Rubik Light, 32 px.
• H5: Stanley Poster, 24 px.
• H6: Rubik Regular, 20 px.
• Subtitle 1: Rubik Medium, 20 px.
• Subtitle 2: Rubik Regular, 16 px.
• Body 1: Rubik Regular, 16 px.
• Body 2: Rubik Regular, 14 px.