⏱

Duration / Timing Tokens

DTCG Type: duration

Duration tokens define animation and transition timing. Combined with easing functions, they create a consistent motion language across your interface.

Token Examples

Token Name	Value
`duration.instant`	`0ms`
`duration.fast`	`100ms`
`duration.normal`	`200ms`
`duration.slow`	`400ms`
`duration.slower`	`600ms`

CSS Properties

These CSS properties typically consume duration / timing tokens:

transition-durationanimation-duration

Use Cases

✓

Button hover/press transitions

✓

Modal enter/exit animations

✓

Tooltip show/hide delay

✓

Skeleton loading pulse

✓

Page transition durations

✓

Micro-interactions

Usage Example

:root {
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 400ms;
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
}

.btn {
  transition: all var(--duration-fast) var(--ease-default);
}
.modal {
  transition: opacity var(--duration-normal) var(--ease-default),
              transform var(--duration-normal) var(--ease-default);
}

Available in Presets

Full Brand System

Complete 3-tier system with light/dark modes

Product / SaaS

Interactive product UI with semantic modes

Mobile App

Touch-friendly native-feeling values

Naming Convention

// Token name format: {category}.{group}.{variant}
// Examples:
// duration.instant → 0ms
// duration.fast → 100ms
// duration.normal → 200ms
// duration.slow → 400ms
// duration.slower → 600ms

// CSS custom property:
// --duration-instant: 0ms;
// --duration-fast: 100ms;

// Token set hierarchy:
// global/         → Raw primitive values
// semantic/light/ → Light mode semantic mapping
// semantic/dark/  → Dark mode semantic mapping
// component/      → Component-specific overrides