> ## 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 Tokens

> Customize the Embedded UI to match your branding

Tight's design tokens are CSS custom properties that control the visual appearance of Tight's embedded UI components.
By overriding these tokens in your application's CSS, you can customize typography, colors, spacing, and other design
elements to match your brand identity.

Please refer to the [Design reference](/embeddable-ui/react/patterns/design) for information on how to get started with
Design Tokens.

## How to Use Design Tokens

To customize design tokens, define them in your CSS file before initializing Tight components:

```css theme={null}
:where(:root, :host) {
  --Tight-colors-brand-primary: #5FDD9C;
  --Tight-fonts-body: 'Inter', sans-serif;
  --Tight-radii-md: 8px;
}
```

All design tokens are optional. Any token not explicitly set will use Tight's default values.

## Font Tokens

Tight provides many tokens that you can use to customize fonts throughout Tight's components. Tight categorizes text into four main categories:

* **Body** - For blocks of text, user input, main page content
* **Label** - Denoting purpose, information, or an atomic reason
* **Heading** - Explains purpose of content before reading further
* **Metric** - For numbers in graphs, financial statements, etc.

### Font Family

Controls the typeface used for text.

**Global**

Controls the typeface for all text globally.

```css theme={null}
--Tight-fonts-base
```

**Text Type Specific**

Specify the typeface for different text categories. All text defaults to the font family of the base token unless overwritten.

```css theme={null}
--Tight-fonts-body
--Tight-fonts-label
--Tight-fonts-heading
--Tight-fonts-metric
```

If you'd like to use the default fonts from Tight you'll need to include the following additional CSS imports:

```TSX theme={null}
import "@tight-embedded/react/duplet.css";
import "@tight-embedded/react/inter.css";
```

### Font Size

Controls text size across the application. You can override global size scales or target specific text categories.

**Global Scale**

Use these to establish consistent sizing across all components:

```css theme={null}
--Tight-fontSizes-sm
--Tight-fontSizes-md
--Tight-fontSizes-lg
--Tight-fontSizes-xl
```

**Text Type Specific**

Fine-tune sizes for individual text categories:

```css theme={null}
--Tight-fontSizes-title
--Tight-fontSizes-body
--Tight-fontSizes-label
--Tight-fontSizes-label-strong
--Tight-fontSizes-label-sub
--Tight-fontSizes-label-strongSub
--Tight-fontSizes-heading
--Tight-fontSizes-metric-sm
--Tight-fontSizes-metric-md
--Tight-fontSizes-metric-lg
--Tight-fontSizes-metric-xl
```

### Font Weight

Controls text weight (boldness) throughout the application.

**Global Scale**

```css theme={null}
--Tight-fontWeights-sm
--Tight-fontWeights-md
--Tight-fontWeights-lg
```

**Text Type Specific**

```css theme={null}
--Tight-fontWeights-body
--Tight-fontWeights-label
--Tight-fontWeights-label-strong
--Tight-fontWeights-label-sub
--Tight-fontWeights-label-strongSub
--Tight-fontWeights-heading
--Tight-fontWeights-title
--Tight-fontWeights-metric-sm
--Tight-fontWeights-metric-md
--Tight-fontWeights-metric-lg
--Tight-fontWeights-metric-xl
```

## Layout Tokens

### Border Radius

Controls the corner rounding of UI elements like cards, buttons, and inputs.

```css theme={null}
--Tight-radii-sm
--Tight-radii-md
--Tight-radii-lg
```

### Border Width

Controls the thickness of borders on UI elements.

```css theme={null}
--Tight-borderWidths-sm
--Tight-borderWidths-md
--Tight-borderWidths-lg
--Tight-borderWidths-xl
```

## Color Tokens

Color tokens control the color palette throughout Tight's UI. They're organized into semantic categories to ensure consistent visual communication.

### Brand Colors

Define your core brand identity with primary, secondary, action, etc. colors. Each color includes intensity variants (`weak`, `strong`, `stronger`, `strongest`) for creating visual hierarchy.

