diff --git a/picker/styles/picker.css b/picker/styles/picker.css
index 382b4e7ad..67343d526 100644
--- a/picker/styles/picker.css
+++ b/picker/styles/picker.css
@@ -3156,6 +3156,52 @@ body.picker-page {
width: calc(2.64 * var(--pv-text) * var(--pv-x));
}
+/* Board stage: the read artboard draws type as bars through [data-carry]. At
+ frame size those counts read as hairlines beside strategy's wireframe, which
+ carries its own step. Scale the bar ladder to match. */
+.picker-board-stage > [data-carry][data-surface="read"] {
+ --pvs-carry-weight: 1.65;
+}
+
+.picker-board-stage > [data-carry][data-surface="read"] .ps-docs-item > i {
+ width: calc(var(--pt-base) * 0.34 * var(--pvs-carry-weight));
+}
+
+.picker-board-stage > [data-carry][data-surface="read"] :is(
+ .ps-docs-item b,
+ .ps-docs-crumb,
+ .ps-docs-note-copy b
+) {
+ height: calc(var(--pt-base) * 0.26 * var(--pvs-carry-weight));
+}
+
+.picker-board-stage > [data-carry][data-surface="read"] :is(
+ .ps-docs-main .pt-headline i,
+ .ps-phone-body .pt-headline i
+) {
+ height: calc(var(--pt-base) * 0.72 * var(--pvs-carry-weight));
+}
+
+.picker-board-stage > [data-carry][data-surface="read"] .ps-docs-sub {
+ height: calc(var(--pt-base) * 0.5 * var(--pvs-carry-weight));
+}
+
+.picker-board-stage > [data-carry][data-surface="read"] :is(
+ .ps-docs-lede i,
+ .ps-docs-para i,
+ .ps-docs-list li
+) {
+ height: calc(var(--pt-base) * 0.3 * var(--pvs-carry-weight));
+}
+
+.picker-board-stage > [data-carry][data-surface="read"] .ps-docs-note-copy > span i {
+ height: calc(var(--pt-base) * 0.26 * var(--pvs-carry-weight));
+}
+
+.picker-board-stage > [data-carry][data-surface="read"] .ps-docs-list li::before {
+ width: calc(var(--pt-base) * 0.3 * var(--pvs-carry-weight));
+}
+
/* One drawing is shown and the rest stay mounted, so switching costs an
attribute rather than a rebuild. [hidden] is a display: none that the
component's own display: grid outranks, so it is restated here. */
diff --git a/tmp/questionaire/build-gallery-replica.mjs b/tmp/questionaire/build-gallery-replica.mjs
index 5472e2177..01e1044b9 100644
--- a/tmp/questionaire/build-gallery-replica.mjs
+++ b/tmp/questionaire/build-gallery-replica.mjs
@@ -51,6 +51,135 @@ const DOCS_WEIGHT_CSS = [
'}',
].join('\n');
+const DOCS_CARRY_SCOPE =
+ 'html[data-cell-surface="read"]:is([data-cell-screen="08"], [data-cell-screen="09"], [data-cell-screen="10"])';
+
+const DOCS_CARRY_ROOT = '[data-carry][data-surface="read"]';
+
+const DOCS_CARRY_WEIGHT_CSS = [
+ `${DOCS_CARRY_SCOPE} ${DOCS_CARRY_ROOT} {`,
+ ' --pvs-carry-weight: 1.65 !important;',
+ '}',
+ `${DOCS_CARRY_SCOPE} ${DOCS_CARRY_ROOT} .ps-docs-item > i {`,
+ ' width: calc(var(--pt-base) * 0.34 * var(--pvs-carry-weight)) !important;',
+ '}',
+ `${DOCS_CARRY_SCOPE} ${DOCS_CARRY_ROOT} :is(`,
+ ' .ps-docs-item b,',
+ ' .ps-docs-crumb,',
+ ' .ps-docs-note-copy b',
+ ') {',
+ ' height: calc(var(--pt-base) * 0.26 * var(--pvs-carry-weight)) !important;',
+ '}',
+ `${DOCS_CARRY_SCOPE} ${DOCS_CARRY_ROOT} :is(`,
+ ' .ps-docs-main .pt-headline i,',
+ ' .ps-phone-body .pt-headline i',
+ ') {',
+ ' height: calc(var(--pt-base) * 0.72 * var(--pvs-carry-weight)) !important;',
+ '}',
+ `${DOCS_CARRY_SCOPE} ${DOCS_CARRY_ROOT} .ps-docs-sub {`,
+ ' height: calc(var(--pt-base) * 0.5 * var(--pvs-carry-weight)) !important;',
+ '}',
+ `${DOCS_CARRY_SCOPE} ${DOCS_CARRY_ROOT} :is(`,
+ ' .ps-docs-lede i,',
+ ' .ps-docs-para i,',
+ ' .ps-docs-list li',
+ ') {',
+ ' height: calc(var(--pt-base) * 0.3 * var(--pvs-carry-weight)) !important;',
+ '}',
+ `${DOCS_CARRY_SCOPE} ${DOCS_CARRY_ROOT} .ps-docs-note-copy > span i {`,
+ ' height: calc(var(--pt-base) * 0.26 * var(--pvs-carry-weight)) !important;',
+ '}',
+ `${DOCS_CARRY_SCOPE} ${DOCS_CARRY_ROOT} .ps-docs-list li::before {`,
+ ' width: calc(var(--pt-base) * 0.3 * var(--pvs-carry-weight)) !important;',
+ '}',
+].join('\n');
+
+const DOCS_BOARD_CELLS = [
+ 'boundaries--read--open-space',
+ 'boundaries--read--thin-dividers',
+ 'boundaries--read--surface-changes',
+ 'corners--read--sharp',
+ 'corners--read--slightly-soft',
+ 'corners--read--friendly',
+ 'corners--read--pill',
+ 'depth--read--flat',
+ 'depth--read--soft-lift',
+];
+
+const GALLERY_PREVIEW =
+ '#picker-form .picker-strategy-stage > .picker-preview.picker-preview--gallery';
+
+function portfolioCapAvatarsCss(option, circle = 'neutral') {
+ const scope =
+ 'html[data-cell-screen="03"][data-cell-surface="experience"][data-cell-option="' + option + '"]';
+ const capCircle =
+ circle === 'drenched'
+ ? [
+ ' border: 1px solid color-mix(in oklab, var(--pkc-p-ink) 40%, var(--pkc-primary));',
+ ' background: linear-gradient(',
+ ' 135deg,',
+ ' color-mix(in oklab, var(--pkc-p-ink) 16%, var(--pkc-primary)),',
+ ' color-mix(in oklab, var(--pkc-p-ink) 28%, var(--pkc-primary))',
+ ' );',
+ ].join('\n')
+ : circle === 'committed'
+ ? [
+ ' border: 1px solid color-mix(in oklab, var(--pkc-primary) 42%, var(--pkc-neutral));',
+ ' background: linear-gradient(',
+ ' 135deg,',
+ ' color-mix(in oklab, var(--pkc-primary) 16%, var(--pkc-neutral)),',
+ ' color-mix(in oklab, var(--pkc-primary) 30%, var(--pkc-neutral))',
+ ' );',
+ ].join('\n')
+ : [
+ ' border: 1px solid color-mix(in oklab, var(--pv-secondary) 55%, var(--pv-neutral));',
+ ' 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))',
+ ' );',
+ ].join('\n');
+
+ return [
+ `${scope} ${GALLERY_PREVIEW} .pv-desktop .pg-cap {`,
+ ' padding-top: 5.2cqh !important;',
+ ' gap: 2.6cqh !important;',
+ '}',
+ `${scope} ${GALLERY_PREVIEW} .pv-desktop .pg-cap::before {`,
+ ' content: "";',
+ ' display: block;',
+ ' width: calc(11.5 * var(--pv-x));',
+ ' aspect-ratio: 1;',
+ ' border-radius: 50%;',
+ capCircle,
+ '}',
+ ].join('\n');
+}
+
+const PORTFOLIO_DRENCHED_COLOR_CSS = [
+ 'html[data-cell-screen="03"][data-cell-surface="experience"][data-cell-option="drenched"]',
+ `${GALLERY_PREVIEW} {`,
+ ' --pv-secondary: var(--pkc-secondary) !important;',
+ ' --pv-tertiary: var(--pkc-tertiary) !important;',
+ ' --pv-bone: color-mix(in oklab, var(--pkc-p-ink) 55%, var(--pkc-primary)) !important;',
+ ' --pv-strong: var(--pkc-p-ink) !important;',
+ ' --pv-secondary-wash: color-mix(in oklab, var(--pkc-p-ink) 16%, var(--pkc-primary)) !important;',
+ '}',
+ 'html[data-cell-screen="03"][data-cell-surface="experience"][data-cell-option="drenched"]',
+ `${GALLERY_PREVIEW} .pv-image {`,
+ ' background: linear-gradient(',
+ ' 135deg,',
+ ' color-mix(in oklab, var(--pkc-p-ink) 16%, var(--pkc-primary)),',
+ ' color-mix(in oklab, var(--pkc-p-ink) 28%, var(--pkc-primary))',
+ ' ) !important;',
+ ' border-color: color-mix(in oklab, var(--pkc-p-ink) 40%, var(--pkc-primary)) !important;',
+ '}',
+ 'html[data-cell-screen="03"][data-cell-surface="experience"][data-cell-option="drenched"]',
+ `${GALLERY_PREVIEW} .pv-image::after {`,
+ ' background: var(--pkc-tertiary) !important;',
+ '}',
+].join('\n');
+
/** @type {{ id: string, cells: string[], css: string }[]} */
const EXPERIMENTS = [
{
@@ -127,6 +256,26 @@ const EXPERIMENTS = [
],
css: DOCS_WEIGHT_CSS,
},
+ {
+ id: 'docs-board-carry-weight',
+ cells: DOCS_BOARD_CELLS,
+ css: DOCS_CARRY_WEIGHT_CSS,
+ },
+ {
+ id: 'portfolio-restrained-cap-avatars',
+ cells: ['strategy--experience--restrained'],
+ css: portfolioCapAvatarsCss('restrained', 'neutral'),
+ },
+ {
+ id: 'portfolio-committed-cap-avatars',
+ cells: ['strategy--experience--committed'],
+ css: portfolioCapAvatarsCss('committed', 'committed'),
+ },
+ {
+ id: 'portfolio-drenched-gallery',
+ cells: ['strategy--experience--drenched'],
+ css: PORTFOLIO_DRENCHED_COLOR_CSS + '\n' + portfolioCapAvatarsCss('drenched', 'drenched'),
+ },
];
const experiment = String.raw`
@@ -188,8 +337,11 @@ replica = replica.replace(
/Ground-truth extraction[\s\S]*?<\/p>/,
'
Replica of the ground-truth gallery with experiments on '
+ '12 Drenched , '
- + '14–15 App UI color roles, and '
- + '16–18 Docs wireframe weight. '
+ + '14–15 App UI color roles, '
+ + '16–18 Docs strategy wireframe weight, and '
+ + '45–47 / 59–62 / 71–72 Docs board bar weight, and '
+ + '19–21 Portfolio caption circles (desktop), '
+ + '21 drenched color roles. '
+ 'Baseline: previews-gallery.html .
',
);
diff --git a/tmp/questionaire/previews-gallery-improved.html b/tmp/questionaire/previews-gallery-improved.html
index 381fdf2b8..b9dfbf272 100644
--- a/tmp/questionaire/previews-gallery-improved.html
+++ b/tmp/questionaire/previews-gallery-improved.html
@@ -35,7 +35,7 @@ figure.cell iframe { display: block; border: 0; background: transparent; positio
Questionnaire previews (improved experiment)
-Replica of the ground-truth gallery with experiments on 12 Drenched , 14–15 App UI color roles, and 16–18 Docs wireframe weight. Baseline: previews-gallery.html .
+Replica of the ground-truth gallery with experiments on 12 Drenched , 14–15 App UI color roles, 16–18 Docs strategy wireframe weight, and 45–47 / 59–62 / 71–72 Docs board bar weight, and 19–21 Portfolio caption circles (desktop), 21 drenched color roles. Baseline: previews-gallery.html .
Palette