diff --git a/src/components/CodeDef/Block.js b/src/components/CodeDef/Block.js
new file mode 100644
index 000000000..7ebeb96aa
--- /dev/null
+++ b/src/components/CodeDef/Block.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Block = ({ children }) => <div className={styles.block}>{children}</div>;
+
+Block.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Block;
diff --git a/src/components/CodeDef/Bracket.js b/src/components/CodeDef/Bracket.js
new file mode 100644
index 000000000..2f6ca85b5
--- /dev/null
+++ b/src/components/CodeDef/Bracket.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Bracket = ({ children }) => (
+  <span className={styles.bracket}>{children}</span>
+);
+
+Bracket.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Bracket;
diff --git a/src/components/CodeDef/CodeDef.js b/src/components/CodeDef/CodeDef.js
new file mode 100644
index 000000000..27077e647
--- /dev/null
+++ b/src/components/CodeDef/CodeDef.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import styles from './CodeDef.module.scss';
+import Block from './Block';
+import Bracket from './Bracket';
+import Comment from './Comment';
+import Identifier from './Identifier';
+import Keyword from './Keyword';
+import NumberValue from './Number';
+import Operator from './Operator';
+import StringValue from './String';
+import Type from './Type';
+
+const CodeDef = ({ className, children }) => (
+  <code className={cx(styles.container, className)}>{children}</code>
+);
+
+CodeDef.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+};
+
+CodeDef.Block = Block;
+CodeDef.Bracket = Bracket;
+CodeDef.Comment = Comment;
+CodeDef.Keyword = Keyword;
+CodeDef.Identifier = Identifier;
+CodeDef.Number = NumberValue;
+CodeDef.Operator = Operator;
+CodeDef.String = StringValue;
+CodeDef.Type = Type;
+
+export default CodeDef;
diff --git a/src/components/CodeDef/CodeDef.module.scss b/src/components/CodeDef/CodeDef.module.scss
new file mode 100644
index 000000000..290b27d0f
--- /dev/null
+++ b/src/components/CodeDef/CodeDef.module.scss
@@ -0,0 +1,41 @@
+.container {
+  display: block;
+  line-height: 2;
+}
+
+.identifier {
+  color: var(--color-neutrals-700);
+}
+
+.type {
+  padding: 0.125rem;
+  border-radius: 0.125rem;
+  color: var(--color-green-500);
+  background: var(--color-green-050);
+}
+
+.comment {
+  color: var(--color-neutrals-500);
+
+  > p {
+    display: inline;
+  }
+}
+
+.keyword,
+.bracket,
+.operator {
+  color: var(--color-neutrals-600);
+}
+
+.block {
+  margin-left: 1rem;
+}
+
+.string {
+  color: var(--color-green-500);
+}
+
+.number {
+  color: var(--color-red-400);
+}
diff --git a/src/components/CodeDef/Comment.js b/src/components/CodeDef/Comment.js
new file mode 100644
index 000000000..a111ef82f
--- /dev/null
+++ b/src/components/CodeDef/Comment.js
@@ -0,0 +1,32 @@
+import React, { Children } from 'react';
+import PropTypes from 'prop-types';
+import Markdown from 'react-markdown';
+import styles from './CodeDef.module.scss';
+
+const Content = ({ children, ...props }) => {
+  if (Children.toArray(children).length === 0) {
+    return null;
+  }
+
+  return (
+    <span {...props} className={styles.comment}>
+      {`//`} {children}
+    </span>
+  );
+};
+
+const renderers = {
+  root: Content,
+};
+
+const Comment = ({ text }) => <Markdown source={text} renderers={renderers} />;
+
+Content.propTypes = {
+  children: PropTypes.node,
+};
+
+Comment.propTypes = {
+  text: PropTypes.string,
+};
+
+export default Comment;
diff --git a/src/components/CodeDef/Identifier.js b/src/components/CodeDef/Identifier.js
new file mode 100644
index 000000000..9c283855f
--- /dev/null
+++ b/src/components/CodeDef/Identifier.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Identifier = ({ children }) => (
+  <span className={styles.identifier}>{children}</span>
+);
+
+Identifier.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Identifier;
diff --git a/src/components/CodeDef/Keyword.js b/src/components/CodeDef/Keyword.js
new file mode 100644
index 000000000..69d37e70d
--- /dev/null
+++ b/src/components/CodeDef/Keyword.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Keyword = ({ children }) => (
+  <span className={styles.keyword}>{children}</span>
+);
+
+Keyword.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Keyword;
diff --git a/src/components/CodeDef/Number.js b/src/components/CodeDef/Number.js
new file mode 100644
index 000000000..ddff1828c
--- /dev/null
+++ b/src/components/CodeDef/Number.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const NumberValue = ({ value }) => (
+  <span className={styles.number}>{value}</span>
+);
+
+NumberValue.propTypes = {
+  value: PropTypes.number.isRequired,
+};
+
+export default NumberValue;
diff --git a/src/components/CodeDef/Operator.js b/src/components/CodeDef/Operator.js
new file mode 100644
index 000000000..0b3467347
--- /dev/null
+++ b/src/components/CodeDef/Operator.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Operator = ({ children }) => (
+  <span className={styles.operator}>{children}</span>
+);
+
+Operator.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Operator;
diff --git a/src/components/CodeDef/String.js b/src/components/CodeDef/String.js
new file mode 100644
index 000000000..c797d397b
--- /dev/null
+++ b/src/components/CodeDef/String.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const StringValue = ({ value }) => (
+  <span className={styles.string}>"{value}"</span>
+);
+
+StringValue.propTypes = {
+  value: PropTypes.string.isRequired,
+};
+
+export default StringValue;
diff --git a/src/components/CodeDef/Type.js b/src/components/CodeDef/Type.js
new file mode 100644
index 000000000..fc2300a3d
--- /dev/null
+++ b/src/components/CodeDef/Type.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './CodeDef.module.scss';
+
+const Type = ({ children }) => <span className={styles.type}>{children}</span>;
+
+Type.propTypes = {
+  children: PropTypes.node,
+};
+
+export default Type;
diff --git a/src/components/CodeDef/index.js b/src/components/CodeDef/index.js
new file mode 100644
index 000000000..a87df9c3c
--- /dev/null
+++ b/src/components/CodeDef/index.js
@@ -0,0 +1 @@
+export { default } from './CodeDef';
diff --git a/src/components/ConstantReference.js b/src/components/ConstantReference.js
index 981c82fa6..3e8d353a8 100644
--- a/src/components/ConstantReference.js
+++ b/src/components/ConstantReference.js
@@ -1,29 +1,26 @@
 import React from 'react';
