Design Tokens & Variables

Vanilla CSS Design System

Borders

Border properties used in the system.

Default Border
--border-width: 1px
--border-color: var(--color-gray-400);
--border-radius: 0.25rem

Breakpoints

Responsive breakpoints used in the system.

  • --breakpoint-sm: 576px
  • --breakpoint-md: 768px
  • --breakpoint-lg: 992px
  • --breakpoint-xl: 1200px
  • --breakpoint-xxl: 1400px

Shadows

Box shadow variations used in the system.

Small Shadow

--shadow-sm

Medium Shadow

--shadow-md

Large Shadow

--shadow-lg

Various Variables Reference

/* variables.css - Design Tokens */
:root {
	/* Border */
	--border-radius: 0.25rem;
	--border-width: 1px;
	--border-color: var(--color-gray-400);

	/* Transitions */
	--transition-base: all 0.2s ease-in-out;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

	/* Breakpoints */
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
}
				
Necessary workaround for making dark mode work with PurgeCSS. You can move this item but not delete it. Necessary workaround for making helix mode work with PurgeCSS. You can move this item but not delete it.