npm - @bonniernews/dn-design-system-web - Versions diffs - 11.3.1 → 11.4.0-beta.0 - Mend

@bonniernews/dn-design-system-web 11.3.1 → 11.4.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/CHANGELOG.md +7 -0
package/foundations/helpers/typography.scss +63 -25
package/foundations/typography/README.md +29 -4
package/foundations/variables/typographyAddons.scss +10 -0
package/foundations/variables/typographyTokensList.scss +26 -0
package/foundations/variables/typographyTokensScreenExtraLarge.scss +260 -104
package/foundations/variables/typographyTokensScreenLarge.scss +260 -104
package/foundations/variables/typographyTokensScreenSmall.scss +286 -104
package/package.json +1 -1
package/tokens/typography-list.json +27 -1

package/foundations/variables/typographyTokensScreenSmall.scss CHANGED Viewed

@@ -3,26 +3,26 @@ $typographyTokensScreenSmall: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 16,
-    lineHeight: 20
+    lineHeight: 1.12
   ),
   expressive-heading01semibold: (
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontSize: 16,
-    lineHeight: 20
+    lineHeight: 1.12
   ),
   expressive-heading01bold: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 16,
-    lineHeight: 20
+    lineHeight: 1.12
   ),
   expressive-heading01italicregular: (
     fontFamily: "DN Serif Text",
     fontWeight: Medium,
     fontSize: 16,
     letterSpacing: "",
-    lineHeight: 20,
+    lineHeight: 1.12,
     fontStyle: italic
   ),
   expressive-heading01italicsemibold: (
@@ -30,7 +30,7 @@ $typographyTokensScreenSmall: (
     fontWeight: SemiBold,
     fontSize: 16,
     letterSpacing: "",
-    lineHeight: 20,
+    lineHeight: 1.12,
     fontStyle: italic
   ),
   expressive-heading01italicbold: (
@@ -38,83 +38,83 @@ $typographyTokensScreenSmall: (
     fontWeight: Bold,
     fontSize: 16,
     letterSpacing: "",
-    lineHeight: 20,
+    lineHeight: 1.12,
     fontStyle: italic
   ),
   expressive-heading02regular: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 17,
-    lineHeight: 21
+    lineHeight: 1.12
   ),
   expressive-heading02semibold: (
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontSize: 17,
-    lineHeight: 21
+    lineHeight: 1.12
   ),
   expressive-heading02bold: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 17,
-    lineHeight: 21
+    lineHeight: 1.12
   ),
   expressive-heading02italicregular: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 17,
-    lineHeight: 21,
+    lineHeight: 1.12,
     fontStyle: italic
   ),
   expressive-heading02italicsemibold: (
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontSize: 17,
-    lineHeight: 21,
+    lineHeight: 1.12,
     fontStyle: italic
   ),
   expressive-heading02italicbold: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 17,
-    lineHeight: 21,
+    lineHeight: 1.12,
     fontStyle: italic
   ),
   expressive-heading03regular: (
     fontFamily: "DN Serif Headline",
     fontWeight: Regular,
     fontSize: 20,
-    lineHeight: 24
+    lineHeight: 1.12
   ),
   expressive-heading03semibold: (
     fontFamily: "DN Serif Headline",
     fontWeight: SemiBold,
     fontSize: 20,
-    lineHeight: 24
+    lineHeight: 1.12
   ),
   expressive-heading03bold: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
     fontSize: 20,
