Spacing Values Examples Usage
spacing-none 0
spacing-extra-tight 4px
spacing-tight 8px
spacing-base-tight 12px
spacing-base 16px
spacing-loose 20px
spacing-extra-loose 32px
Font Families Values Examples Usage
font-stack-base -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif
The quick brown fox jumps over the lazy dog.
font-stack-monospace Monaco, Consolas, 'Lucida Console', monospace
The quick brown fox jumps over the lazy dog.

These following tokens are out of date with Shopify’s design system. Check out this page for the up to date information.

Background Colors Values Examples Usage
color-purple-darker #230051
color-purple-dark #50248f
color-purple #9c6ade
color-purple-light #e3d0ff
color-purple-lighter #f6f0fd
color-indigo-darker #000639
color-indigo-dark #202e78
color-indigo #5c6ac4
color-indigo-light #b3bcf5
color-indigo-lighter #f4f5fa
color-blue-darker #001429
color-blue-dark #084e8a
color-blue #006fbb
color-blue-light #b4e1fa
color-blue-lighter #ebf5fa
color-teal-darker #003135
color-teal-dark #00848e
color-teal #47c1bf
color-teal-light #b7ecec
color-teal-lighter #e0f5f5
color-green-darker #173630
color-green-dark #108043
color-green #50b83c
color-green-light #bbe5b3
color-green-lighter #e3f1df
color-yellow-darker #573b00
color-yellow-dark #8a6116
color-yellow #eec200
color-yellow-light #ffea8a
color-yellow-lighter #fcf1cd
color-orange-darker #4a1504
color-orange-dark #c05717
color-orange #f49342
color-orange-light #ffc58b
color-orange-lighter #fcebdb
color-red-darker #330101
color-red-dark #bf0711
color-red #de3618
color-red-light #fead9a
color-red-lighter #fbeae5
color-ink #212b36
color-ink-light #454f5b
color-ink-lighter #637381
color-ink-lightest #919eab
color-sky-dark #c4cdd5
color-sky #dfe3e8
color-sky-light #f4f6f8
color-sky-lighter #f9fafb
color-black #000000
color-white #ffffff
Text Colors Values Examples Usage
color-purple-text #50495a The quick brown fox jumps over the lazy dog.
color-indigo-text #3e4155 The quick brown fox jumps over the lazy dog.
color-blue-text #3e4e57 The quick brown fox jumps over the lazy dog.
color-teal-text #405352 The quick brown fox jumps over the lazy dog.
color-green-text #414f3e The quick brown fox jumps over the lazy dog.
color-yellow-text #595130 The quick brown fox jumps over the lazy dog.
color-orange-text #594430 The quick brown fox jumps over the lazy dog.
color-red-text #583c35 The quick brown fox jumps over the lazy dog.
Time Values Examples Usage
duration-none 0
duration-fast 100ms
duration-base 200ms
duration-slow 300ms
duration-slower 400ms
duration-slowest 500ms