> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tight.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Design

> Customize the Embedded UI to match your branding

## Get Started

Tight will work with you to understand your design needs and ensure the Embedded UI matches your brand. To begin, share one of the following:

* **Your application**: A login URL and credentials that Tight's design team can use to analyze your branding and styling
* **Design materials**: Brand guidelines, Figma files, or other design documentation
  <Tip>Every Tight React Page supports desktop web, mobile web, and all breakpoints in between</Tip>

## Initial Setup

Tight's design team will create an initial CSS file tailored to your brand. Once delivered, import it into your application:

```typescript theme={null}
import "@tight-embedded/react/index.css";
import "path/to/yourDesign.css";
```

<Note>
  Import order matters in CSS. Your custom CSS file must be imported **after** the Tight CSS file to ensure your overrides take effect.
</Note>

## Customizing Your Styles

You can submit a support request for design changes to Tight or make changes yourself using the methods below:

### Design Tokens

Tight uses design tokens to control styles throughout its system, making it easy for you to customize the look and feel
of components by changing just a few variables. As your entry point for customization, you can override the following
tokens:

```css theme={null}
:where(:root, :host) {
    /* Brand Colors - Primary */
    --Tight-colors-brand-primary

    /* Brand Colors - Secondary (subdued color, to complement your primary color) */
    --Tight-colors-brand-secondary

    /* Brand Colors - Action (buttons, links, interactive elements) */
    --Tight-colors-brand-action

    /* Brand Colors - Success */
    --Tight-colors-brand-success

    /* Brand Colors - Warning */
    --Tight-colors-brand-warning

    /* Brand Colors - Danger */
    --Tight-colors-brand-danger

    /* Surface Colors - Backgrounds and foregrounds */
    --Tight-colors-surface-background
    --Tight-colors-surface-foreground

    /* Font Colors */
    --Tight-colors-typography-base
    --Tight-colors-typography-base-weak
}
```

For more granular customization options, see the [full design token reference](/embeddable-ui/react/reference/design-tokens).

### CSS Classes

If you need more granularity than provided by the design tokens, you can directly override CSS classes on specific elements. All Tight component
classes are prefixed with `Tight-` and can be customized in your CSS file:

```css theme={null}
.Tight-tile {
    box-shadow: none;
}
```

**Inspecting elements**: Use your browser's developer tools to inspect elements and identify their class names. Only
override classes that start with `Tight-`. Overwriting any other classes is not supported, as they may change
in the future, and Tight does not guarantee backward compatibility.

<Note>
  If an element that you want to modify does not have a class, submit a support request for Tight to add it.
</Note>