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 = [ - Heading - Body - - + Paired with . 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 {