message: style sidebar more closely to styleguide
diff: @@ -5,7 +5,7 @@ import * as docs from '../components/docs'
  const SideNav = () => (
  <Relative>
  - <Box width={248} height="100%" bg="gray.0" display="inline-block" borderRight={1} borderColor="gray.2">
  + <Box width={256} height="100%" bg="gray.0" display="inline-block" borderRight={1} borderColor="gray.2">
  <FlexContainer flexDirection="column" alignItems="start" p={5} borderBottom={1} borderColor="gray.2">
  <NextLink href="/components/docs/system-props">
  <Link nounderline scheme="gray-dark" href="/components/docs/system-props" m={0} mb={4}>
  @@ -19,7 +19,7 @@ const SideNav = () => (
  </NextLink>
  </FlexContainer>
  <Box pt={5} pl={5}>
  - <Text fontWeight="bold" is="p" color="black" m={0} mb={3}>
  + <Text is="p" color="black" m={0} mb={3}>
  <NextLink href="/components/docs/Avatar">
  <Link nounderline scheme="gray-dark" href="/components/docs/Avatar">
  Components
  @@ -27,9 +27,9 @@ const SideNav = () => (
  </NextLink>
  </Text>
  {Object.values(docs).map(({displayName: name}) => (
  - <Box mb={4} key={name}>
  + <Box mb={3} key={name}>
  <NextLink href={`/components/docs/${name}`}>
  - <Link nounderline href={`/components/docs/${name}`} ml={4}>
  + <Link nounderline href={`/components/docs/${name}`} className="f5">
  {name}
  </Link>
  </NextLink>
  