inclusive-design · greatislander · Jul 20, 2023 · Jul 19, 2023 · Jul 19, 2023 · Jul 19, 2023
diff --git a/src/_includes/components/typography/typography.config.js b/src/_includes/components/typography/typography.config.js
@@ -0,0 +1,52 @@
+module.exports = {
+    title: "Typography",
+    context: {
+        level: "p",
+        text: "It is the responsibility of inclusive designers to be aware of the context and broader impact of any design and strive to effect a beneficial impact beyond the intended beneficiary of the design."
+    },
+    variants: [
+        {
+            title: "Header Level 1",
+            context: {
+                level: "h1",
+                text: "Inclusive Design Guide"
+            }
+        },
+        {
+            title: "Header Level 2",
+            context: {
+                level: "h2",
+                text: "Inclusive Design Guide"
+            }
+        },
+        {
+            title: "Header Level 3",
+            context: {
+                level: "h3",
+                text: "Recognize diversity and uniqueness"
+            }
+        },
+        {
+            title: "Header Level 3 (Card)",
+            context: {
+                level: "h3",
+                variantClass: "card",
+                text: "Recognize diversity and uniqueness"
+            }
+        },
+        {
+            title: "Header Level 4",
+            context: {
+                level: "h4",
+                text: "Insight"
+            }
+        },
+        {
+            title: "Paragraph",
+            context: {
+                level: "p",
+                text: "It is the responsibility of inclusive designers to be aware of the context and broader impact of any design and strive to effect a beneficial impact beyond the intended beneficiary of the design."
+            }
+        }
+    ]
+};
diff --git a/src/_includes/components/typography/typography.njk b/src/_includes/components/typography/typography.njk
@@ -0,0 +1,11 @@
+{% block head %}
+    <link rel="stylesheet" href="/static/css/typography.css" />
+{% endblock %}
+
+{% if params.variantClass %}
+<div class="{{ params.variantClass }}">
+    <{{ params.level }}>{{ params.text }}</{{ params.level }}>
+</div>
+{% else %}
+    <{{ params.level }}>{{ params.text }}</{{ params.level }}>
+{% endif %}
diff --git a/src/_includes/layout.njk b/src/_includes/layout.njk
@@ -9,8 +9,8 @@
     <!-- Replace with your own assets / build system -->
     <link rel="stylesheet" href="/static/css/reset.css" />
     <link rel="stylesheet" href="/static/css/variables.css" />
-    <link rel="stylesheet" href="/static/css/utilities.css" />
     <link rel="stylesheet" href="/static/css/font.css" />
+    <link rel="stylesheet" href="/static/css/utilities.css" />
     {% block head %}{% endblock %}
   </head>
   <body>

diff --git a/src/static/css/font.css b/src/static/css/font.css
@@ -1,28 +1,28 @@
-/* martel-sans-regular - latin */
+/* martel-regular - latin */
 @font-face {
     font-display: swap;
-    font-family: "Martel Sans";
+    font-family: Martel;
     font-style: normal;
     font-weight: 400;
-    src: url("../fonts/martel-sans-v12-latin-regular.woff2") format("woff2");
+    src: url("../fonts/martel-v10-latin-regular.woff2") format("woff2");
 }
 
-/* martel-sans-700 - latin */
+/* martel-700 - latin */
 @font-face {
     font-display: swap;
-    font-family: "Martel Sans";
+    font-family: Martel;
     font-style: normal;
     font-weight: 700;
-    src: url("../fonts/martel-sans-v12-latin-700.woff2") format("woff2");
+    src: url("../fonts/martel-v10-latin-700.woff2") format("woff2");
 }
 
-/* martel-sans-800 - latin */
+/* martel-800 - latin */
 @font-face {
     font-display: swap;
-    font-family: "Martel Sans";
+    font-family: Martel;
     font-style: normal;
     font-weight: 800;
-    src: url("../fonts/martel-sans-v12-latin-800.woff2") format("woff2");
+    src: url("../fonts/martel-v10-latin-800.woff2") format("woff2");
 }
 
 /* mulish-regular - latin */

diff --git a/src/static/css/link.css b/src/static/css/link.css
diff --git a/src/static/css/main.css b/src/static/css/main.css
@@ -3,5 +3,5 @@
 @import "font.css";
 @import "utilities.css";
 @import "color.css";
-@import "link.css";
+@import "typography.css";
 @import "badge.css";
