diff --git a/models/ContactSection.yaml b/models/ContactSection.yaml
index 7e2915be..2cd4ddcb 100644
--- a/models/ContactSection.yaml
+++ b/models/ContactSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: ContactSection
 label: Contact section
-variantField: variant
 extends:
   - Section
 groups:
diff --git a/models/CtaSection.yaml b/models/CtaSection.yaml
index a4c74399..69410798 100644
--- a/models/CtaSection.yaml
+++ b/models/CtaSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: CtaSection
 label: CTA section
-variantField: variant
 extends:
   - Section
 groups:
diff --git a/models/FeaturedPeopleSection.yaml b/models/FeaturedPeopleSection.yaml
index 15da23a0..a0fbbceb 100644
--- a/models/FeaturedPeopleSection.yaml
+++ b/models/FeaturedPeopleSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: FeaturedPeopleSection
 label: Featured people section
-variantField: variant
 extends:
   - Section
 groups:
diff --git a/models/FeaturedPostsSection.yaml b/models/FeaturedPostsSection.yaml
index c39f3eb1..68b3bdda 100644
--- a/models/FeaturedPostsSection.yaml
+++ b/models/FeaturedPostsSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: FeaturedPostsSection
 label: Featured posts section
-variantField: variant
 extends:
   - Section
 groups:
diff --git a/models/HeroSection.yaml b/models/HeroSection.yaml
index ab307431..934d9e88 100644
--- a/models/HeroSection.yaml
+++ b/models/HeroSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: HeroSection
 label: Hero section
-variantField: variant
 extends:
   - Section
 groups:
@@ -94,4 +93,24 @@ fields:
     label: Background image
     models:
       - ImageBlock
-  
+  - type: style
+    name: styles
+    styles:
+      badge:
+        fontSize: ['x-small', 'small', 'medium', 'large']
+        fontWeight: [300, 400, 500]
+        textAlign: ['left', 'center', 'right']
+      title:
+        fontSize: ['xx-large', 'xxx-large', 'xxxx-large']
+        fontWeight: [300, 400, 500]
+        textAlign: ['left', 'center', 'right']
+      subtitle:
+        fontSize: ['small', 'medium', 'large', 'x-large', 'xx-large']
+        fontWeight: [300, 400, 500]
+        textAlign: ['left', 'center', 'right']
+      text:
+        fontSize: ['small', 'medium', 'large', 'x-large']
+        fontWeight: [300, 400, 500]
+        textAlign: ['left', 'center', 'right']
+      actions:
+        justifyContent: ['start', 'center', 'end']
diff --git a/models/TestimonialsSection.yaml b/models/TestimonialsSection.yaml
index c7eb3b02..e9f1522c 100644
--- a/models/TestimonialsSection.yaml
+++ b/models/TestimonialsSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: TestimonialsSection
 label: Testimonials section
-variantField: variant
 extends:
   - Section
 groups:
diff --git a/public/models/ContactSection.yaml b/public/models/ContactSection.yaml
index 7e2915be..2cd4ddcb 100644
--- a/public/models/ContactSection.yaml
+++ b/public/models/ContactSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: ContactSection
 label: Contact section
-variantField: variant
 extends:
   - Section
 groups:
diff --git a/public/models/CtaSection.yaml b/public/models/CtaSection.yaml
index a4c74399..69410798 100644
--- a/public/models/CtaSection.yaml
+++ b/public/models/CtaSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: CtaSection
 label: CTA section
-variantField: variant
 extends:
   - Section
 groups:
diff --git a/public/models/FeaturedPeopleSection.yaml b/public/models/FeaturedPeopleSection.yaml
index 15da23a0..a0fbbceb 100644
--- a/public/models/FeaturedPeopleSection.yaml
+++ b/public/models/FeaturedPeopleSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: FeaturedPeopleSection
 label: Featured people section
-variantField: variant
 extends:
   - Section
 groups:
