block and graphic block text styles

src/components/Block/Block.svelte

@@ -35,14 +35,10 @@
 <style lang="scss">
   @import '../../scss/mixins';
 
-  div.article-block {
+  .article-block {
     max-width: var(--normal-column-width, 660px);
-    margin-left: auto;
-    margin-right: auto;
-    margin-top: 0;
-    &:not(:last-child) {
-      margin-bottom: 3rem;
-    }
+    @include fmx-auto;
+    @include fmy-5;
 
     &.narrower {
       max-width: var(--narrower-column-width, 330px);

src/components/GraphicBlock/GraphicBlock.svelte

@@ -136,23 +136,16 @@
 <style lang="scss" global>
   @import '../../scss/mixins';
 
-  div.article-block.graphic {
+  .article-block.graphic {
+    // Dek
     p {
-      @include font-note;
-      @include text-sm;
-      @include text-primary;
-      &:last-of-type {
-        @include fmb-1;
-      }
+      @include body-note;
     }
-    // Notes text...
+    // Caption and Sources
     aside {
+      @include fmt-2;
       p {
-        @include font-note;
-        @include text-secondary;
-        @include text-xs;
-        @include leading-tight;
-        margin-block-end: 0;
+        @include body-caption;
       }
     }
   }

src/components/NoteText/NoteText.svelte

@@ -21,7 +21,7 @@
 <style lang="scss" global>
   @import '../../scss/mixins';
 
-  div.article-block.notes {
+  .article-block.notes {
     h2,
     h3,
     h4,

src/components/SiteHeadline/SiteHeadline.svelte

@@ -115,9 +115,7 @@
     </div>
     <aside class="article-metadata mt-2 font-subhed">
       <div class="byline-container">
-        <div
-          class="byline text-xs text-primary font-bold leading-tighter fmb-1"
-        >
+        <div class="byline body-caption !font-bold">
           By
           {#if authors.length > 0}
             {#each authors as author, i}
@@ -137,9 +135,7 @@
           {/if}
         </div>
       </div>
-      <div
-        class="dateline-container fmt-0 text-secondary text-xs leading-tighter"
-      >
+      <div class="dateline-container fmt-0 body-caption">
         {#if isValidDate(publishTime)}
           <div>
             Published

src/scss/tokens/text/_main.scss

@@ -12,3 +12,4 @@
 @forward 'vertical-align';
 @forward 'white-space';
 @forward 'word-break';
+@forward 'text-role';

src/scss/tokens/text/_text-role.scss

@@ -0,0 +1,33 @@
+@use 'mixins/text-role' as *;
+
+.h1 {
+  @include h1;
+}
+
+.h2 {
+  @include h2;
+}
+
+.h3 {
+  @include h3;
+}
+
+.h4 {
+  @include h4;
+}
+
+.body-text {
+  @include body-text;
+}
+
+.body-note {
+  @include body-note;
+}
+
+.body-caption {
+  @include body-caption;
+}
+
+.body-link {
+  @include body-link;
+}

src/scss/tokens/text/mixins/_text-role.scss

@@ -61,15 +61,24 @@
 
 @mixin body-note {
   @include fmt-0;
-  @include fmb-1;
+  @include fmb-2;
   @include fmx-0;
   @include font-note;
-  @include text-base;
+  font-size: calc(0.95 * var(--theme-font-size-base));
   @include font-light;
   @include text-primary;
   @include leading-tight;
 }
 
+@mixin body-caption {
+  @include font-note;
+  @include text-secondary;
+  @include text-xs;
+  @include leading-tighter;
+  @include font-regular;
+  @include fmb-1;
+}
+
 @mixin body-link {
   color: currentColor;
   text-decoration: underline;