# Como criamos

## Botões

É uma boa prática da escrita de botões **não ultrapassar o uso de três palavras**.

Botões são chamados para a ação e precisam ser **objetivos** e **informativos**. O ideal é que a gente use uma palavra apenas. Mas, nem sempre isso é possível. Por isso,

{% hint style="danger" %}
No exemplo abaixo, o botão está longo e usa pontuação final.
{% endhint %}

![](/files/-McG-2VvZsy7NGan6Ayp)

{% hint style="success" %}
Botão com no máximo 3 palavras e sem pontuação final
{% endhint %}

![](/files/-McG-5uL1R4v6UQLP2AE)

## Mensagens de erro

Nossas mensagens de erro precisam explicar, sempre que possível, o **motivo do erro**. Elas precisam ser **objetivas** e oferecer uma **solução** ou ação para a pessoa usuária seguir adiante.

{% hint style="danger" %}
**Ops, não tem nada por aqui!**

Essa página não existe.
{% endhint %}

{% hint style="success" %}
**Não encontramos essa página** 😢

Ela pode não existir mais ou não estar disponível no momento. Mas, você pode voltar para a página inicial clicando aqui.
{% endhint %}

OBS: O uso do humor em mensagens de erro precisa ser avaliado caso a caso. Em alguns cenários, esse tipo de abordagem pode irritar mais do que divertir. É preciso sempre levar em consideração o momento da jornada.

## Notificações

O número de caracteres das nossas notificações foi definido a partir dos limites do dispositivo com o menor espaço. Por isso, convencionamos que:

* Títulos podem ter no máximo **34 caracteres**
* O corpo da mensagem deve apresentar a informação principal da notificação nos primeiros **51 caracteres**. A mensagem completa deve ter no máximo **120 caracteres**.
* Emojis podem ser utilizados e são bem-vindos, mas contam como caractere.

{% hint style="danger" %}
**O que você não acha em livros e tutoriais** 👀 \
Aprenda o que livros e tutoriais não te ensinam! Converse gratuitamente com seniores da sua área.
{% endhint %}

{% hint style="success" %}
**O que você não acha em livros 👀** \
Converse gratuitamente com seniores da sua área. Aprenda o que livros e tutoriais não te ensinam!
{% endhint %}

## Legendas e textos alternativos

As **legendas** precisam ser descritivas e concisas. É aconselhável que a legenda sempre adicione uma **informação extra** à imagem e ao texto de apoio.

![](/files/-McFxP0_b2TpEhgq3Cp4)

{% hint style="danger" %}
Você filtra candidatos, recebe recomendações e gerencia currículos em um só lugar.
{% endhint %}

{% hint style="success" %}
Entregamos para a sua empresa a experiência de contratar como se estivesse entrevistando pessoalmente.
{% endhint %}

Os textos alternativos precisam **orientar,** situar a pessoa usuária, para que ela saiba onde está, para onde pode voltar e para onde pode continuar.

Eles também têm a função de **descrever** imagens, ilustrações, ícones e qualquer elemento visual de importância para a navegação.

**Os textos alternativos precisam ser documentados no Figma**, ao lado de cada tela. Para facilitar a leitura das pessoas que programam, eles devem estar em *itálico*.

![](/files/-McFxP0aoBkUhLjWw8c1)

{% hint style="success" %}
Opção sair: *Sair e voltar para a página inicial*

* *Você está no passo 2, informação de cadastro*
* *Passo 1, escolha seu curso*<br>
* Botão continuar: *Continuar para a confirmação da inscrição*&#x20;
* Botão voltar: *Voltar para a escolha de curso*
  {% endhint %}

***OBS*****:** Quando houver ícones e ilustrações na página, podemos colocar imagens na documentação do texto alternativo. Assim, facilitamos a identificação dos elementos. Mas, é importante frisar que **apenas ícones importantes para a navegação** precisam de textos alternativos. O mesmo vale para imagens.

## Estados vazios (empty states)

Estados vazios têm um grande potencial para *call to actions* ou chamadas para ação. Por isso, sempre que possível, utilizamos esse espaço para **direcionar** a pessoa usuária.

{% hint style="danger" %}
Você ainda não tem entrevistas agendadas.
{% endhint %}

{% hint style="success" %}
Quando você tiver uma entrevista agendada, ela vai aparecer aqui. Enquanto isso, que tal demonstrar interesse em algumas vagas?
{% endhint %}

## Campos de preenchimento (placeholders)

Para padronizar os nossos campos de preenchimento, convencionamos que:

* O placeholder oficial para datas é **DD/MM/AAAA**
* O placeholder oficial para e-mails é **<seunome@email.com>**
* Em campos como nome e endereço, usamos um placeholder descritivo. Ex: **Digite seu nome completo, Seu nome completo**.
* Em dropdown, escrevemos **Selecione** ou **Selecione uma opção**. A escolha vai depender do espaço do campo.
* Para números de telefone é **(11) 9999-9999**
* Para CPF é **999.999.999-99**
* Para CEP é **99999-999**

Para outros formatos de número, sempre considerar o **9** como padrão para a construção.

## Textos de ajuda (tooltips)

Textos de ajuda precisam ser concisos e informativos. O ideal é que não se ultrapasse o limite de duas frases curtas.

{% hint style="success" %}
Sua senha deve ter no mínimo 6 caracteres. Utilize números, letras e símbolos para uma senha mais segura.
{% endhint %}


---

# Agent Instructions: 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://revelo.gitbook.io/playbook/guia-de-redacao/como-criamos.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.
