general styling, typography

src/gatsby-theme-docz/components/NavLink/styles.js

@@ -6,6 +6,7 @@ export const link = {
   fontSize: 2,
   '&.active': {
     color: 'sidebar.navLinkActive',
+    fontWeight: '700',
   },
 }
 
@@ -17,13 +18,14 @@ export const smallLink = {
   color: 'sidebar.tocLink',
   '&.active': {
     color: 'sidebar.tocLinkActive',
+    fontWeight: '500',
   },
   '&.active::before': {
     content: '""',
     position: 'absolute',
     display: 'block',
     top: '2px',
-    left: -2,
+    left: '-12px',
     height: '1rem',
     backgroundColor: 'primary',
     transition: 'width 200ms ease 0s',

src/gatsby-theme-docz/index.css

@@ -45,8 +45,8 @@ ul {
 p code {
   color: #943733;
   background: #f9f9f9;
-  padding: 8px 5px;
-  border-radius: 8px;
+  padding: 4px 8px;
+  border-radius: 4px;
 }
 
 h2 {

src/gatsby-theme-docz/theme/styles.js

@@ -4,7 +4,7 @@ const styles = {
     maxWidth: 920, // 1280
   },
   root: {
-    fontSize: 3,
+    fontSize: '18px',
     color: 'text',
     bg: 'background',
   },
@@ -17,22 +17,30 @@ const styles = {
     },
   },
   h1: {
-    fontSize: 6,
+    fontSize: '36px',
+    marginTop: '16px',
+    marginBottom: '30px',
+    fontFamily: 'Inter var',
   },
   h2: {
-    fontSize: 5,
+    fontSize: '30px',
+    fontFamily: 'Inter var',
   },
   h3: {
-    fontSize: 4,
+    fontSize: '24px',
+    fontFamily: 'Inter var',
   },
   h4: {
-    fontSize: 3,
+    fontSize: '20px',
+    fontFamily: 'Inter var',
   },
   h5: {
     fontSize: 2,
+    fontFamily: 'Inter var',
   },
   h6: {
     fontSize: 1,
+    fontFamily: 'Inter var',
   },
   li: {
     marginBottom: 1,