```css theme={null}
--Tight-colors-brand-primary-weak
--Tight-colors-brand-primary
--Tight-colors-brand-primary-strong
--Tight-colors-brand-secondary-weak
--Tight-colors-brand-secondary
--Tight-colors-brand-secondary-strong
--Tight-colors-brand-action-weak
--Tight-colors-brand-action
--Tight-colors-brand-action-strong
--Tight-colors-brand-action-stronger
--Tight-colors-brand-action-strongest
--Tight-colors-brand-success-weak
--Tight-colors-brand-success
--Tight-colors-brand-success-strong
--Tight-colors-brand-warning-weak
--Tight-colors-brand-warning
--Tight-colors-brand-warning-strong
--Tight-colors-brand-danger-weak
--Tight-colors-brand-danger
--Tight-colors-brand-danger-strong
```

### Surface Colors

Surface colors define backgrounds and containers for UI elements.

**Base Surfaces**

```css theme={null}
--Tight-colors-surface-background
--Tight-colors-surface-background-hover
--Tight-colors-surface-foreground
--Tight-colors-surface-foreground-hover
--Tight-colors-surface-foreground-disabled
--Tight-colors-surface-elevated
--Tight-colors-surface-elevated-hover
```

**Intent Surfaces**

Applied to interactive elements like buttons to communicate their purpose and state.

```css theme={null}
--Tight-colors-surface-intent-primary
--Tight-colors-surface-intent-primary-hover
--Tight-colors-surface-intent-primary-active
--Tight-colors-surface-intent-primary-disabled
--Tight-colors-surface-intent-secondary
--Tight-colors-surface-intent-secondary-hover
--Tight-colors-surface-intent-secondary-active
--Tight-colors-surface-intent-secondary-disabled
--Tight-colors-surface-intent-action
--Tight-colors-surface-intent-action-hover
--Tight-colors-surface-intent-action-active
--Tight-colors-surface-intent-action-disabled
--Tight-colors-surface-intent-action-discrete
--Tight-colors-surface-intent-action-discrete-hover
--Tight-colors-surface-intent-action-discrete-active
--Tight-colors-surface-intent-success
--Tight-colors-surface-intent-success-hover
--Tight-colors-surface-intent-success-active
--Tight-colors-surface-intent-success-disabled
--Tight-colors-surface-intent-warning
--Tight-colors-surface-intent-warning-hover
--Tight-colors-surface-intent-warning-active
--Tight-colors-surface-intent-warning-disabled
--Tight-colors-surface-intent-danger
--Tight-colors-surface-intent-danger-hover
--Tight-colors-surface-intent-danger-active
--Tight-colors-surface-intent-danger-disabled
```

### Typography Colors

Controls text colors across all components.

**Base Colors**

```css theme={null}
--Tight-colors-typography-base
--Tight-colors-typography-base-weak
--Tight-colors-typography-contrast
--Tight-colors-typography-contrast-weak
```

**Text Type Specific**

```css theme={null}
--Tight-colors-typography-body
--Tight-colors-typography-label
--Tight-colors-typography-label-sub
--Tight-colors-typography-label-strong
--Tight-colors-typography-label-strongSub
--Tight-colors-typography-heading
--Tight-colors-typography-metric-sm
--Tight-colors-typography-metric-md
--Tight-colors-typography-metric-lg
--Tight-colors-typography-metric-xl
```

**Accent Colors**

Used for highlighting special states like successes, warnings, and errors.

```css theme={null}
--Tight-colors-typography-accent-success
--Tight-colors-typography-accent-warning
--Tight-colors-typography-accent-danger
```

**Intent Colors**

Applied to interactive elements like buttons to communicate their purpose and state.

