x-team
diff --git a/‎lib/all.js
+16-16 b/‎lib/all.js
+16-16
diff --git a/‎lib/all.js.map
+1-1 b/‎lib/all.js.map
+1-1
diff --git a/‎lib/registration.js
+2-2 b/‎lib/registration.js
+2-2
diff --git a/‎lib/registration.js.map
+1-1 b/‎lib/registration.js.map
+1-1
diff --git a/‎src/components/ui/SignupForm.js
+27-7 b/‎src/components/ui/SignupForm.js
+27-7
diff --git a/‎src/components/ui/SignupForm.stories.js
+24 b/‎src/components/ui/SignupForm.stories.js
+24
diff --git a/‎src/components/ui/SignupScreen.js
+2-1 b/‎src/components/ui/SignupScreen.js
+2-1
@@ -4,16 +4,36 @@
 import React from 'react'
 import cmz from 'cmz'
 
-import { breakpoints } from '../../styles/theme'
+import theme, { breakpoints } from '../../styles/theme'
 import typo from '../../styles/typo'
 
 const cx = {
-  form: cmz(`
-    width: 500px
-    max-width: 100%
-    margin: 0 auto
-    flex: 1
-  `),
+  form: cmz(
+    typo.baseText,
+    `
+      & {
+        width: 500px
+        max-width: 100%
+        margin: 0 auto
+        flex: 1
+        font-size: 16px
+        line-height: 1.4
+        color: ${theme.typoGrayed}
+      }
+
+      & p {
+        margin: 12px 0
+      }
+
+      & a {
+        color: ${theme.typoGrayed}
+      }
+
+      & a:hover {
+        text-decoration: none
+      }
+    `
+  ),
 
   padded: cmz(`
     & {
 
@@ -110,6 +110,30 @@ storiesOf('UI Components|SignupForm/Debug', module)
       </SignupForm>
     </Body>
   ))
+  .add('with paragraphs', () => (
+    <Body>
+      <SignupForm
+        title='Work Experience'
+        hasPadding
+      >
+        <InputSection
+          headline='Lorem ipsum dolor sit amet'
+          description='Sed dui metus, pretium vel justo at, malesuada viverra sapien.'
+        >
+          <InputField placeholder='Input field' />
+        </InputSection>
+        <InputSection
+          headline='Lorem ipsum dolor sit amet'
+          description='Sed dui metus, pretium vel justo at, malesuada viverra sapien.'
+        >
+          <InputField type='textarea' placeholder='Textarea field' />
+        </InputSection>
+        <Button block wide size='large'>Continue »</Button>
+        <p>Thi is an example of how a regular P tag looks like.</p>
+        <p><a href='https://x-team.com/blog/privacy-policy/' target='_blank' rel='nofollow'>And this is how an A tag looks like.</a></p>
+      </SignupForm>
+    </Body>
+  ))
   .add('missing props', () => (
     <SignupForm />
   ))
@@ -52,7 +52,8 @@ const cx = {
   `),
 
   milestones: cmz(`
-    width: 500px
+    width: 100%
+    max-width: 500px
     padding: 32px 0 24px
     margin: 0 auto
   `),