feat(site): integrate Adobe Clean Spectrum VF font

docs/site/eleventy.config.js

@@ -36,7 +36,7 @@ export default async function (eleventyConfig) {
   eleventyConfig.addGlobalData("siteDescription", siteDescription);
   eleventyConfig.addGlobalData("navigation", navigation);
 
-  eleventyConfig.addPassthroughCopy({ "public/favicon.png": "favicon.png" });
+  eleventyConfig.addPassthroughCopy({ "public/favicon.svg": "favicon.svg" });
   eleventyConfig.addPassthroughCopy({
     "public/adobe_logo.svg": "adobe_logo.svg",
   });

docs/site/src/assets/css/base/index.css

@@ -78,18 +78,26 @@ header {
   gap: var(--spacing-default);
 }
 
-header a:has(h1) {
+header .logo-link {
+  display: flex;
+  align-items: center;
+  gap: 12px;
   text-decoration: none;
+  height: 24px;
 }
 
-header h1 {
-  display: flex;
-  gap: var(--spacing-default);
-  font-weight: 700 !important;
+header .adobe-logo {
+  height: 24px;
+  width: auto;
 }
 
-header h1 img {
-  height: var(--sizing-large);
+header .site-name {
+  font-size: var(--site-header-title-size);
+  font-weight: var(--spectrum-extra-bold-font-weight);
+  font-synthesis-weight: none;
+  line-height: var(--spectrum-heading-line-height);
+  color: var(--spectrum-heading-color);
+  font-family: var(--mod-heading-sans-serif-font-family, var(--spectrum-heading-sans-serif-font-family));
 }
 
 @media screen and (max-width: 768px) {
@@ -194,3 +202,40 @@ footer p:not(.footer-label) {
   height: var(--sizing-default);
 }
 
+/* Apply Spectrum heading typography to body headings */
+article h1,
+article h2,
+article h3,
+article h4,
+article h5,
+article h6 {
+  font-family: var(--mod-heading-sans-serif-font-family, var(--spectrum-heading-sans-serif-font-family));
+  font-weight: var(--spectrum-heading-sans-serif-font-weight);
+  line-height: var(--spectrum-heading-line-height);
+  color: var(--spectrum-heading-color);
+}
+
+article h1 {
+  font-size: var(--spectrum-heading-size-xxl);
+}
+
+article h2 {
+  font-size: var(--spectrum-heading-size-xl);
+}
+
+article h3 {
+  font-size: var(--spectrum-heading-size-l);
+}
+
+article h4 {
+  font-size: var(--spectrum-heading-size-m);
+}
+
+article h5 {
+  font-size: var(--spectrum-heading-size-s);
+}
+
+article h6 {
+  font-size: var(--spectrum-heading-size-xs);
+}
+

docs/site/src/assets/css/base/reset.css

@@ -48,7 +48,7 @@ governing permissions and limitations under the License.
 
 :where(body) {
   line-height: inherit;
-  font-family: system-ui, sans-serif;
+  font-family: adobe-clean-spectrum-vf, system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
 }
 

docs/site/src/assets/css/base/vars.css

@@ -19,4 +19,14 @@ governing permissions and limitations under the License.
 
   --sizing-default: var(--spectrum-spacing-300);
   --sizing-large: var(--spectrum-spacing-500);
+
+  /* Override Spectrum CSS tokens to use adobe-clean-spectrum-vf variable font */
+  --spectrum-sans-serif-font-family: adobe-clean-spectrum-vf;
+  --spectrum-sans-font-family-stack: adobe-clean-spectrum-vf, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+  --spectrum-font-family: var(--spectrum-sans-font-family-stack);
+  --mod-body-sans-serif-font-family: adobe-clean-spectrum-vf, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+  --mod-heading-sans-serif-font-family: adobe-clean-spectrum-vf, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+
+  /* Custom site-specific tokens */
+  --site-header-title-size: 20px;
 }

docs/site/src/includes/layout/header.liquid

@@ -11,11 +11,9 @@ governing permissions and limitations under the License.
 -->
 
 <header>
-  <a href="/">
-    <h1 class="spectrum-Heading spectrum-Heading--sizeL">
-      <img src="/adobe_logo.svg" alt="Adobe logo" />
-      Spectrum Design Data
-    </h1>
+  <a href="/" class="logo-link">
+    <img src="/adobe_logo.svg" alt="Adobe logo" class="adobe-logo" />
+    <span class="site-name">Spectrum Design Data</span>
   </a>
   <menu>
     <li><a href="/components/">Components</a></li>

docs/site/src/layouts/base.liquid

@@ -8,9 +8,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>{% if title %}{{ title }} | {% endif %}{{ siteName }}</title>
   <meta name="description" content="{{ description | default: siteDescription }}">
-  <link rel="preconnect" href="https://use.typekit.net" crossorigin>
-  <script src="https://use.typekit.net/rok6rmo.js" async></script>
-  <link rel="icon" type="image/png" href="/favicon.png">
+  <link rel="stylesheet" href="https://use.typekit.net/flz1ovt.css">
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg">
   <link rel="stylesheet" href="/assets/css/index.css">
 </head>
 <body class="spectrum spectrum--light spectrum-Body spectrum-Body--sizeM">