From 58574a47af21061385091387fcbd477280785e54 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 17 Oct 2020 10:17:11 -0700
Subject: [PATCH] docs: use expressive typography

---
 docs/src/layouts/ComponentLayout.svelte |  3 +-
 docs/src/pages/_layout.svelte           | 64 +++++++++++--------------
 2 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index 2769db3e..9d323448 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -180,7 +180,8 @@
             target="_blank"
           >
             auto-generated
-          </Link>.
+          </Link>
+          from a build script.
         </p>
       </Column>
     </Row>
diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
index be9c5860..d51a6ff5 100644
--- a/docs/src/pages/_layout.svelte
+++ b/docs/src/pages/_layout.svelte
@@ -36,34 +36,28 @@
 
 <style global>
   .bx--col > h1 {
-    font-size: var(--cds-productive-heading-07-font-size);
-    font-weight: var(--cds-productive-heading-07-font-weight);
-    letter-spacing: var(--cds-productive-heading-07-letter-spacing);
-    line-height: var(--cds-productive-heading-07-line-height);
+    font-size: var(--cds-display-01-font-size);
+    font-weight: var(--cds-display-01-font-weight);
+    letter-spacing: var(--cds-display-01-letter-spacing);
+    line-height: var(--cds-display-01-line-height);
     margin-bottom: var(--cds-layout-01);
   }
 
   .big-paragraph {
-    font-size: 1.5rem;
-    font-weight: var(--cds-productive-heading-03-font-weight);
-    letter-spacing: var(--cds-productive-heading-03-letter-spacing);
-    line-height: var(--cds-productive-heading-03-line-height);
+    font-size: var(--cds-expressive-heading-03-font-size);
+    font-weight: var(--cds-expressive-heading-03-font-weight);
+    letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
+    line-height: var(--cds-expressive-heading-03-line-height);
     margin-top: var(--cds-layout-03);
-    margin-bottom: var(--cds-layout-05);
+    margin-bottom: var(--cds-layout-06);
   }
 
+  .big-link,
   .bx--col > .big-paragraph > code {
-    font-size: var(--cds-productive-heading-03-font-size);
-    font-weight: var(--cds-productive-heading-03-font-weight);
-    letter-spacing: var(--cds-productive-heading-03-letter-spacing);
-    line-height: var(--cds-productive-heading-03-line-height);
-  }
-
-  .big-link {
-    font-size: 1.5rem;
-    font-weight: var(--cds-productive-heading-03-font-weight);
-    letter-spacing: var(--cds-productive-heading-03-letter-spacing);
-    line-height: var(--cds-productive-heading-03-line-height);
+    font-size: var(--cds-expressive-heading-03-font-size);
+    font-weight: var(--cds-expressive-heading-03-font-weight);
+    letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
+    line-height: var(--cds-expressive-heading-03-line-height);
   }
 
   .bx--col > p {
@@ -81,28 +75,28 @@
   }
 
   .bx--col > h2 {
-    font-size: var(--cds-productive-heading-06-font-size);
-    font-weight: var(--cds-productive-heading-06-font-weight);
-    letter-spacing: var(--cds-productive-heading-06-letter-spacing);
-    line-height: var(--cds-productive-heading-06-line-height);
-    padding-top: var(--cds-layout-03);
+    font-size: var(--cds-expressive-heading-05-font-size);
+    font-weight: var(--cds-expressive-heading-05-font-weight);
+    letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
+    line-height: var(--cds-expressive-heading-05-line-height);
+    padding-top: var(--cds-layout-04);
     margin-bottom: var(--cds-layout-01);
   }
 
   .bx--col > h3 {
-    font-size: var(--cds-productive-heading-04-font-size);
-    font-weight: var(--cds-productive-heading-04-font-weight);
-    letter-spacing: var(--cds-productive-heading-04-letter-spacing);
-    line-height: var(--cds-productive-heading-04-line-height);
-    padding-top: var(--cds-layout-03);
-    margin-bottom: var(--cds-layout-02);
+    font-size: var(--cds-expressive-heading-04-font-size);
+    font-weight: var(--cds-expressive-heading-04-font-weight);
+    letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
+    line-height: var(--cds-expressive-heading-04-line-height);
+    padding-top: var(--cds-layout-04);
+    margin-bottom: var(--cds-layout-01);
   }
 
   .bx--col > h4 {
-    font-size: var(--cds-productive-heading-02-font-size);
-    font-weight: var(--cds-productive-heading-02-font-weight);
-    letter-spacing: var(--cds-productive-heading-02-letter-spacing);
-    line-height: var(--cds-productive-heading-02-line-height);
+    font-size: var(--cds-expressive-heading-02-font-size);
+    font-weight: var(--cds-expressive-heading-02-font-weight);
+    letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
+    line-height: var(--cds-expressive-heading-02-line-height);
     padding-top: var(--cds-layout-04);
     margin-bottom: var(--cds-layout-01);
   }