Scale Tokens - Elements Manual

The theme-independent primitives: type, spacing, radius, shadow, motion, and layering. They do not change between light and dark, or between themes.

Consume these instead of hardcoding pixel values.

text

--text-2xs:                  0.6875rem
--text-xs:                   0.75rem
--text-sm:                   0.875rem
--text-base:                 1rem
--text-md:                   1.125rem
--text-lg:                   1.25rem
--text-xl:                   1.5rem
--text-2xl:                  1.875rem
--text-3xl:                  2.25rem
--text-4xl:                  3rem
--text-5xl:                  3.75rem
--text-6xl:                  4.5rem
--text-7xl:                  6rem
--text-8xl:                  8rem

weight

--weight-thin:               100
--weight-light:              300
--weight-regular:            400
--weight-medium:             500
--weight-semibold:           600
--weight-bold:               700
--weight-black:              900

leading

--leading-none:              1
--leading-tight:             1.15
--leading-snug:              1.3
--leading-body:              1.5
--leading-relaxed:           1.65
--leading-loose:             1.85

tracking

--tracking-tighter:          -0.04em
--tracking-tight:            -0.02em
--tracking-snug:             -0.01em
--tracking-normal:           0
--tracking-wide:             0.02em
--tracking-wider:            0.06em
--tracking-widest:           0.14em

font

--font-sans:                 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"
--font-serif:                ui-serif, Georgia, Cambria, "Times New Roman", Times, serif
--font-mono:                 ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace

space

--space-0:                   0
--space-px:                  1px
--space-0-5:                 0.125rem
--space-1:                   0.25rem
--space-1-5:                 0.375rem
--space-2:                   0.5rem
--space-2-5:                 0.625rem
--space-3:                   0.75rem
--space-3-5:                 0.875rem
--space-4:                   1rem
--space-5:                   1.25rem
--space-6:                   1.5rem
--space-7:                   1.75rem
--space-8:                   2rem
--space-9:                   2.25rem
--space-10:                  2.5rem
--space-11:                  2.75rem
--space-12:                  3rem
--space-14:                  3.5rem
--space-16:                  4rem
--space-20:                  5rem
--space-24:                  6rem
--space-28:                  7rem
--space-32:                  8rem
--space-40:                  10rem
--space-48:                  12rem
--space-56:                  14rem
--space-64:                  16rem

radius

--radius-none:               0
--radius-xs:                 2px
--radius-sm:                 4px
--radius-md:                 6px
--radius-lg:                 8px
--radius-xl:                 12px
--radius-2xl:                16px
--radius-3xl:                24px
--radius-4xl:                32px
--radius-full:               9999px

shadow

--shadow-xs:                 0 1px 2px 0 rgb(15 23 42 / 0.04)
--shadow-sm:                 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04)
--shadow-md:                 0 4px 6px -1px rgb(15 23 42 / 0.07), 0 2px 4px -2px rgb(15 23 42 / 0.05)
--shadow-lg:                 0 10px 15px -3px rgb(15 23 42 / 0.08), 0 4px 6px -4px rgb(15 23 42 / 0.04)
--shadow-xl:                 0 20px 25px -5px rgb(15 23 42 / 0.09), 0 8px 10px -6px rgb(15 23 42 / 0.04)
--shadow-2xl:                0 25px 50px -12px rgb(15 23 42 / 0.18)
--shadow-inner:              inset 0 2px 4px 0 rgb(15 23 42 / 0.04)

duration

--duration-instant:          80ms
--duration-fast:             120ms
--duration-normal:           180ms
--duration-slow:             280ms
--duration-slower:           500ms

ease

--ease-linear:               linear
--ease-out:                  cubic-bezier(0.22, 1, 0.36, 1)
--ease-in:                   cubic-bezier(0.55, 0, 1, 0.45)
--ease-in-out:               cubic-bezier(0.65, 0, 0.35, 1)
--ease-spring:               cubic-bezier(0.16, 1, 0.3, 1)

z

--z-base:                    0
--z-raised:                  10
--z-sticky:                  100
--z-fixed:                   200
--z-overlay:                 1000
--z-modal:                   1010
--z-popover:                 1020
--z-dropdown:                1030
--z-tooltip:                 1040
--z-toast:                   1050
--z-top:                     2147483647

bp

--bp-sm:                     40rem
--bp-md:                     48rem
--bp-lg:                     64rem
--bp-xl:                     80rem
--bp-2xl:                    96rem

container

--container-xs:              20rem
--container-sm:              24rem
--container-md:              28rem
--container-lg:              32rem
--container-xl:              36rem
--container-2xl:             42rem
--container-3xl:             48rem
--container-4xl:             56rem
--container-5xl:             64rem
--container-6xl:             72rem
--container-7xl:             80rem
--container-prose:           65ch
--container-shell:           72rem
--container-wide:            80rem
--container-padding:         var(--space-8)

measure

--measure:                   68ch