---
title: "Styling and themes"
description: "Give Experiences the colors, typography, and visual style of your app."
search:
  tags: ["Features"]
  keywords: ["brand colors", "typography", "design tokens"]
---

Design systems let you reuse colors and text styles throughout a Project. Set up your app's visual style once, then use it across screens so a new paywall or onboarding flow feels like it belongs in your app.

<span id="set-the-direction" />

## Design direction

When you ask Nuxie to create an Experience, include the visual details that matter to your app. Screenshots and existing assets help show what you mean:

> Use our dark background, compact headings, and rounded buttons. Keep the workout image prominent and use our green accent for the primary action.

For an existing design, name the parts you want to keep along with the changes. You can then refine individual values in the editor.

## Design systems

Select a screen on the Canvas and find **Style** in the inspector. Choose **Create…** to set up your first design system, or **Edit** beside an existing selection to open **Styles**.

Choose **Create your first design system**, give it a name, and add the colors and text styles you want to reuse. To add another system, use **+** beside **Design Systems**. The system's controls let you duplicate it to make a variation, set it as the Project default, or delete it.

A screen's **Style** selector chooses which system it uses. Leave it on the Project default to follow changes to that default, or select a specific system for the screen. Screens with their own selection keep it when the Project default changes.

When an update is available from a design system's shared source, choose **Update** to bring that version into the Project.

### Colors

Colors have names based on their role, such as primary, secondary, accent, background, foreground, muted, and destructive. Foreground variants provide the accompanying text color.

Use these shared values wherever the same role appears. If all primary buttons reference the primary color, changing that value changes the buttons together. A fixed color entered on one element stays independent.

### Text styles

Create named styles for typography you use repeatedly, such as headings, body copy, and button labels. Each style holds the font family, size, weight, and italic setting, plus line height and tracking. Text transform can leave the text unchanged or make it uppercase, lowercase, or capitalized.

Duplicate a text style when you need a variation. The new style can then change without affecting the original.

<span id="refine-the-design" />

## Shared values and overrides

Change the shared heading style when you want every heading using it to change. Override one heading's size when that screen needs a different treatment. An override stays local, which is why an element with its own value may no longer follow a shared update.

[Reusable components](/docs/guides/screens-and-components#reusable-components) can also expose inputs for color or state. Set the input on an instance to change that placement, or reset it to return to the component's default.

<span id="check-readability" />

## Component states

A component's style can change when it's selected, disabled, or active. Use [Preview](/docs/guides/preview) to interact with these states.

Keep changing content, such as plan names, prices, and personalized text, in text components. That lets the content use your text styles and wrap as its length changes, without replacing an image.