Styled System

Styled System lets you quickly build custom UI components with constraint-based style props based on scales defined in your theme. Add style props that hook into your own theme. Quickly set responsive font-size, margin, padding, width, and more with props. Influenced by constraint-based design system principles. Typographic scale. Spacing scale for margin and padding. Works with any color palette. Works with most css-in-js libraries, including styled-components & emotion. Used in Rebass, Reflexbox, and the Priceline Design System. Set responsive width, margin, padding, font-size, and other properties with a shorthand array syntax. Most CSS-in-JS libraries include a ThemeProvider to provide values through React context. Import the styled components ThemeProvider in the root of your application and pass the theme to the theme prop.