diff --git a/docs/pages/components/Input.md b/docs/pages/components/Input.md
new file mode 100644
index 0000000..3e9ac47
--- /dev/null
+++ b/docs/pages/components/Input.md
@@ -0,0 +1,7 @@
+# Input
+
+Primitive Input component with variants
+
+```.jsx
+  <Input />
+```
diff --git a/docs/theme.js b/docs/theme.js
index 2267527..1a93c0c 100644
--- a/docs/theme.js
+++ b/docs/theme.js
@@ -28,6 +28,7 @@ export default {
     background: 'white',
     borderGray: '#ddd',
     lightGray: '#00000080',
+    darkGray: '#888',
   },
 
   buttons: {
@@ -64,7 +65,7 @@ export default {
   },
   placeholderVariants: {
     primary: {
-      color: 'red',
+      color: 'darkGray',
     },
   },
   breakpoints: [
@@ -106,4 +107,11 @@ export default {
       color: 'white',
     },
   },
+  forms: {
+    input: {
+      p: 3,
+      borderColor: 'border',
+      borderRadius: 2,
+    }
+  }
 };
diff --git a/src/components/input.js b/src/components/input.js
index 7b76134..a3dd4c0 100644
--- a/src/components/input.js
+++ b/src/components/input.js
@@ -1,4 +1,8 @@
 import { Input } from 'theme-ui';
+import styled from '@emotion/styled';
 import withPlaceholderVariant from '../utils/placeholderVariant';
+import { applyFocus } from '../utils/getStyles';
 
-export default withPlaceholderVariant(Input);
+export default styled(withPlaceholderVariant(Input))`
+  ${({theme}) => applyFocus(theme)}
+`;
diff --git a/src/components/modal/components.js b/src/components/modal/components.js
index 08b2f61..be3cae2 100644
--- a/src/components/modal/components.js
+++ b/src/components/modal/components.js
@@ -14,16 +14,23 @@ export const Overlay = styled(Fixed)(
     left: 0,
     width: '100%',
     height: '100%',
-    background: 'rgba(0, 0, 0, 0.5)',
+    background: 'rgba(0, 0, 0, 0.7)',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     '&.modal-enter': {
       opacity: 0,
+      '> div': {
+        transform: 'scale(0.95)',
+        transition: 'all 200ms linear',
+      },
     },
     '&.modal-enter-active': {
       opacity: 1,
       transition: 'all 200ms ease-in',
+      '> div': {
+        transform: 'scale(1)',
+      },
     },
     '&.modal-exit': {
       opacity: 1,
@@ -31,6 +38,10 @@ export const Overlay = styled(Fixed)(
     '&.modal-exit-active': {
       opacity: 0,
       transition: 'all 200ms ease-out',
+      '> div': {
+        transform: 'scale(0.95)',
+        transition: 'all 200ms linear',
+      },
     },
   },
   getStyleForVariant('overlay'),
@@ -42,6 +53,7 @@ export const ContentContainer = styled(Relative)(
     width: '60%',
     minHeight: '40%',
     borderRadius: 1,
+    boxShadow: '0 1px 15px rgba(0,0,0,.75)',
   })(theme),
   getStyleForVariant('contentContainer'),
 );
diff --git a/src/components/select.js b/src/components/select.js
index fbaccaa..2c113ac 100644
--- a/src/components/select.js
+++ b/src/components/select.js
@@ -1,4 +1,8 @@
+import styled from '@emotion/styled';
 import { Select } from 'theme-ui';
 import withPlaceholderVariant from '../utils/placeholderVariant';
+import { applyFocus } from '../utils/getStyles';
 
-export default withPlaceholderVariant(Select);
+export default styled(withPlaceholderVariant(Select))`
+  ${({theme}) => applyFocus(theme)}
+`;
diff --git a/src/components/textArea.js b/src/components/textArea.js
index 244804e..6c72926 100644
--- a/src/components/textArea.js
+++ b/src/components/textArea.js
@@ -1,4 +1,8 @@
+import styled from '@emotion/styled';
 import { Textarea } from 'theme-ui';
 import withPlaceholderVariant from '../utils/placeholderVariant';
+import { applyFocus } from '../utils/getStyles';
 
-export default withPlaceholderVariant(Textarea);
+export default styled(withPlaceholderVariant(Textarea))`
+  ${({theme}) => applyFocus(theme)}
+`;
diff --git a/src/utils/getVariations.js b/src/utils/getStyles.js
similarity index 52%
rename from src/utils/getVariations.js
rename to src/utils/getStyles.js
index 66e1ed8..a866c34 100644
--- a/src/utils/getVariations.js
+++ b/src/utils/getStyles.js
@@ -3,6 +3,15 @@ import { css, get } from 'theme-ui';
 const applyVariation = (theme, variant, themeKey) =>
   css(get(theme, themeKey + '.' + variant, get(theme, variant)));
 
+const applyFocus = (theme) => css({
+  '&:focus': {
+    boxShadow: '#add9f5 0px 0px 0px 2px',
+    outline: 'none',
+    borderColor: 'info',
+  },
+})(theme);
+
 export {
   applyVariation,
+  applyFocus,
 };
diff --git a/src/utils/placeholderVariant.js b/src/utils/placeholderVariant.js
index b8b8427..554905c 100644
--- a/src/utils/placeholderVariant.js
+++ b/src/utils/placeholderVariant.js
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import {
   applyVariation,
-} from './getVariations';
+} from './getStyles';
 
 export default (comp) => {
   const variantStyles = ({