Seeds components come with a default theme that provides them with design tokens, and allows you to easily access those tokens as well.
The theme file provides structured access to design tokens in a format that is consistent and easily consumable. You can use theme values with system props, or access the theme object directly from within your own Styled Components.
The theme is broken into categories based on different types of values, like color, space, typography, etc. Tokens can be either semantic or literal.
Semantic vs. literal tokens
Semantic tokens are essentially aliases of other tokens that are assigned to a specific purpose. In the example above, the cta.primary token is meant for the primary call-to-action on a page.
Using semantic values allows us to do things like customize the way our components look app-wide. When considering whether to use a semantic or literal token, consider: would you want the value you’re using to change if we changed the theme? If so, use a semantic token.
Theme reference
Theme values are used in two ways:
Values supplied to system props reference the value directly, i.e. <Box m={500} />
Values used within Styled Components can access the theme (on the component’s prop object) directly via a key path, i.e. margin: ${props => props.theme.space[500]};
The following tables show both the system prop values and the key paths.
Color
Category
System prop
Key path
Value
theme.colors.border
theme.colors.error
theme.colors.warning
cta
theme.colors.cta.primary
theme.colors.cta.secondary
theme.colors.cta.link
text
theme.colors.text.body
theme.colors.text.headline
theme.colors.text.subtext
Category
System prop
Key path
Value
neutral
theme.colors.neutral.0
#FFFFFF
theme.colors.neutral.100
#f3f4f4
theme.colors.neutral.200
#dee1e1
theme.colors.neutral.300
#c8cccc
theme.colors.neutral.400
#b0b6b7
theme.colors.neutral.500
#929a9b
theme.colors.neutral.600
#6e797a
theme.colors.neutral.700
#515e5f
theme.colors.neutral.800
#364141
theme.colors.neutral.900
#273333
theme.colors.neutral.1000
#162020
green
theme.colors.green.0
#ebf9eb
theme.colors.green.100
#d7f4d7
theme.colors.green.200
#c2f2bd
theme.colors.green.300
#98e58e
theme.colors.green.400
#75dd66
theme.colors.green.500
#59cb59
theme.colors.green.600
#2bb656
theme.colors.green.700
#0ca750
theme.colors.green.800
#008b46
theme.colors.green.900
#006b40
theme.colors.green.1000
#08422f
theme.colors.green.1100
#002b20
red
theme.colors.red.0
#ffeae9
theme.colors.red.100
#ffd5d2
theme.colors.red.200
#ffb8b1
theme.colors.red.300
#ff9c8f
theme.colors.red.400
#ff7f6e
theme.colors.red.500
#f76054
theme.colors.red.600
#ed4c42
theme.colors.red.700
#db3e3e
theme.colors.red.800
#c63434
theme.colors.red.900
#992222
theme.colors.red.1000
#6d1313
blue
theme.colors.blue.0
#e9f8ff
theme.colors.blue.100
#dcf2ff
theme.colors.blue.200
#c7e4f9
theme.colors.blue.300
#a1d2f8
theme.colors.blue.400
#56adf5
theme.colors.blue.500
#3896e3
theme.colors.blue.600
#2b87d3
theme.colors.blue.700
#2079c3
theme.colors.blue.800
#116daa
theme.colors.blue.900
#0c5689
theme.colors.blue.1000
#0a3960
theme.colors.blue.1100
#002138
teal
theme.colors.teal.0
#e5f9f5
theme.colors.teal.100
#cdf7ef
theme.colors.teal.200
#b3f2e6
theme.colors.teal.300
#7dead5
theme.colors.teal.400
#24e0c5
theme.colors.teal.500
#08c4b2
theme.colors.teal.600
#00a99c
theme.colors.teal.700
#0b968f
theme.colors.teal.800
#067c7c
theme.colors.teal.900
#026661
theme.colors.teal.1000
#083f3f
theme.colors.teal.1100
#002528
aqua
theme.colors.aqua.0
#d9fcfb
theme.colors.aqua.100
#c5f9f9
theme.colors.aqua.200
#a5f2f2
theme.colors.aqua.300
#76e5e2
theme.colors.aqua.400
#33d6e2
theme.colors.aqua.500
#17b8ce
theme.colors.aqua.600
#0797ae
theme.colors.aqua.700
#0b8599
theme.colors.aqua.800
#0f6e84
theme.colors.aqua.900
#035e73
theme.colors.aqua.1000
#083d4f
theme.colors.aqua.1100
#002838
purple
theme.colors.purple.0
#f2f2f9
theme.colors.purple.100
#eaeaf9
theme.colors.purple.200
#d8d7f9
theme.colors.purple.300
#c1c1f7
theme.colors.purple.400
#a193f2
theme.colors.purple.500
#9180f4
theme.colors.purple.600
#816fea
theme.colors.purple.700
#6f5ed3
theme.colors.purple.800
#5e4eba
theme.colors.purple.900
#483a9c
theme.colors.purple.1000
#2d246b
theme.colors.purple.1100
#1d1d38
magenta
theme.colors.magenta.0
#fef0ff
theme.colors.magenta.100
#f9e3fc
theme.colors.magenta.200
#f4c4f7
theme.colors.magenta.300
#edadf2
theme.colors.magenta.400
#f282f5
theme.colors.magenta.500
#db61db
theme.colors.magenta.600
#c44eb9
theme.colors.magenta.700
#ac44a8
theme.colors.magenta.800
#8f3896
theme.colors.magenta.900
#6c2277
theme.colors.magenta.1000
#451551
theme.colors.magenta.1100
#29192d
yellow
theme.colors.yellow.0
#fff8e2
theme.colors.yellow.100
#fdefcd
theme.colors.yellow.200
#ffe99a
theme.colors.yellow.300
#ffe16e
theme.colors.yellow.400
#ffd943
theme.colors.yellow.500
#ffcd1c
theme.colors.yellow.600
#ffbc00
theme.colors.yellow.700
#dd9903
theme.colors.yellow.800
#ba7506
theme.colors.yellow.900
#944c0c
theme.colors.yellow.1000
#542a00
theme.colors.yellow.1100
#2d1a05
pink
theme.colors.pink.0
#ffe9f3
theme.colors.pink.100
#fcdbeb
theme.colors.pink.200
#ffb5d5
theme.colors.pink.300
#ff95c1
theme.colors.pink.400
#ff76ae
theme.colors.pink.500
#ef588b
theme.colors.pink.600
#e0447c
theme.colors.pink.700
#ce3665
theme.colors.pink.800
#b22f5b
theme.colors.pink.900
#931847
theme.colors.pink.1000
#561231
theme.colors.pink.1100
#2b1721
orange
theme.colors.orange.0
#ffede3
theme.colors.orange.100
#fcdccc
theme.colors.orange.200
#ffc6a4
theme.colors.orange.300
#ffb180
theme.colors.orange.400
#ff9c5d
theme.colors.orange.500
#fc8943
theme.colors.orange.600
#f57d33
theme.colors.orange.700
#ed7024
theme.colors.orange.800
#ce5511
theme.colors.orange.900
#962c0b
theme.colors.orange.1000
#601700
theme.colors.orange.1100
#2d130e
network
theme.colors.network.twitter
#1da1f2
theme.colors.network.twitter_like
#e0245e
theme.colors.network.facebook
#217bee
theme.colors.network.facebook_audience_network
#58409B
theme.colors.network.linkedin
#0A66C2
theme.colors.network.instagram
#e4405f
theme.colors.network.feedly
#2bb24c
theme.colors.network.analytics
#ef6c00
theme.colors.network.youtube
#ff0000
theme.colors.network.messenger
#0084ff
theme.colors.network.snapchat
#fffc00
theme.colors.network.pinterest
#E60023
theme.colors.network.tumblr
#35465c
theme.colors.network.reddit
#ff4500
theme.colors.network.tripadvisor
#00B087
theme.colors.network.glassdoor
#0CAA41
theme.colors.network.google_my_business
#4285F4
theme.colors.network.google_business_messages
#1A73EA
theme.colors.network.salesforce
#1589EE
theme.colors.network.zendesk
#03363D
theme.colors.network.hubspot
#FF7A59
theme.colors.network.microsoft_dynamics
#002050
Space
Note: All space values are available as negative numbers as well. Simply prepend a hyphen before the value, i.e. <Box margin={-200} /> will give a -4px margin.
System prop
Key path
Value
0
theme.space[0]
100 / -100
theme.space[100] / theme.space[-100]
200 / -200
theme.space[200] / theme.space[-200]
300 / -300
theme.space[300] / theme.space[-300]
350 / -350
theme.space[350] / theme.space[-350]
400 / -400
theme.space[400] / theme.space[-400]
450 / -450
theme.space[450] / theme.space[-450]
500 / -500
theme.space[500] / theme.space[-500]
600 / -600
theme.space[600] / theme.space[-600]
Typography
Typography tokens encapsulate both font size and line height values.
Breakpoint values are not referenced directly in system props. Check out the system props page for more details on how to use responsive props.
Note: breakpoint values highly depend on the context in which the components are being used. These values are a good starting point, but they should likely be customized for most projects.