Primitives

• --primitive-color-amethyst-violetbase#a798d6
• --primitive-color-amethyst-violet-2525#f8f8f9
• --primitive-color-amethyst-violet-4040#f4f3f6
• --primitive-color-amethyst-violet-5050#f1f0f4
• --primitive-color-amethyst-violet-8080#e8e7ee
• --primitive-color-amethyst-violet-100100#e3e1ea
• --primitive-color-amethyst-violet-140140#d8d5e5
• --primitive-color-amethyst-violet-180180#cdc8e1
• --primitive-color-amethyst-violet-200200#c8c2df
• --primitive-color-amethyst-violet-220220#c3bbde
• --primitive-color-amethyst-violet-260260#b9aedd
• --primitive-color-amethyst-violet-300300#afa1dd
• --primitive-color-amethyst-violet-320320#aa9ade
• --primitive-color-amethyst-violet-360360#a18bde
• --primitive-color-amethyst-violet-400400#987dde
• --primitive-color-amethyst-violet-420420#9376dd
• --primitive-color-amethyst-violet-460460#8a67da
• --primitive-color-amethyst-violet-500500#815bd2
• --primitive-color-amethyst-violet-540540#7750c5
• --primitive-color-amethyst-violet-580580#6c49b3
• --primitive-color-amethyst-violet-600600#6646a9
• --primitive-color-amethyst-violet-640640#5b4193
• --primitive-color-amethyst-violet-680680#503c7e
• --primitive-color-amethyst-violet-700700#4a3973
• --primitive-color-amethyst-violet-720720#453769
• --primitive-color-amethyst-violet-740740#3f335f
• --primitive-color-amethyst-violet-760760#3a3055
• --primitive-color-amethyst-violet-780780#352d4c
• --primitive-color-amethyst-violet-800800#302943
• --primitive-color-amethyst-violet-820820#2b263b
• --primitive-color-amethyst-violet-860860#211e2c
• --primitive-color-amethyst-violet-900900#17151d

• --primitive-color-calamine-bluebase#83ccd2
• --primitive-color-calamine-blue-2525#f6f8f8
• --primitive-color-calamine-blue-4040#f1f4f5
• --primitive-color-calamine-blue-5050#edf2f2
• --primitive-color-calamine-blue-8080#e1eaeb
• --primitive-color-calamine-blue-100100#d8e6e7
• --primitive-color-calamine-blue-140140#c5dddf
• --primitive-color-calamine-blue-180180#afd4d7
• --primitive-color-calamine-blue-200200#a4d0d4
• --primitive-color-calamine-blue-220220#98ccd0
• --primitive-color-calamine-blue-260260#81c4c9
• --primitive-color-calamine-blue-300300#6cbac1
• --primitive-color-calamine-blue-320320#62b5bc
• --primitive-color-calamine-blue-360360#51abb3
• --primitive-color-calamine-blue-400400#43a1a8
• --primitive-color-calamine-blue-420420#3d9ba3
• --primitive-color-calamine-blue-460460#349097
• --primitive-color-calamine-blue-500500#2e858c
• --primitive-color-calamine-blue-540540#2a7a80
• --primitive-color-calamine-blue-580580#276f74
• --primitive-color-calamine-blue-600600#27696e
• --primitive-color-calamine-blue-640640#255e62
• --primitive-color-calamine-blue-680680#245357
• --primitive-color-calamine-blue-700700#234d51
• --primitive-color-calamine-blue-720720#22484b
• --primitive-color-calamine-blue-740740#214345
• --primitive-color-calamine-blue-760760#1f3d40
• --primitive-color-calamine-blue-780780#1e383a
• --primitive-color-calamine-blue-800800#1c3334
• --primitive-color-calamine-blue-820820#1a2d2f
• --primitive-color-calamine-blue-860860#162324
• --primitive-color-calamine-blue-900900#0f1819

