# Getting started

> Design System for Holistics ecosystem

## Table of Contents





### Content

- [Tone of voice](/content/tone-of-voice.md)
- [Grammar & mechanics](/content/grammar-mechanics.md)
- [Word list](/content/word-list.md)


### Guides

- [TailwindCSS preset](/guides/tailwindcss-preset.md): Custom TailwindCSS configurations including color palette, font styles,...
- [Modal mechanism](/guides/modal-mechanism.md): Guides and tips about mechanisms of the Modal compoennt.
- [Floating UI Mechanism](/guides/floating-ui-mechanism.md): Guides and tips about the mechanisms of floating components.
- [Forms](/guides/forms.md): A guide to building forms with Holistics components.

### Components

- [Accordion](/components/accordion.md): Expand and collapse sections of content.
- [Alert](/components/alert.md): Display important messages to the user, such as warnings, errors, success messages, or informational notices.
- [Avatar](/components/avatar.md): Display the user's profile image or show user initials in a circular shape when no image is available.
- [Avatar Group](/components/avatar_group.md): Display a group of avatar images, often representing users.
- [Badge](/components/badge.md): A little (clickable) box containing some texts
- [Banner](/components/banner.md): A conatiner including some info, warnings, errors or success messages.
- [Breadcrumb](/components/breadcrumb.md): A list of links that indicate the current page's location within a navigational hierarchy.
- [Button](/components/button.md): An element used to initiate actions or trigger events.
- [Checkbox](/components/checkbox.md): Select one or more options from a set.
- [Collapsible Section](/components/collapsible-section.md): An interactive component which expands/collapses a panel.
- [Dropdown](/components/dropdown.md): Allow users to choose one option from a floating list.
- [Field](/components/field.md): A component that provides labeling and validation for form controls.
- [Form](/components/form.md): A form component which allows users to input data.
- [Modal](/components/modal.md): A window overlaid on either the primary window or another dialog window.
- [Pagination](/components/pagination.md): Display clickable page numbers with the current page highlighted.
- [Popover](/components/popover.md): A rich floating element displayed on user interaction (click, hover, manual)
- [Popover (Onboarding)](/components/popover-onboarding.md): A Popover designed specifically for onboarding purposes
- [Segmented Control](/components/segmented-control.md): Toggle buttons for switching between different values or views
- [Select](/components/select.md): Allow users to choose one or more options from a dropdown list.
- [Shortcut](/components/shortcut.md): Indicate a shortcut for the user
- [Split Button](/components/split_button.md): A container of 1 primary button and 1 secondary button that can open a Dropdown
- [Switch](/components/switch.md): Allow users to toggle between two states: on and off.
- [Tab](/components/tab.md): A versatile component for organizing content into tabbed sections. It supports switching between views, navigation via links , and integration with routing for dynamic content rendering.
- [Tag](/components/tag.md): A little box containing some texts and a close button
- [Tag Input](/components/tag_input.md): An input that allows adding and removing tags
- [Tag List](/components/tag_list.md): A dynamic list of tags shows a remaining counter if all tags cannot be shown in 1 line
- [Text Area](/components/text-area.md): A free-form text field that allows users to enter a sizeable amount of text, for example, descriptions or notes
- [Text Highlight](/components/text_highlight.md): Allow users to toggle between two states: on and off.
- [Text Input](/components/text-input.md): A single-line text field is used to allow the users to input some text
- [Tooltip](/components/tooltip.md): A floating element containing simple and concise texts displayed on hover
- [Tree](/components/tree.md): A tree view displays hierarchical list of items.
- [Radio](/components/radio.md): Radio button is a form control for making a single selection from a short list of options.

### Developing

- [Guideline](/developing/guideline.md): Rules, conventions and best practices when developing Holistics Design System

### Other

- [Brand foundations](/foundations/brand-foundations.md)
- [Color](/base-elements/color.md)
- [Empty state](/patterns/empty-state.md)
- [Error handling](/patterns/error-handling.md)
- [Icon](/base-elements/icon.md): Display an icon crafted specifically for Holistics.
- [Illustration](/base-elements/illustration.md)
- [Logo](/base-elements/logo.md)
- [Product design principles](/foundations/product-design-principles.md)
- [Typography](/base-elements/typography.md)