Design Tokens

Plex UI ships a set of CSS custom properties (design tokens) that drive all visual styling — spacing, radii, shadows, and more. Use these tokens in your own components to stay consistent with the system. Each token maps to a var(--plex-*) custom property that you can reference in Tailwind classes or plain CSS.

Text colors

		gray-1000gray-1000
		gray-500gray-700
		gray-400gray-600
		gray-0gray-0

Semantic colors

		gray-1000gray-1000
		gray-100gray-300
		gray-150gray-350
		gray-200gray-400
		alpha-08alpha-12
		alpha-12alpha-16
		alpha-16alpha-20
		color-textcolor-text
		alpha-02alpha-02
		alpha-06alpha-06
		color-textcolor-text
		alpha-05alpha-08
		alpha-05alpha-08
		color-textcolor-text
		gray-900gray-950
		gray-700gray-900
		gray-600gray-850
		whitewhite
		alpha-02alpha-04
		alpha-04alpha-06
		alpha-16alpha-25
		alpha-20alpha-30
		color-textcolor-text
		color-textcolor-text
		alpha-08alpha-12
		alpha-12alpha-16
		color-textcolor-text
		color-textcolor-text
		color-ringcolor-ring
		color-ring-primarycolor-ring-primary
		color-ring-primarycolor-ring-primary
		color-ring-primarycolor-ring-primary
		color-ring-primarycolor-ring-primary
		gray-100gray-300
		gray-150gray-350
		gray-200gray-400
		alpha-08alpha-12
		alpha-12alpha-16
		alpha-16alpha-20
		color-textcolor-text
		alpha-02alpha-02
		alpha-06alpha-06
		color-textcolor-text
		gray-500gray-400
		gray-600gray-450
		gray-700gray-500
		whitewhite
		alpha-02alpha-04
		alpha-04alpha-06
		alpha-16alpha-25
		alpha-20alpha-30
		color-text-secondarycolor-text-secondary
		color-textcolor-text
		alpha-08alpha-12
		alpha-12alpha-16
		color-text-secondarycolor-text-secondary
		color-textcolor-text
		color-ringcolor-ring
		color-ring-secondarycolor-ring-secondary
		color-ring-secondarycolor-ring-secondary
		color-ring-secondarycolor-ring-secondary
		color-ring-secondarycolor-ring-secondary
		blue-700blue-200
		blue-50blue-50
		blue-75blue-75
		blue-75blue-75
		blue-a50blue-a50
		blue-a75blue-a75
		blue-a75blue-a75
		blue-600blue-300
		blue-a25blue-a50
		blue-a25blue-a50
		blue-600blue-300
		blue-400blue-400
		blue-500blue-500
		blue-500blue-500
		whitewhite
		blue-a25blue-a25
		blue-a25blue-a25
		blue-500blue-500
		blue-500blue-500
		blue-500blue-500
		blue-500blue-500
		blue-a50blue-a50
		blue-a50blue-a50
		blue-500blue-200
		blue-500blue-200
		color-ringcolor-ring
		color-ring-infocolor-ring-info
		color-ring-infocolor-ring-info
		color-ring-infocolor-ring-info
		color-ring-infocolor-ring-info
		orange-700orange-500
		orange-50orange-50
		orange-75orange-75
		orange-75orange-75
		orange-a50orange-a50
		orange-a75orange-a75
		orange-a75orange-a75
		orange-700orange-400
		orange-a25orange-a50
		orange-a25orange-a50
		orange-700orange-400
		orange-500orange-500
		orange-600orange-600
		orange-600orange-600
		whitewhite
		orange-a25orange-a25
		orange-a25orange-a25
		orange-500orange-500
		orange-500orange-500
		orange-500orange-500
		orange-500orange-500
		orange-a50orange-a50
		orange-a50orange-a50
		orange-500orange-500
		orange-500orange-500
		color-ringcolor-ring
		color-ring-warningcolor-ring-warning
		color-ring-warningcolor-ring-warning
		color-ring-warningcolor-ring-warning
		color-ring-warningcolor-ring-warning
		yellow-700yellow-500
		yellow-50yellow-50
		yellow-75yellow-75
		yellow-75yellow-75
		yellow-a50yellow-a50
		yellow-a75yellow-a75
		yellow-a75yellow-a75
		yellow-800yellow-400
		yellow-a25yellow-a50
		yellow-a25yellow-a50
		yellow-800yellow-400
		yellow-600yellow-600
		yellow-700yellow-700
		yellow-700yellow-700
		yellow-a25yellow-a25
		yellow-a25yellow-a25
		yellow-700yellow-700
		yellow-700yellow-700
		yellow-700yellow-700
		yellow-700yellow-700
		yellow-a50yellow-a50
		yellow-a50yellow-a50
		yellow-700yellow-700
		yellow-700yellow-700
		color-ringcolor-ring
		color-ring-cautioncolor-ring-caution
		color-ring-cautioncolor-ring-caution
		color-ring-cautioncolor-ring-caution
		color-ring-cautioncolor-ring-caution
		red-700red-500
		red-50red-50
		red-75red-75
		red-75red-75
		red-a50red-a50
		red-a75red-a75
		red-a75red-a75
		red-600red-400
		red-a25red-a50
		red-a25red-a50
		red-600red-400
		red-500red-500
		red-600red-600
		red-600red-600
		whitewhite
		red-a25red-a25
		red-a25red-a25
		red-500red-500
		red-500red-500
		red-500red-500
		red-500red-500
		red-a50red-a50
		red-a50red-a50
		red-500red-500
		red-500red-500
		red-200red-200
		color-ring-dangercolor-ring-danger
		color-ring-dangercolor-ring-danger
		color-ring-dangercolor-ring-danger
		color-ring-dangercolor-ring-danger
		green-700red-400
		green-50green-50
		green-75green-75
		green-75green-75
		green-a50green-a50
		green-a75green-a75
		green-a75green-a75
		green-600green-400
		green-a25green-a50
		green-a25green-a50
		green-600green-400
		green-400green-400
		green-500green-500
		green-500green-500
		whitewhite
		green-a25green-a25
		green-a25green-a25
		green-500green-500
		green-500green-500
		green-500green-500
		green-500green-500
		green-a50green-a50
		green-a50green-a50
		green-500green-500
		green-500green-500
		color-ringcolor-ring
		color-ring-infocolor-ring-info
		color-ring-infocolor-ring-info
		color-ring-infocolor-ring-info
		color-ring-infocolor-ring-info
		purple-700purple-500
		purple-50purple-50
		purple-75purple-75
		purple-75purple-75
		purple-a50purple-a50
		purple-a75purple-a75
		purple-a75purple-a75
		purple-600purple-300
		purple-a25purple-a50
		purple-a25purple-a50
		purple-600purple-200
		purple-400purple-400
		purple-500purple-500
		purple-500purple-500
		whitewhite
		purple-a25purple-a25
		purple-a25purple-a25
		purple-500purple-500
		purple-500purple-500
		purple-500purple-500
		purple-500purple-500
		purple-a50purple-a50
		purple-a50purple-a50
		purple-500purple-500
		purple-500purple-500
		color-ringcolor-ring
		color-ringcolor-ring
		color-ringcolor-ring
		color-ringcolor-ring
		color-ringcolor-ring
		alpha-05alpha-05
		alpha-06alpha-06
		gray-400gray-500
		blue-500blue-400
		alpha-10alpha-12
		alpha-05alpha-06
		alpha-15alpha-20
		gray-0gray-200
		gray-50gray-100
		gray-75gray-50
		gray-0gray-300
		gray-50gray-400

