From 9af6fc1cb79e4ad3cc4d3028bd7c3a314bd41aa4 Mon Sep 17 00:00:00 2001
From: Abdul Wahab <abdulwahabone@gmail.com>
Date: Fri, 24 Jul 2026 02:16:44 +0500
Subject: [PATCH] Restyle font pair cards after fonttrio's pairing anatomy.

The heading family name sits big in its own face; one sentence in the
body face names its partner in bold and carries the why line. The
sentence demonstrates the body font, so the Heading/Body labels go.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 picker/pages/index.astro |  5 +----
 picker/styles/picker.css | 33 +++++++++++----------------------
 2 files changed, 12 insertions(+), 26 deletions(-)

diff --git a/picker/pages/index.astro b/picker/pages/index.astro
index 2d7912489..190f47442 100644
--- a/picker/pages/index.astro
+++ b/picker/pages/index.astro
@@ -391,11 +391,8 @@ const roles = [
                 <input type="radio" name="font-pair" />
                 <span class="picker-strategy-indicator" aria-hidden="true"></span>
                 <span class="picker-type-copy">
-                  <span class="picker-type-role">Heading</span>
                   <strong class="picker-type-sample-heading" data-pair-heading></strong>
-                  <span class="picker-type-role">Body</span>
-                  <span class="picker-type-sample-body" data-pair-body></span>
-                  <span class="picker-type-why" data-pair-why></span>
+                  <span class="picker-type-desc">Paired with <b data-pair-body></b>. <span data-pair-why></span></span>
                 </span>
               </label>
             </template>
diff --git a/picker/styles/picker.css b/picker/styles/picker.css
index e734c7b1b..cab7adcf5 100644
--- a/picker/styles/picker.css
+++ b/picker/styles/picker.css
@@ -1812,40 +1812,29 @@ html.light .ks-button.ks-button-ghost:hover {
   display: grid;
 }
 
-.picker-type-role {
-  color: var(--ks-text-muted);
-  font-family: var(--ks-mono);
-  font-size: 0.62rem;
-  font-weight: 600;
-  line-height: 1;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-}
-
+/* Fonttrio-style specimen: the heading family name set big in its own
+   face, then one sentence in the body face that names its partner. The
+   sentence demonstrates the body font, so no Heading/Body labels. */
 .picker-type-sample-heading {
-  margin: 6px 0 14px;
   color: var(--ks-champagne);
   font-family: var(--pair-heading, var(--ks-font-display));
   font-size: 1.65rem;
   font-weight: var(--pair-heading-weight, 600);
-  line-height: 1.1;
+  line-height: 1.15;
 }
 
-.picker-type-sample-body {
-  margin-top: 6px;
+.picker-type-desc {
+  margin-top: 10px;
   color: var(--ks-text);
   font-family: var(--pair-body, var(--ks-font));
-  font-size: var(--ks-type-body-size);
+  font-size: 0.92rem;
   font-weight: var(--pair-body-weight, 400);
-  line-height: 1.3;
+  line-height: 1.55;
 }
 
-.picker-type-why {
-  margin-top: 12px;
-  color: var(--ks-text-muted);
-  font-family: var(--pair-body, var(--ks-font));
-  font-size: 0.78rem;
-  line-height: 1.5;
+.picker-type-desc b {
+  font: inherit;
+  font-weight: 700;
 }
 
 .picker-preview-type {