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

# Frontend

> Understand the basics of our frontend

## Our file structure

We've created a full design system from scratch to make our assistant look modern and easy.
Our frontend is created as a single `HTML` file, structured as follows:

<img className="block dark:hidden" src="https://mintcdn.com/cati/kJPYdW2ehSG3AiZq/images/file_structure_light.png?fit=max&auto=format&n=kJPYdW2ehSG3AiZq&q=85&s=53a9d7fdc0aab8eb7e34d3039f012939" width="480" height="839" data-path="images/file_structure_light.png" />

<img className="hidden dark:block" src="https://mintcdn.com/cati/kJPYdW2ehSG3AiZq/images/file_structure_dark.png?fit=max&auto=format&n=kJPYdW2ehSG3AiZq&q=85&s=ea6deb07b798d87a8fb568c2e0a487c8" width="480" height="847" data-path="images/file_structure_dark.png" />

## Make it yours

Update your docs to your brand and add valuable content for the best user conversion.

<CardGroup cols={2}>
  <Card title="Customize Style" icon="palette" href="https://mintlify.com/docs/settings/global">
    Customize your docs to your company's colors and brands
  </Card>

  <Card title="Reference APIs" icon="code" href="https://mintlify.com/docs/api-playground/openapi">
    Automatically generate endpoints from an OpenAPI spec
  </Card>

  <Card title="Add Components" icon="screwdriver-wrench" href="https://mintlify.com/docs/content/components/accordions">
    Build interactive features and designs to guide your users
  </Card>

  <Card title="Get Inspiration" icon="stars" href="https://mintlify.com/customers">
    Check out our showcase of our favorite documentation
  </Card>
</CardGroup>