-    lineHeight: 24
+    lineHeight: 1.12
   ),
   expressive-heading03italicregular: (
     fontSize: 22,
-    lineHeight: 26,
+    lineHeight: 1.12,
     fontWeight: Regular,
     fontFamily: "DN Serif Headline",
     fontStyle: italic
   ),
   expressive-heading03italicsemibold: (
     fontSize: 22,
-    lineHeight: 26,
+    lineHeight: 1.12,
     fontWeight: SemiBold,
     fontFamily: "DN Serif Headline",
     fontStyle: italic
   ),
   expressive-heading03italicbold: (
     fontSize: 22,
-    lineHeight: 26,
+    lineHeight: 1.12,
     fontWeight: Bold,
     fontFamily: "DN Serif Headline",
     fontStyle: italic
@@ -123,79 +123,79 @@ $typographyTokensScreenSmall: (
     fontFamily: "DN Serif Headline",
     fontWeight: Regular,
     fontSize: 26,
-    lineHeight: 30
+    lineHeight: 1.12
   ),
   expressive-heading04semibold: (
     fontFamily: "DN Serif Headline",
     fontWeight: SemiBold,
     fontSize: 26,
-    lineHeight: 30
+    lineHeight: 1.12
   ),
   expressive-heading04bold: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
     fontSize: 26,
-    lineHeight: 30
+    lineHeight: 1.12
   ),
   expressive-heading04italicregular: (
     fontFamily: "DN Serif Headline",
     fontWeight: Regular,
-    lineHeight: 30,
+    lineHeight: 1.12,
     fontSize: 26,
     fontStyle: italic
   ),
   expressive-heading04italicsemibold: (
     fontFamily: "DN Serif Headline",
     fontWeight: SemiBold,
-    lineHeight: 30,
+    lineHeight: 1.12,
     fontSize: 26,
     fontStyle: italic
   ),
   expressive-heading04italicbold: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
-    lineHeight: 30,
+    lineHeight: 1.12,
     fontSize: 26,
     fontStyle: italic
   ),
   expressive-heading05regular: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
-    lineHeight: 36,
+    lineHeight: 1.12,
     fontSize: 32,
     letterSpacing: ""
   ),
   expressive-heading05semibold: (
     fontFamily: "DN Serif Display",
     fontWeight: SemiBold,
-    lineHeight: 36,
+    lineHeight: 1.12,
     fontSize: 32
   ),
   expressive-heading05bold: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    lineHeight: 36,
+    lineHeight: 1.12,
     fontSize: 32,
     letterSpacing: ""
   ),
   expressive-heading05italicregular: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
-    lineHeight: 36,
+    lineHeight: 1.12,
     fontSize: 32,
     fontStyle: italic
   ),
   expressive-heading05italicsemibold: (
     fontFamily: "DN Serif Display",
     fontWeight: SemiBold,
-    lineHeight: 36,
+    lineHeight: 1.12,
     fontSize: 32,
     fontStyle: italic
   ),
   expressive-heading05italicbold: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    lineHeight: 36,
+    lineHeight: 1.12,
     fontSize: 32,
     fontStyle: italic
   ),
@@ -203,207 +203,207 @@ $typographyTokensScreenSmall: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
     fontSize: 16,
-    lineHeight: 20
+    lineHeight: 1.12
   ),
   functional-heading01semibold: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
     fontSize: 16,
-    lineHeight: 20
+    lineHeight: 1.12
   ),
   functional-heading01bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
     fontSize: 16,
-    lineHeight: 20
+    lineHeight: 1.12
   ),
   functional-heading02regular: (
     fontFamily: "DN Sans",
     fontSize: 20,
     fontWeight: Regular,
-    lineHeight: 24
+    lineHeight: 1.12
   ),
   functional-heading02semibold: (
     fontFamily: "DN Sans",
     fontSize: 20,
     fontWeight: SemiBold,
-    lineHeight: 24
+    lineHeight: 1.12
   ),
   functional-heading02bold: (
     fontFamily: "DN Sans",
     fontSize: 20,
     fontWeight: Bold,
-    lineHeight: 24
+    lineHeight: 1.12
   ),
   functional-heading03regular: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
-    lineHeight: 24,
+    lineHeight: 1.12,
     fontSize: 20
   ),
   functional-heading03semibold: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
-    lineHeight: 24,
+    lineHeight: 1.12,
     fontSize: 20
   ),
   functional-heading03bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
-    lineHeight: 24,
+    lineHeight: 1.12,
     fontSize: 20
   ),
   functional-heading04regular: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
     fontSize: 31,
-    lineHeight: 36
+    lineHeight: 1.12
   ),
   functional-heading04semibold: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
     fontSize: 31,
-    lineHeight: 36
+    lineHeight: 1.12
   ),
   functional-heading04bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
     fontSize: 31,
-    lineHeight: 36
+    lineHeight: 1.12
   ),
   functional-heading05regular: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
     fontSize: 39,
-    lineHeight: 48
+    lineHeight: 1.12
   ),
   functional-heading05semibold: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
     fontSize: 39,
-    lineHeight: 48
+    lineHeight: 1.12
   ),
   functional-heading05bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
     fontSize: 39,
-    lineHeight: 48
+    lineHeight: 1.12
   ),
   expressive-preamble01regular: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 18,