```css theme={null}
--Tight-colors-typography-intent-primary
--Tight-colors-typography-intent-primary-hover
--Tight-colors-typography-intent-primary-active
--Tight-colors-typography-intent-secondary
--Tight-colors-typography-intent-secondary-hover
--Tight-colors-typography-intent-secondary-active
--Tight-colors-typography-intent-action
--Tight-colors-typography-intent-action-hover
--Tight-colors-typography-intent-action-active
--Tight-colors-typography-intent-success
--Tight-colors-typography-intent-success-hover
--Tight-colors-typography-intent-success-active
--Tight-colors-typography-intent-warning
--Tight-colors-typography-intent-warning-hover
--Tight-colors-typography-intent-warning-active
--Tight-colors-typography-intent-danger
--Tight-colors-typography-intent-danger-hover
--Tight-colors-typography-intent-danger-active
```

### Icon Colors

Controls icon colors throughout the application. These tokens inherit their values from the typography color tokens unless overwritten.

**Base Colors**

```css theme={null}
--Tight-colors-icon-base
--Tight-colors-icon-base-weak
--Tight-colors-icon-contrast
--Tight-colors-icon-contrast-weak
```

**Accent Colors**

```css theme={null}
--Tight-colors-icon-accent-success
--Tight-colors-icon-accent-warning
--Tight-colors-icon-accent-danger
```

**Intent Colors**

Applied to interactive elements like buttons to communicate their purpose and state.

```css theme={null}
--Tight-colors-icon-intent-primary
--Tight-colors-icon-intent-primary-hover
--Tight-colors-icon-intent-primary-active
--Tight-colors-icon-intent-secondary
--Tight-colors-icon-intent-secondary-hover
--Tight-colors-icon-intent-secondary-active
--Tight-colors-icon-intent-action
--Tight-colors-icon-intent-action-hover
--Tight-colors-icon-intent-action-active
--Tight-colors-icon-intent-success
--Tight-colors-icon-intent-success-hover
--Tight-colors-icon-intent-success-active
--Tight-colors-icon-intent-warning
--Tight-colors-icon-intent-warning-hover
--Tight-colors-icon-intent-warning-active
--Tight-colors-icon-intent-danger
--Tight-colors-icon-intent-danger-hover
--Tight-colors-icon-intent-danger-active
```

### Border Colors

Controls border colors across the application.

**Base Layout Borders**

```css theme={null}
--Tight-colors-border-layout-weak
--Tight-colors-border-layout
--Tight-colors-border-layout-strong
```

**Intent Borders**

Applied to interactive elements like buttons to communicate their purpose and state.

```css theme={null}
--Tight-colors-border-intent-primary-hover
--Tight-colors-border-intent-primary
--Tight-colors-border-intent-primary-active
--Tight-colors-border-intent-primary-disabled
--Tight-colors-border-intent-secondary-hover
--Tight-colors-border-intent-secondary
--Tight-colors-border-intent-secondary-active
--Tight-colors-border-intent-secondary-disabled
--Tight-colors-border-intent-danger-hover
--Tight-colors-border-intent-danger
--Tight-colors-border-intent-danger-active
--Tight-colors-border-intent-danger-disabled
--Tight-colors-border-intent-warning-hover
--Tight-colors-border-intent-warning
--Tight-colors-border-intent-warning-active
--Tight-colors-border-intent-warning-disabled
--Tight-colors-border-intent-success-hover
--Tight-colors-border-intent-success
--Tight-colors-border-intent-success-active
--Tight-colors-border-intent-success-disabled
--Tight-colors-border-intent-action-hover
--Tight-colors-border-intent-action
--Tight-colors-border-intent-action-active
--Tight-colors-border-intent-action-disabled
```

### Money Colors

Specialized colors for displaying financial data in reports and graphs.

```css theme={null}
--Tight-colors-money
--Tight-colors-money-positive
--Tight-colors-money-positive-weak
--Tight-colors-money-negative
--Tight-colors-money-negative-weak
```

## Animation Tokens

Controls animation timing for transitions and appearance effects.

```css theme={null}
--Tight-animations-appear-instant
--Tight-animations-appear-delay
```

## Shadow Tokens

Controls drop shadows for elevated UI elements like modals, popovers, and cards.

```css theme={null}
--Tight-shadows-box-shadow
```