diff --git a/public/models/FeaturedPostsSection.yaml b/public/models/FeaturedPostsSection.yaml
index c39f3eb1..68b3bdda 100644
--- a/public/models/FeaturedPostsSection.yaml
+++ b/public/models/FeaturedPostsSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: FeaturedPostsSection
 label: Featured posts section
-variantField: variant
 extends:
   - Section
 groups:
diff --git a/public/models/HeroSection.yaml b/public/models/HeroSection.yaml
index ab307431..934d9e88 100644
--- a/public/models/HeroSection.yaml
+++ b/public/models/HeroSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: HeroSection
 label: Hero section
-variantField: variant
 extends:
   - Section
 groups:
@@ -94,4 +93,24 @@ fields:
     label: Background image
     models:
       - ImageBlock
-  
+  - type: style
+    name: styles
+    styles:
+      badge:
+        fontSize: ['x-small', 'small', 'medium', 'large']
+        fontWeight: [300, 400, 500]
+        textAlign: ['left', 'center', 'right']
+      title:
+        fontSize: ['xx-large', 'xxx-large', 'xxxx-large']
+        fontWeight: [300, 400, 500]
+        textAlign: ['left', 'center', 'right']
+      subtitle:
+        fontSize: ['small', 'medium', 'large', 'x-large', 'xx-large']
+        fontWeight: [300, 400, 500]
+        textAlign: ['left', 'center', 'right']
+      text:
+        fontSize: ['small', 'medium', 'large', 'x-large']
+        fontWeight: [300, 400, 500]
+        textAlign: ['left', 'center', 'right']
+      actions:
+        justifyContent: ['start', 'center', 'end']
diff --git a/public/models/TestimonialsSection.yaml b/public/models/TestimonialsSection.yaml
index c7eb3b02..e9f1522c 100644
--- a/public/models/TestimonialsSection.yaml
+++ b/public/models/TestimonialsSection.yaml
@@ -1,7 +1,6 @@
 type: object
 name: TestimonialsSection
 label: Testimonials section
-variantField: variant
 extends:
   - Section
 groups:
diff --git a/src/components/HeroSection/hero-section.stories.js b/src/components/HeroSection/hero-section.stories.js
index 25f65ed7..78c4ea95 100644
--- a/src/components/HeroSection/hero-section.stories.js
+++ b/src/components/HeroSection/hero-section.stories.js
@@ -140,6 +140,31 @@ const args = {
         url: '/images/hero.png',
         altText: 'Image alt text',
         caption: 'Image caption'
+    },
+    styles: {
+        badge: {
+            fontSize: 'x-small',
+            fontWeight: '400',
+            textAlign: 'left'
+        },
+        title: {
+            fontSize: 'xxxx-large',
+            fontWeight: '500',
+            textAlign: 'left'
+        },
+        subtitle: {
+            fontSize: 'xx-large',
+            fontWeight: '300',
+            textAlign: 'left'
+        },
+        text: {
+            fontSize: 'large',
+            fontWeight: '400',
+            textAlign: 'left'
+        },
+        actions: {
+            justifyContent: 'start'
+        }
     }
 };
 
diff --git a/src/components/HeroSection/index.js b/src/components/HeroSection/index.js
index 5bb58156..7539b025 100644
--- a/src/components/HeroSection/index.js
+++ b/src/components/HeroSection/index.js
@@ -2,6 +2,7 @@ import * as React from 'react';
 import Markdown from 'markdown-to-jsx';
 import classNames from 'classnames';
 import { getDynamicComponent } from '../../components-registry';
+import { mapStylesToClassNames as mapStyles } from '../../utils/map-styles-to-class-names';
 import Badge from '../Badge';
 import Action from '../Action';
 
