Nim, the Okta Design System

Design tokens

Semantic Colors
Token Name Example Value
$color-primary-light
blue, 300
$color-primary-base blue, 500
$color-primary-dark blue, 900
$color-danger-light blue, 300
$color-danger-base blue, 500
$color-danger-dark blue, 900
Focus Ring
Token Name Example Value
$focus-ring-primary red, 300
$focus-ring-danger red, 300
Type
Token Name Example Value
$text-body Aa gray, 900
$text-danger Aa red, 500
$text-heading Aa gray, 900
$text-sub Aa gray, 600
Spacing
Token Name Example Value Pixels
$spacing-xl
$spacing-l
$spacing-m
$spacing-s
$spacing-xs