diff --git a/src/static/css/typography.css b/src/static/css/typography.css
@@ -0,0 +1,36 @@
+body {
+    font-family: var(--font-sans);
+    font-size: var(--step-0);
+    font-weight: 400;
+}
+
+h1,
+h2 {
+    font-family: var(--font-sans);
+    font-weight: 800;
+}
+
+h1 {
+    font-size: var(--step-3);
+}
+
+h2 {
+    font-size: var(--step-2);
+}
+
+h3 {
+    font-family: var(--font-serif);
+    font-size: var(--step-1);
+    font-weight: 700;
+}
+
+.card h3 {
+    font-family: var(--font-sans);
+    font-weight: 800;
+}
+
+h4 {
+    font-family: var(--font-serif);
+    font-size: var(--step-0);
+    font-weight: 800;
+}
diff --git a/src/static/css/utilities.css b/src/static/css/utilities.css
@@ -13,6 +13,11 @@
     flex-direction: column;
 }
 
+/* Flex/Grid alignments */
+.items-center {
+    align-items: center;
+}
+
 /* Gap */
 .gap-s {
     gap: var(--space-s);

diff --git a/src/static/css/variables.css b/src/static/css/variables.css
@@ -49,7 +49,7 @@
         arial,
         sans-serif;
     --font-sans:
-        martel,
+        mulish,
         -apple-system,
         blinkmacsystemfont,
         avenir next,
@@ -64,7 +64,7 @@
         arial,
         sans-serif;
     --font-serif:
-        mulish,
+        martel,
         iowan old style,
         apple garamond,
         baskerville,
@@ -74,7 +74,8 @@
         source serif pro,
         apple color emoji,
         segoe ui emoji,
-        segoe ui symbol;
+        segoe ui symbol
+        serif;
 
     /* @link https://utopia.fyi/space/calculator?c=
     320,18,1.2,1240,20,1.25,5,2,&s=0.8|0.5|0.2,1.2|1.5|1.8|3.2|6,s-l&g=s,l,xl,12 */
@@ -137,13 +138,54 @@
     /* Space s-l: 18px → 30px */
     --space-s-l: clamp(1.13rem, calc(0.86rem + 1.3vw), 1.88rem);
 
-    /* Type scales */
-    --step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.8rem);
-    --step--1: clamp(0.94rem, calc(0.92rem + 0.11vw), 1rem);
-    --step-0: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
-    --step-1: clamp(1.35rem, calc(1.28rem + 0.37vw), 1.56rem);
-    --step-2: clamp(1.62rem, calc(1.5rem + 0.58vw), 1.95rem);
-    --step-3: clamp(1.94rem, calc(1.77rem + 0.87vw), 2.44rem);
-    --step-4: clamp(2.33rem, calc(2.08rem + 1.25vw), 3.05rem);
-    --step-5: clamp(2.8rem, calc(2.45rem + 1.77vw), 3.82rem);
+    /* Custom type scales */
+    --fluid-min-width: 320;
+    --fluid-max-width: 1240;
+    --fluid-screen: 100vw;
+    --fluid-bp:
+        calc(
+            (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
+            (var(--fluid-max-width) - var(--fluid-min-width))
+        );
+    --f--1-min: 12.4444;
+    --f--1-max: 14;
+    --step--1:
+        calc(
+            ((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) *
+            var(--fluid-bp)
+        );
+    --f-0-min: 16;
+    --f-0-max: 18;
+    --step-0:
+        calc(
+            ((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) *
+            var(--fluid-bp)
+        );
+    --f-1-min: 28.4444;
+    --f-1-max: 32;
+    --step-1:
+        calc(
+            ((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) *
+            var(--fluid-bp)
+        );
+    --f-2-min: 46.2222;
+    --f-2-max: 52;
+    --step-2:
+        calc(
+            ((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) *
+            var(--fluid-bp)
+        );
+    --f-3-min: 78.2222;
+    --f-3-max: 88;
+    --step-3:
+        calc(
+            ((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) *
+            var(--fluid-bp)
+        );
+}
+
+@media screen and (min-width: 1240px) {
+    :root {
+        --fluid-screen: calc(var(--fluid-max-width) * 1px);
+    }
 }
diff --git a/src/static/fonts/martel-sans-v12-latin-700.woff2 b/src/static/fonts/martel-sans-v12-latin-700.woff2
diff --git a/src/static/fonts/martel-sans-v12-latin-800.woff2 b/src/static/fonts/martel-sans-v12-latin-800.woff2
diff --git a/src/static/fonts/martel-sans-v12-latin-regular.woff2 b/src/static/fonts/martel-sans-v12-latin-regular.woff2
diff --git a/src/static/fonts/martel-v10-latin-700.woff2 b/src/static/fonts/martel-v10-latin-700.woff2
diff --git a/src/static/fonts/martel-v10-latin-800.woff2 b/src/static/fonts/martel-v10-latin-800.woff2
diff --git a/src/static/fonts/martel-v10-latin-regular.woff2 b/src/static/fonts/martel-v10-latin-regular.woff2