Design Tokens

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";

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

Get Started

React Components

React Native Components

Plain Javascript

Full End-to-end App

How to Use Design Tokens

Font Tokens

Font Family

Font Size

Font Weight

Layout Tokens

Border Radius

Border Width

Color Tokens

Brand Colors

Surface Colors

Typography Colors

Icon Colors

Border Colors

Money Colors

Animation Tokens

Shadow Tokens

​How to Use Design Tokens

​Font Tokens

​Font Family

​Font Size

​Font Weight

​Layout Tokens

​Border Radius

​Border Width

​Color Tokens

​Brand Colors

​Surface Colors

​Typography Colors

​Icon Colors

​Border Colors

​Money Colors

​Animation Tokens

​Shadow Tokens

How to Use Design Tokens

Font Tokens

Font Family

Font Size

Font Weight

Layout Tokens

Border Radius

Border Width

Color Tokens

Brand Colors

Surface Colors

Typography Colors

Icon Colors

Border Colors

Money Colors

Animation Tokens

Shadow Tokens