Design Tokens

Design tokens are the minimum elements of the design system - specifically, they are entities that store visual attributes.

Values

Legend: 📐 Sizes - 🖊 Typography - 💅 Styling - ⚡️ Others

Base

Design Token Mixin Description
📐 $base-type-zoom - Represents the base zoom of the page. This value is added on the html selector and it allow us to grow and decrease the site proportionally. For most of the browsers, 100% font-size is equal to 16px
🖊 $base-type-size - Defines the base font size of the body text. The current value refers to the $base-type-zoom: 100% (16px) -> 1em -> 16px body text. We use a relative units to be able to change the base font size using base-type-zoom. It also allow browsers to define their own font size based on user preferences
🖊 $line-height - Basic line-height for text
📐 $scale - Set the scale of how sizes increase and decrease. This value affects to type sizes and spacing.
📐 $size-unit, $su su() Basic spacing unit. Every space using a multiplier of this value
📐 $breakpoints - Array of breakpoints. They are used through the mappy-breakpoints library
📐 $mappy-queries mappy-query() Defines the different media queries to be used with the mappy-breakpoints library

Box shadows

Design Token Mixin Description
📐 $box-shadow-deep-level - Scale for the visual height of the different box-shadow levels
📐 $box-shadow-y-offset - Scale for the distance of the different box-shadow levels

Colors and gradients

Design Token Mixin Description
💅 $colors color(), color-level() The SASS map of colors. It defines all the available colors for the application
💅 $gradients gradient() The SASS map of gradients.
💅 $color-interval - Interval between in the tint/light palette of every color. You can get these tints usin the color-level() mixin

Grid

Design Token Mixin Description
📐 $grid-width - Max-width of the grid container
📐 $grid-columns - Number of columns
📐 $grid-gutter - Spacing between columns
📐 $grid-collapse-on - List of media queries to collapse a row on an specific range
📐 $grid-collapse-below - List of media queries to collapse a row below an specific range
📐 $grid-collapse-above - List of media queries to collapse a row above an specific range

Names

Design Token Mixin Description
️️⚡️ $scale-names - Aliases for the different sizes in the scale
⚡️ $color-names - Aliases for the colors

Spacing

Design Token Mixin Description
📐 $spacing-sizes spacing() Map of different sizes
📐 $spacing-border-radius - Default border radius

Sprites

Design Token Mixin Description
⚡️ $sprites - Map to define the image sprites and the elements inside them

Typography

Design Token Mixin Description
🖊 $type-os-fallback - List of font families to fallback if any of the main or alternative font families are present
🖊 $type-headers - List of font families for headings
🖊 $type-body - List of font families for the normal text
🖊 $type-code - List of font families for code blocks
🖊 $line-heigths line-height() Map of line-height sizes

Z-index

Design Token Mixin Description
⚡️ $z-index - Map of z-index values to place layers in the UI