Fonts

	ui-sans-serif, -apple-system, system-ui, ..., sans-serif
	ui-monospace, "SFMono-Regular", "SF Mono", ..., monospace
	400
	500
	600
	700
	0em
	-0.01em
	-0.02em
	4.5rem≈72px
	4.5rem≈72px
	font-weight-semibold
	tracking-tight
	3.75rem≈60px
	3.75rem≈60px
	font-weight-semibold
	tracking-tight
	3rem≈48px
	3rem≈48px
	font-weight-semibold
	tracking-tight
	2.25rem≈36px
	2.625rem≈42px
	font-weight-semibold
	tracking-tight
	2rem≈32px
	2.375rem≈38px
	font-weight-semibold
	tracking-tight
	1.5rem≈24px
	1.75rem≈28px
	font-weight-semibold
	tracking-normal
	1.25rem≈20px
	1.625rem≈26px
	font-weight-semibold
	tracking-normal
	1.125rem≈18px
	1.625rem≈26px
	font-weight-semibold
	tracking-normal
	1rem≈16px
	1.5rem≈24px
	font-weight-semibold
	tracking-normal
	1.125rem≈18px
	1.8125rem≈29px
	font-weight-normal
	tracking-normal
	1rem≈16px
	1.5rem≈24px
	font-weight-normal
	tracking-normal
	0.875rem≈14px
	1.25rem≈20px
	font-weight-normal
	tracking-normal
	0.75rem≈12px
	1.125rem≈18px
	font-weight-normal
	tracking-wide
	0.625rem≈10px
	0.875rem≈14px
	font-weight-normal
	tracking-wide
	0.5rem≈8px
	0.75rem≈12px
	font-weight-normal
	tracking-wide

Radius

		0.125rem≈2px
		0.25rem≈4px
		0.375rem≈6px
		0.5rem≈8px
		0.625rem≈10px
		0.75rem≈12px
		1rem≈16px
		1.25rem≈20px
		1.5rem≈24px
		9999px

Shadows

Breakpoints

	380px
	576px
	768px
	1024px
	1280px
	1536px

Motion

	cubic-bezier(0.19, 1, 0.22, 1)
	cubic-bezier(0.8, 0, 0.4, 1)
	cubic-bezier(0.65, 0, 0.4, 1)
	cubic-bezier(0.65, 0, 0.35, 1)
	150ms
	ease