diff --git a/docs/getting-started.md b/docs/getting-started.md
index bf8ca920a..5d2ce83fd 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -1,3 +1,5 @@
+import Note from './src/note'
+
 # Getting Started
 
 Styled System is a collection of utility functions that add style props
@@ -145,8 +147,12 @@ The margin and padding props use a shorthand syntax, similar to
 - `px` padding-left and padding-right
 - `py` padding-top and padding-bottom
 
+<Note>
+
 Note: you can also use longform prop names (e.g. `margin`, `paddingTop`) if you prefer.
 
+</Note>
+
 ### Space Theming
 
 To set a consistent negative-space scale, add a `space` array to your theme.
diff --git a/docs/src/gatsby-plugin-theme-ui/index.js b/docs/src/gatsby-plugin-theme-ui/index.js
index 4bd7a77e3..1c81acbee 100644
--- a/docs/src/gatsby-plugin-theme-ui/index.js
+++ b/docs/src/gatsby-plugin-theme-ui/index.js
@@ -3,7 +3,8 @@ const colors = {
   background: '#fff',
   primary: '#00f',
   secondary: '#00a',
-  highlight: '#c0f',
+  highlight: '#ededff',
+  accent: '#c0f',
   gray: '#eee',
   lightgray: '#fafafa',
   midgray: '#777',
@@ -15,6 +16,7 @@ const colors = {
       secondary: '#f0e',
       gray: '#222',
       lightgray: '#111',
+      highlight: '#001119',
     },
     cyan: {
       text: '#023',
@@ -23,6 +25,7 @@ const colors = {
       secondary: '#01a',
       gray: '#0cc',
       lightgray: '#0ee',
+      highlight: '#0de',
     },
     gray: {
       text: '#eef',
@@ -31,6 +34,7 @@ const colors = {
       secondary: '#0bf',
       gray: '#55555a',
       lightgray: '#444448',
+      highlight: '#33444c',
     },
     book: {
       text: '#322',
@@ -65,10 +69,10 @@ const prism = {
     color: 'secondary',
   },
   [['.selector', '.attr-name', '.string', '.char', '.builtin', '.inserted']]: {
-    color: 'highlight',
+    color: 'accent',
   },
   [['.operator', '.entity', '.url', '.string', '.variable']]: {
-    color: 'highlight',
+    color: 'accent',
   },
   [['.atrule', '.attr-value', '.function']]: {
     color: 'primary',
diff --git a/docs/src/note.js b/docs/src/note.js
new file mode 100644
index 000000000..a0ac245e6
--- /dev/null
+++ b/docs/src/note.js
@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+
+export default props =>
+  <div
+    {...props}
+    sx={{
+      px: 3,
+      py: 2,
+      my: 3,
+      fontWeight: 'bold',
+      bg: 'highlight',
+      borderRadius: 2,
+      borderLeft: t => `4px solid ${t.colors.accent}`,
+      p: {
+        m: 0,
+      }
+    }}
+  />
diff --git a/docs/src/sidebar.js b/docs/src/sidebar.js
index e7d64dbd3..88c3adc6c 100644
--- a/docs/src/sidebar.js
+++ b/docs/src/sidebar.js
@@ -15,6 +15,7 @@ export default props =>
     components={components}
     sx={{
       pb: 4,
+      pr: 2,
       ul: {
         listStyle: 'none',
         px: 0,
diff --git a/docs/src/sidebar.mdx b/docs/src/sidebar.mdx
index 19a99c851..1c4424b46 100644
--- a/docs/src/sidebar.mdx
+++ b/docs/src/sidebar.mdx
@@ -1,8 +1,8 @@
 - [Getting Started](/getting-started)
 - [Responsive Styles](/responsive-styles)
-- [How it Works](/how-it-works)
 - [Custom Props](/custom-props)
 - [Variants](/variants)
+- [How it Works](/how-it-works)
 - [API](/api)
 - [Reference Table](/table)
 - [Packages](/packages)
diff --git a/docs/variants.md b/docs/variants.md
index 4ce597dc7..2dfdf5fc7 100644
--- a/docs/variants.md
+++ b/docs/variants.md
@@ -1,3 +1,5 @@
+import Note from './src/note'
+
 # Variants
 
 Use the variant API to apply complex styles to a component based on a single prop.
@@ -6,7 +8,11 @@ This can be a handy way to support slight stylistic variations in button or typo
 Import the variant function and pass variant style objects in your component definition.
 When defining variants inline, you can use Styled System like syntax to pick up values from your theme.
 
-**Note**: Inline variants is a new feature in `v5.1.0`, which uses [@styled-system/css][].
+<Note>
+
+Note: Inline variants is a new feature in `v5.1.0`, which uses [@styled-system/css][].
+
+</Note>
 
 ```js
 // example Button with variants
@@ -40,6 +46,12 @@ The `Button` component can now use the `variant` prop to change between a primar
 <Button variant='secondary'>Secondary</Button>
 ```
 
+<Note>
+
+Note: When using CSS properties in a variant, avoid mixing these styles with conflicting Styled System props. For example, if your variant includes the `color` property, avoid using the `color` React prop in your components.
+
+</Note>
+
 ## Custom Prop Name
 
 If you'd like to use a custom prop name other than `variant`, use the `prop` option.
diff --git a/package.json b/package.json
index bf99fec3a..728205b13 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "benchmark": "yarn workspace benchmarks test",
     "cover": "yarn test --coverage",
     "codecov": "yarn cover && npx codecov",
+    "start": "yarn workspace @styled-system/docs start",
     "docs": "yarn workspace @styled-system/docs start",
     "docs:build": "yarn workspace @styled-system/docs build",
     "test": "jest"