-    lineHeight: 26
+    lineHeight: 1.5
   ),
   expressive-preamble01semibold: (
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontSize: 18,
-    lineHeight: 26
+    lineHeight: 1.5
   ),
   expressive-preamble01bold: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 18,
-    lineHeight: 26
+    lineHeight: 1.5
   ),
   expressive-preamble01italicregular: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 18,
-    lineHeight: 26,
+    lineHeight: 1.5,
     fontStyle: italic
   ),
   expressive-preamble01italicsemibold: (
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontSize: 18,
-    lineHeight: 26,
+    lineHeight: 1.5,
     fontStyle: italic
   ),
   expressive-preamble01italicbold: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 18,
-    lineHeight: 26,
+    lineHeight: 1.5,
     fontStyle: italic
   ),
   expressive-body01regular: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 16,
-    lineHeight: 24
+    lineHeight: 1.5
   ),
   expressive-body01semibold: (
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
     fontSize: 16,
-    lineHeight: 24
+    lineHeight: 1.5
   ),
   expressive-body01bold: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
     fontSize: 16,
-    lineHeight: 24
+    lineHeight: 1.5
   ),
   expressive-body01italicregular: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
-    lineHeight: 24,
+    lineHeight: 1.5,
     fontSize: 16,
     fontStyle: italic
   ),
   expressive-body01italicsemibold: (
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
-    lineHeight: 24,
+    lineHeight: 1.5,
     fontSize: 16,
     fontStyle: italic
   ),
   expressive-body01italicbold: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
-    lineHeight: 24,
+    lineHeight: 1.5,
     fontSize: 16,
     fontStyle: italic
   ),
   expressive-body02regular: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 18,
     paragraphSpacing: 16
   ),
   expressive-body02semibold: (
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 18
   ),
   expressive-body02bold: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 18
   ),
   expressive-body02italicregular: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 18,
     fontStyle: italic
   ),
   expressive-body02italicsemibold: (
     fontFamily: "DN Serif Text",
     fontWeight: SemiBold,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 18,
     fontStyle: italic
   ),
   expressive-body02italicbold: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 18,
     fontStyle: italic
   ),
@@ -412,7 +412,7 @@ $typographyTokensScreenSmall: (
     fontWeight: Regular,
     fontSize: 14,
     letterSpacing: "",
-    lineHeight: 20,
+    lineHeight: 1.5,
     paragraphSpacing: ""
   ),
   functional-body01semibold: (
@@ -420,116 +420,116 @@ $typographyTokensScreenSmall: (
     fontWeight: SemiBold,
     fontSize: 14,
     letterSpacing: "",
-    lineHeight: 20
+    lineHeight: 1.5
   ),
   functional-body01bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
     fontSize: 14,
     letterSpacing: "",
-    lineHeight: 20
+    lineHeight: 1.5
   ),
   functional-body02regular: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
-    lineHeight: 24,
+    lineHeight: 1.5,
     fontSize: 16
   ),
   functional-body02semibold: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
-    lineHeight: 24,
+    lineHeight: 1.5,
     fontSize: 16
   ),
   functional-body02bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
-    lineHeight: 24,
+    lineHeight: 1.5,
     fontSize: 16
   ),
   functional-body03regular: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 20
   ),
   functional-body03semibold: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 20
   ),
   functional-body03bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
-    lineHeight: 28,
+    lineHeight: 1.5,
     fontSize: 20
   ),
   functional-meta01regular: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
     fontSize: 10,
-    lineHeight: 12
+    lineHeight: 1.12
   ),
   functional-meta01semibold: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
     fontSize: 10,
-    lineHeight: 12
+    lineHeight: 1.12
   ),
   functional-meta01bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
     fontSize: 10,
-    lineHeight: 12
+    lineHeight: 1.12
   ),
   functional-meta02regular: (
     fontFamily: "DN Sans",
     fontWeight: Regular,
-    lineHeight: 16,
+    lineHeight: 1.12,
     fontSize: 12
   ),
   functional-meta02semibold: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
-    lineHeight: 16,
+    lineHeight: 1.12,
     fontSize: 12
   ),
   functional-meta02bold: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
-    lineHeight: 16,
+    lineHeight: 1.12,
     fontSize: 12
   ),
   detailstandard-button: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
