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;
}