Variables · Zyzz

Colors

Standalone Colors

black: #000
foreground: #171717
white: #fff

Amber

100: #fff6e5
200: #fff4d6
300: #fef0cd
400: #ffdd8f
500: #ffc96b
600: #f5b047
700: #ffb224
800: #ff990a
900: #a35200
1000: #4e2009

Background

primary: #fafafa
surface: #fff

Blue

100: #f0f7ff
200: #ebf5ff
300: #e0f0ff
400: #cce6ff
500: #99ceff
600: #52aeff
700: #0072f5
800: #0062d1
900: #0068d6
1000: #00254d

Gray

100: #f2f2f2
200: #ebebeb
300: #e6e6e6
400: #ebebeb
500: #c9c9c9
600: #a8a8a8
700: #8f8f8f
800: #7d7d7d
900: #4d4d4d
1000: #171717

Gray Alpha

100: #0000000d
200: #00000014
300: #0000001a
400: #00000014
500: #00000036
600: #00000057
700: #00000070
800: #00000082
900: #000000b3
1000: #000000e8

Green

100: #effbef
200: #ebfaeb
300: #daf6da
400: #c6f1c7
500: #99e69e
600: #6cda75
700: #45a557
800: #398e4a
900: #297a3a
1000: #1b311e

Pink

100: #ffebf5
200: #feecf2
300: #fce3ec
400: #f9d7e2
500: #f5b8cc
600: #ee87a7
700: #ea3e83
800: #df2670
900: #bd2864
1000: #430a23

Purple

100: #f9f0ff
200: #f9f1fe
300: #f4e8fc
400: #eddcf9
500: #d5b1f1
600: #bf89ec
700: #8e4ec6
800: #763da9
900: #7820bc
1000: #2e004d

Red

100: #fff0f0
200: #ffebeb
300: #ffe5e5
400: #fdd8d8
500: #f8b9b9
600: #f87275
700: #e5484d
800: #da2f35
900: #cb2a2f
1000: #391417

Teal

100: #eefcf9
200: #e5faf6
300: #d4f7f0
400: #bef4eb
500: #86ead9
600: #45dec5
700: #12a594
800: #0d8c7d
900: #067a6e
1000: #073c34

Typography

Buttons

vars.typography.button[12]

Styles that scale.

Variables

vars.typography.button[12].fontSize: 12px
vars.typography.button[12].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.button[12].fontWeight: 500
vars.typography.button[12].letterSpacing: 0px
vars.typography.button[12].lineHeight: 16px

vars.typography.button[14]

Styles that scale.

Variables

vars.typography.button[14].fontSize: 14px
vars.typography.button[14].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.button[14].fontWeight: 500
vars.typography.button[14].letterSpacing: 0px
vars.typography.button[14].lineHeight: 20px

vars.typography.button[16]

Styles that scale.

Variables

vars.typography.button[16].fontSize: 16px
vars.typography.button[16].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.button[16].fontWeight: 500
vars.typography.button[16].letterSpacing: 0px
vars.typography.button[16].lineHeight: 20px

Body Text

vars.typography.copy[13]

Write type-safe styles, variables, and themes. Compile to static CSS. Keep your styles close to your code.

Variables

vars.typography.copy[13].fontSize: 13px
vars.typography.copy[13].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.copy[13].fontWeight: 400
vars.typography.copy[13].letterSpacing: 0px
vars.typography.copy[13].lineHeight: 18px

vars.typography.copy[13].mono

Write type-safe styles, variables, and themes. Compile to static CSS. Keep your styles close to your code.

Variables

vars.typography.copy[13].mono.fontSize: 13px
vars.typography.copy[13].mono.fontFamily: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
vars.typography.copy[13].mono.fontWeight: 400
vars.typography.copy[13].mono.letterSpacing: 0px
vars.typography.copy[13].mono.lineHeight: 18px

vars.typography.copy[14]

Write type-safe styles, variables, and themes. Compile to static CSS. Keep your styles close to your code.

Variables