-    lineHeight: 24,
+    lineHeight: 1.5,
     fontSize: 16
   ),
   detailbottom-nav: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
-    lineHeight: 16,
+    lineHeight: 1.12,
     fontSize: 12,
     letterSpacing: 0.2
   ),
   detaildropcap: (
     fontFamily: "DN Serif Display",
-    lineHeight: 52,
+    lineHeight: 1,
     fontSize: 52,
     fontWeight: Bold
   ),
   detailstandard-button-small: (
     fontFamily: "DN Sans",
     fontWeight: SemiBold,
-    lineHeight: 20,
+    lineHeight: 1.5,
     fontSize: 14
   ),
   detailarticle-label: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
-    lineHeight: 16,
+    lineHeight: 1.12,
     fontSize: 12,
     textCase: uppercase,
     letterSpacing: 0.5
@@ -538,12 +538,12 @@ $typographyTokensScreenSmall: (
     fontFamily: "DN Serif Text",
     fontWeight: Regular,
     fontSize: 16,
-    lineHeight: 22
+    lineHeight: 1.12
   ),
   detailbaota-xl-label: (
     fontFamily: "DN Sans",
     fontWeight: Bold,
-    lineHeight: 24,
+    lineHeight: 1.5,
     fontSize: 16,
     textCase: upperCase,
     letterSpacing: 0.7
@@ -551,50 +551,50 @@ $typographyTokensScreenSmall: (
   detailarticle-standard: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
-    lineHeight: 32,
+    lineHeight: 1.12,
     fontSize: 26
   ),
   detailarticle-opinion: (
     fontFamily: "DN Serif Headline",
     fontWeight: Regular,
-    lineHeight: 32,
+    lineHeight: 1.12,
     fontSize: 26,
     fontStyle: italic
   ),
   detailarticle-longread: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
-    lineHeight: 36,
+    lineHeight: 1.12,
     fontSize: 32
   ),
   detailarticle-longread-premium: (
     fontFamily: "DN Serif Display",
     fontWeight: Bold,
-    lineHeight: 36,
+    lineHeight: 1.12,
     fontSize: 32
   ),
   detailarticle-quote: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
-    lineHeight: 24,
+    lineHeight: 1.12,
     fontSize: 20
   ),
   detailmellanrubrik: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
     fontSize: 20,
-    lineHeight: 24
+    lineHeight: 1.12
   ),
   detailarticle-direkt: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
-    lineHeight: 24,
+    lineHeight: 1.12,
     fontSize: 20
   ),
   detailarticle-direkt-opinion: (
     fontFamily: "DN Serif Headline",
     fontWeight: Regular,
-    lineHeight: 24,
+    lineHeight: 1.12,
     fontSize: 20,
     fontStyle: italic
   ),
@@ -602,70 +602,252 @@ $typographyTokensScreenSmall: (
     fontFamily: "DN Serif Display",
     fontWeight: Regular,
     fontSize: 32,
-    lineHeight: 36
+    lineHeight: 1.12
   ),
   detailteaser-standard-compact: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
-    lineHeight: 22,
+    lineHeight: 1.12,
     fontSize: 18
   ),
   detailteaser-standard-compact-opinion: (
     fontFamily: "DN Serif Headline",
     fontWeight: Medium,
-    lineHeight: 22,
+    lineHeight: 1.12,
     fontSize: 18,
     fontStyle: italic
   ),
   detailteaser-large: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
