> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cosmo.humanizing.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Kiosk Styling

> Customize the visual appearance of your Receptionist Avatar kiosk with avatars, themes, and brand colors

## Overview

The Styling page lets you customize how the Receptionist Avatar kiosk looks to visitors. All changes apply to the live kiosk in real-time after saving.

## Accessing Styling

Navigate to your Receptionist Avatar in the sidebar, then click **Styling**.

***

## Avatar

Choose a 3D avatar that represents your receptionist. The avatar appears on the attract screen and throughout the kiosk flow.

* Browse the avatar gallery to select from pre-made avatars
* The preview updates in real-time as you browse
* Click an avatar to select it, then save

<Tip>
  Choose an avatar that matches your company culture. A professional avatar works well for corporate offices, while a friendlier one suits hospitality venues.
</Tip>

***

## Theme

Select the kiosk color scheme:

| Theme     | Description                                                        |
| --------- | ------------------------------------------------------------------ |
| **Light** | White background with dark text. Best for bright environments.     |
| **Dark**  | Dark background with light text. Best for modern or dimmer spaces. |

***

## Brand Color

Set the primary accent color used throughout the kiosk (buttons, highlights, headers):

* **Extracted colors**: If you provided a domain during onboarding, extracted brand colors appear as swatches
* **Color picker**: Click to choose any color visually
* **Hex code**: Enter an exact color value (e.g., `#3B82F6`)

***

## Logo

Upload or change your company logo displayed on the kiosk header. The logo appears alongside your brand name on every screen.

<Note>
  If you used brand extraction during onboarding, your logo was automatically imported. You can replace or remove it here.
</Note>

***

## Preview

The right side of the Styling page shows a live kiosk preview. Use the orientation toggle in the header to switch between:

* **Portrait** — Vertical layout for tablet stands
* **Landscape** — Horizontal layout for desk-mounted screens

The preview reflects all unsaved changes so you can see the result before saving.

***

## Saving Changes

Click **Save** to apply your styling changes. The kiosk updates in real-time — any device displaying the kiosk URL will reflect the new styles on the next screen transition.

<Warning>
  Changes are not saved automatically. If you navigate away without saving, a confirmation dialog will prompt you to save or discard changes.
</Warning>

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Manage Contacts" icon="address-book" href="/receptionist/contacts">
    Add or update employee contacts for the kiosk directory.
  </Card>

  <Card title="Deploy Your Kiosk" icon="rocket" href="/receptionist/deployment">
    Get the deployment URL and set up your physical device.
  </Card>
</CardGroup>