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', Roboto, 'Segoe UI', '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.
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 #007ace
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