vars.typography.copy[14].fontSize: 14px
vars.typography.copy[14].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.copy[14].fontWeight: 400
vars.typography.copy[14].letterSpacing: 0px
vars.typography.copy[14].lineHeight: 20px

vars.typography.copy[14].strong

Write type-safe styles, variables, and themes. Compile to static CSS. Keep your styles close to your code.

Variables

vars.typography.copy[14].strong.fontSize: 14px
vars.typography.copy[14].strong.fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.copy[14].strong.fontWeight: 550
vars.typography.copy[14].strong.letterSpacing: 0px
vars.typography.copy[14].strong.lineHeight: 20px

vars.typography.copy[16]

Write type-safe styles, variables, and themes. Compile to static CSS. Keep your styles close to your code.

Variables

vars.typography.copy[16].fontSize: 16px
vars.typography.copy[16].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.copy[16].fontWeight: 400
vars.typography.copy[16].letterSpacing: 0px
vars.typography.copy[16].lineHeight: 24px

vars.typography.copy[16].strong

Write type-safe styles, variables, and themes. Compile to static CSS. Keep your styles close to your code.

Variables

vars.typography.copy[16].strong.fontSize: 16px
vars.typography.copy[16].strong.fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.copy[16].strong.fontWeight: 550
vars.typography.copy[16].strong.letterSpacing: 0px
vars.typography.copy[16].strong.lineHeight: 24px

vars.typography.copy[18]

Write type-safe styles, variables, and themes. Compile to static CSS. Keep your styles close to your code.

Variables

vars.typography.copy[18].fontSize: 18px
vars.typography.copy[18].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.copy[18].fontWeight: 400
vars.typography.copy[18].letterSpacing: 0px
vars.typography.copy[18].lineHeight: 28px

vars.typography.copy[18].strong

Write type-safe styles, variables, and themes. Compile to static CSS. Keep your styles close to your code.

Variables

vars.typography.copy[18].strong.fontSize: 18px
vars.typography.copy[18].strong.fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.copy[18].strong.fontWeight: 550
vars.typography.copy[18].strong.letterSpacing: 0px
vars.typography.copy[18].strong.lineHeight: 28px

vars.typography.copy[20]

Write type-safe styles, variables, and themes. Compile to static CSS. Keep your styles close to your code.

Variables

vars.typography.copy[20].fontSize: 20px
vars.typography.copy[20].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.copy[20].fontWeight: 400
vars.typography.copy[20].letterSpacing: 0px
vars.typography.copy[20].lineHeight: 28px

vars.typography.copy[20].strong

Write type-safe styles, variables, and themes. Compile to static CSS. Keep your styles close to your code.

Variables

vars.typography.copy[20].strong.fontSize: 20px
vars.typography.copy[20].strong.fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.copy[20].strong.fontWeight: 550
vars.typography.copy[20].strong.letterSpacing: 0px
vars.typography.copy[20].strong.lineHeight: 28px

vars.typography.copy[24]

Write type-safe styles, variables, and themes. Compile to static CSS. Keep your styles close to your code.

Variables

vars.typography.copy[24].fontSize: 24px
vars.typography.copy[24].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.copy[24].fontWeight: 400
vars.typography.copy[24].letterSpacing: 0px
vars.typography.copy[24].lineHeight: 36px

vars.typography.copy[24].strong

Write type-safe styles, variables, and themes. Compile to static CSS. Keep your styles close to your code.

Variables

vars.typography.copy[24].strong.fontSize: 24px
vars.typography.copy[24].strong.fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.copy[24].strong.fontWeight: 550
vars.typography.copy[24].strong.letterSpacing: 0px
vars.typography.copy[24].strong.lineHeight: 36px

Headings

vars.typography.heading[14]

Styles that scale.

Variables

vars.typography.heading[14].fontSize: 14px
vars.typography.heading[14].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.heading[14].fontWeight: 600
vars.typography.heading[14].letterSpacing: -.28px
vars.typography.heading[14].lineHeight: 20px

vars.typography.heading[16]

Styles that scale.

Variables