@@ -98,7 +99,6 @@ function heroVariants(props) {
 
 function heroFeatureRight(props) {
     const contentAlignVert = props.contentAlignVert || 'middle';
-    const textAlign = props.textAlign || 'left';
     return (
         <div
             className={classNames('grid gap-8', {
@@ -111,14 +111,13 @@ function heroFeatureRight(props) {
                 {heroBody(props)}
                 {heroActions(props)}
             </div>
-            {props.feature && <div data-sb-field-path=".feature">{heroFeature(props.feature, textAlign)}</div>}
+            {props.feature && <div data-sb-field-path=".feature">{heroFeature(props.feature)}</div>}
         </div>
     );
 }
 
 function heroFeatureLeft(props) {
     const contentAlignVert = props.contentAlignVert || 'middle';
-    const textAlign = props.textAlign || 'left';
     return (
         <div
             className={classNames('grid gap-8', {
@@ -127,7 +126,7 @@ function heroFeatureLeft(props) {
                 'lg:items-end': contentAlignVert === 'bottom'
             })}
         >
-            {props.feature && <div data-sb-field-path=".feature">{heroFeature(props.feature, textAlign)}</div>}
+            {props.feature && <div data-sb-field-path=".feature">{heroFeature(props.feature)}</div>}
             <div>
                 {heroBody(props)}
                 {heroActions(props)}
@@ -137,12 +136,11 @@ function heroFeatureLeft(props) {
 }
 
 function heroFeatureTop(props) {
-    const textAlign = props.textAlign || 'left';
     return (
         <>
             {props.feature && (
                 <div className="mb-8 lg:mb-12" data-sb-field-path=".feature">
-                    {heroFeature(props.feature, textAlign)}
+                    {heroFeature(props.feature)}
                 </div>
             )}
             <div>
@@ -154,7 +152,6 @@ function heroFeatureTop(props) {
 }
 
 function heroFeatureBottom(props) {
-    const textAlign = props.textAlign || 'left';
     return (
         <>
             <div>
@@ -163,14 +160,14 @@ function heroFeatureBottom(props) {
             </div>
             {props.feature && (
                 <div className="mt-8 lg:mt-12" data-sb-field-path=".feature">
-                    {heroFeature(props.feature, textAlign)}
+                    {heroFeature(props.feature)}
                 </div>
             )}
         </>
     );
 }
 
-function heroFeature(feature, align) {
+function heroFeature(feature) {
     const featureType = feature.type;
     if (!featureType) {
         throw new Error(`hero section feature does not have the 'type' property`);
@@ -180,13 +177,7 @@ function heroFeature(feature, align) {
         throw new Error(`no component matching the hero section feature type: ${featureType}`);
     }
     return (
-        <Feature
-            {...feature}
-            className={classNames({
-                'ml-auto': align === 'right',
-                'mx-auto': align === 'center'
-            })}
-        />
+        <Feature {...feature} />
     );
 }
 
@@ -211,27 +202,55 @@ function heroBackgroundImage(image) {
 }
 
 function heroBody(props) {
-    const textAlign = props.textAlign || 'left';
+    
     return (
-        <div
-            className={classNames({
-                'text-center': textAlign === 'center',
-                'text-right': textAlign === 'right'
-            })}
-        >
-            {props.badge && <Badge {...props.badge} className="inline-block mb-4 text-xs" annotationPrefix=".badge" />}
+        <div>
+            {props.badge && (
+                <div
+                    className={classNames(
+                        'component-section-badge',
+                        'mb-4',
+                        mapStyles(props.styles.badge))
+                    }
+                    data-sb-field-path=".badge"
+                >
+                    <Badge {...props.badge} className="inline-block" annotationPrefix=".badge" />
+                </div>
+            )}
             {props.title && (
-                <h2 className="component-section-title text-4xl tracking-tight sm:text-5xl mb-6" data-sb-field-path=".title">
+                <h2
+                    className={classNames(
+                        'component-section-title',
+                        'mb-6',
+                        mapStyles(props.styles.title))
+                    }
+                    data-sb-field-path=".title"
+                >
                     {props.title}
                 </h2>
             )}
             {props.subtitle && (
-                <p className="text-2xl mb-3" data-sb-field-path=".subtitle">
+                <p
+                    className={classNames(
+                        'component-section-subtitle',
+                        'mb-3',
+                        mapStyles(props.styles.subtitle))
+                    }
+                    data-sb-field-path=".subtitle"
+                >
                     {props.subtitle}
                 </p>
             )}
             {props.text && (
-                <Markdown options={{ forceBlock: true }} className="md:text-lg" data-sb-field-path=".text">
+                <Markdown
+                    options={{ forceBlock: true }}
+                    className={classNames(
+                        'component-section-text',
+                        'mb-3',
+                        mapStyles(props.styles.text))
+                    }
+                    data-sb-field-path=".text"
+                >
                     {props.text}
                 </Markdown>
             )}
@@ -240,18 +259,20 @@ function heroBody(props) {
 }
 
 function heroActions(props) {
-    const textAlign = props.textAlign || 'left';
     const actions = props.actions || [];
     if (actions.length === 0) {
         return null;
     }
     return (
         <div
-            className={classNames('flex flex-wrap items-center -mx-2', {
-                'mt-8': props.badge || props.title || props.text,
-                'justify-center': textAlign === 'center',
-                'justify-end': textAlign === 'right'
-            })}
+            className={classNames(
+                'flex',
+                'flex-wrap',
+                'items-center',
+                'mt-8',
+                '-mx-2',
+                mapStyles(props.styles.actions)
+            )}
             data-sb-field-path=".actions"
         >
             {actions.map((action, index) => (
diff --git a/src/utils/map-styles-to-class-names.js b/src/utils/map-styles-to-class-names.js
new file mode 100644
index 00000000..87921684
--- /dev/null
+++ b/src/utils/map-styles-to-class-names.js
@@ -0,0 +1,46 @@
+const TAILWIND_MAP = {
+    fontSize: {
+        'x-small': 'text-xs',
+        'small': 'text-sm',
+        'medium': 'text-base',
+        'large': 'text-lg',
+        'x-large': 'text-xl',
+        'xx-large': 'text-2xl',
+        'xxx-large': 'text-3xl',
+        'xxxx-large': 'text-4xl'
+    },
+    fontWeight: {
+        '100': 'font-thin',
+        '200': 'font-extralight',
+        '300': 'font-light',
+        '400': 'font-normal',
+        '500': 'font-medium',
+        '600': 'font-semibold',
+        '700': 'font-bold',
+        '800': 'font-extrabold'
+    },
+    justifyContent: {
+        'start': 'justify-start',
+        'end': 'justify-end',
+        'center': 'justify-center',
+        'between': 'justify-between'
+    },
+    textAlign: {
+        left: 'text-left',
+        center: 'text-center',
+        right: 'text-right',
+        justify: 'text-justify'
+    }
+};
+
+export function mapStylesToClassNames(styles) {
+    return Object.entries(styles).map(([prop, value]) => {
+        if (prop in TAILWIND_MAP && value in TAILWIND_MAP[prop]) {
+            return TAILWIND_MAP[prop][value];
+        } else {
+            // if prop or value don't exist in the map, use the value as is,
+            // useful for direct color values.
+            return value;
+        }
+    }).join(' ');
+}
diff --git a/styles/default/style.css b/styles/default/style.css
index 8bda23cd..304c2d47 100644
--- a/styles/default/style.css
+++ b/styles/default/style.css
@@ -29,7 +29,7 @@
         }
     }
     .sb-component-badge {
-        @apply bg-info font-medium px-2 py-0.5 text-white tracking-wider;
+        @apply bg-info px-2 py-0.5 text-white tracking-wider;
     }
     .sb-component-button {
         @apply border-2 font-medium inline-flex items-center justify-center no-underline px-5 py-2.5 text-center tracking-wider transition duration-200 ease-in;
diff --git a/styles/retro/style.css b/styles/retro/style.css
index d55b80fc..a3f7173c 100644
--- a/styles/retro/style.css
+++ b/styles/retro/style.css
@@ -29,7 +29,7 @@
         }
     }
     .sb-component-badge {
-        @apply bg-info font-medium px-2 py-0.5 text-white tracking-wider;
+        @apply bg-info px-2 py-0.5 text-white tracking-wider;
     }
     .sb-component-button {
         @apply border-2 font-medium inline-flex items-center justify-center no-underline px-5 py-2.5 text-center tracking-wider transition duration-200 ease-in;