# 2.5 Style Guide

{% tabs %}
{% tab title="✓  INSTRUCTIONS & DELIVERABLE" %}
Create a simple document that outlines the style elements of your chatbot. You will want to determine the following elements, at a minimum, and document a description and visual samples of each when possible.

* **Background color or image** descriptions and visual samples
* **Text font-family and font-size** descriptions and samples (Consider using [Google Fonts](https://fonts.google.com/) for a custom look)
* **Text message "bubble" colors and styles** for the chatbot messages and the user messages (you want them to look different)
* **Sound effects** - Describe any sound and how it will be used.
* **Buttons** - This would include the send message button as well as any other buttons you may use in your chat interface.

![A portion of a style guide example](/files/-LO3QCAU1gyLGOYAHc0F)

**❏ Deliverable**\
A style guide document.
{% endtab %}

{% tab title="★  RUBRIC" %}

| ✓- Below Standard                                                                                | ✓ At Standard                                                                                                                                                   | ✓+ Above Standard                                                                                                                                                                                                                         |
| ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| The style guide is incomplete and lacking basic descriptions of what the chatbot will look like. | The style guide provides a complete description of the visual presentation and sound of the chatbot that will provide a clear target for coding the HTML/CSS/JS | The style guide provided a rich presentation of the style elements with fine details in how the chatbot should look and sound. The style guide reflects a carefully considered design process with the user experience clearly addressed. |
| {% endtab %}                                                                                     |                                                                                                                                                                 |                                                                                                                                                                                                                                           |
| {% endtabs %}                                                                                    |                                                                                                                                                                 |                                                                                                                                                                                                                                           |


---

# 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://docs.idew.org/project-chatbot/project-instructions/2-design-and-build-solution/2.5-style-guide.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.