begins form component styling

src/client/components/field-types/Group/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import './index.css';
+
+export default props => {
+  const Heading = props.heading
+    ? () => <header><h2>{props.heading}</h2></header>
+    : () => null;
+
+  return (
+    <section className="field-group">
+      <Heading />
+      <div className="content">
+        {props.children}
+      </div>
+    </section>
+  );
+};

src/client/components/field-types/Group/index.scss

@@ -0,0 +1,18 @@
+@import '_styles';
+
+.field-group {
+  @extend %shadow;
+
+  header,
+  .content {
+    @include pad;
+  }
+
+  header {
+    border-bottom: 1px solid $light-gray;
+
+    * {
+      margin-bottom: 0;
+    }
+  }
+}

src/client/components/field-types/Input/index.scss

@@ -3,7 +3,7 @@
 .interact.text,
 .interact.email,
 .interact.password {
-	margin-bottom: rem(1);
+	margin-bottom: rem(.5);
 	position: relative;
 
 	label {

src/client/components/field-types/Textarea/index.scss

@@ -0,0 +1,42 @@
+@import '_styles';
+
+.interact.textarea {
+  margin-bottom: rem(.5);
+  position: relative;
+
+  label {
+    display: flex;
+
+    .required {
+      color: $pink;
+      margin-left: rem(.25);
+      margin-right: auto;
+    }
+  }
+
+  .tooltip {
+    left: auto;
+    right: 0;
+    transform: none;
+    background-color: $pink;
+
+    span {
+      border-top-color: $pink;
+    }
+  }
+
+  textarea {
+    @include formInput();
+    min-height: rem(3);
+  }
+
+  &.error {
+    input {
+      border: 2px solid $pink;
+    }
+  }
+
+  @include small-break {
+    margin-bottom: rem(.5);
+  }
+}

src/client/components/forms/Textarea/index.scss

@@ -1,72 +0,0 @@
-@import '_styles';
-
-.interact.textarea {
-	margin-bottom: rem(1);
-	position: relative;
-
-	label {
-		display: block;
-
-		.required {
-			color: $pink;
-			margin-left: rem(.25);
-		}
-	}
-
-	.tooltip{
-		left: auto;
-		right: 0;
-		transform: none;
-		background-color: $pink;
-
-		span {
-			border-top-color: $pink;
-		}
-	}
-
-	textarea {
-		font-family: $font-body;
-		width: 100%;
-		border: 2px solid $yellow;
-		background: transparent;
-		color: $yellow;
-		border-radius: 0;
-		font-size: rem(.65);
-		line-height: rem(1);
-		padding: rem(.5) rem(.75);
-		display: block;
-
-		&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-		  color: $yellow;
-		}
-		&::-moz-placeholder { /* Firefox 19+ */
-		  color: $yellow;
-		}
-		&:-ms-input-placeholder { /* IE 10+ */
-		  color: $yellow;
-		}
-		&:-moz-placeholder { /* Firefox 18- */
-		  color: $yellow;
-		}
-
-		&:hover {
-			background-color: rgba($yellow, .1);
-		}
-
-		&:focus,
-		&:active {
-			background-color: rgba($yellow, .2);
-			outline: 0;
-		}
-	}
-
-	&.error {
-		textarea {
-			border: 2px solid $pink;
-		}
-	}
-
-	@include mid-break {
-		margin-bottom: rem(.5);
-	}
-}

src/client/components/views/Login/index.js

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 import ContentBlock from 'payload/client/components/layout/ContentBlock';
 import Logo from 'local/client/components/graphics/Logo';
 import Form from 'payload/client/components/forms/Form';
-import Input from 'payload/client/components/forms/Input';
+import Input from 'payload/client/components/field-types/Input';
 import Button from 'payload/client/components/controls/Button';
 
 import './index.css';

src/client/scss/_type.scss

@@ -31,9 +31,9 @@
 
 %h2 {
   margin: 0 0 rem(1);
-  font-size: rem(1.5);
-  line-height: rem(1.75);
-  letter-spacing: rem(.02);
+  font-size: rem(.8);
+  line-height: rem(1);
+  letter-spacing: 0;
 
   @include small-break {
     font-size: rem(.85);