vars.typography.heading[16].fontSize: 16px
vars.typography.heading[16].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.heading[16].fontWeight: 600
vars.typography.heading[16].letterSpacing: -.32px
vars.typography.heading[16].lineHeight: 24px

vars.typography.heading[16].subtle

Styles that scale.

Variables

vars.typography.heading[16].subtle.fontSize: 16px
vars.typography.heading[16].subtle.fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.heading[16].subtle.fontWeight: 500
vars.typography.heading[16].subtle.letterSpacing: -.32px
vars.typography.heading[16].subtle.lineHeight: 24px

vars.typography.heading[20]

Styles that scale.

Variables

vars.typography.heading[20].fontSize: 20px
vars.typography.heading[20].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.heading[20].fontWeight: 600
vars.typography.heading[20].letterSpacing: -.4px
vars.typography.heading[20].lineHeight: 26px

vars.typography.heading[20].subtle

Styles that scale.

Variables

vars.typography.heading[20].subtle.fontSize: 20px
vars.typography.heading[20].subtle.fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.heading[20].subtle.fontWeight: 500
vars.typography.heading[20].subtle.letterSpacing: -.4px
vars.typography.heading[20].subtle.lineHeight: 26px

vars.typography.heading[24]

Styles that scale.

Variables

vars.typography.heading[24].fontSize: 24px
vars.typography.heading[24].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.heading[24].fontWeight: 600
vars.typography.heading[24].letterSpacing: -.96px
vars.typography.heading[24].lineHeight: 32px

vars.typography.heading[24].subtle

Styles that scale.

Variables

vars.typography.heading[24].subtle.fontSize: 24px
vars.typography.heading[24].subtle.fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.heading[24].subtle.fontWeight: 500
vars.typography.heading[24].subtle.letterSpacing: -.96px
vars.typography.heading[24].subtle.lineHeight: 32px

vars.typography.heading[32]

Styles that scale.

Variables

vars.typography.heading[32].fontSize: 32px
vars.typography.heading[32].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.heading[32].fontWeight: 600
vars.typography.heading[32].letterSpacing: -1.28px
vars.typography.heading[32].lineHeight: 40px

vars.typography.heading[32].subtle

Styles that scale.

Variables

vars.typography.heading[32].subtle.fontSize: 32px
vars.typography.heading[32].subtle.fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.heading[32].subtle.fontWeight: 500
vars.typography.heading[32].subtle.letterSpacing: -1.28px
vars.typography.heading[32].subtle.lineHeight: 40px

vars.typography.heading[40]

Styles that scale.

Variables

vars.typography.heading[40].fontSize: 40px
vars.typography.heading[40].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.heading[40].fontWeight: 600
vars.typography.heading[40].letterSpacing: -2.4px
vars.typography.heading[40].lineHeight: 48px

vars.typography.heading[48]

Styles that scale.

Variables

vars.typography.heading[48].fontSize: 48px
vars.typography.heading[48].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.heading[48].fontWeight: 600
vars.typography.heading[48].letterSpacing: -2.88px
vars.typography.heading[48].lineHeight: 56px

vars.typography.heading[56]

Styles that scale.

Variables

vars.typography.heading[56].fontSize: 56px
vars.typography.heading[56].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.heading[56].fontWeight: 600
vars.typography.heading[56].letterSpacing: -3.36px
vars.typography.heading[56].lineHeight: 56px

vars.typography.heading[64]

Styles that scale.

Variables

vars.typography.heading[64].fontSize: 64px
vars.typography.heading[64].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.heading[64].fontWeight: 600
vars.typography.heading[64].letterSpacing: -3.84px
vars.typography.heading[64].lineHeight: 64px

vars.typography.heading[72]

Styles that scale.

Variables

vars.typography.heading[72].fontSize: 72px
vars.typography.heading[72].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.heading[72].fontWeight: 600
vars.typography.heading[72].letterSpacing: -4.32px
vars.typography.heading[72].lineHeight: 72px

Labels

vars.typography.label[12]

Styles that scale.

Variables

vars.typography.label[12].fontSize: 12px
vars.typography.label[12].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.label[12].fontWeight: 400
vars.typography.label[12].letterSpacing: 0px
vars.typography.label[12].lineHeight: 16px

