Configurations

This is the complete list of variables that power Saturn V along with their default values and descriptions.

base units

foundational variables that dictate base units in Saturn V

foundational variables that dictate base units in Saturn V
Variable Default Value Description
$s5_foundation-unit-size 4px The default value used as a multiplier in the size-multiplier() function.
$s5_color-scale-step-total 19 This controls how many additional lighter and darker colors get generated. This must be an odd number. 19 color steps means there is 1 base and 9 darker/lighter options.
$s5_type-scale-modifier 1.125 This controls how much each type size increases
$s5_type-scale-base 10px This controls what the starting (and smallest) type scale size is.
$s5_type-root-size 16px This keeps the math accurate for determining rem sizes. If you change the font-size for the html property, you should change this variable also.
$s5_zindex-order "example-one", "example-two", "example-three" This auto-sets z-index values depending on the order in this list. This is used by the zindex() mixin.

Color

foundational variables that dictate base units in Saturn V

foundational variables that dictate base units in Saturn V
Variable Default Value Description
$s5_color-brand-color-1 #9C75F3 The default brand color. you can access via get-color(primary).
$s5_color-brand-color-2 mediumblue The secondary brand color. you can access via get-color(secondary).
$s5_color-brand-color-3 #a10000 The tertiary brand color. you can access via get-color(tertiary).
$s5_color-soft-white #FAFCFC a soft grey that's light enough to use as an alternative to white. you can access via get-color(soft-white).
$s5_color-soft-black #0D0C0C a dark grey that's dark enough to use as an alternative to black. you can access via get-color(soft-black).
$s5_color-focus-base #002eff a color that is used for UI elements that are being focused. you can access via get-color(focus).
$s5_color-info-base #002eff a color that is used for UI elements that represent info. you can access via get-color(info).
$s5_color-alert-base gold a color that is used for UI elements that represent alerts. you can access via get-color(alert).
$s5_color-warning-base #f14400 a color that is used for UI elements that represent warnings. you can access via get-color(warning).
$s5_color-danger-base #dc1414 a color that is used for UI elements that represent danger. you can access via get-color(danger).
$s5_color-success-base #1aaa35 a color that is used for UI elements that represent success. you can access via get-color(success).

media-queries

viewport breakpoints for adaptive layouts

viewport breakpoints for adaptive layouts
Variable Default Value Description
$s5_viewport-micro 320px the smallest viewport size
$s5_viewport-xs 640px the "extra-small" viewport size
$s5_viewport-sm 768px the "small" viewport size
$s5_viewport-md 1024px the "medium" viewport size
$s5_viewport-lg 1440px the "large" viewport size
$s5_viewport-xl 1600px the "extra-large" viewport size
$s5_viewport-massive 2200px the "massive" viewport size

Type-Stacks

the various sets of Type families and fallbacks for different contexts.

the various sets of Type families and fallbacks for different contexts.
Variable Default Value
$s5_typestack--monospace "Andale Mono", AndaleMono, monospace
$s5_typestack--sans-serif sans-serif
$s5_typestack--serif serif
$s5_typestack--display BlinkMacSystemFont,-apple-system,"Roboto","Droid Sans","Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif
$s5_typestack--masthead $s5_typestack--display
$s5_typestack--body $s5_typestack--display
$s5_typestack--text $s5_typestack--body
$s5_typestack--code $s5_typestack--monospace
$s5_typestack--interface $s5_typestack--display
$s5_typestack--caption $s5_typestack--display
$s5_typestack--aside $s5_typestack--display
$s5_typestack--blockquote $s5_typestack--display

Type-Weights

various type-weights.

various type-weights.
Variable Default Value
$s5_weight--thin 100
$s5_weight--extra-light 200
$s5_weight--light 300
$s5_weight--book 400
$s5_weight--medium 500
$s5_weight--demi-bold 600
$s5_weight--bold 700
$s5_weight--heavy 800
$s5_weight--black 900

Line Heights

various line-heights.

various line-heights.
Variable Default Value
$s5_line-height-xxs 1
$s5_line-height-xs 1.2
$s5_line-height-sm 1.4
$s5_line-height-md 1.6
$s5_line-height-lg 2
$s5_line-height-xl 3