Typography Fixes

core/views.py

@@ -1773,8 +1773,9 @@ def get_context_data(self, **kwargs):
                 {"label": "Visit the FAQ", "url": "https://www.example.com"},
             ],
             "url": "https://www.example.com",
-            "label": "Learn more about Boost",
-            "image_src": "/static/img/v3/examples/Learn Card Image.png",
+            "label": "Get started with Boost",
+            "image_src": f"{settings.STATIC_URL}img/v3/examples/Learn_Card_Image.png",
+            "mobile_image_src": f"{settings.STATIC_URL}img/v3/examples/Cheetah_Mobile.png",
         }
 
         context["testimonial_data"] = {
@@ -1998,7 +1999,7 @@ def get_context_data(self, **kwargs):
                 deps = lv.dependencies.order_by("name")
                 context["dependencies_card_data"] = [
                     {
-                        "name": dep.display_name_short,
+                        "name": dep.name,
                         "url": reverse(
                             "library-detail",
                             kwargs={

static/css/v3/account-connections.css

@@ -46,7 +46,7 @@
 }
 
 .account-connections__platform-name {
-  font-family: var(--font-sans, 'Mona Sans VF'), sans-serif;
+  font-family: var(--font-sans);
   font-size: var(--font-size-base, 16px);
   font-weight: var(--font-weight-medium, 500);
   line-height: var(--line-height-default, 1.2);
@@ -57,7 +57,7 @@
 
 .account-connections__status {
   flex: 1 1 0;
-  font-family: var(--font-sans, 'Mona Sans VF'), sans-serif;
+  font-family: var(--font-sans);
   font-size: var(--font-size-base, 16px);
   font-weight: var(--font-weight-regular, 400);
   line-height: var(--line-height-default, 1.2);

static/css/v3/banner.css

@@ -14,7 +14,7 @@
     color: var(--color-text-on-accent, #050816);
 
     /* Sans/Desktop/Regular/XS/Tight */
-    font-family: var(--font-sans, "Mona Sans VF");
+    font-family: var(--font-sans);
     font-size: var(--font-size-xs, 12px);
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-tight);

static/css/v3/calendar.css

@@ -12,7 +12,7 @@
     color: var(--color-text-primary, #050816);
 
     /* Sans/Desktop/Regular/2XL */
-    font-family: var(--font-sans, "Mona Sans VF");
+    font-family: var(--font-sans);
     font-size: var(--font-size-2xl, 40px);
     font-style: normal;
     font-weight: var(--font-weight-regular);
@@ -26,7 +26,7 @@
     color: var(--color-text-secondary, #585A64);
 
     /* Sans/Desktop/Regular/M */
-    font-family: var(--font-sans, "Mona Sans VF");
+    font-family: var(--font-sans);
     font-size: var(--font-size-medium, 18px);
     font-style: normal;
     font-weight: var(--font-weight-regular);

static/css/v3/card.css

@@ -52,11 +52,14 @@
 }
 
 .card__column {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--space-large);
-    width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-large);
+  width: 100%;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-medium);
+  letter-spacing: var(--letter-spacing-tight);
 }
 
 .card__header {
@@ -126,7 +129,7 @@
     flex: 1 0 0;
     padding: 0;
     color: var(--color-text-secondary, #585a64);
-    font-family: var(--font-sans, 'Mona Sans VF'), sans-serif;
+    font-family: var(--font-sans);
     font-size: var(--font-size-base, 16px);
     font-weight: var(--font-weight-regular, 400);
     line-height: var(--line-height-default, 1.2);

static/css/v3/carousel-buttons.css

@@ -26,13 +26,13 @@
 }
 
 .carousel-buttons .btn-carousel .btn-icon {
-  width: 12px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
 }
 
 .carousel-buttons .btn-carousel .btn-icon svg {
-  width: 12px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
 }
 
 .carousel-buttons .btn-carousel:hover:not(:disabled) {

static/css/v3/category-tags.css

@@ -5,6 +5,7 @@
   font-family: var(--font-sans);
   font-size: var(--font-size-xs);
   line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-tight);
   font-weight: var(--font-weight-regular);
   border-radius: var(--border-radius-s);
   text-decoration: none;

static/css/v3/code-block.css

@@ -39,7 +39,7 @@
   border-radius: var(--border-radius-l);
   overflow: auto;
   font-family: var(--font-code);
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-xs);
   line-height: var(--line-height-code);
   color: var(--code-block-text);
   box-sizing: border-box;
@@ -68,6 +68,8 @@
   font-weight: 500;
   color: var(--color-syntax-cpp-text) !important;
   white-space: break-spaces !important;
+  font-size: inherit;
+  line-height: var(--line-height-code);
 }
 
 /* CTA button in card */
@@ -136,19 +138,15 @@ html.dark .code-block-card--grey {
 .code-block-card__heading {
   margin: 0;
   padding: 0 var(--space-card) var(--space-card) var(--space-card);
-  font-size: var(--font-size-large);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-tight);
-  font-family: var(--font-display);
-  color: var(--color-text-primary);
 }
 
 .code-block-card__description {
   padding: var(--space-card) var(--space-card) var(--space-default)
     var(--space-card);
   margin: 0 0 var(--space-medium);
   font-size: var(--font-size-medium);
-  line-height: var(--line-height-relaxed);
+  line-height: var(--line-height-default);
+  letter-spacing: var(--letter-spacing-tight);
   color: var(--color-text-secondary);
 }
 
@@ -163,12 +161,14 @@ html.dark .code-block-card--grey {
   white-space: pre;
   min-height: 1em;
   overflow: hidden;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 .code-block__copy {
   position: absolute;
-  top: var(--space-default);
-  right: var(--space-default);
+  top: var(--space-card);
+  right: var(--space-card);
   width: var(--code-block-copy-icon-size);
   height: var(--code-block-copy-icon-size);
   padding: 0;

static/css/v3/content.css

@@ -83,6 +83,7 @@ a:hover .content-detail-icon:not(.content-detail-icon--contained) {
   margin: 0;
   font-size: var(--font-size-small);
   line-height: var(--line-height-relaxed);
+  letter-spacing: var(--letter-spacing-tight);
   color: var(--color-text-secondary);
   padding: 0;
 }

static/css/v3/dialog.css

@@ -99,7 +99,7 @@
   font-size: var(--font-size-large);
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height-tight);
-  letter-spacing: var(--letter-spacing-display-regular);
+  letter-spacing: var(--letter-spacing-tight);
   color: var(--color-text-primary);
   display: block !important;
 }

static/css/v3/fonts.css

@@ -1,23 +1,23 @@
 /**
  * V3 typography fonts.
- * Reuses v2 fonts from /static/font/ where same (Monaspace); v3-only (Mona Sans, Space Mono) in /static/font/v3/
+ * Reuses v2 fonts from /static/font/ where same (Monaspace); v3-only (Mona Sans) in /static/font/v3/
  */
 
 /* Mona Sans – v3 only */
 @font-face {
   font-family: 'Mona Sans VF';
   font-style: normal;
-  font-weight: 200 900;
-  font-stretch: 75% 125%;
+  font-weight: 400 500;
+  font-stretch: 95%;
   font-display: swap;
   src: url('/static/font/v3/mona-sans/mona-sans-vf.ttf') format('truetype');
 }
 
 @font-face {
   font-family: 'Mona Sans VF';
   font-style: italic;
-  font-weight: 200 900;
-  font-stretch: 75% 125%;
+  font-weight: 400 500;
+  font-stretch: 95%;
   font-display: swap;
   src: url('/static/font/v3/mona-sans/mona-sans-vf-italic.ttf') format('truetype');
 }
@@ -44,7 +44,7 @@
 @font-face {
   font-family: 'Monaspace Neon';
   font-style: normal;
-  font-weight: 100 900;
+  font-weight: 400;
   font-stretch: 100%;
   font-display: swap;
   src: url('/static/font/MonaspaceNeon-Var.woff2') format('woff2');
@@ -63,7 +63,7 @@
 @font-face {
   font-family: 'Monaspace Xenon';
   font-style: normal;
-  font-weight: 100 900;
+  font-weight: 400;
   font-stretch: 100%;
   font-display: swap;
   src: url('/static/font/MonaspaceXenon-Var.woff2') format('woff2');
@@ -77,39 +77,3 @@
   font-display: swap;
   src: url('/static/font/MonaspaceXenon-Italic.woff2') format('woff2');
 }
-
-@font-face {
-  font-family: 'Space Mono';
-  font-style: normal;
-  font-weight: 400;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url('/static/font/v3/space-mono/SpaceMono-Regular.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Space Mono';
-  font-style: italic;
-  font-weight: 400;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url('/static/font/v3/space-mono/SpaceMono-Italic.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Space Mono';
-  font-style: normal;
-  font-weight: 700;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url('/static/font/v3/space-mono/SpaceMono-Bold.ttf') format('truetype');
-}
-
-@font-face {
-  font-family: 'Space Mono';
-  font-style: italic;
-  font-weight: 700;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url('/static/font/v3/space-mono/SpaceMono-BoldItalic.ttf') format('truetype');
-}

static/css/v3/footer.css

@@ -1,9 +1,9 @@
 .footer {
-  --footer-text: var(--Text-Primary, var(--color-text-primary, #050816));
+  --footer-text: var(--color-text-primary);
   padding: var(--space-large) var(--space-large);
   color: var(--footer-text);
-  font-family: var(--Typefaces-Sans, var(--font-sans, "Mona Sans VF"));
-  font-size: var(--Sizes-XS, 12px);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-xs);
   font-style: normal;
   font-weight: 400;
   line-height: 120%;
@@ -15,8 +15,8 @@
 .footer a,
 .footer p {
   color: var(--footer-text);
-  font-family: var(--Typefaces-Sans, var(--font-sans, "Mona Sans VF"));
-  font-size: var(--Sizes-XS, 12px);
+  font-family: var(--font-sans);
+  font-size: var(--font-size-xs);
   font-style: normal;
   font-weight: 400;
   line-height: 120%;

static/css/v3/forms.css

@@ -15,7 +15,7 @@
   font-family: var(--font-sans);
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-relaxed);
+  line-height: var(--line-height-default);
   letter-spacing: var(--letter-spacing-tight);
   color: var(--color-text-primary);
 }

static/css/v3/learn-cards.css

@@ -15,7 +15,7 @@
 }
 
 .learn-card__link-column {
-    gap: var(--space-s);
+    gap: var(--space-default);
 }
 
 @media (max-width: 1280px) {
@@ -44,7 +44,6 @@
 
 .learn-card__title {
     color: var(--color-text-primary);
-
     font-family: var(--font-display);
     font-size: var(--font-size-large);
     font-weight: var(--font-weight-medium);
@@ -53,11 +52,8 @@
 }
 
 .learn-card__text {
-    color: var(--color-text-secondary);
-
     font-family: var(--font-sans);
     font-size: var(--font-size-base);
-    font-weight: var(--font-weight-medium);
     letter-spacing: -0.16px;
 }
 
@@ -90,7 +86,12 @@
     text-decoration-skip-ink: auto;
     text-decoration-thickness: 7.5%;
     text-underline-offset: 15.2%;
-    text-underline-position: from-font;
+    text-underline-position: auto;
+    color: var(--color-text-primary);
+}
+
+.learn-card__link:hover {
+    color: var(--color-text-link-accent);
 }
 
 

static/css/v3/library-intro-card.css

@@ -1,7 +1,7 @@
 /* Library Intro Card Component */
 
 .library-intro-card {
-  font-family: var(--font-sans, "Mona Sans VF"), sans-serif;
+  font-family: var(--font-sans);
   display: flex;
   flex-direction: column;
   max-width: 458px;
@@ -42,6 +42,10 @@
   color: var(--color-text-primary, #050816);
 }
 
+.library-intro-card__description {
+  color: var(--color-text-secondary);
+}
+
 .library-intro-card__title-pill {
   display: inline-flex;
   align-items: center;

static/css/v3/markdown-card.css

@@ -13,7 +13,6 @@
 }
 
 .markdown-content {
-    color: var(--color-text-secondary);
     padding: 0 var(--space-large);
     font-size: var(--font-size-small);
     font-weight: var(--font-weight-regular);

static/css/v3/post-card.css

@@ -42,12 +42,10 @@
   font-weight: var(--font-weight-regular);
   line-height: var(--line-height-default);
   letter-spacing: -0.12px;
-  color: var(--color-text-secondary);
 }
 
 .post-card__meta > :not(:first-child)::before {
   content: "•";
-  color: var(--color-text-secondary);
   user-select: none;
   margin-right: 6px;
 }