Codebrahma · a-saran · Jun 1, 2020 · Jun 1, 2020 · Jun 1, 2020 · Jun 1, 2020
diff --git a/docs/bloglayout.mdx b/docs/bloglayout.mdx
@@ -3,7 +3,7 @@ name: bloglayout
 ---
 
 import { Playground } from 'docz'
-import Bloglayout from '../src/templates/blog-post-layout'
+import Bloglayout from '../src/templates/blog-post-layout.js'
 
 <Playground>
   <Bloglayout/>

diff --git a/docs/button.mdx b/docs/button.mdx
@@ -0,0 +1,24 @@
+---
+name: Button
+---
+
+import { Playground } from 'docz'
+import {Box} from '@chakra-ui/core'
+import Button from '../src/components/button.js'
+import ContactUsButton from '../src/components/contactUsButton.js'
+
+## Button
+<Playground>
+  <Button>hi</Button>
+</Playground>
+
+## Contact us Button
+<Playground>
+  <ContactUsButton />
+</Playground>
+
+### Props
+| Props  | default |
+|:-------|:------|
+| text  | Contact Us|
+
diff --git a/docs/config/theme.js b/docs/config/theme.js
@@ -1,15 +1,18 @@
+import { theme } from "@chakra-ui/core"
+
 const maxContainerWidth = '70rem'
 const baseLineHeight = 1.45; //24.8px
 const desktopBaseSize = 1.125; //18px
 const mobileBaseSize = 1; //16px
 const breakpoints = [
-  '52em',
+  '48rem',
 ]
 const scale = [
-  0.75,1, 1.2, 1.375, 1.6875, 2.5
+  0.75, 1, 1.2, 1.375, 1.6875, 2.5
 ];
 
 const fontSizes = scale.map(n=> n*mobileBaseSize + 'rem')