vars.typography.label[12].mono

Styles that scale.

Variables

vars.typography.label[12].mono.fontSize: 12px
vars.typography.label[12].mono.fontFamily: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
vars.typography.label[12].mono.fontWeight: 400
vars.typography.label[12].mono.letterSpacing: 0px
vars.typography.label[12].mono.lineHeight: 16px

vars.typography.label[12].strong

Styles that scale.

Variables

vars.typography.label[12].strong.fontSize: 12px
vars.typography.label[12].strong.fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.label[12].strong.fontWeight: 500
vars.typography.label[12].strong.letterSpacing: 0px
vars.typography.label[12].strong.lineHeight: 16px

vars.typography.label[13]

Styles that scale.

Variables

vars.typography.label[13].fontSize: 13px
vars.typography.label[13].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.label[13].fontWeight: 400
vars.typography.label[13].letterSpacing: 0px
vars.typography.label[13].lineHeight: 16px

vars.typography.label[13].mono

Styles that scale.

Variables

vars.typography.label[13].mono.fontSize: 13px
vars.typography.label[13].mono.fontFamily: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
vars.typography.label[13].mono.fontWeight: 400
vars.typography.label[13].mono.letterSpacing: 0px
vars.typography.label[13].mono.lineHeight: 20px

vars.typography.label[13].strong

Styles that scale.

Variables

vars.typography.label[13].strong.fontSize: 13px
vars.typography.label[13].strong.fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.label[13].strong.fontWeight: 500
vars.typography.label[13].strong.letterSpacing: 0px
vars.typography.label[13].strong.lineHeight: 16px

vars.typography.label[14]

Styles that scale.

Variables

vars.typography.label[14].fontSize: 14px
vars.typography.label[14].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.label[14].fontWeight: 400
vars.typography.label[14].letterSpacing: 0px
vars.typography.label[14].lineHeight: 20px

vars.typography.label[14].mono

Styles that scale.

Variables

vars.typography.label[14].mono.fontSize: 14px
vars.typography.label[14].mono.fontFamily: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
vars.typography.label[14].mono.fontWeight: 400
vars.typography.label[14].mono.letterSpacing: 0px
vars.typography.label[14].mono.lineHeight: 20px

vars.typography.label[14].strong

Styles that scale.

Variables

vars.typography.label[14].strong.fontSize: 14px
vars.typography.label[14].strong.fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.label[14].strong.fontWeight: 500
vars.typography.label[14].strong.letterSpacing: 0px
vars.typography.label[14].strong.lineHeight: 20px

vars.typography.label[16]

Styles that scale.

Variables

vars.typography.label[16].fontSize: 16px
vars.typography.label[16].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.label[16].fontWeight: 400
vars.typography.label[16].letterSpacing: 0px
vars.typography.label[16].lineHeight: 20px

vars.typography.label[16].strong

Styles that scale.

Variables

vars.typography.label[16].strong.fontSize: 16px
vars.typography.label[16].strong.fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.label[16].strong.fontWeight: 500
vars.typography.label[16].strong.letterSpacing: 0px
vars.typography.label[16].strong.lineHeight: 20px

vars.typography.label[18]

Styles that scale.

Variables

vars.typography.label[18].fontSize: 18px
vars.typography.label[18].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.label[18].fontWeight: 400
vars.typography.label[18].letterSpacing: 0px
vars.typography.label[18].lineHeight: 20px

vars.typography.label[20]

Styles that scale.

Variables

vars.typography.label[20].fontSize: 20px
vars.typography.label[20].fontFamily: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.typography.label[20].fontWeight: 400
vars.typography.label[20].letterSpacing: 0px
vars.typography.label[20].lineHeight: 32px

Animation

vars.animate.spin: z-kid-zyzz_2d_spin 1s linear infinite
vars.animate.ping: z-kid-zyzz_2d_ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
vars.animate.pulse: z-kid-zyzz_2d_pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
vars.animate.bounce: z-kid-zyzz_2d_bounce 1s infinite

