Solaris Design System


Spacing is a common token used in just about every component.


There are three types of paddings: standard, productive, emotive

Visual examples    
Standard Productive Emotive

Primary margins

Primary margins are used in any base foundation of elements and components. For example buttons, we have various sizes that uses primary margins according to its size.

Visual example Pixels Rem Token
Margin 16px 16px 1rem var(-space-xs)
Margin 24px 24px 1.5rem var(-space-sm)
Margin 32px 32px 2rem var(-space-md)

Other margins

Other margins are found for more specific and focused designs that require non primary margins.

Visual example Pixels Rem Token
Margin 8px 8px 0.5rem var(-space-xxs)
Margin 48px 48px 3rem var(-space-lg)
Margin 56px 56px 3.5rem var(-space-xl)
Margin 64px 64px 4rem var(-space-xxl)
Margin 128px 128px 8rem var(-space-xxxl)
Margin 256px 256px 16rem var(-space-xxxxl)