diff --git a/docs-site/src/pages/pattern-lab/_patterns/01-visual-styles/05-spacing/00-spacing-overview.twig b/docs-site/src/pages/pattern-lab/_patterns/01-visual-styles/05-spacing/00-spacing-overview.twig
index 26a6b93420..cd481fa89f 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/01-visual-styles/05-spacing/00-spacing-overview.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/01-visual-styles/05-spacing/00-spacing-overview.twig
@@ -23,7 +23,7 @@
Vertical Spacing
- The base value of vertical spacing is based on the leading of base body text (1.65rem).
+ The base value of vertical spacing is based on the leading of base body text.
@@ -58,7 +58,7 @@
Horizontal Spacing
- The base value of horizontal spacing is based on the gutter of the grid (2rem).
+ The base value of horizontal spacing is based on the gutter of the grid.
diff --git a/docs-site/src/pages/pattern-lab/_patterns/01-visual-styles/10-typography/00-typography-overview.twig b/docs-site/src/pages/pattern-lab/_patterns/01-visual-styles/10-typography/00-typography-overview.twig
index 55c7263223..37b9b46718 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/01-visual-styles/10-typography/00-typography-overview.twig
+++ b/docs-site/src/pages/pattern-lab/_patterns/01-visual-styles/10-typography/00-typography-overview.twig
@@ -17,178 +17,93 @@
Fonts
-
-
- Body: Open Sans
-
-
-
-
- Characters
-
-
-
-
-
-
-
- {{ characters_sample }}
-
-
-
-
- Styles
-
-
-
-
-
-
-
-
-
- Regular
-
-
-
-
- Regular Italic
+ {% for fontFamilyToken, fontFamilyGroup, fontFamilyName in bolt.data.typography.fontFamilies["font-families"] %}
+ {% if fontFamilyToken != "bodySubset" %}
+
+
+ {{ fontFamilyToken|capitalize }}:
+ {% for fontName in fontFamilyGroup["custom-font"] %}
+ {% if loop.index == 1 %}
+ {{ fontName }}{% if fontFamilyToken == "code" %}*{% endif %}
+ {% endif %}
+ {% endfor %}
-
-
-
- Semi-Bold
+
+
+
+ Characters
-
-
-
- Semi-Bold Italic
+
+
+
+
+
+
+ {{ characters_sample }}
-
-
-
- Bold
-
-
-
-
- Bold Italic
+
+
+
+ Styles
-
-
-
-
-
-
- Heading: Open Sans
-
-
-
-
- Characters
-
-
-
-
-
-
-
- {{ characters_sample }}
-
-
-
-
- Styles
-
-
-
-
-
-
-
-
-
- Regular
-
-
-
-
- Regular Italic
-
-
-
-
- Semi-Bold
-
-
-
-
- Semi-Bold Italic
-
-
-
-
- Bold
-
-
-
-
- Bold Italic
-
-
-
-
-
-
-
- Code: monospace*
-
-
-
-
- Characters
-
-
-
-
-
-
-
- {{ characters_sample }}
-
-
-
-
- Styles
-
-
-
-
-
-
-
-
-
- Regular
-
-
-
-
- Regular Italic
-
-
-
-
- Bold
-
-
-
-
- Bold Italic
-
-
-
-
+
+
+
+
+
+
+ {% if fontFamilyToken != "heading" %}
+
+
+ Regular
+
+
+
+
+ Regular Italic
+
+
+ {% endif %}
+ {% if fontFamilyToken != "code" %}
+
+
+ Semi-Bold
+
+
+
+
+ Semi-Bold Italic
+
+
+
+
+ Bold
+
+
+
+
+ Bold Italic
+
+
+ {% endif %}
+
+
+ {% endif %}
+ {% endfor %}
*Bolt prefers the system default for code text’s font-family which maximizes the readability across all platforms and browsers.
@@ -368,7 +283,7 @@
- *xxxlarge size should only be used for display headlines.
+ *xxxlarge size should only be used for display text (hero headline).
@@ -493,21 +408,25 @@
-
- xxxlarge |
- @include bolt-font-size(xxxlarge) |
- 3.083rem (below 60 characters) |
-
-
- 49px
- scales from 43px to 55px
-
- |
-
-
- 2.275rem (above 60 characters) |
-
-
- 36px
- scales from 32px to 41px
-
- |
-
-
- xxlarge |
- @include bolt-font-size(xxlarge) |
- 1.781rem |
-
-
- 28px
- scales from 25px to 32px
-
- |
-
-
- xlarge |
- @include bolt-font-size(xlarge) |
- 1.417rem |
-
-
- 23px
- scales from 20px to 25px
-
- |
-
-
- large |
- @include bolt-font-size(large) |
- 1.111rem |
-
-
- 18px
- scales from 16px to 20px
-
- |
-
-
- medium (base) |
- @include bolt-font-size(medium) |
- 1rem |
-
-
- 16px
- scales from 14px to 18px
-
- |
-
-
- small |
- @include bolt-font-size(small) |
- 0.9rem |
-
-
- 14px
- scales from 13px to 16px
-
- |
-
-
- xsmall |
- @include bolt-font-size(xsmall) |
- 0.8rem |
-
-
- 13px
- scales from 11px to 14px
-
- |
-
+ {% for fontSizeName, fontSizeValue in bolt.data.typography.fontSizes["font-sizes"] %}
+
+
+ {{ fontSizeName }}{% if fontSizeName == "xxxlarge" %}**{% endif %}
+ |
+
+ @include bolt-font-size({{ fontSizeName }})
+ |
+
+ {% if fontSizeValue["font-size"] is iterable %}
+ {% for bp, value in fontSizeValue["font-size"] %}
+
+ {% if loop.index == 1 %}
+ min:
+ {% else %}
+ max:
+ {% endif %}
+ {{ value }}
+
+ {% endfor %}
+ {% else %}
+ {{ fontSizeValue["font-size"] }}
+ {% endif %}
+ |
+
+ {% if fontSizeValue["font-size"] is iterable %}
+ {% for bp, value in fontSizeValue["font-size"] %}
+
+ {% if loop.index == 1 %}
+ min:
+ {% else %}
+ max:
+ {% endif %}
+
+ {% for baseBp, baseValue in bolt.data.typography.baseFontSizes %}
+ {% if baseBp == "1400px" %}
+ {{ (value|replace({"rem": ""}) * baseValue|replace({"px": ""}))|round(0, "ceil") ~ "px" }}
+ {% endif %}
+ {% endfor %}
+
+ {% for baseBp, baseValue in bolt.data.typography.baseFontSizes %}
+
+ {{ baseBp }} viewport: {{ (value|replace({"rem": ""}) * baseValue|replace({"px": ""}))|round(0, "ceil") ~ "px" }}
+
+ {% endfor %}
+
+
+
+ {% endfor %}
+ {% else %}
+
+ {% for baseBp, baseValue in bolt.data.typography.baseFontSizes %}
+ {% if baseBp == "1400px" %}
+ {{ (fontSizeValue["font-size"]|replace({"rem": ""}) * baseValue|replace({"px": ""}))|round(0, "ceil") ~ "px" }}
+ {% endif %}
+ {% endfor %}
+
+ {% for baseBp, baseValue in bolt.data.typography.baseFontSizes %}
+
+ {{ baseBp }} viewport: {{ (fontSizeValue["font-size"]|replace({"rem": ""}) * baseValue|replace({"px": ""}))|round(0, "ceil") ~ "px" }}
+
+ {% endfor %}
+
+
+ {% endif %}
+ |
+
+ {% endfor %}
@@ -624,10 +525,10 @@