• --primitive-color-cerulian-bluebase#4d9abf
• --primitive-color-cerulian-blue-2525#f7f8f9
• --primitive-color-cerulian-blue-4040#f1f4f6
• --primitive-color-cerulian-blue-5050#eef1f3
• --primitive-color-cerulian-blue-8080#e3e9ed
• --primitive-color-cerulian-blue-100100#dbe4ea
• --primitive-color-cerulian-blue-140140#cadae3
• --primitive-color-cerulian-blue-180180#b7d1df
• --primitive-color-cerulian-blue-200200#adccdd
• --primitive-color-cerulian-blue-220220#a3c7db
• --primitive-color-cerulian-blue-260260#8dbed8
• --primitive-color-cerulian-blue-300300#78b5d4
• --primitive-color-cerulian-blue-320320#6eb0d1
• --primitive-color-cerulian-blue-360360#5ba6ca
• --primitive-color-cerulian-blue-400400#4c9bc1
• --primitive-color-cerulian-blue-420420#4596bc
• --primitive-color-cerulian-blue-460460#3b8bb0
• --primitive-color-cerulian-blue-500500#3380a4
• --primitive-color-cerulian-blue-540540#2f7696
• --primitive-color-cerulian-blue-580580#2c6b88
• --primitive-color-cerulian-blue-600600#2a6581
• --primitive-color-cerulian-blue-640640#295b72
• --primitive-color-cerulian-blue-680680#275064
• --primitive-color-cerulian-blue-700700#264b5d
• --primitive-color-cerulian-blue-720720#254656
• --primitive-color-cerulian-blue-740740#23404f
• --primitive-color-cerulian-blue-760760#223b48
• --primitive-color-cerulian-blue-780780#203641
• --primitive-color-cerulian-blue-800800#1e313b
• --primitive-color-cerulian-blue-820820#1c2c34
• --primitive-color-cerulian-blue-860860#172228
• --primitive-color-cerulian-blue-900900#10171b

• --primitive-color-coral-redbase#f08f88
• --primitive-color-coral-red-2525#f9f7f7
• --primitive-color-coral-red-4040#f6f3f2
• --primitive-color-coral-red-5050#f4f0ef
• --primitive-color-coral-red-8080#efe6e5
• --primitive-color-coral-red-100100#ecdfde
• --primitive-color-coral-red-140140#e8d1cf
• --primitive-color-coral-red-180180#e6c3bf
• --primitive-color-coral-red-200200#e5bbb7
• --primitive-color-coral-red-220220#e5b3ae
• --primitive-color-coral-red-260260#e6a29c
• --primitive-color-coral-red-300300#e89089
• --primitive-color-coral-red-320320#e9867e
• --primitive-color-coral-red-360360#eb716a
• --primitive-color-coral-red-400400#ea5a56
• --primitive-color-coral-red-420420#e94d4c
• --primitive-color-coral-red-460460#e2393c
• --primitive-color-coral-red-500500#d42e33
• --primitive-color-coral-red-540540#c22a2f
• --primitive-color-coral-red-580580#af2b2d
• --primitive-color-coral-red-600600#a42c2d
• --primitive-color-coral-red-640640#902d2b
• --primitive-color-coral-red-680680#7c2c2a
• --primitive-color-coral-red-700700#722c29
• --primitive-color-coral-red-720720#682b28
• --primitive-color-coral-red-740740#5f2a27
• --primitive-color-coral-red-760760#562825
• --primitive-color-coral-red-780780#4d2623
• --primitive-color-coral-red-800800#442321
• --primitive-color-coral-red-820820#3c211f
• --primitive-color-coral-red-860860#2d1b19
• --primitive-color-coral-red-900900#1e1312

