diff --git a/packages/ui/docs/index.mdx b/packages/ui/docs/index.mdx
index 8ff38c6d..3f6d81bd 100644
--- a/packages/ui/docs/index.mdx
+++ b/packages/ui/docs/index.mdx
@@ -1,16 +1,37 @@
 export {Root} from './components/root'
-export const name = 'Blockstack Design System'
+export const name = 'The System'
 
-# Blockstack Design System
+# The System
 
-## Principles
+The components in this design system are first and foremost primitives. What are primitives?
+
+From `react-primitives`: 
+> This library attempts to propose an ideal set of primitives around building React applications, regardless of Platform. In the future, this could be used as a shared interface among React and React Native components that don't use platform-specific APIs.
+
+
+## Principles of The System
+
+- The components are almost all primitives
+- Always ask the question `how can this be better?`
+- Very little design direction (just enough)
+- Share common patterns
+- Explore multiple solutions / ideas when designing
+- If we explore something and it turns out, in that specific context, to be better than The System, do that thing vs using something premade in this system
+- Be Consistent
+- Be Flexible
+- Do not prescribe
+- Adapt and Improve
+
+## When to use The System
+- When building any UI 
+
+## Things to avoid
+
+Statements like
+> because that is how the system works
+
+Do not burn time/cycles worrying about The System when we have real products and real customer needs to focus on
 
-- **Is Always Extensible**
-- **Be Consistent**
-- **Be Flexible**
-- **Do one thing well**
-- **Do not prescribe**
-- **Adapt and Improve**
 
 ## Important Links
 - [styled-components](https://www.styled-components.com/)
diff --git a/packages/ui/src/components/button/index.js b/packages/ui/src/components/button/index.js
index 15616c22..d4d1a66c 100644
--- a/packages/ui/src/components/button/index.js
+++ b/packages/ui/src/components/button/index.js
@@ -13,8 +13,8 @@ const handleSize = ({ size, ...rest }) => {
       ...rest,
       px: 4,
       height: '36px',
-      type: {
-        ...rest.type,
+      typeProps: {
+        ...rest.typeProps,
         fontSize: 1
       }
     }
@@ -81,12 +81,12 @@ const Button = epitath(function*({
     fontWeight: 'semibold',
     variant: 'default',
     fontSize: 2,
-    type: {
+    typeProps: {
       fontSize: 2
     }
   }
 
-  const { type, ...props } = propFn({
+  const { typeProps, ...props } = propFn({
     ...defaultProps,
     hovered: hovered ? 'true' : undefined,
     active: active ? 'true' : undefined,
@@ -107,7 +107,7 @@ const Button = epitath(function*({
   }
 
   const labelProps = {
-    ...type,
+    ...typeProps,
     style: {
       whiteSpace: 'nowrap'
     },