diff --git a/src/atoms/heading/Heading.html b/src/atoms/heading/Heading.html
index ad27d835a..4331d3983 100644
--- a/src/atoms/heading/Heading.html
+++ b/src/atoms/heading/Heading.html
@@ -4,5 +4,6 @@
     [`a-heading a-heading--${levelClassName}-level`]: level
   }"
 >
+  <!-- @slot Slot for heading content -->
   <slot />
 </component>
diff --git a/src/atoms/heading/Heading.scss b/src/atoms/heading/Heading.scss
index 4c4b4c156..c9c09903e 100644
--- a/src/atoms/heading/Heading.scss
+++ b/src/atoms/heading/Heading.scss
@@ -1,17 +1,19 @@
 @import '../../../assets/styles/_globals.scss';
 
-$headings-margin                : 0 0 0.5em 0 !default;
-$headings-font-family           : $font-family-base !default;
-$headings-font-weight           : 700 !default;
+$headings-margin                : 0 0 $spacer--medium 0 !default;
+$headings-font-family           : $font-family-secondary !default;
+$headings-font-family--secondary: $font-family-base !default;
+$headings-font-weight           : $font-weight-medium !default;
 $headings-line-height           : $font-line-height !default;
-$headings-color                 : $color-secondary !default;
+$headings-color                 : $color-primary !default;
 $headings-text-transform        : none !default;
-$heading-font-size--first-level : 18px !default;
-$heading-font-size--second-level: 18px !default;
-$heading-font-size--third-level : 14px !default;
-$heading-font-size--fourth-level: 14px !default;
-$heading-font-size--fifth-level : 12px !default;
-$heading-font-size--sixth-level : 12px !default;
+
+$heading-font-size--first-level : $font-size-extra-large !default;
+$heading-font-size--second-level: $font-size-large !default;
+$heading-font-size--third-level : $font-size-medium !default;
+$heading-font-size--fourth-level: $font-size-medium !default;
+$heading-font-size--fifth-level : $font-size-medium !default;
+$heading-font-size--sixth-level : $font-size-medium !default;
 
 .a-heading {
   margin: $headings-margin;
@@ -44,4 +46,8 @@ $heading-font-size--sixth-level : 12px !default;
   &--sixth-level {
     font-size: $heading-font-size--sixth-level;
   }
+
+  &--font-secondary {
+    font-family: $headings-font-family--secondary;
+  }
 }
diff --git a/src/atoms/heading/Heading.selectors.json b/src/atoms/heading/Heading.selectors.json
new file mode 100644
index 000000000..f62af84b9
--- /dev/null
+++ b/src/atoms/heading/Heading.selectors.json
@@ -0,0 +1,6 @@
+[
+  {
+    "name": ".a-heading--font-secondary",
+    "description": "Selector for applying secondary styles"
+  }
+]
diff --git a/src/atoms/heading/Heading.stories.js b/src/atoms/heading/Heading.stories.js
index 6555ae35a..681d194c8 100644
--- a/src/atoms/heading/Heading.stories.js
+++ b/src/atoms/heading/Heading.stories.js
@@ -3,13 +3,21 @@ import { storiesOf } from '@storybook/vue'
 import AHeading from './Heading.vue'
 import { select, text } from '@storybook/addon-knobs'
 
-const info = 'Check **Knobs** tab to edit component properties dynamically, All HTML six levels of headings are available.'
+import generateVueInfoTable from '@utils/helpers/generate-vue-info-table.js'
+import getClassKnobsConfig from '@utils/helpers/get-class-knobs-config.js'
+import selectorsConfig from './Heading.selectors.json'
+
+const info = `
+  <p>Check <b>Knobs</b> tab to edit component properties dynamically. All HTML six levels of headings are available.</p><br>
+  ${generateVueInfoTable(selectorsConfig, 'BEM modifiers')}
+`
+const classKnobsConfig = getClassKnobsConfig(selectorsConfig)
 
 const levels = [1, 2, 3, 4, 5, 6]
 
 storiesOf('Atoms/Heading', module)
   .addParameters({ info })