-import Markdown from 'react-markdown';
 import PropTypes from 'prop-types';
+import CodeDef from './CodeDef';
+import JsonValue from './JsonValue';
 import styles from './ConstantReference.module.scss';
 
 const ConstantReference = ({ constant }) => {
-  const { name, values, type } = constant;
+  const { name, value } = constant;
+
   return (
-    <div className={styles.container}>
-      <div className={styles.name}>{name}</div>
-      <div>{type === 'array' ? '[' : '{'}</div>
-      <div className={styles.constantContainer}>
-        {values.map((value, i) => (
-          <Markdown key={i} source={value} />
-        ))}
-      </div>
-      <div>{type === 'array' ? ']' : '}'}</div>
-    </div>
+    <CodeDef className={styles.container}>
+      <h3 className={styles.name}>
+        <code>{name}</code>
+      </h3>
+      <JsonValue value={value} />
+    </CodeDef>
   );
 };
 
 ConstantReference.propTypes = {
   constant: PropTypes.shape({
-    type: PropTypes.string,
     name: PropTypes.string,
-    values: PropTypes.array,
+    value: PropTypes.any,
   }),
 };
 
diff --git a/src/components/ConstantReference.module.scss b/src/components/ConstantReference.module.scss
index d25166206..371c3175b 100644
--- a/src/components/ConstantReference.module.scss
+++ b/src/components/ConstantReference.module.scss
@@ -1,15 +1,15 @@
 .container {
-  color: var(--color-neutrals-500);
-  font-family: var(--code-font);
+  color: var(--color-neutrals-600);
   font-size: 0.875rem;
-  line-height: 1.5;
-  margin-top: 2rem;
+
+  &:not(:last-child) {
+    margin-bottom: 2rem;
+  }
 }
 
 .name {
   font-size: 1rem;
-  font-family: var(--primary-font-family);
-  color: var(--color-neutrals-800);
+  font-weight: normal;
   margin-bottom: 0.5rem;
 }
 
@@ -17,6 +17,3 @@
   margin-left: 0.5rem;
 }
 
-.constantContainer {
-  margin: 0 0 1rem 1.5rem;
-}
\ No newline at end of file
diff --git a/src/components/FunctionDefinition.js b/src/components/FunctionDefinition.js
index 052b95711..6aa16c506 100644
--- a/src/components/FunctionDefinition.js
+++ b/src/components/FunctionDefinition.js
@@ -1,53 +1,38 @@
-import React, { Children } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import Markdown from 'react-markdown';
+import cx from 'classnames';
+import CodeDef from './CodeDef';
 import styles from './FunctionDefinition.module.scss';
 
-const ParamDescription = ({ children, ...props }) => {
-  if (Children.toArray(children).length === 0) {
-    return null;
-  }
-
-  return (
-    <span {...props} className={styles.paramDescription}>
-      {' //'} {children}
-    </span>
-  );
-};
-
-ParamDescription.propTypes = {
-  children: PropTypes.node,
-};
-
-const FunctionDefinition = ({ params, returnValue }) => {
+const FunctionDefinition = ({ className, params, returnValue }) => {
   return (
-    <div className={styles.container}>
-      <span className={styles.keyword}>
-        {params.length > 0 ? 'function (' : 'function ()'}
-      </span>
-      {params.map((param, i) => (
-        <div key={i} className={styles.param}>
-          <span className={styles.paramName}>
-            {param.type.startsWith('...') ? `...${param.name}` : param.name}:{' '}
-          </span>
-          <span className={styles.type}>{param.type}</span>
-          {i !== params.length - 1 && ', '}
-          <Markdown
-            source={param.description}
-            renderers={{
-              root: ParamDescription,
-            }}
-          />
-        </div>
-      ))}
-      {params.length > 0 && <span className={styles.keyword}>)</span>}
-      <span className={styles.keyword}> => </span>
-      <span className={styles.type}>{returnValue.type}</span>
-    </div>
+    <CodeDef className={cx(styles.container, className)}>
+      <CodeDef.Keyword>function</CodeDef.Keyword>{' '}
+      <CodeDef.Bracket>{params.length > 0 ? '(' : '()'}</CodeDef.Bracket>
+      {params.length > 0 && (
+        <CodeDef.Block>
+          {params.map((param, i) => (
+            <div key={i}>
+              <CodeDef.Identifier>
+                {param.type.startsWith('...') ? `...${param.name}` : param.name}
+                :{' '}
+              </CodeDef.Identifier>
+              <CodeDef.Type>{param.type}</CodeDef.Type>
+              {i !== params.length - 1 ? ', ' : ' '}
+              <CodeDef.Comment text={param.description} />
+            </div>
+          ))}
+        </CodeDef.Block>
+      )}
+      {params.length > 0 && <CodeDef.Bracket>)</CodeDef.Bracket>}
+      <CodeDef.Operator> => </CodeDef.Operator>
+      <CodeDef.Type>{returnValue.type}</CodeDef.Type>
+    </CodeDef>
   );
 };
 
 FunctionDefinition.propTypes = {
+  className: PropTypes.string,
   params: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string,
diff --git a/src/components/FunctionDefinition.module.scss b/src/components/FunctionDefinition.module.scss
index 696cfe5ec..64fe73e35 100644
--- a/src/components/FunctionDefinition.module.scss
+++ b/src/components/FunctionDefinition.module.scss
@@ -1,32 +1,3 @@
 .container {
-  font-family: var(--code-font);
   font-size: 0.875rem;
-  line-height: 1.5;
-}
-
-.line:not(:last-child) {
-  margin-bottom: 0.5rem;
-}
-
-.param {
-  color: var(--color-neutrals-700);
-  margin-left: 1rem;
-}
-
-.paramDescription {
-  color: var(--color-neutrals-500);
-
-  > p {
-    color: inherit;
-    display: inline;
-  }
-}
-
-.keyword {
-  color: var(--color-neutrals-600);
-}
-
-.type {
-  color: var(--color-green-500);
-  background: var(--color-green-050);
 }
diff --git a/src/components/IconGallery.module.scss b/src/components/IconGallery.module.scss
index c120a91af..9389e5bfd 100644
--- a/src/components/IconGallery.module.scss
+++ b/src/components/IconGallery.module.scss
@@ -1,15 +1,15 @@
 .iconFilter {
   padding: 1rem;
   padding-left: 0;
+}
 
-  .search {
-    width: 60%;
-    padding: 0.5rem;
-  }
+.search {
+  width: 60%;
+  padding: 0.75rem 1rem;
+  height: auto;
 }
 
 .iconGrid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
-  grid-gap: 0.5rem;
 }