• --primitive-color-cream-yellowbase#f1be58
• --primitive-color-cream-yellow-2525#fbf7f0
• --primitive-color-cream-yellow-4040#faf3e7
• --primitive-color-cream-yellow-5050#f8f0e1
• --primitive-color-cream-yellow-8080#f5e7cd
• --primitive-color-cream-yellow-100100#f3e0be
• --primitive-color-cream-yellow-140140#f0d3a0
• --primitive-color-cream-yellow-180180#ecc680
• --primitive-color-cream-yellow-200200#eac070
• --primitive-color-cream-yellow-220220#e7ba61
• --primitive-color-cream-yellow-260260#e0ad45
• --primitive-color-cream-yellow-300300#d6a22f
• --primitive-color-cream-yellow-320320#d19c26
• --primitive-color-cream-yellow-360360#c59217
• --primitive-color-cream-yellow-400400#b8880c
• --primitive-color-cream-yellow-420420#b28207
• --primitive-color-cream-yellow-460460#a57902
• --primitive-color-cream-yellow-500500#996f00
• --primitive-color-cream-yellow-540540#8c6601
• --primitive-color-cream-yellow-580580#7f5c04
• --primitive-color-cream-yellow-600600#795805
• --primitive-color-cream-yellow-640640#6c4f08
• --primitive-color-cream-yellow-680680#60460b
• --primitive-color-cream-yellow-700700#59410c
• --primitive-color-cream-yellow-720720#533d0d
• --primitive-color-cream-yellow-740740#4d390d
• --primitive-color-cream-yellow-760760#47340d
• --primitive-color-cream-yellow-780780#41300c
• --primitive-color-cream-yellow-800800#3b2b0c
• --primitive-color-cream-yellow-820820#35270b
• --primitive-color-cream-yellow-860860#291e09
• --primitive-color-cream-yellow-900900#1d1506

• --primitive-color-data-viz-100100#557ca7
• --primitive-color-data-viz-200200#e98a2e
• --primitive-color-data-viz-300300#d5525a
• --primitive-color-data-viz-400400#80b9b2
• --primitive-color-data-viz-500500#66a14f
• --primitive-color-data-viz-600600#e9c74c
• --primitive-color-data-viz-700700#aa7aa0
• --primitive-color-data-viz-800800#f79ba8
• --primitive-color-data-viz-900900#98745e
• --primitive-color-data-viz-10001000#b9b0ab

• --primitive-color-graphitebase#6e6e6e
• --primitive-color-graphite-2525#f8f8f8
• --primitive-color-graphite-4040#f4f4f4
• --primitive-color-graphite-5050#f1f1f1
• --primitive-color-graphite-8080#e8e8e8
• --primitive-color-graphite-100100#e2e2e2
• --primitive-color-graphite-140140#d7d7d7
• --primitive-color-graphite-180180#cccccc
• --primitive-color-graphite-200200#c6c6c6
• --primitive-color-graphite-220220#c1c1c1
• --primitive-color-graphite-260260#b6b6b6
• --primitive-color-graphite-300300#ababab
• --primitive-color-graphite-320320#a6a6a6
• --primitive-color-graphite-360360#9b9b9b
• --primitive-color-graphite-400400#919191
• --primitive-color-graphite-420420#8b8b8b
• --primitive-color-graphite-460460#818181
• --primitive-color-graphite-500500#777777
• --primitive-color-graphite-540540#6d6d6d
• --primitive-color-graphite-580580#636363
• --primitive-color-graphite-600600#5e5e5e
• --primitive-color-graphite-640640#545454
• --primitive-color-graphite-680680#4a4a4a
• --primitive-color-graphite-700700#464646
• --primitive-color-graphite-720720#414141
• --primitive-color-graphite-740740#3c3c3c
• --primitive-color-graphite-760760#373737
• --primitive-color-graphite-780780#333333
• --primitive-color-graphite-800800#2e2e2e
• --primitive-color-graphite-820820#292929
• --primitive-color-graphite-860860#202020
• --primitive-color-graphite-900900#161616