-  .add('Default', () => ({
+  .add('First', () => ({
     components: { AHeading },
     props: {
       levelKnobs: {
@@ -20,12 +28,151 @@ storiesOf('Atoms/Heading', module)
       },
       textKnobs: {
         default: text('Text', 'Heading level 1')
+      },
+      classKnob: {
+        default: select('BEM Modifier', classKnobsConfig)
+      }
+    },
+    template: `
+      <a-heading
+        :level="levelKnobs"
+        :tag="tagKnobs"
+        :class="classKnob"
+      >
+        {{ textKnobs }}
+      </a-heading>
+    `
+  }))
+  .add('Second', () => ({
+    components: { AHeading },
+    props: {
+      levelKnobs: {
+        default: select('Heading level', levels, 2)
+      },
+      tagKnobs: {
+        default: text('Tag', null)
+      },
+      textKnobs: {
+        default: text('Text', 'Heading level 2')
+      },
+      classKnob: {
+        default: select('BEM Modifier', classKnobsConfig)
+      }
+
+    },
+    template: `
+      <a-heading
+        :level="levelKnobs"
+        :tag="tagKnobs"
+        :class="classKnob"
+      >
+        {{ textKnobs }}
+      </a-heading>
+    `
+  }))
+  .add('Third', () => ({
+    components: { AHeading },
+    props: {
+      levelKnobs: {
+        default: select('Heading level', levels, 3)
+      },
+      tagKnobs: {
+        default: text('Tag', null)
+      },
+      textKnobs: {
+        default: text('Text', 'Heading level 3')
+      },
+      classKnob: {
+        default: select('BEM Modifier', classKnobsConfig)
+      }
+
+    },
+    template: `
+      <a-heading
+        :level="levelKnobs"
+        :tag="tagKnobs"
+        :class="classKnob"
+      >
+        {{ textKnobs }}
+      </a-heading>
+    `
+  }))
+  .add('Fourth', () => ({
+    components: { AHeading },
+    props: {
+      levelKnobs: {
+        default: select('Heading level', levels, 4)
+      },
+      tagKnobs: {
+        default: text('Tag', null)
+      },
+      textKnobs: {
+        default: text('Text', 'Heading level 4')
+      },
+      classKnob: {
+        default: select('BEM Modifier', classKnobsConfig)
       }
+
+    },
+    template: `
+      <a-heading
+        :level="levelKnobs"
+        :tag="tagKnobs"
+        :class="classKnob"
+      >
+        {{ textKnobs }}
+      </a-heading>
+    `
+  }))
+  .add('Fifth', () => ({
+    components: { AHeading },
+    props: {
+      levelKnobs: {
+        default: select('Heading level', levels, 5)
+      },
+      tagKnobs: {
+        default: text('Tag', null)
+      },
+      textKnobs: {
+        default: text('Text', 'Heading level 5')
+      },
+      classKnob: {
+        default: select('BEM Modifier', classKnobsConfig)
+      }
+
+    },
+    template: `
+      <a-heading
+        :level="levelKnobs"
+        :tag="tagKnobs"
+        :class="classKnob"
+      >
+        {{ textKnobs }}
+      </a-heading>
+    `
+  }))
+  .add('Sixth', () => ({
+    components: { AHeading },
+    props: {
+      levelKnobs: {
+        default: select('Heading level', levels, 6)
+      },
+      tagKnobs: {
+        default: text('Tag', null)
+      },
+      textKnobs: {
+        default: text('Text', 'Heading level 6')
+      },
+      classKnob: {
+        default: select('BEM Modifier', classKnobsConfig)
+      }
+
     },
     template: `
-      <a-heading 
+      <a-heading
         :level="levelKnobs"
         :tag="tagKnobs"
+        :class="classKnob"
       >
         {{ textKnobs }}
       </a-heading>