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)

Default

sage-sidebar( )

Options

sage-sidebar(sm)
sage-sidebar(md)
sage-sidebar(lg)

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(overlay)
sage-z_index(modal)
sage-z_index(priority)
sage-z_index(nuclear)