> For the complete documentation index, see [llms.txt](https://docs.idew.org/project-chatbot/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.idew.org/project-chatbot/project-instructions/2-design-and-build-solution/2.5-style-guide.md).

# 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 %}                                                                                    |                                                                                                                                                                 |                                                                                                                                                                                                                                           |