Aspect Ratio

vars.aspect.video: 16 / 9

Blur

vars.blur.xs: 4px
vars.blur.sm: 8px
vars.blur.md: 12px
vars.blur.lg: 16px
vars.blur.xl: 24px
vars.blur["2xl"]: 40px
vars.blur["3xl"]: 64px

Breakpoints

vars.breakpoint.sm: 40rem
vars.breakpoint.md: 48rem
vars.breakpoint.lg: 64rem
vars.breakpoint.xl: 80rem
vars.breakpoint["2xl"]: 96rem

Containers

vars.container["3xs"]: 16rem
vars.container["2xs"]: 18rem
vars.container.xs: 20rem
vars.container.sm: 24rem
vars.container.md: 28rem
vars.container.lg: 32rem
vars.container.xl: 36rem
vars.container["2xl"]: 42rem
vars.container["3xl"]: 48rem
vars.container["4xl"]: 56rem
vars.container["5xl"]: 64rem
vars.container["6xl"]: 72rem
vars.container["7xl"]: 80rem

Drop Shadow

vars.dropShadow.xs: 0 1px 1px rgb(0 0 0 / 0.05)
vars.dropShadow.sm: 0 1px 2px rgb(0 0 0 / 0.15)
vars.dropShadow.md: 0 3px 3px rgb(0 0 0 / 0.12)
vars.dropShadow.lg: 0 4px 4px rgb(0 0 0 / 0.15)
vars.dropShadow.xl: 0 9px 7px rgb(0 0 0 / 0.1)
vars.dropShadow["2xl"]: 0 25px 25px rgb(0 0 0 / 0.15)

Easing

vars.ease.in: Hover or focus
cubic-bezier(0.4, 0, 1, 1)
vars.ease.out: Hover or focus
cubic-bezier(0, 0, 0.2, 1)
vars.ease["in-out"]: Hover or focus
cubic-bezier(0.4, 0, 0.2, 1)

Font Family

vars.fontFamily.mono: Styles for modern interfaces
"Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
vars.fontFamily.sans: Styles for modern interfaces
Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
vars.fontFamily.serif: Styles for modern interfaces
ui-serif, Georgia, Cambria, "Times New Roman", Times, serif

vars.fontSize.xs: Styles for modern interfaces
0.75rem
vars.fontSize.sm: Styles for modern interfaces
0.875rem
vars.fontSize.base: Styles for modern interfaces
1rem
vars.fontSize.lg: Styles for modern interfaces
1.125rem
vars.fontSize.xl: Styles for modern interfaces
1.25rem
vars.fontSize["2xl"]: Styles for modern interfaces
1.5rem
vars.fontSize["3xl"]: Styles for modern interfaces
1.875rem
vars.fontSize["4xl"]: Styles for modern interfaces
2.25rem
vars.fontSize["5xl"]: Styles for modern interfaces
3rem
vars.fontSize["6xl"]: Styles for modern interfaces
3.75rem
vars.fontSize["7xl"]: Styles for modern interfaces
4.5rem
vars.fontSize["8xl"]: Styles for modern interfaces
6rem
vars.fontSize["9xl"]: Styles for modern interfaces
8rem

Font Weight

vars.fontWeight.thin: Styles for modern interfaces
100
vars.fontWeight.extralight: Styles for modern interfaces
200
vars.fontWeight.light: Styles for modern interfaces
300
vars.fontWeight.normal: Styles for modern interfaces
400
vars.fontWeight.medium: Styles for modern interfaces
500
vars.fontWeight.semibold: Styles for modern interfaces
600
vars.fontWeight.bold: Styles for modern interfaces
700
vars.fontWeight.extrabold: Styles for modern interfaces
800
vars.fontWeight.black: Styles for modern interfaces
900

Inset Shadow

vars.insetShadow["2xs"]: inset 0 1px rgb(0 0 0 / 0.05)
vars.insetShadow.xs: inset 0 1px 1px rgb(0 0 0 / 0.05)
vars.insetShadow.sm: inset 0 2px 4px rgb(0 0 0 / 0.05)

Letter Spacing