-    lineHeight: 30,
+    lineHeight: 1.12,
     fontSize: 26
   ),
   detailteaser-large-opinion: (
     fontFamily: "DN Serif Headline",
     fontWeight: Regular,
-    lineHeight: 26,
+    lineHeight: 1.12,
     fontSize: 22,
     fontStyle: italic
   ),
   detailteaser-large-storRubrik: (
     fontFamily: "DN Serif Headline",
     fontWeight: Regular,
-    lineHeight: 30,
+    lineHeight: 1.12,
     fontSize: 26,
     fontStyle: italic
   ),
   detailteaser-standard: (
     fontFamily: "DN Serif Headline",
     fontSize: 20,
-    lineHeight: 24
+    lineHeight: 1.12
   ),
   detailteaser-standard-opinion: (
     fontFamily: "DN Serif Headline",
     fontWeight: Regular,
-    lineHeight: 26,
+    lineHeight: 1.12,
     fontSize: 22,
     fontStyle: italic
   ),
   detailteaser-twin: (
     fontFamily: "DN Serif Text",
     fontWeight: Bold,
-    lineHeight: 21,
+    lineHeight: 1.12,
     fontSize: 17
   ),
   detailteaser-large-compact: (
     fontFamily: "DN Serif Headline",
     fontWeight: Bold,
     fontSize: 26,
-    lineHeight: 30
+    lineHeight: 1.12
   ),
   detailteaser-large-compact-opinion: (
     fontFamily: "DN Serif Headline",
     fontWeight: Medium,
     fontSize: 18,
-    lineHeight: 22,
+    lineHeight: 1.12,
     fontStyle: italic
+  ),
+  expressiveheading01: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Bold,
+    fontSize: 16,
+    lineHeight: 1.12,
+    letterSpacing: 0
+  ),
+  expressiveheading02: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    fontSize: 18,
+    lineHeight: 1.12,
+    letterSpacing: 0
+  ),
+  expressiveheading03: (
+    fontSize: 20,
+    lineHeight: 1.12,
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    letterSpacing: 0
+  ),
+  expressiveheading04: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    fontSize: 26,
+    lineHeight: 1.12,
+    letterSpacing: 0
+  ),
+  expressiveheading05: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Bold,
+    fontSize: 32,
+    lineHeight: 1.12,
+    letterSpacing: 0
+  ),
+  expressiveheading06: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Bold,
+    fontSize: 36,
+    lineHeight: 1.12,
+    letterSpacing: 0
+  ),
+  expressiveheading07: (
+    fontFamily: "DN Serif Display",
+    fontWeight: Bold,
+    fontSize: 40,
+    lineHeight: 1.12,
+    letterSpacing: 0
+  ),
+  expressivebody01: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Regular,
+    fontSize: 14,
+    lineHeight: 1.5,
+    letterSpacing: 0
+  ),
+  expressivebody02: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Regular,
+    lineHeight: 1.5,
+    fontSize: 16,
+    letterSpacing: 0
+  ),
+  expressivebody03: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Regular,
+    fontSize: 18,
+    lineHeight: 1.5,
+    letterSpacing: 0
+  ),
+  expressiveingress01: (
+    fontFamily: "DN Serif Text",
+    fontWeight: Bold,
+    fontSize: 18,
+    lineHeight: 1.5,
+    letterSpacing: 0
+  ),
+  expressiveingress02: (
+    fontFamily: "DN Serif Headline",
+    fontWeight: Bold,
+    fontSize: 20,
+    lineHeight: 1.5,
+    letterSpacing: 0
+  ),
+  functionalmeta01: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 10,
+    lineHeight: 1.12,
+    letterSpacing: 0.2
+  ),
+  functionalmeta02: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 12,
+    lineHeight: 1.12,
+    letterSpacing: 0.2
+  ),
+  functionallabel01: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 12,
+    lineHeight: 1.12,
+    letterSpacing: 0.5
+  ),
+  functionallabel02: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 16,
+    lineHeight: 1.12,
+    letterSpacing: 0
+  ),
+  functionalbody01: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 14,
+    lineHeight: 1.5,
+    letterSpacing: 0
+  ),
+  functionalbody02: (
+    fontFamily: "DN Sans",
+    fontWeight: Regular,
+    fontSize: 16,
+    lineHeight: 1.5,
+    letterSpacing: 0
+  ),
+  functionalingress01: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 18,
+    lineHeight: 1.5,
+    letterSpacing: 0
+  ),
+  functionalingress02: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 20,
+    lineHeight: 1.5,
+    letterSpacing: 0
+  ),
+  functionalheading01: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 16,
+    lineHeight: 1.12,
+    letterSpacing: 0
+  ),
+  functionalheading02: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 18,
+    lineHeight: 1.12,
+    letterSpacing: 0
+  ),
+  functionalheading03: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 20,
+    lineHeight: 1.12,
+    letterSpacing: 0
+  ),
+  functionalheading04: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 24,
+    lineHeight: 1.12,
+    letterSpacing: 0
+  ),
+  functionalheading05: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 28,
+    lineHeight: 1.12,
+    letterSpacing: 0
+  ),
+  functionalheading06: (
+    fontFamily: "DN Sans",
+    fontWeight: Bold,
+    fontSize: 32,
+    lineHeight: 1.12,
+    letterSpacing: 0
   )
 );