+//desktops
 fontSizes.desktop = scale.map(n=> n*desktopBaseSize + 'rem')
 
 const fonts = {
@@ -18,6 +21,13 @@ const fonts = {
   bold: 'TiemposBold',
   italic: 'TiemposItalic'
 }
+
+theme.sizes['maxContainerWidth'] = maxContainerWidth
+
+theme.borders['3px'] = '3px solid'
+
+const radii = [0, 1, 2, 4, 8, 16];
+
 const lineHeights = [
   0.5 * baseLineHeight + 'rem',
   1 * baseLineHeight + 'rem', 
@@ -26,110 +36,24 @@ const lineHeights = [
   2.5 * baseLineHeight + 'rem',
   3 * baseLineHeight + 'rem',
 ];
-const space = [0,...lineHeights];
+
+const space = [0, ...lineHeights];
 
 const colors = {
   tint: '#F8F4F2',
-  black: ['#0F0F0F','#333333', '#666666', '#999999'],
+  black: ['#0F0F0F','#333333', '#666666', '#999999', '#E0E0E0'],
 }
 colors.primary = colors.black[1]
 colors.secondary = colors.tint
 
-const styles = {
-  body:{
-    fontFamily: 'body',
-    fontSize: [1, 'desktop.1'],
-    lineHeight: 1,
-  },
-  h1: {
-    fontFamily: 'heading',
-    fontSize: [5, 'desktop.5'],
-    lineHeight: 3,
-    marginTop: [3, 4], 
-    marginBottom: 1,
-    padding: 0,
-  },
-  h2: {
-    fontFamily: 'heading',
-    fontSize: [4, 'desktop.4'],
-    lineHeight: 2,
-    marginTop: [3, 4],
-    marginBottom: 1,
-    padding: 0,
-  },
-  h3: {
-    fontFamily: 'heading',
-    fontSize: [3, 'desktop.3'],
-    lineHeight: 1,
-    marginTop: [ 2,3 ],
-    marginBottom: 1,
-    padding: 0,
-  },
-  h4: {
-    fontFamily: 'heading',
-    fontSize: [2, 'desktop.2'],
-    lineHeight: 1,
-    marginTop: 2,
-    marginBottom: 1,
-    padding: 0,
-  },
-  h5: {
-    fontFamily: 'heading',
-    fontSize: [1, 'desktop.1'],
-    lineHeight: 1,
-    marginTop: 2,
-    marginBottom: 1,
-    padding: 0,
-  },
-  p: {
-    fontFamily: 'body',
-    fontSize: [1, 'desktop.1'],
-    lineHeight: 1,
-    maxWidth: '40rem',
-    marginBottom: [2,2]
-  },
-  b: {
-    fontFamily: 'bold',
-  },
-  strong: {
-    fontFamily: 'bold'
-  },
-  em: {
-    fontFamily: 'italic'
-  },
-  i: {
-    fontFamily: 'italic',
-  },
-  Container: {
-    maxWidth: '71.5rem',
-    padding: 0,
-    px: ['0.725rem']
-  },
-  ul: {
-    listStyle: 'disc inside none' ,
-    mb: [2,2]
-  },
-  ol: {
-    listStyle: 'decimal inside none',
-  },
-  li: {
-    mb: ['0.5rem','0.5rem'],
-    fontFamily: 'body',
-    fontSize: [1, 'desktop.1'],
-    lineHeight: 1,
-    maxWidth: '40rem',
-    marginBottom: [1,1]
-  }
-}
-
-const theme = {
+const customTheme = {
+  ...theme,
   breakpoints,
   space,
   fontSizes,
+  radii,
   lineHeights,
-  maxContainerWidth,
   fonts,
   colors,
-  styles,
 }
-export default theme;
+export default customTheme;
diff --git a/docs/config/wrapper.js b/docs/config/wrapper.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { ThemeProvider } from 'bricks'
+import { ThemeProvider } from '@chakra-ui/core'
 import theme from './theme'
 
 global.__PATH_PREFIX__ = ''

diff --git a/docs/contact-form.mdx b/docs/contact-form.mdx
@@ -0,0 +1,12 @@
+---
+name: Contact-form
+---
+
+import { Playground } from 'docz'
+import ContactForm from '../src/components/contactForm.js'
+
+## Contact-form
+
+<Playground>
+  <ContactForm />
+</Playground>
diff --git a/docs/developmentServices.mdx b/docs/developmentServices.mdx
@@ -0,0 +1,12 @@
+---
+name: Development-services
+---
+
+import { Playground } from 'docz'
+import DevelopmentServices from '../src/components/developmentServices.js'
+
+## Development-services
+
+<Playground>
+  <DevelopmentServices />
+</Playground>
diff --git a/docs/icons.mdx b/docs/icons.mdx
@@ -0,0 +1,18 @@
+---
+name: Icons
+---
+
+import { Playground } from 'docz'
+import ReactIcon from '../src/components/icons/React.js'
+
+## React Icon
+<Playground>
+  <ReactIcon width='200px'/>
+</Playground>
+
+### Props
+
+| Props  | Description |
+|:-------|:------|
+| width  | Sets the width of the icon |
+| Height | Sets the Height of the icon |
diff --git a/docs/libraries.mdx b/docs/libraries.mdx
@@ -0,0 +1,12 @@
+---
+name: Libraries
+---
+
+import { Playground } from 'docz'
+import Libraries from '../src/components/libraries.js'
+
+## Libraries
+
+<Playground>
+  <Libraries />
+</Playground>
diff --git a/docs/link.mdx b/docs/link.mdx
@@ -8,14 +8,14 @@ import {Playground} from 'docz'
 
 ## PlainLink
 <Playground>
-  <PlainLink to='/docz-pagination'>
+  <PlainLink to=''>
     Pagination
   </PlainLink>
 </Playground>
 
 ## CategoryLink
 <Playground>
-  <CategoryLink to='/docz-pagination'>
+  <CategoryLink to=''>
     Category
   </CategoryLink>
 </Playground>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,23 +5,23 @@
   "version": "0.0.1",
   "author": "Anand Narayan <anand@codebrahma.com>",
   "dependencies": {
+    "@chakra-ui/core": "^0.8.0",
     "@codebrahma/gatsby-theme-blog": "^1.0.12",
-    "@emotion/core": "^10.0.10",
-    "@emotion/styled": "^10.0.11",
+    "@emotion/core": "^10.0.28",
+    "@emotion/styled": "^10.0.27",
     "@mdx-js/mdx": "^1.0.20",
     "@mdx-js/react": "^1.0.20",
     "@mdx-js/tag": "^0.20.3",
     "babel-preset-react": "^6.24.1",
-    "bricks": "github:codebrahma/bricks",
-    "emotion-theming": "^10.0.10",
+    "emotion-theming": "^10.0.27",
     "gatsby": "^2.13.15",
     "gatsby-image": "^2.1.2",
     "gatsby-plugin-crisp-chat": "^3.2.1",
     "gatsby-plugin-google-analytics": "^2.1.23",
     "gatsby-plugin-manifest": "^2.1.1",
     "gatsby-plugin-mdx": "^1.0.56",
     "gatsby-plugin-netlify": "^2.1.3",
-    "gatsby-plugin-offline": "^2.1.1",
+    "gatsby-plugin-offline": "^2.2.9",
     "gatsby-plugin-react-helmet": "^3.0.12",
     "gatsby-plugin-react-helmet-canonical-urls": "^1.2.0",
     "gatsby-plugin-sharp": "^2.1.3",
@@ -38,8 +38,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-helmet": "^5.2.1",
-    "styled-system": "^5.0.5"
+    "react-helmet": "^5.2.1"
   },
   "devDependencies": {
     "css-loader": "^3.0.0",

diff --git a/solutions/react/react.mdx b/solutions/react/react.mdx
@@ -11,7 +11,8 @@ keywords:
 image: ./images/reactjs.png
 link: /react-js-development
 ---
-import { Box, P } from 'bricks';
+import { Box } from '@chakra-ui/core';
+import { P } from '../../src/components/typography.js';
 import Title from '../../src/components/title.js';
 import ContactUsButton from '../../src/components/contactUsButton.js';
 import { RipplingProject } from '../../src/components/projects';
@@ -38,7 +39,6 @@ Lets talk!
 
 <RipplingProject />
 
----
 [Here is our ReactJS Development process](/codebrahma-react-application)
 
 We have used the best libraries to develop React JS applications. Some of them are as follows.
@@ -54,7 +54,6 @@ We have used the best libraries to develop React JS applications. Some of them a
 
 > For more info , take a look at our [blogs](/category/react) and [open source contributions](/open-source-contributions).
 
----
 <DevelopmentServices />
 
 ## Contact Us

diff --git a/src/components/button.js b/src/components/button.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Button as Btn } from '@chakra-ui/core';
+
+const Button = (props) => (
+  <Btn 
+    borderRadius={3}
+    variant="outline"
+    bg='transparent'
+    border='3px'
+    py='1'
+    h='auto'
+    px='4'
+    lineHeight='1'
+    fontFamily='body'
+    fontWeight='hairline'
+    {...props}
+  />
+)
+
+export default Button
diff --git a/src/components/categorylink.js b/src/components/categorylink.js
@@ -1,29 +1,30 @@
-import {Link} from 'gatsby'
-import styled from '@emotion/styled'
-import {css} from 'bricks'
+import React from 'react'
+import { Link } from 'gatsby'
+import { PseudoBox } from '@chakra-ui/core';
 
-export default styled(Link)(
-  css({
-    bg: 'tint',
-    color: 'black.1',
-    fontSize:'0',
-    px:'6px',
-    py:'2px',
-    display:'inline-block',
-    borderRadius: '6px',
-    border: '1px solid black',
-    textDecoration: 'none',
+export default (props) => <PseudoBox
+  as={Link}
+  bg='tint'
+  color='black.1'
+  fontSize='0'
+  px='6px'
+  py='2px'
+  display='inline-block'
+  borderRadius='6px'
+  border='1px solid black'
+  textDecoration='none'
+  lineHeight='0'
+  _hover={{
+      bg:'black.1',
+      color:'tint',
+  }}
+  _visited={{
+    bg:'tint',
+    color:'black.1',
     '&:hover': {
       bg:'black.1',
       color:'tint',
     },
-    ':visited':{
-      bg:'tint',
-      color:'black.1',
-      '&:hover': {
-        bg:'black.1',
-        color:'tint',
-      },
-    }
-})
-)
+  }}
+  {...props}
+/>
diff --git a/src/components/contactForm.js b/src/components/contactForm.js
@@ -1,50 +1,47 @@
 import React from "react"
-import { Flex, Box, InputText, OutlinedButton } from "bricks"
+import { Box, Input  } from '@chakra-ui/core';
+import Button from './button';
 
-const ContactForm = ({ referrer }) => {
-  return (
-    <form action="https://api.formik.com/submit/codebrahma/contact" method="post">
-      <input
-        type="hidden"
-        name="_next"
-        value="https://codebrahma.com/thank-you"
+const ContactForm = ({ referrer }) => (
+  <form action="https://api.formik.com/submit/codebrahma/contact" method="post">
+    <input
+      type="hidden"
+      name="_next"
+      value="https://codebrahma.com/thank-you"
+    />
+    <input type="hidden" name="referrer" value={referrer} />
+    <Box width={[1, 1 / 2]}>
+      <Input
+        size="25"
+        rows="5"
+        required
+        as="textarea"
+        name="msg"
+        backgroundColor="black.4"
+        borderWidth={0}
+        borderRadius={3}
+        placeholder="&#128172; Tell us about your idea"
+        padding={1}
       />
-      <input type="hidden" name="referrer" value={referrer} />
-      <Flex flexWrap="wrap" flexDirection="column">
-        <Box width={[1, 1 / 2]}>
-          <InputText
-            size="25"
-            rows="5"
-            width={1}
-            required
-            as="textarea"
-            name="msg"
-            backgroundColor="black.4"
-            borderWidth={0}
-            borderRadius={3}
-            placeholder="&#128172; Tell us about your idea"
-          />
-        </Box>
-        <Box width={[1, 1 / 2]} mt={1}>
-          <InputText
-            width={1}
-            name="email"
-            type="email"
-            required
-            backgroundColor="black.4"
-            borderWidth={0}
-            borderRadius={3}
-            placeholder="@ Email address"
-          />
-        </Box>
-        <Box width={[1, 1 / 3]} mt={1}>
-          <OutlinedButton borderRadius={3}>
-            Submit
-          </OutlinedButton>
-        </Box>
-      </Flex>
-    </form>
-  )
-}
+    </Box>
+    <Box width={[1, 1 / 2]} mt={1}>
+      <Input
+        name="email"
+        type="email"
+        required
+        backgroundColor="black.4"
+        borderWidth={0}
+        borderRadius={3}
+        placeholder="@ Email address"
+        lineHeight='1'
+        padding={1}
+        height='auto'
+      />
+    </Box>
+    <Box width={[1, 1 / 3]} mt={1}>
+      <Button type='submit' variant='outline'>Submit</Button>
+    </Box>
+  </form>
+)
 
 export default ContactForm
diff --git a/src/components/contactUsButton.js b/src/components/contactUsButton.js
@@ -1,14 +1,18 @@
 import React from "react"
 import PropTypes from "prop-types"
 import { navigate } from "gatsby"
-import { InputButton } from "bricks"
+import Button from './button';
 
 const ContactUsButton = ({ text }) => (
-  <InputButton
-    borderRadius={3}
-    value={text}
-    onClick={() => navigate("/contact")}  
-  />
+  <Button
+    variant='solid'
+    color='tint'
+    bg='primary'
+    borderColor='primary'
+    onClick={() => navigate("/contact")}
+  >
+    {text}
+  </Button>
 );
 
 ContactUsButton.defaultProps = {

diff --git a/src/components/developmentServices.js b/src/components/developmentServices.js
@@ -1,10 +1,11 @@
 import React from 'react';
-import { Box, P } from 'bricks';
+import { Box } from '@chakra-ui/core';
+import { P } from './typography'
 
 import Title from './title';
 
 export default () => (
-  <Box width={[1, 4 / 5 ]}>
+  <Box width={['100%', 4 / 5 ]}>
     <Title>Reliable ReactJS Development Services</Title>
     <br />
     <br />

diff --git a/src/components/icons/React.js b/src/components/icons/React.js
@@ -0,0 +1,38 @@
+import React from 'react'
+
+const ReactIcon = (props) => (
+  <svg width={props.width} height={props.height} version="1.1" id="Layer_2_1_" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
+	  viewBox="0 0 841.9 595.3" enableBackground="new 0 0 841.9 595.3" >
+  <g>
+    <path fill="#333333" d="M666.3,296.5c0-32.5-40.7-63.3-103.1-82.4c14.4-63.6,8-114.2-20.2-130.4c-6.5-3.8-14.1-5.6-22.4-5.6v22.3
+      c4.6,0,8.3,0.9,11.4,2.6c13.6,7.8,19.5,37.5,14.9,75.7c-1.1,9.4-2.9,19.3-5.1,29.4c-19.6-4.8-41-8.5-63.5-10.9
+      c-13.5-18.5-27.5-35.3-41.6-50c32.6-30.3,63.2-46.9,84-46.9l0-22.3c0,0,0,0,0,0c-27.5,0-63.5,19.6-99.9,53.6
+      c-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7,0,51.4,16.5,84,46.6c-14,14.7-28,31.4-41.3,49.9c-22.6,2.4-44,6.1-63.6,11
+      c-2.3-10-4-19.7-5.2-29c-4.7-38.2,1.1-67.9,14.6-75.8c3-1.8,6.9-2.6,11.5-2.6l0-22.3c0,0,0,0,0,0c-8.4,0-16,1.8-22.6,5.6
+      c-28.1,16.2-34.4,66.7-19.9,130.1c-62.2,19.2-102.7,49.9-102.7,82.3c0,32.5,40.7,63.3,103.1,82.4c-14.4,63.6-8,114.2,20.2,130.4
+      c6.5,3.8,14.1,5.6,22.5,5.6c27.5,0,63.5-19.6,99.9-53.6c36.4,33.8,72.4,53.2,99.9,53.2c8.4,0,16-1.8,22.6-5.6
+      c28.1-16.2,34.4-66.7,19.9-130.1C625.8,359.7,666.3,328.9,666.3,296.5z M536.1,229.8c-3.7,12.9-8.3,26.2-13.5,39.5
+      c-4.1-8-8.4-16-13.1-24c-4.6-8-9.5-15.8-14.4-23.4C509.3,224,523,226.6,536.1,229.8z M490.3,336.3c-7.8,13.5-15.8,26.3-24.1,38.2
+      c-14.9,1.3-30,2-45.2,2c-15.1,0-30.2-0.7-45-1.9c-8.3-11.9-16.4-24.6-24.2-38c-7.6-13.1-14.5-26.4-20.8-39.8
+      c6.2-13.4,13.2-26.8,20.7-39.9c7.8-13.5,15.8-26.3,24.1-38.2c14.9-1.3,30-2,45.2-2c15.1,0,30.2,0.7,45,1.9
+      c8.3,11.9,16.4,24.6,24.2,38c7.6,13.1,14.5,26.4,20.8,39.8C504.7,309.8,497.8,323.2,490.3,336.3z M522.6,323.3
+      c5.4,13.4,10,26.8,13.8,39.8c-13.1,3.2-26.9,5.9-41.2,8c4.9-7.7,9.8-15.6,14.4-23.7C514.2,339.4,518.5,331.3,522.6,323.3z
+      M421.2,430c-9.3-9.6-18.6-20.3-27.8-32c9,0.4,18.2,0.7,27.5,0.7c9.4,0,18.7-0.2,27.8-0.7C439.7,409.7,430.4,420.4,421.2,430z
+      M346.8,371.1c-14.2-2.1-27.9-4.7-41-7.9c3.7-12.9,8.3-26.2,13.5-39.5c4.1,8,8.4,16,13.1,24C337.1,355.7,341.9,363.5,346.8,371.1z
+      M420.7,163c9.3,9.6,18.6,20.3,27.8,32c-9-0.4-18.2-0.7-27.5-0.7c-9.4,0-18.7,0.2-27.8,0.7C402.2,183.3,411.5,172.6,420.7,163z
+      M346.7,221.9c-4.9,7.7-9.8,15.6-14.4,23.7c-4.6,8-8.9,16-13,24c-5.4-13.4-10-26.8-13.8-39.8C318.6,226.7,332.4,224,346.7,221.9z
+      M256.2,347.1c-35.4-15.1-58.3-34.9-58.3-50.6c0-15.7,22.9-35.6,58.3-50.6c8.6-3.7,18-7,27.7-10.1c5.7,19.6,13.2,40,22.5,60.9
+      c-9.2,20.8-16.6,41.1-22.2,60.6C274.3,354.2,264.9,350.8,256.2,347.1z M310,490c-13.6-7.8-19.5-37.5-14.9-75.7
+      c1.1-9.4,2.9-19.3,5.1-29.4c19.6,4.8,41,8.5,63.5,10.9c13.5,18.5,27.5,35.3,41.6,50c-32.6,30.3-63.2,46.9-84,46.9
+      C316.8,492.6,313,491.7,310,490z M547.2,413.8c4.7,38.2-1.1,67.9-14.6,75.8c-3,1.8-6.9,2.6-11.5,2.6c-20.7,0-51.4-16.5-84-46.6
+      c14-14.7,28-31.4,41.3-49.9c22.6-2.4,44-6.1,63.6-11C544.3,394.8,546.1,404.5,547.2,413.8z M585.7,347.1c-8.6,3.7-18,7-27.7,10.1
+      c-5.7-19.6-13.2-40-22.5-60.9c9.2-20.8,16.6-41.1,22.2-60.6c9.9,3.1,19.3,6.5,28.1,10.2c35.4,15.1,58.3,34.9,58.3,50.6
+      C644,312.2,621.1,332.1,585.7,347.1z"/>
+    <polygon fill="#333333" points="320.8,78.4 320.8,78.4 320.8,78.4 	"/>
+    <circle fill="#333333" cx="420.9" cy="296.5" r="45.7"/>
+    <polygon fill="#333333" points="520.5,78.1 520.5,78.1 520.5,78.1 	"/>
+  </g>
+</svg>
+)
+
+export default ReactIcon
diff --git a/src/components/image.js b/src/components/image.js
diff --git a/src/components/libraries.js b/src/components/libraries.js
@@ -1,6 +1,6 @@
 import React from "react"
 import styled from "@emotion/styled"
-import { Flex, Box } from "bricks"
+import { Flex, Box } from "@chakra-ui/core"
 import Title from "./title"
 
 const OrderedList = styled.ol`
@@ -14,7 +14,7 @@ const ListItem = styled.li`
 
 export default () => (
   <Flex flexWrap="wrap">
-    <Box width={[1, 1 / 3]}>
+    <Box width={['100%', 1 / 3]}>
       <Title
         fontSize={[2, 'desktop.2']}
         fontWeight="bold"
@@ -28,7 +28,7 @@ export default () => (
         <ListItem>Flow js</ListItem>
       </OrderedList>
     </Box>
-    <Box width={[1, 1 / 3]}>
+    <Box width={['100%', 1 / 3]}>
       <Title
         fontSize={[2, 'desktop.2']}
         fontWeight="bold"
@@ -42,7 +42,7 @@ export default () => (
       </OrderedList>
     </Box>
 
-    <Box width={[1, 1 / 3]}>
+    <Box width={['100%', 1 / 3]}>
       <Title
         fontSize={[2, 'desktop.2']}
         fontWeight="bold"
@@ -56,7 +56,7 @@ export default () => (
       </OrderedList>
     </Box>
 
-    <Box width={[1, 1 / 3]}>
+    <Box width={['100%', 1 / 3]}>
       <Title
         fontSize={[2, 'desktop.2']}
         fontWeight="bold"
@@ -71,7 +71,7 @@ export default () => (
       </OrderedList>
     </Box>
 
-    <Box width={[1, 1 / 3]}>
+    <Box width={['100%', 1 / 3]}>
       <Title
         fontSize={[2, 'desktop.2']}
         fontWeight="bold"
@@ -87,7 +87,7 @@ export default () => (
       </OrderedList>
     </Box>
 
-    <Box width={[1, 1 / 3]}>
+    <Box width={['100%', 1 / 3]}>
       <Title
         fontSize={[2, 'desktop.2']}
         fontWeight="bold"

diff --git a/src/components/logo.js b/src/components/logo.js
@@ -1,16 +1,9 @@
-import { H2 } from "bricks"
 import Link from "./link"
 import React from "react"
+import { H2 } from "../components/typography";
 
 export const Logo = ({ title }) => (
-  <H2 marginTop={[0, 0]}>
-    <Link
-      to="/"
-      style={{
-        textDecoration: `none`,
-      }}
-    >
-      {title}
-    </Link>
+  <H2 marginTop={[0, 0]} >
+    <Link to="/">{title}</Link>
   </H2>
 )
diff --git a/src/components/nav.js b/src/components/nav.js
@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+import { Box, Flex, PseudoBox, Icon } from '@chakra-ui/core'
+import Link from './link'
+
+// TODO: mobile nav fix
+
+const Nav = ({ logo, links,}) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const mobileNav = {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    background: 'rgb(248, 244, 242)',
+    overflowY: 'auto',
+    zIndex: 1,
+    flexDirection: 'column'
+  }
+
+  return (
+    <Flex justify='space-between' align='center' py={1}>
+      {logo}
+      <Flex display={['none', 'flex']} css={isOpen ? mobileNav : {}}>
+        {links.map(({ link, title }) => (
+          <PseudoBox
+            as={Link}
+            px={1}
+            to={link}
+            key={link}
+            fontFamily='body'
+            fontSize={1}
+            _hover={{
+              textDecoration: 'underline'
+            }}
+          >
+            {title}
+          </PseudoBox>
+       ))}
+      </Flex>
+      <Box display={['block', 'none']} p={1} onClick={() => setIsOpen(!isOpen)}>
+        <Box height='3px' bg='primary' marginBottom='5px' width={'25px'}/>
+        <Box height='3px' bg='primary' marginBottom='5px'/>
+        <Box height='3px' bg='primary' marginBottom='5px'/>
+      </Box>
+      {isOpen && (
+        <Flex
+          position='fixed'
+          top='0'
+          bottom='0'
+          right='0'
+          left='0'
+          bg='secondary'
+          flexDirection='column'
+          align='center'
+          zIndex='5'
+        >
+          <Flex p='2' justifyContent='flex-end' width='100%'>
+            <Icon name="close" p='1' onClick={() => setIsOpen(false)}/>
+          </Flex>
+          {links.map(({ link, title }) => (
+            <Box
+              as={Link}
+              px={1}
+              to={link}
+              key={link}
+              fontFamily='body'
+              py={3}
+              fontSize={'desktop.3'}
+              userSelect='none'
+            >
+              {title}
+            </Box>
+        ))}
+        </Flex>
+      )}
+    </Flex>
+  )
+}
+
+export default Nav
diff --git a/src/components/pagination.js b/src/components/pagination.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import {Link} from 'gatsby';
+import { Link } from 'gatsby';
 
 const Wrapper = styled('div')`
   display: flex;

diff --git a/src/components/project.js b/src/components/project.js
@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from "@emotion/core"
-import { Box, Flex, P } from "bricks"
+import { Box, Flex } from "@chakra-ui/core"
+import { P } from './typography'
 import PlainLink from "./link"
 import NonStretchedImage from "./nonStretchedImage"
 import Title from './title'
@@ -13,15 +14,15 @@ export default ({ title, image, description, link, reverse = false }) => (
       reverse ? "row-reverse" : "row"
     }
   >
-    <Box width={[1, '43%']}>
+    <Box width={['100%', '43%']}>
       <PlainLink to={link}>
         <NonStretchedImage alt={title} fluid={image} />
       </PlainLink>
     </Box>
     <Box width={[0, '14%']} />
     <Flex
       flexDirection="column"
-      width={[1, '43%']}
+      width={['100%', '43%']}
       order={[0, 1]}
       mt={[1, 0]}
       justifyContent="center"

diff --git a/src/components/textWithIcon.js b/src/components/textWithIcon.js
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
-import { P } from 'bricks';
+import { Text } from '@chakra-ui/core';
 
-export default styled(P)`
+export default styled(Text)`
   display: flex;
   align-items: flex-start;
   margin-bottom: 10px !important;

diff --git a/src/components/title.js b/src/components/title.js
@@ -1,34 +1,20 @@
 import React from 'react';
-import styled from '@emotion/styled';
-import { fontFamily, fontSize, fontWeight, lineHeight, space, border } from 'styled-system';
+import { Text } from '@chakra-ui/core';
 
-export const withTitleStyle = (comp) => styled(comp)`
-  ${fontFamily}
-  ${fontSize}
-  ${fontWeight}
-  ${lineHeight}
-  ${space}
-  ${border}
-`;
-
-const Title = ({ comp, ...otherProps }) => {
-  const TitleComponent = withTitleStyle(comp || 'span');
-
-  return (
-    <TitleComponent
-      fontFamily="heading"
-      fontSize={[4, 'desktop.4']}
-      lineHeight={2}
-      mt={[3, 4]}
-      mb={1}
-      px={0}
-      pt={0}
-      pb="2px"
-      borderBottom={`1px solid`}
-      borderColor="black.0"
-      {...otherProps}
-    />
-  );
-}
+const Title = (props) => (
+  <Text
+    as='span'
+    fontFamily="heading"
+    fontSize={[4, 'desktop.4']}
+    lineHeight={2}
+    mt={[3, 4]}
+    mb={1}
+    p={0}
+    pb="2px"
+    borderBottom='1px'
+    borderColor="black.0"
+    {...props}
+  />
+);
 
 export default Title;
diff --git a/src/components/typography.js b/src/components/typography.js
@@ -0,0 +1,139 @@
+import React from 'react'
+import { PseudoBox } from '@chakra-ui/core';
+
+const H1 = (props) => (
+  <PseudoBox
+    as='h1'
+    fontFamily='heading'
+    fontSize={[5,'desktop.5']}
+    lineHeight={3}
+    mt={[3, 4]}
+    mb={1}
+    p={0}
+    {...props}
+  />
+)
+const H2 = (props) => (
+  <PseudoBox
+    as='h2'
+    fontFamily='heading'
+    fontSize={[4,'desktop.4']}
+    lineHeight={2}
+    mt={[3, 4]}
+    mb={1}
+    p={0}
+    {...props}
+  />
+)
+const H3 = (props) => (
+  <PseudoBox
+    as='h3'
+    fontFamily='heading'
+    fontSize={[3,'desktop.3']}
+    lineHeight={1}
+    mt={[2, 3]}
+    mb={1}
+    p={0}
+    {...props}
+  />
+)
+const H4 = (props) => (
+  <PseudoBox
+    as='h4'
+    fontFamily='heading'
+    fontSize={[2,'desktop.2']}
+    lineHeight={1}
+    mt={2}
+    mb={1}
+    p={0}
+    {...props}
+  />
+)
+const H5 = (props) => (
+  <PseudoBox
+    as='h4'
+    fontFamily='heading'
+    fontSize={[1,'desktop.1']}
+    lineHeight={1}
+    mt={2}
+    mb={1}
+    p={0}
+    {...props}
+  />
+)
+
+const P = (props) => (
+  <PseudoBox
+    as='p'
+    lineHeight='1'
+    fontSize={[1, 'desktop.1']}
+    mb='2'
+    {...props}
+  />
+)
+
+const B = (props) => (
+  <PseudoBox
+    as='b'
+    fontFamily='bold'
+    {...props}
+  />
+)
+const Em = (props) => (
+  <PseudoBox
+    as='em'
+    fontFamily='italic'
+    {...props}
+  />
+)
+
+const I = (props) => (
+  <PseudoBox
+    as='i'
+    fontFamily='italic'
+    {...props}
+  />
+)
+
+const Ul = (props) => (
+  <PseudoBox
+    as='ul'
+    listStylePosition='inside'
+    listStyleImage='none'
+    listStyleType='disc'
+    mb={2}
+    {...props}
+  />
+)
+const Ol = (props) => (
+  <PseudoBox
+    as='ol'
+    listStylePosition='inside'
+    listStyleImage='none'
+    listStyleType='decimal'
+    mb={2}
+    {...props}
+  />
+)
+const Li = (props) => (
+  <PseudoBox
+    as='li'
+    fontFamily='body'
+    fontSize={[1, 'desktop.1']}
+    maxWidth="40rem"
+    mb={1}
+    {...props}
+  />
+)
+
+const Strong = (props) => (
+  <PseudoBox
+    as='strong'
+    fontFamily='bold'
+    {...props}
+  />
+)
+
+export {
+  H1, H2, H3, H4, H5, P, B, Em, I, Ul, Ol, Li, Strong
+}
diff --git a/src/pages/careers.mdx b/src/pages/careers.mdx
@@ -1,5 +1,4 @@
 import Helmet from 'react-helmet'
-import { InputButton } from 'bricks'
 import SEO from './../components/seo'
 
 <SEO

diff --git a/src/pages/index.js b/src/pages/index.js
@@ -2,14 +2,17 @@
 import { jsx } from "@emotion/core"
 // eslint-disable-next-line
 import { graphql, navigate } from "gatsby"
+import Helmet from "react-helmet"
+import { Box, Flex } from '@chakra-ui/core';
+import { H1, H3, P } from '../components/typography';
 
 import Layout from "../templates/layout"
 import SEO from "../components/seo"
-import Helmet from "react-helmet"
-import { Box, Flex, H1, P, ReactIcon, OutlinedButton } from "bricks"
+import ReactIcon from "../components/icons/React"
 import Title from "../components/title"
 import Project from "../components/project"
 import ContactUsButton from '../components/contactUsButton';
+import Button from '../components/button';
 
 const IndexPage = ({ data }) => {
   const structuredData = `{
@@ -51,7 +54,7 @@ const IndexPage = ({ data }) => {
         <H1>
           We build your React &amp;&nbsp;React Native frontend
         </H1>
-        <Box width={[1, 2/3]} mt={2} mx="auto">
+        <Box width={['100%', 2/3]} mt={2} mx="auto">
           <P>
             We take your design files &amp; api docs. And give you a fast mobile
             and browser app. You focus on your backend business&nbsp;logic!
@@ -66,13 +69,12 @@ const IndexPage = ({ data }) => {
           <ReactIcon width="200" height="200" />
           <Title
             fontSize={[3, 'desktop.3']}
-            lineHeight={2}
-            borderWidth={0}
+            border='none'
             mt={0}
           >
             React & React Native
           </Title>
-          <Box width={[1, 2/3]}>
+          <Box width={['100%', 2/3]}>
             <P textAlign="center">
               We have been building on React / React Native for 3 years now, and
               we absolutely love its declarative and functional philosophy. We
@@ -83,7 +85,7 @@ const IndexPage = ({ data }) => {
         </Flex>
       </Box>
       <Box>
-        <Box width={1} textAlign="center" mb={1}>
+        <Box textAlign="center" mb={1}>
           <Title>Our Featured Work</Title>
         </Box>
 
@@ -101,24 +103,24 @@ const IndexPage = ({ data }) => {
           link="/serverless/"
         />
 
-        <Box width={1} textAlign="center">
-          <OutlinedButton borderRadius={3} onClick={() => navigate('/work')}>
+        <Box textAlign="center">
+          <Button
+            onClick={() => navigate('/work')}
+          >
             More work
-          </OutlinedButton>
+          </Button>
         </Box>
       </Box>
 
       <Flex mt={[3, 6]} flexDirection="column" alignItems="center">
-        <Title
-          fontSize={[3, 'desktop.3']}
+        <H3
           fontWeight="bold"
           lineHeight={2}
-          borderWidth={0}
           mt={0}
         >
           WE ARE ALL EARS
-        </Title>
-        <Box width={[1, 2/3]} textAlign="center">
+        </H3>
+        <Box width={['100%', 2/3]} textAlign="center">
           <P>
             Whether it's a code review or a project, that you want to discuss or just want to say hello, We would love to hear from you.
             We cordially welcome your ideas, suggestions, and reviews regarding our work.

diff --git a/src/pages/open-source-contributions.js b/src/pages/open-source-contributions.js
@@ -2,104 +2,76 @@ import { jsx } from "@emotion/core"
 /** @jsx jsx */
 import styled from "@emotion/styled"
 import Layout from "../templates/layout"
-import { Box, Flex, H2, H4, P, HorizontalRule, css } from "bricks"
+import { Box, Flex, PseudoBox } from '@chakra-ui/core';
+import { H4, P, H2 } from "../components/typography";
 import { Link, graphql } from "gatsby"
 import Img from "gatsby-image"
 import SEO from "../components/seo"
 import PlainLink from "../components/link"
 import projects from "../data/open-source-projects.json"
 
-const CardBox = styled(Flex)(
-  css({
-    flexDirection: "column",
-    width: "20rem",
-    border: "2px solid #ddd",
-    justifyContent: "space-between",
-    padding: "0.5rem 1rem",
-    margin: "1rem",
-    "&:hover": {
-      boxShadow: "0px 0px 7px #ddd",
-    },
-  })
-)
-
-const FlexWrap = styled(Flex)`
-  flex-wrap: wrap;
-`
-
-const InlineBox = styled(Box)`
-  display: inline;
-`
-
-const Title = styled(H4)`
-  margin: 0;
-`
-
-const OutboundLink = styled(Link, {
-  shouldForwardProp: prop => prop !== "as",
-})(
-  css({
-    bg: "tint",
-    color: "black.1",
-    fontSize: "1",
-    px: "0.8rem",
-    py: "0.7rem",
-    display: "inline-block",
-    borderRadius: "6px",
-    border: "1px solid black",
-    textDecoration: "none",
-    "&:hover": {
+const CardBox = styled(Flex)({
+  flexDirection: "column",
+  width: "20rem",
+  border: "2px solid #ddd",
+  justifyContent: "space-between",
+  padding: "0.5rem 1rem",
+  margin: "1rem",
+  "&:hover": {
+    boxShadow: "0px 0px 7px #ddd",
+  },
+})
+
+const OutboundLink = (props) => (
+  <PseudoBox
+    as={Link}
+    bg="tint"
+    color="black.1"
+    fontSize="1"
+    px="0.8rem"
+    py="0.7rem"
+    borderRadius="6px"
+    border="1px solid black"
+    textDecoration="none"
+    display="inline-block"
+    lineHeight="1rem"
+    _hover={{
       bg: "black.1",
       color: "tint",
-    },
-    ":visited": {
+    }}
+    _visited={{
       bg: "tint",
       color: "black.1",
       "&:hover": {
         bg: "black.1",
         color: "tint",
       },
-    },
-  })
+    }}
+    {...props}
+  />
 )
 
-const ImageRow = styled(Flex)`
-  flex-direction: row;
-  justify-content: start;
-  align-items: center;
-  margin: 0.5rem 1rem;
-`
-
-const FlexRow = styled(Flex)`
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  margin: 0.5rem 1rem;
-`
-const Paragraph = styled(P)`
-  max-width: max-content;
-`;
-
 const Card = ({ name, description, github, demo, image }) => {
   const imageData = image.childImageSharp.fixed;
+
   return (
     <CardBox>
       <div>
-        <ImageRow>
-          <InlineBox minWidth={imageData.width}>
+        <Flex direction='row' justify='start' align='center' margin='0.5rem 1rem'>
+          <Box display='flex' minWidth={imageData.width + 'px'}>
             <Img
               fixed={imageData}
               objectFit="contain"
               objectPosition="50% 50%"
               alt={name}
             />
-          </InlineBox>
-          <Title padding="1">{name}</Title>
-        </ImageRow>
-        <HorizontalRule />
+          </Box>
+          <H4 m='0' padding="1">{name}</H4>
+        </Flex>
+        <Box height='2px' bg='black.2'/>
       </div>
-      <P padding="1">{description}</P>
-      <FlexRow>
+      <P p="1">{description}</P>
+      <Flex direction='row' justify='space-between' align='center' margin='0.5rem 1rem'>
         <OutboundLink as="a" href={github} target="_blank">
           GitHub
         </OutboundLink>
@@ -108,7 +80,7 @@ const Card = ({ name, description, github, demo, image }) => {
             Demo
           </OutboundLink>
         )}
-      </FlexRow>
+      </Flex>
     </CardBox>
   )
 }
@@ -135,11 +107,11 @@ const OpenSource = props => {
         ]}
         url="https://codebrahma.com/open-source-contributions"
       />
-      <Paragraph pt="2">
+      <P pt="2">
         Codebrahma dev team regularly contributes to open source. Some of our contributions can be found below. For more, you can checkout our&nbsp;
         <PlainLink as="a" href="https://github.com/Codebrahma" target="_blank" withUnderline>github page</PlainLink>.
-      </Paragraph>
-      <FlexWrap>
+      </P>
+      <Flex wrap='wrap'>
         {projects.map(({ name, description, github, demo, image }) => (
           <Card
             key={name}
@@ -150,7 +122,7 @@ const OpenSource = props => {
             image={props.data[image]}
           />
         ))}
-      </FlexWrap>
+      </Flex>
       <br />
       <blockquote>
         <Link to="/contact">Contact Us</Link> to work with the best React.js / React Native consultancy :)

diff --git a/src/pages/our-process.mdx b/src/pages/our-process.mdx
@@ -1,6 +1,7 @@
 import SEO from './../components/seo'
 import VimeoVideoContainer from './../components/vimeoVideoContainer'
-import { Flex, H4, Box, P } from "bricks"
+import { Flex, Box } from "@chakra-ui/core"
+import { H4, P } from "../components/typography"
 
 <SEO
   title="Agile Software Development for Web and Mobile Development"
@@ -13,11 +14,11 @@ import { Flex, H4, Box, P } from "bricks"
 
 ## What clients provide us
 <Flex flexDirection="column" mt="2" >
-  <Box width={1} pr="1">
+  <Box width={'100%'} pr="1">
     <H4>1. App Design</H4>
     <P>We accept designs in Figma, Zeplin, Sketch, Invision and etc.</P>
   </Box>
-  <Box width={1}>
+  <Box width={'100%'}>
     <iframe
       style="border: none;"
       width="100%"
@@ -31,11 +32,11 @@ import { Flex, H4, Box, P } from "bricks"
 ## What we build and deliver
 
 <Flex flexDirection="column" mt="2" >
-  <Box width={1} pr="1">
+  <Box width={'100%'} pr="1">
     <H4>1. Design system written in React</H4>
     <P>Design system is a collection of reusable components written in React, guided by clear standards like Airbnb, that can be assembled together to build your applications.</P>
   </Box>
-  <Box width={1}>
+  <Box width={'100%'}>
     <iframe
       src="https://codesandbox.io/embed/design-system-for-serverless-zcry2?fontsize=14&hidenavigation=1&theme=dark&view=preview"
       style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
@@ -47,7 +48,7 @@ import { Flex, H4, Box, P } from "bricks"
 </Flex>
 
 <Flex flexDirection="column" mt="2" >
-  <Box width={1} pr="1">
+  <Box width={'100%'} pr="1">
     <H4>2. Backend API tests and documentation on Postman</H4>
     <P>
       Our backend developers builds API schema and tests on Postman before the actual API development starts. 
@@ -68,11 +69,11 @@ import { Flex, H4, Box, P } from "bricks"
 </Flex>
 
 <Flex flexDirection="column" mt="3">
-  <Box width={1} pr="1">
+  <Box width='100%' pr="1">
     <H4>3. App developed with React</H4>
     <P>Based on the design, a complete React app developed with the help of design-system and APIs created above. The code will comply with Airbnb standards.</P>
   </Box>
-  <Box width={1}>
+  <Box width='100%'>
     <iframe
       src="https://codesandbox.io/embed/vigorous-platform-9b61d?autoresize=1&codemirror=1&fontsize=14&theme=dark&view=editor"
       style="width:100%; height:400px; border:0; border-radius: 4px; overflow:hidden;"
@@ -85,11 +86,11 @@ import { Flex, H4, Box, P } from "bricks"
 
 
 <Flex flexDirection="column" mt="3">
-  <Box width={1} pr="1">
+  <Box width={'100%'} pr="1">
     <H4>4. Deployed Website / Mobile App</H4>
     <P>Cloud hosting is done for websites. Mobile Apps are published to Android / iOS stores.</P>
   </Box>
-  <Box width={1}>
+  <Box width={'100%'}>
     <iframe
       src="https://codesandbox.io/embed/vigorous-platform-9b61d?autoresize=1&codemirror=1&fontsize=14&theme=dark&view=preview"
       style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"

diff --git a/src/pages/solutions.js b/src/pages/solutions.js
@@ -1,13 +1,13 @@
 /** @jsx jsx */
-import React from "react"
 import { jsx } from "@emotion/core"
 import { graphql } from "gatsby"
 import Img from "gatsby-image"
 import Layout from "../templates/layout"
 import Link from "../components/link"
 import SEO from "../components/seo"
 import Title from "../components/title"
-import { Flex, H1, H2, H4, P ,Box} from "bricks"
+import { Box, Flex } from '@chakra-ui/core';
+import { H1, H4, P } from "../components/typography"
 
 const SolutionsContainer = ({ title, children }) => (
   <Box mb='5'>
@@ -17,6 +17,7 @@ const SolutionsContainer = ({ title, children }) => (
       padding={1}
       borderRadius={4}
       mb="1"
+      lineHeight='1'
     >
       <Title mt={0} borderWidth={0} fontSize={3}>{title}</Title>
     </Box>

diff --git a/src/pages/thank-you.js b/src/pages/thank-you.js
@@ -1,9 +1,10 @@
 import React from "react"
 import { Link } from "gatsby"
-import { Box, P } from "bricks"
+import { Box } from '@chakra-ui/core';
 import { Main } from "theme-ui"
 import SEO from "../components/seo"
 import { Helmet } from "react-helmet"
+import { P } from "../components/typography"
 
 const ThankYou = () => {
   return (

diff --git a/src/pages/work.js b/src/pages/work.js
@@ -4,7 +4,7 @@ import { graphql } from "gatsby"
 import Layout from "../templates/layout"
 import SEO from "../components/seo"
 import Project from "../components/project"
-import { H1, I, P } from "bricks"
+import { I, H1, P } from "../components/typography"
 
 const WorkPage = ({ data }) => (
   <Layout>

diff --git a/src/templates/blog-post-layout.js b/src/templates/blog-post-layout.js
@@ -3,7 +3,8 @@ import Layout from "./layout"
 import { MDXRenderer } from "gatsby-plugin-mdx"
 import { graphql } from "gatsby"
 import Helmet from "react-helmet"
-import { H1, Flex, Box, I } from "bricks"
+import { Flex, Box } from "@chakra-ui/core"
+import { H1, I } from "../components/typography"
 import { getCategory, slugify } from "../utils"
 import CategoryLink from "../components/categorylink"
 import PlainLink from "../components/link"
@@ -12,10 +13,10 @@ import SEO from '../components/seo'
 const Sidebar = ({ author, category, tags }) => (
   <div>
     <Box my={2}>
-      <Flex fontSize={[0, 0]} justifyContent="center">
-        Written by
-      </Flex>
-      <Flex justifyContent="center" mt="0.5rem">
+      <Box display='flex' fontSize={[0, 0]} justifyContent="center" lineHeight='0'>
+        <H1 as='h1'>Written by</H1>
+      </Box>
+      <Flex justifyContent="center">
         <PlainLink to={`/author/${slugify(author)}`}>
           <I>{author}</I>
           <br />
@@ -27,7 +28,7 @@ const Sidebar = ({ author, category, tags }) => (
         <Flex fontSize={[0, 0]} justifyContent="center">
           Posted in
         </Flex>
-        <Flex justifyContent="center" mt="0.5rem">
+        <Flex justifyContent="center">
           <CategoryLink to={`/category/${slugify(getCategory({ category }))}`}>
             {getCategory({ category })}
           </CategoryLink>
@@ -39,7 +40,7 @@ const Sidebar = ({ author, category, tags }) => (
         <Flex fontSize={[0, 0]} justifyContent="center">
           Tags
         </Flex>
-        <Flex justifyContent="center" mt="0.5rem">
+        <Flex justifyContent="center">
           <Flex
             fontSize={[0, 0]}
             color="black.2"

diff --git a/src/templates/fonts.css b/src/templates/fonts.css
@@ -452,6 +452,9 @@ ul.unstyled-list{
   list-style-type: none;
   padding-left: 30px;
 }
+code {
+  font-size: 1rem;
+}
 code.language-text.css-0 {
   background: transparent !important;
   color: #4a2fff;
@@ -528,4 +531,5 @@ a:visited {
   overflow: initial;
   float: left;
   min-width: 100%;
+  font-size: 1rem;
 }
diff --git a/src/templates/header.js b/src/templates/header.js
@@ -1,29 +1,26 @@
 import PropTypes from "prop-types"
 import React from "react"
-import { Nav } from 'bricks'
+import Nav from '../components/nav'
 import { Logo } from '../components/logo'
 import { Link } from 'gatsby'
 
 const links = [
   {title: 'Work', link: '/work'},
+  {title: 'Process', link: '/our-process'},
   {title: 'FAQ', link: '/faq'},
   {title: 'Blog', link: '/blog'},
   {title: 'Contact', link: '/contact'},
 ]
 
-const Header = ({ siteTitle }) => {
-  return (
+const Header = ({ siteTitle }) => (
   <header>
-    <div>
-      <Nav 
-        logo={Logo({title: siteTitle})}
-        links={links}
-        GatsbyLink={Link}
-      />
-    </div>
+    <Nav
+      logo={Logo({title: siteTitle})}
+      links={links}
+      GatsbyLink={Link}
+    />
   </header>
 )
-}
 
 Header.propTypes = {
   siteTitle: PropTypes.string,

diff --git a/src/templates/layout.js b/src/templates/layout.js
diff --git a/src/templates/preview.js b/src/templates/preview.js
@@ -1,16 +1,14 @@
 import { jsx } from '@emotion/core'
 /** @jsx jsx */
 import styled from '@emotion/styled'
+import { PseudoBox, Box } from '@chakra-ui/core'
+import { H3, H4, P } from "../components/typography"
 import Layout from '../templates/layout'
-import { P, H3, H4, I,
-  Box, Text, HorizontalRule } from 'bricks'
 import PlainLink  from '../components/link'
-import { css } from 'bricks'
 import { Link } from 'gatsby'
 import { Helmet } from 'react-helmet'
 import Pagination from '../components/pagination'
 import { getCategory, getTags, slugify } from '../utils'
-import { space } from 'styled-system'
 import CategoryLink from '../components/categorylink'
 
 const isLast = (arr, index)=> arr.length-1 === index
@@ -40,77 +38,80 @@ const getHeading = ({
   return `Blog Posts, page ${currentPage} of ${totalPages}`;
 };
 
-const ReadPostLink = styled(Link)(
-  css({
-    textAlign: 'center',
-    width: '100%',
-    borderRadius: '3px',
-    p: '2px',
-    display: 'inline-block',
-    '&:hover':{
+const ReadPostLink = (props) => (
+  <PseudoBox 
+    as={Link}
+    textAlign='center'
+    width='100%'
+    borderRadius='3px'
+    p='2px'
+    display='inline-block'
+    _hover={{
       bg: 'black.1',
       color: 'tint',
-    },
-    ':visited':{
+    }}
+    _visited={{
       '&:hover':{
         bg: 'black.1',
         color: 'tint',
       }
-    }
-  })
+    }}
+    {...props}
+  />
 )
 
 const TagLink = styled(PlainLink)`
   display: inline-block;
   margin-right: 10px;
 `
 
-const HeadingLink = styled(Link)(
-    space, 
-    css({
-    p: '5px',
-    borderRadius:'5px',
-    display: 'inline-block',
-    textDecoration: 'none',
-    '&:hover': {
+const HeadingLink = (props) => (
+  <PseudoBox
+    as={Link}
+    p='5px'
+    borderRadius='5px'
+    display='inline-block'
+    textDecoration='none'
+    _hover={{
       backgroundColor: 'primary',
       color: 'secondary',
-    }
-  })
+    }}
+    {...props}
+  />
 )
 
 // refactoring the Link beautifully with invert etc
-const Blog = ({frontmatter})=>(
-      <Box>
-        <H3>
-          <HeadingLink ml='-5px' to={frontmatter.link}>
-            {frontmatter.title }
-          </HeadingLink>
-        </H3>
-        {getCategory(frontmatter) && (
-          <CategoryLink to={`/category/${slugify(getCategory(frontmatter))}`}>
-            {getCategory(frontmatter)}
-          </CategoryLink>
-        )}
-        <Box marginTop='2'>
-          <P>{frontmatter.description}</P>
-          <Box marginTop='1'>
-            <Text fontSize={[0,0]} color='black.2'>
-              {getTags(frontmatter) && getTags(frontmatter).map((tag,i)=> {
-                const slug = slugify(tag)
-                return (
-                  <TagLink key={tag} to={`/tag/${slug}`}>
-                    <I>#{slug}</I>
-                  </TagLink>
-                )
-              })}
-            </Text>
-          </Box>
-        </Box>
-        <Box marginBottom={3} marginTop={1}>
-          <ReadPostLink to={frontmatter.link}>Read Post</ReadPostLink>
-        </Box>
+const Blog = ({ frontmatter })=>(
+  <Box>
+    <H3>
+      <HeadingLink ml='-5px' to={frontmatter.link}>
+        {frontmatter.title}
+      </HeadingLink>
+    </H3>
+    {getCategory(frontmatter) && (
+      <CategoryLink to={`/category/${slugify(getCategory(frontmatter))}`}>
+        {getCategory(frontmatter)}
+      </CategoryLink>
+    )}
+    <Box marginTop='2'>
+      <P>{frontmatter.description}</P>
+      <Box marginTop='1'>
+        <P fontSize={[0,0]} color='black.2'>
+          {getTags(frontmatter) && getTags(frontmatter).map((tag,i)=> {
+            const slug = slugify(tag)
+            return (
+              <TagLink key={tag} to={`/tag/${slug}`}>
+                <I>#{slug}</I>
+              </TagLink>
+            )
+          })}
+        </P>
       </Box>
+    </Box>
+    <Box marginBottom={3} marginTop={1}>
+      <ReadPostLink to={frontmatter.link}>Read Post</ReadPostLink>
+    </Box>
+  </Box>
 
 )
 
@@ -139,24 +140,27 @@ const JournalPage = ({
         value,
       })
     } />
-    <H4 css={css({color: 'black.1'})}>
-    {getHeading({
-          isFirstPage,
-          currentPage,
-          totalPages,
-          type,
-          value,
-        })}</H4>
-    <Box marginTop={6} width={[1, 2/3]}>
+    <H4 color='black.1'>
+      {getHeading({
+        isFirstPage,
+        currentPage,
+        totalPages,
+        type,
+        value,
+      })}
+    </H4>
+    <Box marginTop={6} width={['100%', 2/3]}>
     {blogs.map((blog,i) => (
       <div key={blog.childMdx.frontmatter.title}>
         <Blog frontmatter={blog.childMdx.frontmatter} />
-        { isLast(blogs, i)? '': 
-        <HorizontalRule
-          width={1}
-          borderWidth={1}
-          borderColor={'black.3'}
-        />
+        { isLast(blogs, i)
+          ? ''
+          : (
+            <Box
+              height={'1px'}
+              bg={'black.3'}
+            />
+          )
         }
       </div>
     ))}

diff --git a/src/templates/project-layout.js b/src/templates/project-layout.js
@@ -2,33 +2,31 @@ import React from "react"
 import Layout from './layout'
 import { MDXRenderer } from 'gatsby-plugin-mdx'
 import { graphql } from 'gatsby'
-import {H1, Flex, Box} from 'bricks'
 import SEO  from '../components/seo'
+import { Box, Flex } from '@chakra-ui/core';
+import { H1 } from "../components/typography"
 
 const Sidebar = ({author, category, tags})=> (
   <div>
   </div>
 )
 
-const SolutionLayout = ({title, body, meta, keywords, description}) => {
-  return (
-    <Layout>
-      <SEO title={title} meta={meta} keywords={keywords} description={description}/>
-      <Flex flexWrap='wrap'>
-        <Box width={['100%',2/3]}>
-          <Box mb={4}>
-            <H1>{title}</H1>
-          </Box>
-          <MDXRenderer>{body}</MDXRenderer>
-        </Box>
-        <Box width={['100%',1/3]} marginTop={[1, 5]}>
-          <Sidebar  />
+const SolutionLayout = ({title, body, meta, keywords, description}) =>(
+  <Layout>
+    <SEO title={title} meta={meta} keywords={keywords} description={description}/>
+    <Flex flexWrap='wrap'>
+      <Box width={['100%',2/3]}>
+        <Box mb={4}>
+          <H1 fontFamily='heading'>{title}</H1>
         </Box>
-      </Flex>
-    </Layout>
-  )
-
-}
+        <MDXRenderer>{body}</MDXRenderer>
+      </Box>
+      <Box width={['100%',1/3]} marginTop={[1, 5]}>
+        <Sidebar  />
+      </Box>
+    </Flex>
+  </Layout>
+)
 
 const Transformer = ({data}) => {
   let {title, meta, keywords, description } = data.post.frontmatter

diff --git a/src/templates/solutions-layout.js b/src/templates/solutions-layout.js
@@ -1,7 +1,7 @@
 import React from "react"
 import { MDXRenderer } from "gatsby-plugin-mdx"
 import { graphql } from "gatsby"
-import { Flex } from "bricks"
+import { Flex } from "@chakra-ui/core"
 import SEO from "../components/seo"
 import Layout from "./layout"
 
@@ -22,7 +22,7 @@ const SolutionLayout = ({
         link={link}
         image={image ? image.publicURL : null}
       />
-      <Flex width={1} flexDirection="column">
+      <Flex width='100%' flexDirection="column">
         <MDXRenderer>{body}</MDXRenderer>
       </Flex>
     </Layout>

diff --git a/src/theme.js b/src/theme.js
@@ -1,15 +1,18 @@
+import { theme } from "@chakra-ui/core"
+
 const maxContainerWidth = '70rem'
 const baseLineHeight = 1.45; //24.8px
 const desktopBaseSize = 1.125; //18px
 const mobileBaseSize = 1; //16px
 const breakpoints = [
-  '52em',
+  '48rem',
 ]
 const scale = [
-  0.75,1, 1.2, 1.375, 1.6875, 2.5
+  0.75, 1, 1.2, 1.375, 1.6875, 2.5
 ];
 
 const fontSizes = scale.map(n=> n*mobileBaseSize + 'rem')
+//desktops
 fontSizes.desktop = scale.map(n=> n*desktopBaseSize + 'rem')
 
 const fonts = {
@@ -18,7 +21,13 @@ const fonts = {
   bold: 'TiemposBold',
   italic: 'TiemposItalic'
 }
+
+theme.sizes['maxContainerWidth'] = maxContainerWidth
+
+theme.borders['3px'] = '3px solid'
+
 const radii = [0, 1, 2, 4, 8, 16];
+
 const lineHeights = [
   0.5 * baseLineHeight + 'rem',
   1 * baseLineHeight + 'rem', 
@@ -27,7 +36,8 @@ const lineHeights = [
   2.5 * baseLineHeight + 'rem',
   3 * baseLineHeight + 'rem',
 ];
-const space = [0,...lineHeights];
+
+const space = [0, ...lineHeights];
 
 const colors = {
   tint: '#F8F4F2',
@@ -36,101 +46,14 @@ const colors = {
 colors.primary = colors.black[1]
 colors.secondary = colors.tint
 
-const styles = {
-  body: {
-    fontFamily: 'body',
-    fontSize: [1, 'desktop.1'],
-    lineHeight: 1,
-  },
-  h1: {
-    fontFamily: 'heading',
-    fontSize: [5, 'desktop.5'],
-    lineHeight: 3,
-    marginTop: [3, 4], 
-    marginBottom: 1,
-    padding: 0,
-  },
-  h2: {
-    fontFamily: 'heading',
-    fontSize: [4, 'desktop.4'],
-    lineHeight: 2,
-    marginTop: [3, 4],
-    marginBottom: 1,
-    padding: 0,
-  },
-  h3: {
-    fontFamily: 'heading',
-    fontSize: [3, 'desktop.3'],
-    lineHeight: 1,
-    marginTop: [ 2,3 ],
-    marginBottom: 1,
-    padding: 0,
-  },
-  h4: {
-    fontFamily: 'heading',
-    fontSize: [2, 'desktop.2'],
-    lineHeight: 1,
-    marginTop: 2,
-    marginBottom: 1,
-    padding: 0,
-  },
-  h5: {
-    fontFamily: 'heading',
-    fontSize: [1, 'desktop.1'],
-    lineHeight: 1,
-    marginTop: 2,
-    marginBottom: 1,
-    padding: 0,
-  },
-  p: {
-    fontFamily: 'body',
-    fontSize: [1, 'desktop.1'],
-    lineHeight: 1,
-    marginBottom: [2,2]
-  },
-  b: {
-    fontFamily: 'bold',
-  },
-  strong: {
-    fontFamily: 'bold'
-  },
-  em: {
-    fontFamily: 'italic'
-  },
-  i: {
-    fontFamily: 'italic',
-  },
-  Container: {
-    maxWidth: '71.5rem',
-    padding: 0,
-    px: ['0.725rem']
-  },
-  ul: {
-    listStyle: 'disc inside none' ,
-    mb: [2,2]
-  },
-  ol: {
-    listStyle: 'decimal inside none',
-  },
-  li: {
-    mb: ['0.5rem','0.5rem'],
-    fontFamily: 'body',
-    fontSize: [1, 'desktop.1'],
-    lineHeight: 1,
-    maxWidth: '40rem',
-    marginBottom: [1,1]
-  }
-}
-
-const theme = {
+const customTheme = {
+  ...theme,
   breakpoints,
   space,
   fontSizes,
   radii,
   lineHeights,
-  maxContainerWidth,
   fonts,
   colors,
-  styles,
 }
-export default theme;
+export default customTheme;