In this lesson we’ll improve a generic button primitive component by refactoring it with [Styled System](https://styled-system.com/) to simplify the implementation. The naïve styled-component implementation has styles like this: ```scss padding: ${props => props.theme.space[3]} ${props => props.theme.space[4]}; color: ${props => props.variant === 'primary' ? props.theme.colors.background : props.theme.colors.primary }; background-color: ${props => props.variant === 'primary' ? props.theme.colors.primary : props.theme.colors.background}; ``` This kind of code isn’t very readable and isn’t easy to change. We can improve it a bit by extracting styles of each variant into its own object but there’s a better solution: [Styled System](https://styled-system.com/). Styled System is a tool that allows us to create primitive components where we can control styles using component props, and all these props are constrained by our design system and responsive. For this component we’ll use two features of Styled System: CSS and Variants: * [CSS](https://styled-system.com/css/) helps us define common styles for both, primary and secondary, variants. * [Variants](https://styled-system.com/variants) allows us to switch multiple style properties with a single component prop, exactly what we need to implement primary and secondary styles. **We’ll use following libraries:** * [styled-components](https://styled-components.com/) * [Styled System](https://styled-system.com/) * [@styled-system/css](https://github.com/styled-system/styled-system/tree/master/packages/css) You can either use this lesson’s [Git repository](https://github.com/sapegin/cddcourse) or install them manually in your project: ``` npm install styled-components styled-system @styled-system/css ``` **Useful links and documentation:** * [Styled System docs](https://styled-system.com/getting-started/) * [Styled System CSS docs](https://styled-system.com/css) * [Styled System variants docs](https://styled-system.com/variants)