Tokens

Spacing

Cedar's spacing system is built on a 4px base grid. The raw scale (scale/*) provides granular control; named space tokens (space/*) are the preferred API for components.

Named space tokens

Use these in components. Note: space/7 and space/9 are intentionally absent — 28px and 36px are accessible via scale/700 and scale/900 when needed.

TokenCSS varValueVisual
space/0--space-00px
space/1--space-14px
space/2--space-28px
space/3--space-312px
space/4--space-416px
space/5--space-520px
space/6--space-624px
space/8--space-832px
space/10--space-1040px

Grid / Layout Responsive

Layout structure tokens with three modes — Desktop, Tablet, Mobile. Applied automatically via CSS media queries. Use these to build consistent page grids rather than hardcoding column counts and margins.

TokenCSS varDesktopTabletMobile
grid/columns/count--grid-columns-count1284
grid/gutter--grid-gutter32px24px16px
grid/margin--grid-margin80px32px16px
grid/max-width--grid-max-width1280px768px375px

Raw scale

The primitive scale backing the space tokens. Built on a 4px base unit (scale/100 = 4px). Scale values above 1000 are used for layout-level distances and radius utilities.

TokenCSS varValueVisual
scale/0--scale-00px
scale/25--scale-251px
scale/50--scale-502px
scale/100--scale-1004px
scale/200--scale-2008px
scale/300--scale-30012px
scale/400--scale-40016px
scale/500--scale-50020px
scale/600--scale-60024px
scale/700--scale-70028px
scale/800--scale-80032px
scale/900--scale-90036px
scale/1000--scale-100040px
scale/1100--scale-110048px
scale/1200--scale-120056px
scale/1300--scale-130064px
scale/1400--scale-140072px
scale/1500--scale-150096px
scale/1600--scale-1600128px
scale/1700--scale-1700256px
scale/1800--scale-1800999px