• --primitive-color-turquoise-greenbase#6ab98e
• --primitive-color-turquoise-green-2525#f7f8f7
• --primitive-color-turquoise-green-4040#f1f4f3
• --primitive-color-turquoise-green-5050#eef2ef
• --primitive-color-turquoise-green-8080#e2ebe5
• --primitive-color-turquoise-green-100100#dae6df
• --primitive-color-turquoise-green-140140#c8ded0
• --primitive-color-turquoise-green-180180#b4d6c1
• --primitive-color-turquoise-green-200200#a9d2ba
• --primitive-color-turquoise-green-220220#9fceb2
• --primitive-color-turquoise-green-260260#89c6a3
• --primitive-color-turquoise-green-300300#75be95
• --primitive-color-turquoise-green-320320#6cb98f
• --primitive-color-turquoise-green-360360#5bb083
• --primitive-color-turquoise-green-400400#4da578
• --primitive-color-turquoise-green-420420#47a073
• --primitive-color-turquoise-green-460460#3e9569
• --primitive-color-turquoise-green-500500#378960
• --primitive-color-turquoise-green-540540#337e58
• --primitive-color-turquoise-green-580580#307250
• --primitive-color-turquoise-green-600600#2e6c4c
• --primitive-color-turquoise-green-640640#2c6045
• --primitive-color-turquoise-green-680680#2a553e
• --primitive-color-turquoise-green-700700#284f3a
• --primitive-color-turquoise-green-720720#274a37
• --primitive-color-turquoise-green-740740#254433
• --primitive-color-turquoise-green-760760#233e2f
• --primitive-color-turquoise-green-780780#22392c
• --primitive-color-turquoise-green-800800#1f3328
• --primitive-color-turquoise-green-820820#1d2e24
• --primitive-color-turquoise-green-860860#18231c
• --primitive-color-turquoise-green-900900#111814

• color.black

  --primitive-color-black

  Value

  oklch(17.76% 0 0)

  Hex

  #111111

• color.transparent

  --primitive-color-transparent

  Value

  oklch(0% 0 0 / 0)

  Hex

  #000000

• color.white

  --primitive-color-white

  Value

  oklch(97.31% 0 0)

  Hex

  #f6f6f6

Lengths over 9rem are scaled: full width is 96rem (1536px)

• dimension.0

  --primitive-dimension-0

  Value

  0rem

• dimension.25

  --primitive-dimension-25

  Value

  0.0625rem · 1px

• dimension.50

  --primitive-dimension-50

  Value

  0.125rem · 2px

• dimension.100

  --primitive-dimension-100

  Value

  0.25rem · 4px

• dimension.150

  --primitive-dimension-150

  Value

  0.375rem · 6px

• dimension.200

  --primitive-dimension-200

  Value

  0.5rem · 8px

• dimension.300

  --primitive-dimension-300

  Value

  0.75rem · 12px

• dimension.400

  --primitive-dimension-400

  Value

  1rem · 16px

• dimension.500

  --primitive-dimension-500

  Value

  1.25rem · 20px

• dimension.600

  --primitive-dimension-600

  Value

  1.5rem · 24px

• dimension.800

  --primitive-dimension-800

  Value

  2rem · 32px

• dimension.1000

  --primitive-dimension-1000

  Value

  2.5rem · 40px

• dimension.1200

  --primitive-dimension-1200

  Value

  3rem · 48px

• dimension.1400

  --primitive-dimension-1400

  Value

  3.5rem · 56px

• dimension.1600

  --primitive-dimension-1600

  Value

  4rem · 64px

• dimension.2000

  --primitive-dimension-2000

  Value

  5rem · 80px

• dimension.2400

  --primitive-dimension-2400

  Value

  6rem · 96px

• dimension.3200

  --primitive-dimension-3200

  Value

  8rem · 128px

• dimension.5850

  --primitive-dimension-5850

  Value

  14.625rem · 234px

