Basic styled-system component that accesses theme

system-component.js

// No need to import `react` or `styled-components`!
import system from 'system-components'

export const Heading = system(
  {
    is: 'h1',
    // primary, medium, text, etc. are all theme variables!
    fontFamily: 'primary',
    fontSize: 5,
    fontWeight: 'medium',
    lineHeight: 'normal',
    m: 0,
    color: 'text'
  },
  // only allow a few props to be used
  'fontFamily',
  'textAlign'
)