> For the complete documentation index, see [llms.txt](https://dev.xena.biz/xena-developer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dev.xena.biz/xena-developer/user-interface/styleguide.md).

# Design Guide

- [Alerts and warnings](https://dev.xena.biz/xena-developer/user-interface/styleguide/alertsandwarnings.md): Display information and warnings in a clear way.
- [Buttons](https://dev.xena.biz/xena-developer/user-interface/styleguide/buttons.md): Overview of button usage.
- [Colors and fonts](https://dev.xena.biz/xena-developer/user-interface/styleguide/fontandcolors.md): Overview of colors and use of fonts.
- [Collapsible](https://dev.xena.biz/xena-developer/user-interface/styleguide/collapsible.md): Expand and collapse content.
- [Dropdowns](https://dev.xena.biz/xena-developer/user-interface/styleguide/dropdowns.md): Dropdowns are used as menus or shortcuts.
- [Forms](https://dev.xena.biz/xena-developer/user-interface/styleguide/forms.md): Build forms for user inputs.
- [Icons](https://dev.xena.biz/xena-developer/user-interface/styleguide/icons.md): We use the solid style of Font Awesome 5 icons.
- [Layout](https://dev.xena.biz/xena-developer/user-interface/styleguide/layout.md): How to build responsive layouts.
- [Modals](https://dev.xena.biz/xena-developer/user-interface/styleguide/modals.md): Modals can be used for dialogs, popups and alike.
- [Navigation](https://dev.xena.biz/xena-developer/user-interface/styleguide/navigation.md): There are different options for navigating in views.
- [Pagination](https://dev.xena.biz/xena-developer/user-interface/styleguide/pagination.md): Styles of paginations in tables and panels.
- [Panels](https://dev.xena.biz/xena-developer/user-interface/styleguide/panels.md): Panels are sections in the interface.
- [Tables](https://dev.xena.biz/xena-developer/user-interface/styleguide/tables.md): Present and edit data in tables.
- [Other components](https://dev.xena.biz/xena-developer/user-interface/styleguide/components.md): There are different components in Xena that have their own set of CSS classes.