Skip to main content
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 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: 
: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. 
--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. 
--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: 
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: 
--Tight-fontSizes-sm
--Tight-fontSizes-md
--Tight-fontSizes-lg
--Tight-fontSizes-xl
Text Type Specific Fine-tune sizes for individual text categories: 
--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 
--Tight-fontWeights-sm
--Tight-fontWeights-md
--Tight-fontWeights-lg
Text Type Specific 
--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. 
--Tight-radii-sm
--Tight-radii-md
--Tight-radii-lg

​
Border Width

Controls the thickness of borders on UI elements. 
--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. 
--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 
--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. 
--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 
--Tight-colors-typography-base
--Tight-colors-typography-base-weak
--Tight-colors-typography-contrast
--Tight-colors-typography-contrast-weak
Text Type Specific 
--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. 
--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. 
--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 
--Tight-colors-icon-base
--Tight-colors-icon-base-weak
--Tight-colors-icon-contrast
--Tight-colors-icon-contrast-weak
Accent Colors 
--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. 
--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 
--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. 
--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. 
--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. 
--Tight-animations-appear-instant
--Tight-animations-appear-delay

​
Shadow Tokens

Controls drop shadows for elevated UI elements like modals, popovers, and cards. 
--Tight-shadows-box-shadow