Tokens
Design tokens are the visual design atoms of the design system—specifically, they are named entities that store visual design attributes.
We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development.
Breakpoint
Default
sage-breakpoint( )
Options
sage-breakpoint(xs-max)
sage-breakpoint(sm-min)
sage-breakpoint(sm-max)
sage-breakpoint(md-min)
sage-breakpoint(md-max)
sage-breakpoint(lg-min)
sage-breakpoint(lg-max)
sage-breakpoint(xl-min)
Container
Default
sage-container( )
Options
sage-container(modal)
sage-container(sm)
sage-container(md)
sage-container(fluid)
Shadow
Default
sage-shadow( )
Options
sage-shadow(sm)
sage-shadow(md)
sage-shadow(lg)
sage-shadow(xl)
sage-shadow(2xl)
Sidebar
Default
Options
Spacing
Default
sage-spacing( )
Options
sage-spacing(2xs)
sage-spacing(xs)
sage-spacing(sm)
sage-spacing(md)
sage-spacing(lg)
Line Height
Default
sage-line-height( )
Options
sage-line-height(2xs)
sage-line-height(xs)
sage-line-height(sm)
sage-line-height(md)
sage-line-height(lg)
sage-line-height(xl)
Font Size
Default
sage-font-size( )
Options
sage-font-size(xs)
sage-font-size(sm)
sage-font-size(md)
sage-font-size(lg)
sage-font-size(xl)
sage-font-size(2xl)
sage-font-size(3xl)
sage-font-size(4xl)
Font Weight
Default
sage-font-weight( )
Options
sage-font-weight(regular)
sage-font-weight(semibold)
sage-font-weight(bold)
Letter Spacing
Default
sage-letter-spacing( )
Options
sage-letter-spacing(sm)
sage-letter-spacing(md)
sage-letter-spacing(lg)
Border
Default
sage-border( )
Options
sage-border(default)
sage-border(radius-small)
sage-border(radius)
sage-border(radius-large)
sage-border(radius-round)
Z Index
Default
sage-z_index( )
Options
sage-z_index(default)
sage-z_index(negative)
sage-z_index(raised)
sage-z_index(alert)
sage-z_index(underlay)
sage-z_index(nav)
sage-z_index(modal)
sage-z_index(priority)
sage-z_index(nuclear)