Normalizing weight fonts to 300, 400 and 700

src/components/layout/Heading/index.scss

@@ -13,17 +13,19 @@
 
 .h2 {
   line-height: 28px;
-  font-size: $largeFontSize;
+  font-size: $(fontSizeHeadingMd)px;
 }
 
 .h3 {
   line-height: 21px;
-  font-size: $mediumFontSize;
   font-weight: bold;
   font-family: 'Roboto Mono', monospace;
+  font-size: $(fontSizeHeadingSm)px;
 }
 
 .h4 {
+  line-height: 21px;
+  font-family: 'Roboto Mono', monospace;
   font-size: $(fontSizeHeadingXs)px;
 }
 

src/components/layout/Paragraph/index.js

@@ -8,7 +8,7 @@ const cx = classNames.bind(styles)
 type Props = {
   align?: 'right' | 'center' | 'left',
   noMargin?: boolean,
-  bold?: boolean,
+  weight?: 'light' | 'regular' | 'bold',
   size?: 'sm' | 'md' | 'lg' | 'xl',
   color?: 'soft' | 'medium' | 'dark' | 'primary' | 'fancy',
   transform?: 'capitalize' | 'lowercase' | 'uppercase',
@@ -19,11 +19,14 @@ type Props = {
 class Paragraph extends React.PureComponent<Props> {
   render() {
     const {
-      bold, children, color, align, size, transform, noMargin, className, ...props
+      weight, children, color, align, size, transform, noMargin, className, ...props
     } = this.props
 
     return (
-      <p className={cx(styles.paragraph, className, { bold }, { noMargin }, size, color, transform, align)} {...props}>
+      <p
+        className={cx(styles.paragraph, className, weight, { noMargin }, size, color, transform, align)}
+        {...props}
+      >
         { children }
       </p>
     )

src/components/layout/Paragraph/index.scss

@@ -63,10 +63,18 @@
   font-size: $largeFontSize;
 }
 
-.lg {
+.xl {
   font-size: $extraLargeFontSize;
 }
 
+.light {
+  font-weight: $lightFont;
+}
+
+.regular {
+  font-weight: $regularFont;
+}
+
 .bold {
-  font-weight: bold;
+  font-weight: $boldFont;
 }

src/routes/open/components/SafeForm/Owners/index.jsx

@@ -54,7 +54,7 @@ const Owners = (props: Props) => {
         <Row key={`owner${(index)}`}>
           <Col xs={11} xsOffset={1}>
             <Block margin="sm">
-              <Paragraph bold>Owner Nº {index + 1}</Paragraph>
+              <Paragraph Weight="bold">Owner Nº {index + 1}</Paragraph>
               <Block margin="sm">
                 <Field
                   name={getOwnerNameBy(index)}

src/theme/variables.js

@@ -25,15 +25,16 @@ module.exports = Object.assign({}, {
   lg,
   xl,
   border,
-  fontSizeHeadingXs: 16,
+  fontSizeHeadingXs: 13,
   fontSizeHeadingSm: 18,
   fontSizeHeadingMd: 21,
   fontSizeHeadingLg: 32,
-  regularFontWeight: 400,
+  lightFont: 300,
-  boldFontWeight: 700,
+  regularFont: 400,
+  boldFont: 700,
   smallFontSize: '11px',
   mediumFontSize: '13px',
-  largeFontSize: '18px',
+  largeFontSize: '15px',
   extraLargeFontSize: '24px',
   screenXs: 480,
   screenXsMax: 767,