@codeforamerica/marcomms-design-system 1.19.0 → 1.19.1

package/src/core/layout.stories.js

@@ -0,0 +1,145 @@
+import { html } from "lit-html";
+import "../components/card";
+import "../components/quote";
+
+export default {
+  title: "Core/Layout",
+};
+
+export const Default = () => html`
+<div>
+  <div class="container-fluid container-fluid--grid-test wrapper stack">
+    <div class="row">
+      <div class="col-xs-12 col-md-8">
+        <div>
+          <h1 class="eyebrow">Tax Benefits</h1>
+          <p class="display-1">Making tax filing simple, free, and accessible for all</p>
+          <p class="display-2">As much as $15 billion in federal tax benefits goes unclaimed every year.</p>
+          <p>
+            Ultimately, this is the result of a status quo that requires millions of Americans to spend time and money they don’t have to fulfill the prerequisite for receiving benefits: filing a tax return. Tax benefits are some of the largest, most effective anti-poverty tools in the United States, but under our current system, too many people miss out on the support they need.
+          </p>
+          <p class="h1">For too long, the status quo has been a tax filing system that stands in the way of getting flexible cash from tax benefits into people’s hands.</p>
+          <p>
+             Aside from the lucky few able to access nonprofit tax prep like the Volunteer Income Tax Assistance (VITA) Program, the system gives most people two options:
+          </p>
+          <ul>
+            <li>
+              Collectively pay billions of dollars each year to file their tax returns via commercial preparers
+            </li>
+            <li>
+              Not file altogether, thus missing out on billions of dollars in tax benefits for which they’re eligible. 
+            </li>
+          </ul>
+          <p>
+            By streamlining and simplifying the tax filing process, we can help more people file their tax returns for free. Ultimately, simplified tax filing will deliver life-changing cash through tax benefits.
+          </p>
+          <hr>
+          <p>
+            Tax benefits are some of the largest, most effective anti-poverty tools in the United States, but under our current system, too many people miss out on the support they need.
+          </p>
+          <h2>What is flexible cash? Flexible cash—meaning money that individuals and families decide how to spend for themselves—is one of the best ways to empower people toward financial stability.</h2>
+          <p>
+            Flexible cash—meaning money that individuals and families decide how to spend for themselves—is one of the best ways to empower people toward financial stability.
+          </p>
+          <p class="small">
+            Cash support helps people provide for their basic needs, find and keep living wage jobs, and handle emergencies as they arise. Flexible cash has been distributed through the tax system via tax credits and stimulus payments.
+          </p>
+          <h3>We believe in government providing free and easy tax filing services.</h3>
+          <p>
+            Through the mindful use of technology, Code for America works to ensure all who are eligible for benefits distributed through the tax system actually can claim and receive them.
+          </p>
+          <p class="eyebrow-with-line">Our Approach</p>
+          <p class="large">
+            We believe in government providing free and easy tax filing services. To advance that goal, we build products that show what’s possible and enable government to deliver these simplified tax filing services.
+          </p>
+          <p>
+            In 2021, we launched GetCTC. 
+          </p>
+          <p class="extra-large">
+            It's a free, easy tax filing tool that allowed 200,000 families to claim key tax benefits like the stimulus and expanded Child Tax Credit during the COVID-19 pandemic. 
+          </p>
+          <p>
+            This helped spark a national movement to use government technology to advance access to tax benefits for families with low income—a movement that ultimately set the foundation for a historic new simplified filing tool: IRS Direct File.
+          </p>
+          <cfa-quote>
+            IRS Direct File is a game changer for families with low income. It simplifies the tax filing process and ensures everyone can access the benefits they deserve.
+            <span slot="attribution">Amanda Renteria, CEO, Code for America</span>
+          </cfa-quote>
+          <p>
+            The impact of these technological innovations extends far beyond individual tax returns. By demonstrating what's possible when government prioritizes user experience and accessibility, we're helping to reshape expectations around public services. Our work shows that with the right approach, government can deliver digital services that are not only functional but genuinely helpful to the people who need them most.
+          </p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-md-4 stack">
+        <div>
+          <p>
+            It's a free, easy tax filing tool that allowed 200,000 families to claim key tax benefits like the stimulus and expanded Child Tax Credit during the COVID-19 pandemic. 
+          </p>
+          <cfa-quote>
+            IRS Direct File is a game changer for families with low income. It simplifies the tax filing process and ensures everyone can access the benefits they deserve.
+            <span slot="attribution">Amanda Renteria, CEO, Code for America</span>
+          </cfa-quote>
+          <p>
+            We believe in government providing free and easy tax filing services. To advance that goal, we build products that show what’s possible and enable government to deliver these simplified tax filing services. Code for America works to ensure all who are eligible for benefits distributed through the tax system actually can claim and receive them.
+          </p>
+        </div>
+        <cfa-card
+          eyebrow="Featured Program"
+          title="GetCTC Tool"
+          text="A free, easy tax filing tool that helped 200,000 families claim key tax benefits during the COVID-19 pandemic."
+          actionLabel="Learn more"
+        ></cfa-card>
+      </div>
+    </div>
+    <div clasS="row center-md">
+      <div class="col-xs-12">
+        <div class="grid">
+          <cfa-card
+            eyebrow="Impact"
+            title="Direct File Success"
+            text="IRS Direct File launched as a simplified filing tool, building on our GetCTC foundation to serve millions more families."
+            actionLabel="Read story"
+          ></cfa-card>
+          <cfa-card
+            eyebrow="Research"
+            title="Tax Benefits Access"
+            text="$15 billion in federal tax benefits goes unclaimed every year due to complex filing requirements."
+            actionLabel="View data"
+          ></cfa-card>
+          <cfa-card
+            eyebrow="Solution"
+            title="Free Tax Filing"
+            text="Government should provide free and easy tax filing services to ensure everyone can access their benefits."
+            actionLabel="Our approach"
+          ></cfa-card>
+          <cfa-card
+            eyebrow="Community"
+            title="VITA Program"
+            text="Volunteer Income Tax Assistance provides free tax prep, but serves only a small portion of those in need."
+            actionLabel="Find location"
+          ></cfa-card>
+          <cfa-card
+            eyebrow="Technology"
+            title="Simplified Filing"
+            text="Through mindful use of technology, we work to ensure all eligible families can claim and receive their tax benefits."
+            actionLabel="See how"
+          ></cfa-card>
+        </div>
+      </div>
+    </div>
+    <div clasS="row center-md">
+      <div class="col-xs-12">
+        <h2 class="eyebrow text-center">Case Studies</h2>
+        <div class="grid">
+          <cfa-card
+            eyebrow="Case Study"
+            title="Flexible Cash Impact"
+            text="Cash support helps people provide for basic needs, find living wage jobs, and handle emergencies. Learn how flexible cash distributed through tax credits creates lasting financial stability."
+            actionLabel="Read case study"
+          ></cfa-card>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/core/reset.scss

@@ -0,0 +1,53 @@
+// Use a more-intuitive box-sizing model.
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+// Remove default margin
+* {
+  margin: 0;
+}
+
+// Set default text-wrap of 'pretty'
+* {
+  text-wrap: pretty;
+}
+
+// Wrap overly long words
+* {
+  overflow-wrap: break-word;
+  text-overflow: ellipsis;
+  word-break: break-word;
+}
+
+// Fix Safari antialiasing for variable fonts
+* {
+  font-synthesis: none !important;
+}
+
+// Improve text rendering
+body {
+  -webkit-font-smoothing: antialiased;
+}
+
+// Reasonable media defaults
+img, picture, video, canvas, svg {
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+// Remove built-in form typography styles
+input, button, textarea, select {
+  font: inherit;
+}
+
+// Avoid text overflows
+p, h1, h2, h3, h4, h5, h6 {
+  overflow-wrap: break-word;
+}
+
+// Create a root stacking context
+#root, #__next {
+  isolation: isolate;
+}

package/src/core/shadows.mdx

@@ -0,0 +1,108 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Core/Shadows" />
+
+<style>
+{`
+  .shadow-samples {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+    padding: 2rem;
+    background-color: var(--gray-20);
+    border-radius: var(--rounded-corners);
+    margin: 2rem 0;
+  }
+  .shadow-sample {
+    width: 200px;
+    height: 120px;
+    background-color: var(--white);
+    border-radius: var(--rounded-corners);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    margin-bottom: 1rem;
+  }
+  .shadow-none {
+    box-shadow: none;
+    border: 1px solid var(--gray-40);
+  }
+  .shadow-small {
+    box-shadow: var(--shadow-small);
+  }
+  .shadow-medium {
+    box-shadow: var(--shadow-medium);
+  }
+  .shadow-large {
+    box-shadow: var(--shadow-large);
+  }
+  .shadow-description {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--gray-60);
+  }
+  .css-variables {
+    font-family: monospace;
+    background-color: var(--gray-20);
+    padding: 1rem;
+    border-radius: var(--rounded-corners);
+    margin: 1rem 0;
+  }
+  .code-example {
+    background-color: var(--gray-20);
+    padding: 1rem;
+    border-radius: var(--rounded-corners);
+    overflow-x: auto;
+    margin: 1rem 0;
+  }
+`}
+</style>
+
+# Shadows
+
+Shadow tokens provide elevation and depth to components and elements.
+
+## Shadow Levels
+
+<div className="shadow-samples">  
+  <div>
+    <div className="shadow-sample shadow-small">
+      Small Shadow
+    </div>
+    <p className="shadow-description">
+      Use for subtle elevation, like buttons and form elements.
+    </p>
+  </div>
+  
+  <div>
+    <div className="shadow-sample shadow-medium">
+      Medium Shadow
+    </div>
+    <p className="shadow-description">
+      Use for cards, modals, and other elevated content areas.
+    </p>
+  </div>
+  
+  <div>
+    <div className="shadow-sample shadow-large">
+      Large Shadow
+    </div>
+    <p className="shadow-description">
+      Use for high-priority elements like dialogs and overlays.
+    </p>
+  </div>
+</div>
+
+## CSS Variables
+
+Use these CSS custom properties in your stylesheets:
+
+<div className="css-variables">
+  <ul>
+    <li><strong>--shadow-small:</strong> Subtle elevation</li>
+    <li><strong>--shadow-medium:</strong> Standard elevation</li>
+    <li><strong>--shadow-large:</strong> High elevation</li>
+    <li><strong>--shadow-color:</strong> rgba(0,0,0,0.1) - Base shadow color</li>
+  </ul>
+</div>

package/src/core/tokens.scss

@@ -0,0 +1,261 @@
+@use 'grid';
+
+:root {
+  
+  // Color
+
+  --black: #000;
+  --white: #fff;
+
+  --black-10: rgba(0,0,0,0.1);
+  --black-20: rgba(0,0,0,0.2);
+  --black-40: rgba(0,0,0,0.4);
+  --black-60: rgba(0,0,0,0.6);
+  --black-80: rgba(0,0,0,0.8);
+
+  --white-20: rgba(255,255,255,0.2);
+  --white-40: rgba(255,255,255,0.4);
+  --white-60: rgba(255,255,255,0.6);
+  --white-80: rgba(255,255,255,0.8);
+
+  --gray-20: #ececec;
+  --gray-40: #b4b4b4;
+  --gray-60: #555555;
+  --gray-80: #292929;
+
+  --purple-10: #f4f4fb;
+  --purple-20: #DBDAF1;
+  --purple-40: #ADA9FF;
+  --purple-60: #4B49B2;
+  --purple-80: #2B1A78;
+
+  --red-20: #FBDADC;
+  --red-40: #FF999F;
+  --red-60: #AF121D;
+  --red-80: #5C0A0F;
+
+  --blue-20: #E6EBF9;
+  --blue-40: #B3C7FF;
+  --blue-60: #7595F0;
+  --blue-80: #172C68;
+
+  --yellow-20: #FFEBCC;
+  --yellow-40: #FFD699;
+  --yellow-60: #F2AA40;
+  --yellow-80: #663D00;
+
+  --green-20: #D6F5ED;
+  --green-40: #ADF0E0;
+  --green-60: #39AA8E;
+  --green-80: #004239;
+
+  --sand-20: #F5F0ED;
+  --sand-40: #F8D5BF;
+  --sand-60: #C19F8B;
+  --sand-80: #3D3129;
+
+  --brand-purple: var(--purple-80);
+  --brand-red: var(--red-60);
+
+  --accent-color: var(--purple-60);
+
+  --text-color: var(--black);
+
+  --base-link-color: var(--purple-80);
+  --base-link-hover-color: var(--red-60);
+
+  --link-color: var(--base-link-color);
+  --link-hover-color: var(--base-link-hover-color);
+  
+  // =====
+
+  // Spacing
+
+  /* Layout spacing (based on REM) */
+
+  --spacing-layout-0: 0;
+  --spacing-layout-half: 0.75rem;
+  --spacing-layout-1: 1.5rem;
+  --spacing-layout-2: 3rem;
+  --spacing-layout-3: 4.5rem;
+  --spacing-layout-4: 6rem;
+  --spacing-layout-5: 7.5rem;
+  --spacing-layout-6: 9rem;
+  --spacing-layout-7: 10.5rem;
+  --spacing-layout-8: 12rem;
+  --spacing-layout-9: 13.5rem;
+
+  /* Component spacing (based on fractions of layout spacing) */
+
+  --spacing-component-0: 0;
+  --spacing-component-1: calc(0.125 * var(--spacing-layout-1));
+  --spacing-component-2: calc(0.25 * var(--spacing-layout-1));
+  --spacing-component-3: calc(0.5 * var(--spacing-layout-1));
+  --spacing-component-4: calc(1 * var(--spacing-layout-1));
+  --spacing-component-5: calc(2 * var(--spacing-layout-1));
+  --spacing-component-6: calc(4 * var(--spacing-layout-1));
+  --spacing-component-7: calc(8 * var(--spacing-layout-1));
+  --spacing-component-8: calc(16 * var(--spacing-layout-1));
+  --spacing-component-9: calc(32 * var(--spacing-layout-1));
+
+  // =====
+
+  // Layout and grid
+
+  /* Breakpoints */
+
+  --breakpoint-mobile: 480px;
+  --breakpoint-tablet: 768px;
+  --breakpoint-desktop: 1024px;
+  --breakpoint-widescreen: 1600px;
+
+  /* Layout */
+
+  --gutter-width: var(--spacing-layout-1);
+  --outer-margin: var(--spacing-layout-1);
+  --grid-max-width: 1200px;
+  --grid-max-width-wp: calc(var(--grid-max-width) - var(--outer-margin) * 2);
+
+  /* Column sizes */
+
+  @for $i from 1 through 12 {
+    --column-span-#{$i}: #{grid.column-span($i)};
+  }
+
+  // =====
+
+  // Typography
+
+  --font-family-serif: 'Source Serif 4', serif;
+  --font-family-sans-serif: 'Source Sans 3', sans-serif;
+   
+  --font-family-base: var(--font-family-sans-serif);
+  --font-family-heading: var(--font-family-serif);
+  --font-family-display-1: var(--font-family-heading);
+  --font-family-display-2: var(--font-family-heading);
+  --font-family-h1: var(--font-family-heading);
+  --font-family-h2: var(--font-family-heading); 
+  --font-family-h3: var(--font-family-heading);
+  --font-family-h4: var(--font-family-heading);
+  --font-family-eyebrow: var(--base-font-family);
+
+  --font-size-base: 20px;
+  --font-size-display-1: 3.052rem; // 61.04px
+  --font-size-display-2: 2.441rem; // 48.83px
+  --font-size-h1: 1.953rem; // 39.06px
+  --font-size-h2: 1.563rem; // 31.25px 
+  --font-size-h3: 1.25rem; // 25px
+  --font-size-h4: 1rem; // 20px
+  --font-size-eyebrow: 0.7rem; // 16px
+  --font-size-extra-large: var(--font-size-h2);
+  --font-size-large: var(--font-size-h3);
+  --font-size-small: 0.8rem;
+
+  --font-weight-regular: 400;
+  --font-weight-bold: 700;
+  --font-weight-display-1: var(--font-weight-bold);
+  --font-weight-display-2: var(--font-weight-bold);
+  --font-weight-h1: var(--font-weight-bold);
+  --font-weight-h2: var(--font-weight-bold);
+  --font-weight-h3: var(--font-weight-bold);
+  --font-weight-h4: var(--font-weight-bold);
+  --font-weight-eyebrow: var(--font-weight-bold);
+  
+  --line-height-base: var(--spacing-layout-1);
+  --line-height-display-1: calc(2 * var(--line-height-base));
+  --line-height-display-2: calc(2 * var(--line-height-base));
+  --line-height-h1: calc(1.5 * var(--line-height-base));
+  --line-height-h2: calc(1.5 * var(--line-height-base));
+  --line-height-h3: calc(1 * var(--line-height-base));
+  --line-height-h4: calc(1 * var(--line-height-base));
+  --line-height-eyebrow: calc(1 * var(--line-height-base));
+  --line-height-extra-large: calc(1.5 * var(--line-height-base));
+  --line-height-large: calc(1 * var(--line-height-base));
+  --line-height-small: calc(0.75 * var(--line-height-base));
+
+  // Line height aliases
+  --line-height-sm: var(--line-height-small);
+  --line-height-md: var(--line-height-base);
+  --line-height-lg: var(--line-height-large);
+  --line-height-xl: var(--line-height-extra-large);
+  --line-height-xxl: var(--line-height-display-2);
+  --line-height-xxxl: var(--line-height-display-1);
+
+  --letter-spacing-base: normal;
+  --letter-spacing-display-1: normal;
+  --letter-spacing-display-2: normal;
+  --letter-spacing-h1: normal;
+  --letter-spacing-h2: normal;
+  --letter-spacing-h3: normal;
+  --letter-spacing-h4: normal;
+  --letter-spacing-eyebrow: 0.1em;
+  --letter-spacing-small: normal;
+
+  // Letter spacing aliases
+  --letter-spacing-sm: var(--letter-spacing-small);
+  --letter-spacing-md: var(--letter-spacing-base);
+  --letter-spacing-lg: var(--letter-spacing-large);
+  --letter-spacing-xl: var(--letter-spacing-extra-large);
+  --letter-spacing-xxl: var(--letter-spacing-display-2);
+  --letter-spacing-xxxl: var(--letter-spacing-display-1);
+
+  --text-underline-offset: 0.3em;
+
+  // Text highlight
+  --highlight-color: var(--yellow-40);
+	--highlight-thickness: 0.4em;
+
+  // =====
+
+  // Borner thicknesses
+  
+  --hairline: 1px;
+  --thin: 2px;
+  --medium: 4px;
+  --thick: 8px;
+
+  // Focus Outline
+  --focus-color: var(--blue-40);
+  --focus-outline: var(--medium) solid var(--focus-color);
+
+  // =====
+
+  // Border radius
+
+  --rounded-corners: var(--spacing-component-2);
+
+  // =====
+
+  // Shadows
+
+  --shadow-color: rgba(0,0,0,0.1);
+  
+  --shadow-small:
+    0.2px 0.7px 0.8px var(--shadow-color),
+    0.9px 3px 3.5px -2.5px var(--shadow-color),
+    -2px -2px 2px -2px var(--shadow-color);
+  --shadow-medium:
+    0.2px 0.7px 0.8px var(--shadow-color),
+    1.1px 3.8px 4.5px -1.2px var(--shadow-color),
+    4.3px 14.8px 17.3px -2.5px var(--shadow-color),
+    -2px -2px 2px -2px var(--shadow-color);
+  --shadow-large:
+    0.2px 0.7px 0.8px var(--shadow-color),
+    2.9px 10px 11.7px -0.8px var(--shadow-color),
+    8.6px 30px 35.1px -1.7px var(--shadow-color),
+    22.4px 77.8px 91.1px -2.5px var(--shadow-color);
+
+  // =====
+
+  // Background blobs
+
+  --bg-blob-1: url("data:image/svg+xml,%3Csvg width='628' height='577' viewBox='0 0 628 577' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M304.482 3.44206C399.413 -5.50752 504.225 1.17063 567.446 72.5295C633.526 147.115 639.549 256.491 613.992 352.793C589.57 444.814 526.084 523.087 438.164 559.679C355.477 594.092 265.039 570.416 184.315 531.621C103.504 492.784 22.0294 438.546 3.59029 350.826C-14.5863 264.355 39.2746 183.666 97.1329 116.868C151.394 54.223 221.956 11.2221 304.482 3.44206Z' fill='currentColor'/%3E%3C/svg%3E");
+
+  --bg-blob-2: url("data:image/svg+xml,%3Csvg width='580' height='592' viewBox='0 0 580 592' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M238.814 591.215C210.461 592.077 182.849 587.767 155.66 580.979C60.4457 557.059 4.05766 489.933 0.460672 390.376C-2.50155 306.442 8.71258 223.693 37.2769 144.499C73.2468 44.6185 170.894 -12.5948 276.159 2.81295C358.996 14.9883 437.177 39.3389 499.172 100.108C588.039 187.167 604.437 293.512 544.346 402.767C514.618 456.855 477.59 505.988 426.386 541.544C369.892 580.656 304.723 587.767 238.814 591.215Z' fill='currentColor'/%3E%3C/svg%3E");
+
+  --bg-blob-3: url("data:image/svg+xml,%3Csvg width='620' height='613' viewBox='0 0 620 613' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M619.142 301.769C615.581 212.393 536.92 153.752 466.654 98.7402C397.998 44.9883 323.934 -10.5844 236.421 2.12929C141.656 15.8965 53.9975 76.8338 15.687 164.256C-20.6955 247.277 16.2818 336.243 54.5575 417.127C92.4807 497.265 137.965 580.831 224.139 604.752C314.166 629.742 409.183 593.817 484.092 536.359C559.738 478.336 622.883 395.641 619.142 301.769Z' fill='currentColor'/%3E%3C/svg%3E");
+
+  --bg-blob-4: url("data:image/svg+xml,%3Csvg width='656' height='566' viewBox='0 0 656 566' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M332.011 564.695C235.808 569.34 135.091 552.4 71.2946 488.381C4.66596 421.518 -10.0767 327.738 8.2158 239.764C27.3773 147.61 73.5054 52.3693 169.88 14.2546C263.181 -22.6447 364.8 21.5179 455.491 62.8734C540.631 101.698 627.337 150.367 649.771 233.088C672.265 316.032 626.78 399.503 564.43 464.569C505.684 525.875 422.382 560.331 332.011 564.695Z' fill='currentColor'/%3E%3C/svg%3E");
+
+  --bg-blob: var(--bg-blob-1);
+}

package/src/core/typography.mdx

@@ -0,0 +1,79 @@
+import { Meta, Typeset, Unstyled } from '@storybook/addon-docs/blocks';
+ 
+<Meta title="Core/Typography" />
+
+export const typography = {
+  type: {
+    serif: '"Source Serif 4"',
+    "sans-serif": '"Source Sans 3"',
+  },
+  weight: {
+    regular: '400',
+    bold: '700',
+  },
+  size: {
+    base: 20,
+    "display-1": 61,
+    "display-2": 49,
+    h1: 39,
+    h2: 31,
+    h3: 25,
+    h4: 20,
+    small: 16,
+  },
+};
+
+export const SampleText = 'We’ve been working for more than a decade with governments and communities across the country to break down barriers and find real solutions.';
+ 
+# Typography
+
+We use two font families on the Code for America website: **{typography.type.serif}** and **{typography.type["sans-serif"]}**. Our base font size is `20px` and our typography uses a _major third_ type scale.
+ 
+## Headings
+ 
+Headings are set in **{typography.type.serif}**.
+
+We have large _display_ sizes for headlines (`display-1` and `display-2`), and four standard heading levels (`h1` to `h4`).
+
+<Typeset
+  fontSizes={[
+    Number(typography.size["display-1"]),
+    Number(typography.size["display-2"]),
+    Number(typography.size.h1),
+    Number(typography.size.h2),
+    Number(typography.size.h3),
+    Number(typography.size.h4),
+  ]}
+  fontWeight={typography.weight.bold}
+  sampleText={SampleText}
+  fontFamily={typography.type.serif}
+/>
+
+## Body text
+ 
+Body text is set in **{typography.type["sans-serif"]}**. We have a size variations for variation in emphasis: `extra-large`, `large`, and `small`. 
+
+<Typeset
+  fontSizes={[
+    Number(typography.size.h2),
+    Number(typography.size.h3),
+    Number(typography.size.base),
+    Number(typography.size.small),
+  ]}
+  fontWeight={typography.weight.regular}
+  sampleText={SampleText}
+  fontFamily={typography.type["sans-serif"]}
+/>
+
+## Highlight text
+
+We use a yellow highlight color to draw attention to important information. This is used sparingly, and only for key words or phrases.
+
+<Unstyled>
+  <p>
+    We’ve been working for <span class="highlight">more than a decade</span> with governments and communities across the country to <span class="highlight">break down barriers and find real solutions</span>.
+  </p>
+  <p class="extra-large">
+    We’ve been working for <span class="highlight">more than a decade</span> with governments and communities across the country to <span class="highlight">break down barriers and find real solutions</span>.
+  </p>
+</Unstyled>