vars.letterSpacing.tighter: Styles for modern interfaces
-0.05em
vars.letterSpacing.tight: Styles for modern interfaces
-0.025em
vars.letterSpacing.normal: Styles for modern interfaces
0em
vars.letterSpacing.wide: Styles for modern interfaces
0.025em
vars.letterSpacing.wider: Styles for modern interfaces
0.05em
vars.letterSpacing.widest: Styles for modern interfaces
0.1em

Line Height

vars.lineHeight.tight: Styles for modern interfaces. Keep styles close to your code.
1.25
vars.lineHeight.snug: Styles for modern interfaces. Keep styles close to your code.
1.375
vars.lineHeight.normal: Styles for modern interfaces. Keep styles close to your code.
1.5
vars.lineHeight.relaxed: Styles for modern interfaces. Keep styles close to your code.
1.625
vars.lineHeight.loose: Styles for modern interfaces. Keep styles close to your code.
2

Perspective

vars.perspective.dramatic: 100px
vars.perspective.near: 300px
vars.perspective.normal: 500px
vars.perspective.midrange: 800px
vars.perspective.distant: 1200px

Border Radius

vars.radius.xs: 0.125rem
vars.radius.sm: 0.25rem
vars.radius.md: 0.375rem
vars.radius.lg: 0.5rem
vars.radius.xl: 0.75rem
vars.radius["2xl"]: 1rem
vars.radius["3xl"]: 1.5rem
vars.radius["4xl"]: 2rem

Box Shadow

vars.shadow["2xs"]: 0 1px rgb(0 0 0 / 0.05)
vars.shadow.xs: 0 1px 2px 0 rgb(0 0 0 / 0.05)
vars.shadow.sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)
vars.shadow.md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
vars.shadow.lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
vars.shadow.xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)
vars.shadow["2xl"]: 0 25px 50px -12px rgb(0 0 0 / 0.25)
vars.shadow.inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05)

Spacing

vars.spacing[0]: 0rem
vars.spacing[1]: 0.25rem
vars.spacing[2]: 0.5rem
vars.spacing[3]: 0.75rem
vars.spacing[4]: 1rem
vars.spacing[5]: 1.25rem
vars.spacing[6]: 1.5rem
vars.spacing[7]: 1.75rem
vars.spacing[8]: 2rem
vars.spacing[9]: 2.25rem
vars.spacing[10]: 2.5rem
vars.spacing[11]: 2.75rem
vars.spacing[12]: 3rem
vars.spacing[14]: 3.5rem
vars.spacing[16]: 4rem
vars.spacing[20]: 5rem
vars.spacing[24]: 6rem
vars.spacing[28]: 7rem
vars.spacing[32]: 8rem
vars.spacing[36]: 9rem
vars.spacing[40]: 10rem
vars.spacing[44]: 11rem
vars.spacing[48]: 12rem
vars.spacing[52]: 13rem
vars.spacing[56]: 14rem
vars.spacing[60]: 15rem
vars.spacing[64]: 16rem
vars.spacing[72]: 18rem
vars.spacing[80]: 20rem
vars.spacing[96]: 24rem
vars.spacing.px: 1px

Text Shadow

vars.textShadow["2xs"]: Styles for modern interfaces
0px 1px 0px rgb(0 0 0 / 0.15)
vars.textShadow.xs: Styles for modern interfaces
0px 1px 1px rgb(0 0 0 / 0.2)
vars.textShadow.sm: Styles for modern interfaces
0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075)
vars.textShadow.md: Styles for modern interfaces
0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1)
vars.textShadow.lg: Styles for modern interfaces
0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1)

Colors

Standalone Colors

Amber

Background

Blue

Gray

Gray Alpha

Green

Pink

Purple

Red

Teal

Typography

Buttons

Body Text

Headings

Labels

Animation

Aspect Ratio

Blur

Breakpoints

Containers

Drop Shadow

Easing

Font Family

Font Size

Font Weight

Inset Shadow

Letter Spacing

Line Height

Perspective

Border Radius

Box Shadow

Spacing

Text Shadow