> 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/color.md).

# Color

### Color principles

**Use color meaningfully:** When color is used sparingly to highlight important elements, it can help create a user interface that is fluid and intuitive.

**Use color to indicate interactivity:** It's a good idea to choose one color to indicate elements of your application that are interactive. For example, many web pages use blue text to denote a hyperlink.

### Color palettes

![](/files/L1DdvM6qmJVUWd3ZxYkj)

![](/files/NAhUdfH1MUcoJyCweWK1)

### Accent color

Common controls use an accent color to convey state information. By default, the accent color is the SystemAccentColor: <mark style="color:red;">**#F9575E**</mark> that users select in their Settings. However, you can also customize your app's accent color to reflect your brand.

![](/files/4lVqGprGNrM6gZrF40eA)

You can use the accent color palette for color theming in your app. Below is an example of how you can use the accent color palette on a button.

![](/files/UDYOTVNx7tTvpUzCHeCL)

### Themes

SenOS's apps can use a light or dark application theme. The theme affects the colors of the app's background, text, icons, and common controls.

#### Light theme

![](/files/2rrP6GrW4AG5BtWzRHQ3)

#### Dark theme

![](/files/jRLf7LkvukNE1xTBUmei)

### Sample code

```
<Grid>
    <Grid.Resources>
        <CornerRadius x:Key="ControlCornerRadius">8</CornerRadius>
    </Grid.Resources>
    <Button Content="Button"/>
</Grid>
```