• dimension.12000

  --primitive-dimension-12000

  Value

  30rem · 480px

• dimension.16000

  --primitive-dimension-16000

  Value

  40rem · 640px

• dimension.19200

  --primitive-dimension-19200

  Value

  48rem · 768px

• dimension.20800

  --primitive-dimension-20800

  Value

  52rem · 832px

• dimension.30400

  --primitive-dimension-30400

  Value

  76rem · 1216px

Scaled: full width is 96rem (1536px)

• dimension.breakpoint.250

  --primitive-dimension-breakpoint-250

  Value

  40rem · 640px

• dimension.breakpoint.300

  --primitive-dimension-breakpoint-300

  Value

  48rem · 768px

• dimension.breakpoint.400

  --primitive-dimension-breakpoint-400

  Value

  64rem · 1024px

• dimension.breakpoint.500

  --primitive-dimension-breakpoint-500

  Value

  80rem · 1280px

• dimension.breakpoint.600

  --primitive-dimension-breakpoint-600

  Value

  96rem · 1536px

• fontFamily.mono

  --primitive-font-family-mono

  Stack

  "Commit Mono", "SFMono-Regular", ui-monospace, "Menlo", "Monaco", "Consolas", monospace

  Aa Gg 0123

• fontFamily.sansSerif

  --primitive-font-family-sans-serif

  Stack

  "Inter", "Helvetica Neue", "Arial", sans-serif

  Aa Gg 0123

• fontFamily.serif

  --primitive-font-family-serif

  Stack

  "Mallos Serif", "Georgia", serif

  Aa Gg 0123

• dimension.fontSize.100

  --primitive-dimension-font-size-100

  Value

  0.625rem · 10px

  Sphinx of black quartz, judge my vow.

• dimension.fontSize.200

  --primitive-dimension-font-size-200

  Value

  0.75rem · 12px

  Sphinx of black quartz, judge my vow.

• dimension.fontSize.300

  --primitive-dimension-font-size-300

  Value

  0.875rem · 14px

  Sphinx of black quartz, judge my vow.

• dimension.fontSize.400

  --primitive-dimension-font-size-400

  Value

  1rem · 16px

  Sphinx of black quartz, judge my vow.

• dimension.fontSize.500

  --primitive-dimension-font-size-500

  Value

  1.125rem · 18px

  Sphinx of black quartz, judge my vow.

• dimension.fontSize.600

  --primitive-dimension-font-size-600

  Value

  1.3125rem · 21px

  Sphinx of black quartz, judge my vow.

• dimension.fontSize.700

  --primitive-dimension-font-size-700

  Value

  1.5rem · 24px

  Sphinx of black quartz, judge my vow.

• dimension.fontSize.800

  --primitive-dimension-font-size-800

  Value

  1.75rem · 28px

  Sphinx of black quartz, judge my vow.

• dimension.fontSize.900

  --primitive-dimension-font-size-900

  Value

  2rem · 32px

  Sphinx of black quartz, judge my vow.

• dimension.fontSize.1000

  --primitive-dimension-font-size-1000

  Value

  2.25rem · 36px

  Sphinx of black quartz, judge my vow.

• dimension.fontSize.1100

  --primitive-dimension-font-size-1100

  Value

  2.625rem · 42px

  Sphinx of black quartz, judge my vow.

• dimension.fontSize.1200

  --primitive-dimension-font-size-1200

  Value

  3rem · 48px

  Sphinx of black quartz, judge my vow.

• dimension.fontSize.1300

  --primitive-dimension-font-size-1300

  Value

  3.4375rem · 55px

  Sphinx of black quartz, judge my vow.

• dimension.fontSize.1400

  --primitive-dimension-font-size-1400

  Value

  3.9375rem · 63px

  Sphinx of black quartz, judge my vow.

