Skip to main content

​
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
    Every Tight React Page supports desktop web, mobile web, and all breakpoints in between

​
Initial Setup

Tight’s design team will create an initial CSS file tailored to your brand. Once delivered, import it into your application: 
import "@tight-embedded/react/index.css";
import "path/to/yourDesign.css";
Import order matters in CSS. Your custom CSS file must be imported after the Tight CSS file to ensure your overrides take effect.

​
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: 
: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.

​
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: 
.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.
If an element that you want to modify does not have a class, submit a support request for Tight to add it.