Units and sizes

Our design system employs an 8px grid system for consistent sizing and spacing. All measurements are derived from half the root em size (8px). Since we use relative units based on the root em, this ensures proper scaling for accessibility needs.

Base units

--cn-grid (8px)

--cn-gap (16px)

--cn-line (24px)

Screen sizes

        //wd- above this
        $breakpoint-wide:   1365px
        // md- between this and the next
        $breakpoint-medium: 960px
        // sm- between this and the next
        $breakpoint-small:   620px
        // xs- below this

Button Sizing

All buttons maintain a minimum clickable area of 56x56 pixels to ensure optimal touch interaction, even when their visual appearance is smaller. Below are the standard visual button sizes used in our system.

--cn-button-physical-size	(56px)
--cn-button-size	(38px)
--cn-navigation-button-size	(48px)