• dimension.fontSize.1500

  --primitive-dimension-font-size-1500

  Value

  4.5625rem · 73px

  Sphinx of black quartz, judge my vow.

• dimension.fontSize.1600

  --primitive-dimension-font-size-1600

  Value

  5.25rem · 84px

  Sphinx of black quartz, judge my vow.

• dimension.fontSize.1700

  --primitive-dimension-font-size-1700

  Value

  6rem · 96px

  Sphinx of black quartz, judge my vow.

• fontWeight.100

  --primitive-font-weight-100

  Thin.

  Weight

  100

  Aa Gg 0123

• fontWeight.200

  --primitive-font-weight-200

  Extra light.

  Weight

  200

  Aa Gg 0123

• fontWeight.300

  --primitive-font-weight-300

  Light.

  Weight

  300

  Aa Gg 0123

• fontWeight.400

  --primitive-font-weight-400

  Normal (regular).

  Weight

  400

  Aa Gg 0123

• fontWeight.450

  --primitive-font-weight-450

  Half a step between 400 and 500. Needs a variable font; static fonts render the nearest weight.

  Weight

  450

  Aa Gg 0123

• fontWeight.500

  --primitive-font-weight-500

  Medium.

  Weight

  500

  Aa Gg 0123

• fontWeight.550

  --primitive-font-weight-550

  Half a step between 500 and 600. Needs a variable font; static fonts render the nearest weight.

  Weight

  550

  Aa Gg 0123

• fontWeight.600

  --primitive-font-weight-600

  Semi-bold.

  Weight

  600

  Aa Gg 0123

• fontWeight.700

  --primitive-font-weight-700

  Bold.

  Weight

  700

  Aa Gg 0123

• fontWeight.800

  --primitive-font-weight-800

  Extra bold.

  Weight

  800

  Aa Gg 0123

• fontWeight.900

  --primitive-font-weight-900

  Black.

  Weight

  900

  Aa Gg 0123

• fontWeight.950

  --primitive-font-weight-950

  Extra black.

  Weight

  950

  Aa Gg 0123

• number.lineHeight.100

  --primitive-number-line-height-100

  Value

  1.2

  Sphinx of black quartz

• number.lineHeight.200

  --primitive-number-line-height-200

  Value

  1.333333

  Sphinx of black quartz

• number.lineHeight.300

  --primitive-number-line-height-300

  Value

  1.428571

  Sphinx of black quartz

• number.lineHeight.400

  --primitive-number-line-height-400

  Value

  1.5

  Sphinx of black quartz

• number.lineHeight.500

  --primitive-number-line-height-500

  Value

  1.333333

  Sphinx of black quartz

• number.lineHeight.600

  --primitive-number-line-height-600

  Value

  1.333333

  Sphinx of black quartz

• number.lineHeight.700

  --primitive-number-line-height-700

  Value

  1.333333

  Sphinx of black quartz

• number.lineHeight.800

  --primitive-number-line-height-800

  Value

  1.285714

  Sphinx of black quartz

• number.lineHeight.900

  --primitive-number-line-height-900

  Value

  1.25

  Sphinx of black quartz

• number.lineHeight.1000

  --primitive-number-line-height-1000

  Value

  1.333333

  Sphinx of black quartz

• number.lineHeight.1100

  --primitive-number-line-height-1100

  Value

  1.238095

  Sphinx of black quartz

• number.lineHeight.1200

  --primitive-number-line-height-1200

  Value

  1.166667

  Sphinx of black quartz

• number.lineHeight.1300

  --primitive-number-line-height-1300

  Value

  1.163636

  Sphinx of black quartz

• number.lineHeight.1400

  --primitive-number-line-height-1400

  Value

  1.142857

  Sphinx of black quartz

• number.lineHeight.1500

  --primitive-number-line-height-1500

  Value

  1.09589

  Sphinx of black quartz

