diff --git a/picker/components/Artboard.astro b/picker/components/Artboard.astro
index 7f05c33ce..f7fcf5276 100644
--- a/picker/components/Artboard.astro
+++ b/picker/components/Artboard.astro
@@ -259,6 +259,7 @@ const hook = type ? '' : undefined;
+
@@ -458,6 +459,7 @@ const hook = type ? '' : undefined;
>
{type ? (
+
diff --git a/picker/styles/picker.css b/picker/styles/picker.css
index c5e9ad9f2..9c2aac227 100644
--- a/picker/styles/picker.css
+++ b/picker/styles/picker.css
@@ -6849,7 +6849,8 @@ body.picker-page {
uppercased, and an instruction a specimen cannot test is decoration.
============================================================ */
.picker-preview-type--experience .ps-desktop {
- grid-template-rows: 9.4% minmax(0, 1fr) 8.3%;
+ /* Footer is hidden on type boards; a third row only buys empty band. */
+ grid-template-rows: 9.4% minmax(0, 1fr);
}
.ps-index {
@@ -6861,8 +6862,16 @@ body.picker-page {
padding: var(--ps-band-y) var(--ps-gutter);
}
+.picker-preview-type--experience .ps-index {
+ gap: var(--ps-gap-sm);
+}
+
.picker-preview-type--experience .ps-index > .pt-headline {
- max-width: 20ch;
+ max-width: none;
+ font-size: var(--pt-title);
+ letter-spacing: 0;
+ white-space: nowrap;
+ text-wrap: nowrap;
}
.ps-index-row {
@@ -6893,6 +6902,32 @@ body.picker-page {
gap: calc(var(--pt-base) * 0.35);
}
+/* The strategy gallery's Portfolio captions carry a circular avatar above the
+ title on desktop; the type board repeats that mark so the font-pair preview
+ reads like cells 19–20 beside it. Handset captions stay text-only. */
+.picker-preview-type--experience .ps-desktop .ps-index-cap {
+ align-content: start;
+ gap: calc(var(--pt-base) * 0.42);
+}
+
+.picker-preview-type--experience .ps-index-avatar {
+ display: none;
+}
+
+.picker-preview-type--experience .ps-desktop .ps-index-avatar {
+ display: block;
+ width: calc(var(--pt-base) * 4.8);
+ margin-bottom: calc(var(--pt-base) * 0.12);
+ aspect-ratio: 1;
+ border: 1px solid color-mix(in oklab, var(--pv-secondary) 55%, var(--pv-neutral));
+ border-radius: 50%;
+ background: linear-gradient(
+ 135deg,
+ color-mix(in oklab, var(--pv-secondary) 24%, var(--pv-neutral)),
+ color-mix(in oklab, var(--pv-secondary) 46%, var(--pv-neutral))
+ );
+}
+
.ps-index-title {
color: var(--pvs-title);
font-family: var(--pt-heading);
@@ -6962,7 +6997,11 @@ body.picker-page {
}
.picker-preview-type--experience .ps-index-stop--on {
- color: var(--pvs-title);
+ padding: 0.55em 0.95em;
+ border-radius: var(--pvs-radius-bar);
+ background-color: var(--pvs-cta);
+ color: var(--pv-neutral);
+ font-weight: 600;
}
/* The handset drops the title and the rail and shows the work: two plates,
diff --git a/tmp/questionaire/build-gallery-replica.mjs b/tmp/questionaire/build-gallery-replica.mjs
index 6872d91a5..0184e4f61 100644
--- a/tmp/questionaire/build-gallery-replica.mjs
+++ b/tmp/questionaire/build-gallery-replica.mjs
@@ -397,6 +397,70 @@ const FONT_PAIR_READ_DOCS_LAYOUT_CSS = [
const FONT_PAIR_READ_SECTION_TITLE_JS =
'doc.querySelectorAll("[data-type-section-title]").forEach(function (el) { if (el.textContent.trim() === "Lorem ipsum dolor sit") el.textContent = "Lorem ipsum dolor"; });';
+const FONT_PAIR_EXPERIENCE_CAP_AVATARS_CSS = [
+ '#picker-form .picker-preview-type--experience .ps-desktop .ps-index-cap {',
+ ' align-content: start !important;',
+ '}',
+ '#picker-form .picker-preview-type--experience .ps-index-avatar {',
+ ' display: none !important;',
+ '}',
+ '#picker-form .picker-preview-type--experience .ps-desktop .ps-index-avatar {',
+ ' display: block !important;',
+ ' width: calc(var(--pt-base) * 4.8) !important;',
+ ' aspect-ratio: 1 !important;',
+ ' border-radius: 50% !important;',
+ ' border: 1px solid color-mix(in oklab, var(--pv-secondary) 55%, var(--pv-neutral)) !important;',
+ ' background: linear-gradient(',
+ ' 135deg,',
+ ' color-mix(in oklab, var(--pv-secondary) 24%, var(--pv-neutral)),',
+ ' color-mix(in oklab, var(--pv-secondary) 46%, var(--pv-neutral))',
+ ' ) !important;',
+ '}',
+].join('\n');
+
+const FONT_PAIR_EXPERIENCE_CAP_AVATARS_JS = [
+ 'doc.querySelectorAll("#picker-form .picker-preview-type--experience .ps-desktop .ps-index-cap").forEach(function (cap) {',
+ ' if (cap.querySelector(".ps-index-avatar")) return;',
+ ' var avatar = doc.createElement("i");',
+ ' avatar.className = "ps-index-avatar";',
+ ' avatar.setAttribute("aria-hidden", "true");',
+ ' cap.insertBefore(avatar, cap.firstChild);',
+ '});',
+].join(' ');
+
+const FONT_PAIR_EXPERIENCE_LAYOUT_CSS = [
+ '#picker-form .picker-preview-type--experience .ps-desktop {',
+ ' grid-template-rows: 9.4% minmax(0, 1fr) !important;',
+ '}',
+ '#picker-form .picker-preview-type--experience .ps-index {',
+ ' gap: var(--ps-gap-sm) !important;',
+ '}',
+ '#picker-form .picker-preview-type--experience .ps-index > .pt-headline {',
+ ' max-width: none !important;',
+ ' font-size: var(--pt-title) !important;',
+ ' letter-spacing: 0 !important;',
+ ' white-space: nowrap !important;',
+ ' text-wrap: nowrap !important;',
+ '}',
+ '#picker-form .picker-preview-type--experience .ps-desktop .ps-index-cap {',
+ ' gap: calc(var(--pt-base) * 0.42) !important;',
+ '}',
+ '#picker-form .picker-preview-type--experience .ps-desktop .ps-index-avatar {',
+ ' margin-bottom: calc(var(--pt-base) * 0.12) !important;',
+ '}',
+ '#picker-form .picker-preview-type--experience .ps-index-stop--on {',
+ ' padding: 0.55em 0.95em !important;',
+ ' border-radius: var(--pvs-radius-bar) !important;',
+ ' background-color: var(--pvs-cta) !important;',
+ ' color: var(--pv-neutral) !important;',
+ ' font-weight: 600 !important;',
+ '}',
+ '#picker-form .picker-preview-type--experience .ps-footer,',
+ '#picker-form .picker-preview-type--experience .ps-phone-footer {',
+ ' display: none !important;',
+ '}',
+].join('\n');
+
/** @type {{ id: string, cells: string[], css: string }[]} */
const EXPERIMENTS = [
{
@@ -454,6 +518,17 @@ const EXPERIMENTS = [
css: FONT_PAIR_READ_DOCS_LAYOUT_CSS,
js: FONT_PAIR_READ_SECTION_TITLE_JS,
},
+ {
+ id: 'font-pair-experience-cap-avatars',
+ cells: ['font-pair--experience--default'],
+ css: FONT_PAIR_EXPERIENCE_CAP_AVATARS_CSS,
+ js: FONT_PAIR_EXPERIENCE_CAP_AVATARS_JS,
+ },
+ {
+ id: 'font-pair-experience-layout',
+ cells: ['font-pair--experience--default'],
+ css: FONT_PAIR_EXPERIENCE_LAYOUT_CSS,
+ },
{
id: 'font-pair-operate-ops-chrome',
cells: ['font-pair--operate--default'],
diff --git a/tmp/questionaire/previews-gallery-improved.html b/tmp/questionaire/previews-gallery-improved.html
index 615b3bdaf..a29bf0751 100644
--- a/tmp/questionaire/previews-gallery-improved.html
+++ b/tmp/questionaire/previews-gallery-improved.html
@@ -935,7 +935,7 @@ Array.prototype.forEach.call(document.querySelectorAll('.scaler'), function (sca