Design tokens are the fundamental building blocks of our design system, functioning as the single source of truth for all visual decisions. These name-value pairs are the raw materials for component construction, enabling designers and developers to assemble complex interfaces from standardized values rather than arbitrary decisions. This systematic approach streamlines the design-to-development workflow through a shared vocabulary and creates resilience by allowing global updates to propagate automatically when the brand evolves. By transforming scattered visual decisions into a structured design language, tokens enable our components to remain internally consistent while our design system scales efficiently across all touchpoints.
--color-brand-blue: #4A9FB3
--color-brand-pink: #C57B9E
--color-brand-green: #8BC23F
--color-brand-white: #F2F4F4
--color-brand-black: #000000
--color-feedback-success: #2E8B57
--color-feedback-error: #DC143C
--color-feedback-warning: #FF8C00
--color-gray-900: #212121
--color-gray-800: #424242
--color-gray-700: #616161
--color-gray-600: #757575
--color-gray-500: #9E9E9E
--color-gray-400: #BDBDBD
--color-gray-300: #E0E0E0
--color-gray-200: #EEEEEE
--color-gray-100: #F5F5F5
--spacing-1: 0.25rem
--spacing-2: 0.5rem
--spacing-3: 0.75rem
--spacing-4: 1rem
--spacing-6: 1.5rem
--spacing-8: 2rem
--spacing-12: 3rem
--spacing-16: 4rem
--spacing-24: 6rem
--spacing-32: 8rem