• number.lineHeight.1600

  --primitive-number-line-height-1600

  Value

  1.142857

  Sphinx of black quartz

• number.lineHeight.1700

  --primitive-number-line-height-1700

  Value

  1.083333

  Sphinx of black quartz

• dimension.letterSpacing.normal

  --primitive-dimension-letter-spacing-normal

  Uses the font's default letter spacing without additional tracking.

  Value

  0rem

• number.fontScale.9375

  --primitive-number-font-scale-9375

  Value

  0.9375

• dimension.radius.100

  --primitive-dimension-radius-100

  Value

  0.1875rem · 3px

• dimension.radius.200

  --primitive-dimension-radius-200

  Value

  0.375rem · 6px

• dimension.radius.300

  --primitive-dimension-radius-300

  Value

  0.75rem · 12px

• dimension.radius.full

  --primitive-dimension-radius-full

  Value

  100rem · 1600px

• dimension.borderWidth.100

  --primitive-dimension-border-width-100

  Value

  1px

• dimension.borderWidth.200

  --primitive-dimension-border-width-200

  Value

  2px

• dimension.borderWidth.300

  --primitive-dimension-border-width-300

  Value

  4px

• number.scale.900

  --primitive-number-scale-900

  Value

  0.9

• number.scale.980

  --primitive-number-scale-980

  Value

  0.98

• number.scale.1000

  --primitive-number-scale-1000

  Value

  1

• number.layer.below

  --primitive-number-layer-below

  Value

  -1

• number.layer.1

  --primitive-number-layer-1

  Value

  1

• number.layer.10

  --primitive-number-layer-10

  Value

  10

• number.layer.100

  --primitive-number-layer-100

  Value

  100

• number.layer.1000

  --primitive-number-layer-1000

  Value

  1000

• number.opacity.0

  --primitive-number-opacity-0

  Value

  0

• number.opacity.150

  --primitive-number-opacity-150

  Value

  0.15

• number.opacity.250

  --primitive-number-opacity-250

  Value

  0.25

• number.opacity.400

  --primitive-number-opacity-400

  Value

  0.4

• number.opacity.600

  --primitive-number-opacity-600

  Value

  0.6

• number.opacity.1000

  --primitive-number-opacity-1000

  Value

  1

• duration.0

  --primitive-duration-0

  Value

  0ms

• duration.150

  --primitive-duration-150

  Value

  150ms

• duration.200

  --primitive-duration-200

  Value

  200ms

• duration.300

  --primitive-duration-300

  Value

  300ms

• duration.450

  --primitive-duration-450

  Value

  450ms

• duration.600

  --primitive-duration-600

  Value

  600ms

• duration.1000

  --primitive-duration-1000

  Value

  1000ms

• duration.2000

  --primitive-duration-2000

  Value

  2000ms

• cubicBezier.easeInOut.cubic

  --primitive-cubic-bezier-ease-in-out-cubic

  Value

  cubic-bezier(0.65, 0, 0.35, 1)

• cubicBezier.easeOut

  --primitive-cubic-bezier-ease-out

  The CSS ease-out curve.

  Value

  cubic-bezier(0, 0, 0.58, 1)

• cubicBezier.easeOut.back

  --primitive-cubic-bezier-ease-out-back

  Passes its target by about 4.6% halfway through, then settles; gentler than the common back curve (about 10%).

  Value

  cubic-bezier(0.2, 1.37, 0.4, 1)

• cubicBezier.easeOut.cubic

  --primitive-cubic-bezier-ease-out-cubic

  Value

  cubic-bezier(0.33, 1, 0.68, 1)

• cubicBezier.easeOut.quart

  --primitive-cubic-bezier-ease-out-quart

  Value

  cubic-bezier(0.25, 1, 0.5, 1)

• cubicBezier.easeOut.quint

  --primitive-cubic-bezier-ease-out-quint

  Value

  cubic-bezier(0.22, 1, 0.36, 1)