diff --git a/src/components/IconReference.module.scss b/src/components/IconReference.module.scss
index 72490eb96..10fbbeca5 100644
--- a/src/components/IconReference.module.scss
+++ b/src/components/IconReference.module.scss
@@ -1,15 +1,18 @@
 .button {
-  border: 1px solid var(--color-neutrals-100);
+  border: 1px solid transparent;
   background: var(--color-white);
-  border-radius: 2px;
+  border-radius: 4px;
   text-align: center;
-  padding: 0.2rem;
+  padding: 1rem;
   position: relative;
-  transition: all 0.4s;
+  transition: all 0.3s;
 
   &:hover {
     cursor: pointer;
-    border: 1px solid var(--color-neutrals-300);
+    border: 1px solid var(--color-neutrals-200);
+    box-shadow: 0 2px 6px 0 rgba(22, 38, 59, 0.14);
+    z-index: 1;
+
     .iconName {
       visibility: visible;
     }
@@ -18,19 +21,18 @@
 
 .icon {
   display: inline-block;
-  width: 70%;
+  width: 100%;
 }
 
 .iconName {
   visibility: hidden;
   background-color: var(--color-neutrals-900);
-  opacity: 0.8;
   color: var(--color-white);
   text-align: center;
   border-radius: 3px;
   padding: 0.25rem;
   position: absolute;
   font-size: 0.85rem;
-  top: 90%;
+  top: calc(100% + 0.5rem);
   z-index: 1;
 }
diff --git a/src/components/JsonValue.js b/src/components/JsonValue.js
new file mode 100644
index 000000000..6db4ea9a5
--- /dev/null
+++ b/src/components/JsonValue.js
@@ -0,0 +1,92 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import CodeDef from './CodeDef';
+
+const JsonValue = ({ inline, value }) => {
+  if (value == null) {
+    return <CodeDef.Keyword>{String(value)}</CodeDef.Keyword>;
+  }
+
+  if (Array.isArray(value)) {
+    return <ArrayValue inline={inline} value={value} />;
+  }
+
+  switch (typeof value) {
+    case 'object':
+      return <ObjectValue inline={inline} value={value} />;
+    case 'string':
+      return <CodeDef.String value={value} />;
+    case 'number':
+      return <CodeDef.Number value={value} />;
+    default:
+      return value;
+  }
+};
+
+const ObjectValue = ({ inline, value }) => {
+  const PropertyContainer = inline ? Fragment : CodeDef.Block;
+
+  return (
+    <>
+      <CodeDef.Bracket>{'{ '}</CodeDef.Bracket>
+      <PropertyContainer>
+        {Object.entries(value).map(([key, value], idx, arr) => {
+          const Container = inline ? Fragment : 'div';
+
+          return (
+            <Container key={key}>
+              <CodeDef.Identifier>{key}: </CodeDef.Identifier>
+              <JsonValue inline value={value} />
+              {idx !== arr.length - 1 && ', '}
+            </Container>
+          );
+        })}
+      </PropertyContainer>
+      <CodeDef.Bracket>{' }'}</CodeDef.Bracket>
+    </>
+  );
+};
+
+const ArrayValue = ({ inline, value }) => {
+  const ItemContainer = inline ? Fragment : CodeDef.Block;
+
+  return (
+    <>
+      <CodeDef.Bracket>[</CodeDef.Bracket>
+      <ItemContainer>
+        {value.map((item, idx) => {
+          const Container = inline ? Fragment : 'div';
+
+          return (
+            <Container key={idx}>
+              <JsonValue inline value={item} />
+              {idx !== value.length - 1 && ', '}
+            </Container>
+          );
+        })}
+      </ItemContainer>
+      <CodeDef.Bracket>]</CodeDef.Bracket>
+    </>
+  );
+};
+
+ArrayValue.propTypes = {
+  inline: PropTypes.bool,
+  value: PropTypes.array.isRequired,
+};
+
+ObjectValue.propTypes = {
+  inline: PropTypes.bool,
+  value: PropTypes.object.isRequired,
+};
+
+JsonValue.propTypes = {
+  inline: PropTypes.bool,
+  value: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.array,
+    PropTypes.string,
+  ]),
+};
+
+export default JsonValue;
diff --git a/src/components/Markdown.js b/src/components/Markdown.js
new file mode 100644
index 000000000..17a9884f7
--- /dev/null
+++ b/src/components/Markdown.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import ReactMarkdown from 'react-markdown';
+import styles from './Markdown.module.scss';
+
+const Markdown = ({ className, ...props }) => (
+  <ReactMarkdown className={cx(styles.container, className)} {...props} />
+);
+
+Markdown.propTypes = {
+  className: PropTypes.string,
+};
+
+export default Markdown;
diff --git a/src/components/Markdown.module.scss b/src/components/Markdown.module.scss
new file mode 100644
index 000000000..a0b072a78
--- /dev/null
+++ b/src/components/Markdown.module.scss
@@ -0,0 +1,15 @@
+.container {
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  code {
+    padding: 0.125rem;
+    background: var(--color-neutrals-200);
+    border-radius: 2px;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/src/components/MethodReference.js b/src/components/MethodReference.js
index 534a319e4..720c90843 100644
--- a/src/components/MethodReference.js
+++ b/src/components/MethodReference.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ReferenceExample from './ReferenceExample';
 import FunctionDefinition from './FunctionDefinition';
-import Markdown from 'react-markdown';
+import Markdown from './Markdown';
 import styles from './MethodReference.module.scss';
 
 const MethodReference = ({ className, method }) => (
@@ -10,6 +10,7 @@ const MethodReference = ({ className, method }) => (
     <h3 className={styles.name}>{method.name}</h3>
     <Markdown className={styles.description} source={method.description} />
     <FunctionDefinition
+      className={styles.functionDefinition}
       params={method.params}
       returnValue={method.returnValue}
     />
diff --git a/src/components/MethodReference.module.scss b/src/components/MethodReference.module.scss
index ae4595557..033a471d0 100644
--- a/src/components/MethodReference.module.scss
+++ b/src/components/MethodReference.module.scss
@@ -1,15 +1,20 @@
 .name {
+  font-family: var(--code-font);
+  display: inline-block;
   padding: 0.125rem 0.25rem;
-  display: inline;
   color: var(--color-teal-500);
   background: var(--color-teal-050);
+  margin-bottom: 1rem;
 }
 
 .description {
-  margin-top: 1rem;
   margin-bottom: 1rem;
 }
 
 .example:not(:last-child) {
   margin-bottom: 2rem;
 }
+
+.functionDefinition {
+  margin-bottom: 1rem;
+}
diff --git a/src/components/PageTitle.js b/src/components/PageTitle.js
new file mode 100644
index 000000000..7603031b2
--- /dev/null
+++ b/src/components/PageTitle.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './PageTitle.module.scss';
+
+const PageTitle = ({ children }) => (
+  <h1 className={styles.pageTitle}>{children}</h1>
+);
+
+PageTitle.propTypes = {
+  children: PropTypes.node,
+};
+
+export default PageTitle;
diff --git a/src/components/PageTitle.module.scss b/src/components/PageTitle.module.scss
new file mode 100644
index 000000000..f45086b11
--- /dev/null
+++ b/src/components/PageTitle.module.scss
@@ -0,0 +1,5 @@
+.pageTitle {
+  font-size: 2.5rem;
+  margin-bottom: 0;
+  font-weight: normal;
+}
diff --git a/src/components/PropList.js b/src/components/PropList.js
index e8a5bd2dd..53ea673b0 100644
--- a/src/components/PropList.js
+++ b/src/components/PropList.js
@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import CodeDef from './CodeDef';
 import FunctionDefinition from './FunctionDefinition';
-import Markdown from 'react-markdown';
+import Markdown from './Markdown';
 import ReferenceExample from './ReferenceExample';
 import styles from './PropList.module.scss';
 import { format } from 'date-fns';
@@ -20,28 +21,34 @@ const PropTypeInfo = ({ type }) => {
       const { itemTypes } = type.meta;
 
       return itemTypes.raw === 'oneOf' ? (
-        <div className={styles.listLike}>
-          <div>{'<Array of'}</div>
-          <div className={styles.arg}>
+        <CodeDef className={styles.codeDef}>
+          <CodeDef.Bracket>{'<'}</CodeDef.Bracket>
+          <CodeDef.Keyword>Array of</CodeDef.Keyword>
+          <CodeDef.Block>
             <PropTypeInfo type={itemTypes} />
-          </div>
-          <div>{'>'}</div>
-        </div>
+          </CodeDef.Block>
+          <CodeDef.Bracket>{'>'}</CodeDef.Bracket>
+        </CodeDef>
       ) : (
         <PropTypeInfo type={itemTypes} />
       );
     }
     case 'oneOf':
       return (
-        <div className={styles.listLike}>
-          <div>{'<One of'}</div>
-          <div className={styles.arg}>
+        <CodeDef className={styles.codeDef}>
+          <CodeDef.Bracket>{'<'}</CodeDef.Bracket>
+          <CodeDef.Keyword>One of</CodeDef.Keyword>
+          <CodeDef.Block>
             {type.meta.constants.map((constant) => (
-              <div key={constant}>{constant},</div>
+              <div key={constant}>
+                <CodeDef.Identifier key={constant}>
+                  {constant},
+                </CodeDef.Identifier>
+              </div>
             ))}
-          </div>
-          <div>{'>'}</div>
-        </div>
+          </CodeDef.Block>
+          <CodeDef.Bracket>{'>'}</CodeDef.Bracket>
+        </CodeDef>
       );
     case 'oneOfType':
       return type.meta.types.map((type, idx) => (
@@ -86,38 +93,63 @@ const PropList = ({ propTypes }) => {
           return (
             <div key={name} className={styles.container}>
               <div className={styles.info}>
-                <code>{name}</code>
-                {isRequired && <span className={styles.flagged}>required</span>}
-                {deprecation && (
-                  <span className={styles.flagged}>deprecated</span>
-                )}
-                <div className={styles.type}>{type.name}</div>
+                <div>
+                  <code className={styles.propName}>{name}</code>
+                  {isRequired && (
+                    <span className={styles.flagged}>required</span>
+                  )}
+                  {deprecation && (
+                    <span className={styles.flagged}>deprecated</span>
+                  )}
+                </div>
+                <CodeDef.Type>{type.name}</CodeDef.Type>
                 {defaultValue !== undefined && (
                   <div className={styles.default}>
-                    <p>DEFAULT</p>
-                    <p>{String(defaultValue)}</p>
+                    <div className={styles.label}>DEFAULT</div>
+                    <code>
+                      {String(defaultValue)
+                        .split('.')
+                        .map((word, idx, parts) => (
+                          <Fragment key={idx}>
+                            {word}
+                            {idx !== parts.length - 1 && (
+                              <>
+                                <wbr />.
+                              </>
+                            )}
+                          </Fragment>
+                        ))}
+                    </code>
                   </div>
                 )}
               </div>
-              <div className={styles.propInfo}>
+              <div>
                 {deprecation && (
-                  <div className={styles.deprecation}>
+                  <div className={cx(styles.deprecation, styles.section)}>
                     <div className={styles.deprecationDate}>
                       Due {format(new Date(deprecation.date), 'MMMM do, yyyy')}
                     </div>
                     <Markdown
-                      className={styles.markdownContainer}
+                      className={styles.deprecationMarkdownContainer}
                       source={deprecation.description}
                     />
                   </div>
                 )}
-                <Markdown
-                  className={cx(styles.details, styles.markdownContainer)}
-                  source={description}
-                />
-                <PropTypeInfo type={type} />
+                {description && (
+                  <Markdown
+                    className={cx(styles.section)}
+                    source={description}
+                  />
+                )}
+                <div className={styles.section}>
+                  <PropTypeInfo type={type} />
+                </div>
                 {examples.map((example, idx) => (
-                  <ReferenceExample key={idx} example={example} />
+                  <ReferenceExample
+                    key={idx}
+                    className={styles.section}
+                    example={example}
+                  />
                 ))}
               </div>
             </div>
diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss
index f49307611..0948a0cb3 100644
--- a/src/components/PropList.module.scss
+++ b/src/components/PropList.module.scss
@@ -1,40 +1,36 @@
 .container {
-  display: flex;
-  border-bottom: solid var(--color-neutrals-200) 1px;
-  padding-bottom: 2rem;
-  margin-top: 1rem;
-}
-
-.info {
-  width: 30%;
-  word-break: break-all;
+  display: grid;
+  grid-template-columns: 30% minmax(0, 1fr);
+  grid-gap: 1rem;
 
-  code {
-    font-weight: bold;
+  &:not(:last-child) {
+    margin-bottom: 2rem;
+    padding-bottom: 2rem;
+    border-bottom: solid var(--color-neutrals-200) 1px;
   }
+}
 
-  h3 {
-    margin-top: 0;
-  }
+.propName {
+  font-weight: bold;
+}
+
+.info {
+  overflow-wrap: break-all;
 }
 
 .default {
   margin-top: 2rem;
-  color: var(--color-neutrals-700);
 
-  p:first-of-type {
+  .label {
+    color: var(--color-neutrals-600);
     font-size: 0.75rem;
+    font-weight: bold;
   }
 }
 
-.type {
-  color: var(--color-neutrals-600);
-}
-
 .deprecation {
-  padding: 0.25rem;
+  padding: 0.5rem;
   background: var(--color-red-100);
-  margin-bottom: 1rem;
 }
 
 .deprecationDate {
@@ -43,17 +39,13 @@
   margin-bottom: 1rem;
 }
 
-.propInfo {
-  width: 70%;
-}
-
-.markdownContainer > *:first-child {
-  margin-top: 0;
-}
+.deprecationMarkdownContainer {
+  p:last-child {
+    margin-bottom: 0;
+  }
 
-.details {
-  &:not(:last-child):not(:empty) {
-    margin-bottom: 1rem;
+  code {
+    background: var(--color-red-200);
   }
 }
 
@@ -65,21 +57,15 @@
   font-weight: bold;
 }
 
-.arg {
-  padding-left: 1rem;
-}
-
-.listLike {
-  font-family: var(--code-font);
+.codeDef {
   font-size: 0.875rem;
-  color: var(--color-neutrals-600);
   max-height: 320px;
   overflow-y: auto;
 }
 
 .shape {
   &:not(:last-child) {
-    margin-bottom: 2rem;
+    margin-bottom: 4rem;
   }
 
   h4 {
@@ -92,3 +78,7 @@
     padding-bottom: 0;
   }
 }
+
+.section:not(:last-child) {
+  margin-bottom: 2rem;
+}
diff --git a/src/components/ReferenceExample.js b/src/components/ReferenceExample.js
index 6801289e2..d89f38ec4 100644
--- a/src/components/ReferenceExample.js
+++ b/src/components/ReferenceExample.js
@@ -66,7 +66,13 @@ const ReferenceExample = ({
                 useToastManager={useToastManager}
               />
             )}
-            <LiveEditor style={{ fontSize: '0.75rem' }} />
+            <LiveEditor
+              style={{
+                fontSize: '0.75rem',
+                maxHeight: '30rem',
+                overflow: 'auto',
+              }}
+            />
             {live && <LiveError className={styles.error} />}
           </LiveProvider>
         </div>
diff --git a/src/components/ReferenceExample.module.scss b/src/components/ReferenceExample.module.scss
index bd97e7e85..7d3a880af 100644
--- a/src/components/ReferenceExample.module.scss
+++ b/src/components/ReferenceExample.module.scss
@@ -10,5 +10,7 @@
 }
 
 .title {
+  font-weight: bold;
+  font-size: 1.25rem;
   margin-bottom: 1rem;
 }
diff --git a/src/components/ReferencePreview.js b/src/components/ReferencePreview.js
index f027d712e..c2348b1a6 100644
--- a/src/components/ReferencePreview.js
+++ b/src/components/ReferencePreview.js
@@ -8,7 +8,6 @@ const EXAMPLE_CSS = `
 .nr1-ReferenceExample {
   line-height: 1.36;
   font-weight: 400;
-  background-color: #fff;
   color: #000e0e;
   font-size: 12px;
   font-family: Open Sans,Segoe UI,Tahoma,sans-serif;
diff --git a/src/components/TypeDefReference.js b/src/components/TypeDefReference.js
index bbcbb989d..d041eb69d 100644
--- a/src/components/TypeDefReference.js
+++ b/src/components/TypeDefReference.js
@@ -1,60 +1,33 @@
 import React from 'react';
-import Markdown from 'react-markdown';
 import PropTypes from 'prop-types';
 import styles from './TypeDefReference.module.scss';
-
-const RenderDescription = ({ children }) => (
-  <span className={styles.description}>
-    <p>{` //`}</p> {children}
-  </span>
-);
-
-const RenderProperty = ({ property }) => {
-  const { type, name, description } = property;
-
-  return (
-    <div key={name} className={styles.propertyContainer}>
-      <span className={styles.propertyName}>{name}</span>
-      <span className={styles.type}>{type}</span>,
-      <Markdown
-        source={description}
-        renderers={{
-          root: RenderDescription,
-        }}
-      />
-    </div>
-  );
-};
+import CodeDef from './CodeDef';
 
 const TypeDefReference = ({ typeDef }) => {
   const { properties, name } = typeDef;
 
   return (
-    <div className={styles.container} key={name}>
-      <div className={styles.name}>{name}</div>
-      <div className={styles.block}>
-        <div className={styles.topBracket}>{`{`}</div>
-        {properties.map((property, i) => (
-          <RenderProperty key={i} property={property} />
-        ))}
-        <div>{`}`}</div>
-      </div>
+    <div className={styles.container}>
+      <h3 className={styles.name}>
+        <code>{name}</code>
+      </h3>
+      <CodeDef className={styles.typeDef}>
+        <CodeDef.Bracket>{'{'}</CodeDef.Bracket>
+        <CodeDef.Block>
+          {properties.map((property) => (
+            <div key={property.name}>
+              <CodeDef.Identifier>{property.name}: </CodeDef.Identifier>
+              <CodeDef.Type>{property.type}</CodeDef.Type>,{' '}
+              <CodeDef.Comment text={property.description} />
+            </div>
+          ))}
+        </CodeDef.Block>
+        <CodeDef.Bracket>{'}'}</CodeDef.Bracket>
+      </CodeDef>
     </div>
   );
 };
 
-RenderProperty.propTypes = {
-  property: PropTypes.shape({
-    type: PropTypes.string,
-    name: PropTypes.string,
-    description: PropTypes.string,
-  }),
-};
-
-RenderDescription.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
 TypeDefReference.propTypes = {
   typeDef: PropTypes.shape({
     properties: PropTypes.array,
diff --git a/src/components/TypeDefReference.module.scss b/src/components/TypeDefReference.module.scss
index ae862b4b5..b8f17b3b5 100644
--- a/src/components/TypeDefReference.module.scss
+++ b/src/components/TypeDefReference.module.scss
@@ -1,42 +1,13 @@
-.container {
-  color: var(--color-neutrals-500);
-  font-family: var(--code-font);
-  font-size: 0.875rem;
-  line-height: 1.5;
-  margin-top: 2rem;
+.container:not(:last-child) {
+  margin-bottom: 2rem;
 }
 
 .name {
   font-size: 1rem;
-  font-family: var(--primary-font-family);
-  color: var(--color-neutrals-800);
+  font-weight: normal;
   margin-bottom: 0.5rem;
 }
 
-.block {
-  margin-left: 0.5rem;
-}
-
-.topBracket {
-  margin-bottom: 1rem;
-}
-
-.type {
-  color: var(--color-green-500);
-  background: var(--color-green-050);
-}
-
-.description {
-  > p {
-    display: inline;
-  }
-}
-
-.propertyContainer {
-  margin: 0 0 1rem 1.5rem;
-}
-
-.propertyName {
-  color: var(--color-neutrals-700);
-  margin-right: 0.5rem;
+.typeDef {
+  font-size: 0.875rem;
 }
diff --git a/src/components/styles.scss b/src/components/styles.scss
index 554ff7533..63f100d15 100644
--- a/src/components/styles.scss
+++ b/src/components/styles.scss
@@ -88,7 +88,7 @@ body {
   font-family: var(--primary-font-family);
   color: var(--color-neutrals-700);
   background-color: var(--color-white);
-  line-height: 1.2;
+  line-height: 1.5;
 }
 
 main {
@@ -106,8 +106,8 @@ img {
 }
 
 p {
-  margin: 0;
-  margin-top: 8px;
+  margin-top: 0;
+  margin-bottom: 1em;
 }
 
 h1,
@@ -116,7 +116,7 @@ h3,
 h4,
 h5,
 h6 {
-  margin-top: revert;
+  margin-top: 0;
   margin-bottom: 8px;
   font-weight: 600;
   color: var(--color-neutrals-800);
@@ -166,12 +166,8 @@ button,
 }
 
 ul {
-  padding-left: 30px;
-  line-height: 1.6;
-}
-
-li {
-  margin-bottom: 1rem;
+  margin: 0;
+  padding-left: 2rem;
 }
 
 code {
diff --git a/src/hooks/useApiDoc.js b/src/hooks/useApiDoc.js
index 0e05d843f..74f9b8ef1 100644
--- a/src/hooks/useApiDoc.js
+++ b/src/hooks/useApiDoc.js
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { pullTypeDefNames } from '../utils/typeDefs';
+import { getTypeDefs } from '../utils/typeDefs';
 import navigationApi from '../data/navigationApi';
 
 const IGNORED_METHODS = [
@@ -38,28 +38,6 @@ const useApiDoc = (name) => {
 
     const apiDocs = api?.__docs__;
 
-    const getTypeDefs = (api) => {
-      const apiTypeDefNames = Object.getOwnPropertyNames(api)
-        .filter((key) => !IGNORED_METHODS.includes(key))
-        .map((key) => api[key]?.__docs__?.tags)
-        .filter(Boolean)
-        .flatMap(pullTypeDefNames);
-
-      const allTypeDefs = window.__NR1_SDK__.default.__typeDefs__;
-
-      const typeDefs = apiTypeDefNames
-        .map((name) => allTypeDefs[name])
-        .filter((typeDef) => typeDef !== undefined);
-
-      const structuredTypeDefs = typeDefs.map((typeDef) => ({
-        properties: typeDef.tags.property,
-        name: typeDef.tags.typedef.find((tag) => tag.identifier).identifier
-          .name,
-      }));
-
-      return structuredTypeDefs;
-    };
-
     const getConstants = (api) => {
       return Object.getOwnPropertyNames(api)
         .filter(
@@ -70,21 +48,20 @@ const useApiDoc = (name) => {
         .map((member) => {
           return {
             name: `${name}.${member}`,
-            type: api[member] instanceof Array ? 'array' : typeof api[member],
-            values:
-              api[member] instanceof Array
-                ? api[member].map((el) => JSON.stringify(el))
-                : Object.getOwnPropertyNames(api[member]).map(
-                    (key) => `${key}: ${JSON.stringify(api[member][key])}`
-                  ),
+            value: api[member],
           };
         });
     };
 
+    const properties = Object.getOwnPropertyNames(api)
+      .filter((key) => !IGNORED_METHODS.includes(key))
+      .map((key) => api[key]?.__docs__?.tags)
+      .filter(Boolean);
+
     return {
       description: apiDocs?.text,
       usage: `import { ${name} } from 'nr1'`,
-      typeDefs: getTypeDefs(api),
+      typeDefs: getTypeDefs(properties),
       constants: getConstants(api),
       methods: Object.getOwnPropertyNames(api)
         .filter(
diff --git a/src/hooks/useComponentDoc.js b/src/hooks/useComponentDoc.js
index a8076b037..926d964bf 100644
--- a/src/hooks/useComponentDoc.js
+++ b/src/hooks/useComponentDoc.js
@@ -1,8 +1,8 @@
 import { useMemo } from 'react';
 import { getPropTypeDefinition } from '../utils/propTypeInfo';
-import { pullTypeDefNames } from '../utils/typeDefs';
+import { getTypeDefs } from '../utils/typeDefs';
 
-const IGNORED_LIVE_EXAMPLES = ['Dropdown', 'Modal', 'Tooltip'];
+const IGNORED_LIVE_EXAMPLES = ['Dropdown', 'Modal', 'Tooltip', 'Select'];
 
 const IGNORED_METHODS = [
   'prototype',
@@ -32,36 +32,6 @@ const getPropTypes = (component) => {
   );
 };
 
-const getTypeDefs = (component) => {
-  const tagsFromComponentProperties = Object.getOwnPropertyNames(component)
-    .filter((key) => !IGNORED_METHODS.includes(key))
-    .map((key) => component[key]?.__docs__?.tags)
-    .filter(Boolean);
-
-  const tagsFromPropTypes = component.propTypes
-    ? Object.getOwnPropertyNames(component.propTypes).map(
-        (key) => component.propTypes[key]?.__docs__?.tags
-      )
-    : [];
-
-  const componentTypeDefNames = tagsFromComponentProperties
-    .concat(tagsFromPropTypes)
-    .flatMap(pullTypeDefNames);
-
-  const allTypeDefs = window.__NR1_SDK__.default.__typeDefs__;
-
-  const typeDefs = componentTypeDefNames
-    .map((name) => allTypeDefs[name])
-    .filter((typeDef) => typeDef !== undefined);
-
-  const structuredTypeDefs = typeDefs.map((typeDef) => ({
-    properties: typeDef.tags.property,
-    name: typeDef.tags.typedef.find((tag) => tag.identifier).identifier.name,
-  }));
-
-  return structuredTypeDefs;
-};
-
 const useComponentDoc = (componentName) => {
   if (typeof window === 'undefined') global.window = {};
 
@@ -73,6 +43,17 @@ const useComponentDoc = (componentName) => {
       return null;
     }
 
+    const tagsFromComponentProperties = Object.getOwnPropertyNames(component)
+      .filter((key) => !IGNORED_METHODS.includes(key))
+      .map((key) => component[key]?.__docs__?.tags)
+      .filter(Boolean);
+
+    const tagsFromPropTypes = component.propTypes
+      ? Object.getOwnPropertyNames(component.propTypes).map(
+          (key) => component.propTypes[key]?.__docs__?.tags
+        )
+      : [];
+
     return {
       description: component?.__docs__?.text,
       examples: getExamples(component),
@@ -95,7 +76,9 @@ const useComponentDoc = (componentName) => {
             examples: methodDocs?.tags.examples ?? [],
           };
         }),
-      typeDefs: getTypeDefs(component),
+      typeDefs: getTypeDefs(
+        tagsFromComponentProperties.concat(tagsFromPropTypes)
+      ),
     };
   }, [componentName, window?.__NR1_SDK__]);
 };
diff --git a/src/templates/ApiReferenceTemplate.js b/src/templates/ApiReferenceTemplate.js
index f20e74fb4..242aeabbb 100644
--- a/src/templates/ApiReferenceTemplate.js
+++ b/src/templates/ApiReferenceTemplate.js
@@ -3,8 +3,9 @@ import cx from 'classnames';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import InlineCodeSnippet from '../components/InlineCodeSnippet';
-import ReactMarkdown from 'react-markdown';
 import Layout from '../components/Layout';
+import PageTitle from '../components/PageTitle';
+import Markdown from '../components/Markdown';
 import MethodReference from '../components/MethodReference';
 import TypeDefReference from '../components/TypeDefReference';
 import ConstantReference from '../components/ConstantReference';
@@ -28,31 +29,41 @@ const ApiReferenceTemplate = ({ data }) => {
   return (
     <Layout>
       <SEO title={title} description={description} />
-      <h1>{api}</h1>
+      <PageTitle>{api}</PageTitle>
 
-      <section
-        className={cx(templateStyles.section, templateStyles.description)}
-      >
-        <ReactMarkdown source={apiDescription} />
-      </section>
+      {apiDescription && (
+        <section
+          className={cx(
+            templateStyles.section,
+            templateStyles.description,
+            'intro-text'
+          )}
+        >
+          <Markdown source={apiDescription} />
+        </section>
+      )}
 
       <section className={templateStyles.section}>
-        <h2>Usage</h2>
+        <h2 className={templateStyles.sectionTitle}>Usage</h2>
         <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
       </section>
 
       {methods.length > 0 && (
         <section className={templateStyles.section}>
-          <h2>API methods</h2>
+          <h2 className={templateStyles.sectionTitle}>API methods</h2>
           {methods.map((method, i) => (
-            <MethodReference key={i} method={method} />
+            <MethodReference
+              key={i}
+              method={method}
+              className={templateStyles.section}
+            />
           ))}
         </section>
       )}
 
       {typeDefs.length > 0 && (
         <section className={templateStyles.section}>
-          <h2>Type definitions</h2>
+          <h2 className={templateStyles.sectionTitle}>Type definitions</h2>
           {typeDefs.map((typeDef, i) => (
             <TypeDefReference key={i} typeDef={typeDef} />
           ))}
@@ -61,7 +72,7 @@ const ApiReferenceTemplate = ({ data }) => {
 
       {constants.length > 0 && (
         <section className={templateStyles.section}>
-          <h2>Constants</h2>
+          <h2 className={templateStyles.sectionTitle}>Constants</h2>
           {constants.map((constant, i) => (
             <ConstantReference key={i} constant={constant} />
           ))}
diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js
index a5ef245f4..77492f6ac 100644
--- a/src/templates/ComponentReferenceTemplate.js
+++ b/src/templates/ComponentReferenceTemplate.js
@@ -3,9 +3,10 @@ import cx from 'classnames';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import InlineCodeSnippet from '../components/InlineCodeSnippet';
-import ReactMarkdown from 'react-markdown';
 import ReferenceExample from '../components/ReferenceExample';
 import Layout from '../components/Layout';
+import PageTitle from '../components/PageTitle';
+import Markdown from '../components/Markdown';
 import MethodReference from '../components/MethodReference';
 import SEO from '../components/Seo';
 import PropList from '../components/PropList';
@@ -15,14 +16,30 @@ import useComponentDoc from '../hooks/useComponentDoc';
 import IconGallery from '../components/IconGallery';
 import TypeDefReference from '../components/TypeDefReference';
 
+const chartStyles = {
+  height: '200px',
+};
+
 const previewStyles = {
+  AreaChart: chartStyles,
+  BarChart: chartStyles,
+  BillboardChart: chartStyles,
+  FunnelChart: chartStyles,
+  HeatmapChart: chartStyles,
+  HistogramChart: chartStyles,
+  JsonChart: chartStyles,
+  LineChart: chartStyles,
+  PieChart: chartStyles,
+  ScatterChart: chartStyles,
+  SparklineChart: chartStyles,
+  StackedBarChart: chartStyles,
+  TableChart: chartStyles,
   Spinner: {
     height: '16px',
   },
 };
 
 const ComponentReferenceTemplate = ({ data }) => {
-  // const [isOpen, setIsOpen] = useState(false);
   const { mdx } = data;
   const { frontmatter } = mdx;
   const { title, description, component } = frontmatter;
@@ -38,26 +55,20 @@ const ComponentReferenceTemplate = ({ data }) => {
   return (
     <Layout>
       <SEO title={title} description={description} />
-      <h1>{component}</h1>
-      <section
-        className={cx(
-          templateStyles.section,
-          templateStyles.description,
-          'intro-text'
-        )}
-      >
-        <ReactMarkdown source={componentDescription} />
+      <PageTitle>{component}</PageTitle>
+      <section className={cx(templateStyles.section, 'intro-text')}>
+        <Markdown source={componentDescription} />
       </section>
 
       <section className={templateStyles.section}>
-        <h2>Usage</h2>
+        <h2 className={templateStyles.sectionTitle}>Usage</h2>
         <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
       </section>
 
       {examples.length > 0 && (
         <section className={templateStyles.section}>
-          <h2>Examples</h2>
           <div>
+            <h2 className={templateStyles.sectionTitle}>Examples</h2>
             {examples.map((example, i) => (
               <ReferenceExample
                 key={i}
@@ -78,22 +89,26 @@ const ComponentReferenceTemplate = ({ data }) => {
       )}
 
       <section className={templateStyles.section}>
-        <h2>Props</h2>
+        <h2 className={templateStyles.sectionTitle}>Props</h2>
         <PropList propTypes={propTypes} />
       </section>
 
       {methods.length > 0 && (
         <section className={templateStyles.section}>
-          <h2>Methods</h2>
+          <h2 className={templateStyles.sectionTitle}>Methods</h2>
           {methods.map((method, i) => (
-            <MethodReference key={i} method={method} />
+            <MethodReference
+              key={i}
+              method={method}
+              className={styles.section}
+            />
           ))}
         </section>
       )}
 
       {typeDefs.length > 0 && (
         <section className={templateStyles.section}>
-          <h2>Type definitions</h2>
+          <h2 className={templateStyles.sectionTitle}>Type definitions</h2>
           {typeDefs.map((typeDef, i) => (
             <TypeDefReference key={i} typeDef={typeDef} />
           ))}
diff --git a/src/templates/ReferenceTemplate.module.scss b/src/templates/ReferenceTemplate.module.scss
index c679a6a06..f2cc250d0 100644
--- a/src/templates/ReferenceTemplate.module.scss
+++ b/src/templates/ReferenceTemplate.module.scss
@@ -1,16 +1,9 @@
-.description {
-  margin-top: 0.5rem;
-  padding-top: 0.5rem;
-
-  ul {
-    padding-top: 0.5rem;
-  }
-
-  li {
-    margin: 0;
-  }
-}
-
 .section:not(:last-child) {
   margin-bottom: 2rem;
 }
+
+.sectionTitle {
+  margin-bottom: 1rem;
+  font-size: 1.75rem;
+  font-weight: bold;
+}
diff --git a/src/utils/typeDefs.js b/src/utils/typeDefs.js
index cbc2a80cd..e3c6bef00 100644
--- a/src/utils/typeDefs.js
+++ b/src/utils/typeDefs.js
@@ -7,7 +7,7 @@ const IGNORED_TYPE_DEFS = [
   'boolean',
 ];
 
-export const pullTypeDefNames = (tags) => {
+const pullTypeDefNames = (tags) => {
   return Object.values(tags)
     .reduce((acc, tag) => acc.concat(tag), [])
     .flatMap((tag) => [tag.type, tag.promiseType])
@@ -15,3 +15,20 @@ export const pullTypeDefNames = (tags) => {
     .filter((tag) => !IGNORED_TYPE_DEFS.includes(tag))
     .map((tag) => tag.replace(/\[\]$/, '')); // TimePickerRange[] => TimePickerRange
 };
+
+export const getTypeDefs = (tags) => {
+  const allTypeDefs = window.__NR1_SDK__.default.__typeDefs__;
+
+  return tags
+    .flatMap(pullTypeDefNames)
+    .map((name) => allTypeDefs[name])
+    .filter((typeDef) => typeDef !== undefined)
+    .map((typeDef) => ({
+      properties: typeDef.tags.property.map((property) => ({
+        name: property.identifier.name,
+        description: property.description,
+        type: property.type,
+      })),
+      name: typeDef.tags.typedef.find((tag) => tag.identifier).identifier.name,
+    }));
+};