Tokens
The tokens listed below are part of Savile, but are mainly intended for internal use. If one wants to use the variables listed here in another project, they are available and require the CSS variable syntax (e.g. color: var(--s-color-gray-100);).
Font-size
Class Name
Value
--s-font-size-xxs0.625rem
--s-font-size-xs0.75rem
--s-font-size-sm0.875rem
--s-font-size-md1rem
--s-font-size-lg1.5rem
--s-font-size-xl2rem
--s-font-size-xxl3rem
Font-weight
Class Name
Value
--s-font-weight-ultra-light200
--s-font-weight-light300
--s-font-weight-normal400
--s-font-weight-bold700
--s-font-weight-heavy900
Font-family
Class Name
Value
--s-font-family-defaultHelvetica Neue
Default Font Family
--s-font-family-alternateRoboto Slab
Alternate Font Family
--s-font-family-monoRoboto Mono
Monospace Font Family
Spacing
Class Name
Value
--s-space-00rem
--s-space-10.125rem
--s-space-20.25rem
--s-space-30.5rem
--s-space-40.75rem
--s-space-51rem
--s-space-61.25rem
--s-space-71.5rem
--s-space-81.75rem
--s-space-92rem
--s-space-102.5rem
--s-space-113rem
--s-space-123.5rem
--s-space-134rem
Shadows
Class Name
Value
--s-shadow-sm0 1px 3px var(--s-color-gray-600)
--s-shadow-md0 4px 6px var(--s-color-gray-600)
--s-shadow-lg0 15px 35px var(--s-color-gray-600)
