> For the complete documentation index, see [llms.txt](https://docs.sentre.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.sentre.io/design-pricinples.md).

# Design Pricinples

- [Button](https://docs.sentre.io/design-pricinples/button.md): Buttons allow users to take actions, and make choices, with a single tap.
- [Card](https://docs.sentre.io/design-pricinples/card.md): A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.
- [Checkbox](https://docs.sentre.io/design-pricinples/checkbox.md): Checkbox component.
- [Color](https://docs.sentre.io/design-pricinples/color.md): Color provides an intuitive way of communicating information to users in your app: it can be used to indicate interactivity, give feedback to user actions, and give your interface a sense of visual co
- [Corner radius](https://docs.sentre.io/design-pricinples/corner-radius.md): Sen OS applies rounded corners to almost UI elements. The same applies to most common controls such as Button, Card, Input...
- [Drawer](https://docs.sentre.io/design-pricinples/drawer.md): A panel which slides in from the edge of the screen.
- [Dropdown](https://docs.sentre.io/design-pricinples/dropdown.md): A dropdown list.
- [Grid](https://docs.sentre.io/design-pricinples/grid.md): SenOS’s responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.
- [Icons](https://docs.sentre.io/design-pricinples/icons.md): Iconography is a collection of visual images and symbols that help users understand and navigate your app. Icons are used throughout the user interface as visual metaphors that represent a concept, ac
- [Input](https://docs.sentre.io/design-pricinples/input.md): A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.
- [List](https://docs.sentre.io/design-pricinples/list.md): Lists are continuous, vertical indexes of text or images.
- [Menu](https://docs.sentre.io/design-pricinples/menu.md): While there's no single navigation design that works for every app, there are principles and guidelines to help you decide the right design for your app.
- [Modal](https://docs.sentre.io/design-pricinples/modal.md): Modals inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
- [Radio](https://docs.sentre.io/design-pricinples/radio.md): Radio component.
- [Select](https://docs.sentre.io/design-pricinples/select.md): Select component to select value from options.
- [Shadow](https://docs.sentre.io/design-pricinples/shadow.md): Shadows provide cues about depth, direction of movement, and surface edges. A surface’s shadow is determined by its elevation and relationship to other surfaces.
- [Spacing](https://docs.sentre.io/design-pricinples/spacing.md): Use a combination of control size and density to optimize your application and provide a user experience that is most appropriate for your app's functionality and interaction requirements.
- [Switch](https://docs.sentre.io/design-pricinples/switch.md): Switching selector.
- [Tabs](https://docs.sentre.io/design-pricinples/tabs.md): Tabs make it easy to switch between different views.
- [Tooltip](https://docs.sentre.io/design-pricinples/tooltip.md): A simple text popup tip.
- [Table](https://docs.sentre.io/design-pricinples/table.md): A table displays rows of data.
- [Typography](https://docs.sentre.io/design-pricinples/typography.md): Basic text writing, including headings, body text, lists, and more.