@redseed/redseed-ui-tailwindcss 7.66.0 → 7.68.0

package/components/category_list.css

@@ -30,16 +30,23 @@
 
 /* A linked category has to look like a link. A badge with no pointer and no
    hover reads as a label, which is what most categories are, so the ones that
-   genuinely filter a list get the library's always-on underline (the LinkSlot
-   convention) plus a hover state on the pill itself. Half-measures are the
-   failure here: a pointer alone is not a visible affordance. */
+   genuinely filter a list get a pointer, a hover state on the pill, and the
+   underline on hover.
+
+   Underline on hover rather than at rest, which is where this started and was
+   wrong: it borrowed LinkSlot's always-on rule, but a pill is not a run of text
+   in a paragraph. Its own shape already separates it from what is around it, so
+   a resting underline reads as a mistake rather than as a link — the same
+   treatment a table cell link gets, where colour and weight carry it and the
+   underline is the hover affordance. */
 .rsui-category-list__link {
     @apply block rounded-full no-underline;
     @apply focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-border-primary outline-hidden;
 }
 
 .rsui-category-list__link .rsui-badge {
-    @apply cursor-pointer underline underline-offset-2 transition-colors;
+    @apply cursor-pointer no-underline transition-colors;
+    @apply hover:underline underline-offset-2;
 }
 
 /* One grey step darker, not the usual `hover:bg-background-secondary`. That is the
@@ -56,8 +63,15 @@
 
    Sibling to the list rather than inside it, so it wraps onto its own line at
    phone widths — which is where the cap does most of its work. */
+/* min-width, because the label changes length as it toggles: "+4 more" is 57px
+   and "Show fewer" is 80px, so without a floor the whole row shifted 23px
+   sideways under the pointer mid-press. Measured. The value is the wider of the
+   two states, so the button never grows and never shrinks; text-align keeps the
+   shorter label from drifting left inside it.
+
+   Same fix the page header's meta toggle already carries, for the same reason. */
 .rsui-category-list__more {
-    @apply inline-flex w-fit items-center whitespace-nowrap;
+    @apply inline-flex w-fit min-w-20 justify-center items-center whitespace-nowrap;
     @apply text-sm font-semibold no-underline cursor-pointer transition-colors;
     @apply text-button-tertiary hover:text-button-tertiary-hover;
     @apply hover:underline underline-offset-4 decoration-2;

package/components/form_field_slot.css

@@ -1,5 +1,23 @@
+/* ── A form field breathes at 8px, not 4px ──────────────────────────────────────────
+   Two nested gaps make a field: this one, label -> control, and __field's below it,
+   control -> help. Both were space-xxs (4px), which is the TIGHT PAIR value.
+
+   A tight pair is two lines of TEXT where line-height already contributes half-leading
+   at both ends, so 4px is all the visible separation the pair can take (see the note
+   above .rsui-card-header__subtitle in card_header.css). Neither of these gaps is that
+   shape. A 14px label sits above a 50px control, not above another line of text, and
+   there is no leading between them to absorb — so 4px renders as 4px and the label
+   reads as welded to the box.
+
+   8px is the brand's own label -> value step and the smallest value on its 8px rhythm.
+   It is also what the PRODUCT independently arrived at: redseed's Styles/formfield_slot.css
+   reimplements this component with `gap-y-2`, exactly 8px, which is a second opinion
+   reached without reference to this one.
+
+   The radio-group override below keeps its own 12px and is unaffected. --compact is a
+   flex ROW and does not wrap, so a row-gap never applies to it. */
 .rsui-form-field-slot {
-    @apply flex flex-col gap-y-space-xxs border-0 bg-transparent p-0;
+    @apply flex flex-col gap-y-space-xs border-0 bg-transparent p-0;
 }
 
 .rsui-form-field-slot.rsui-form-field-radio-group {
@@ -26,8 +44,10 @@
     @apply text-base font-semibold;
 }
 
+/* The second half of the pair above: control -> help. This is the gap that made help
+   text look attached to the input. Same 4px -> 8px, same reasoning. */
 .rsui-form-field-slot__field {
-    @apply shrink-0 flex flex-col gap-y-space-xxs;
+    @apply shrink-0 flex flex-col gap-y-space-xs;
 }
 
 .rsui-form-field-slot__help {

package/components/form_fieldset.css

@@ -2,8 +2,19 @@
     @apply text-base text-text-primary font-semibold;
 }
 
+/* ── Between whole fields: 16px ─────────────────────────────────────────────────────
+   This was space-sm (12px), which is not a value on the brand's 8px rhythm at all —
+   the rhythm runs 8, 16, 24, 32, 48, 64, 96.
+
+   16px is also what the other form context already uses: FormSlot spaces a form's
+   children with mt-space-md. Those two were the only places in the library that space
+   stacked fields, and they disagreed. Now they do not.
+
+   The gap between two fields has to stay clearly larger than the 8px inside one, or a
+   field stops reading as a unit — 16 against 8 is the same 1:2 grouping the card meta
+   uses. */
 .rsui-form-fieldset__fields {
-    @apply flex flex-col gap-space-sm;
+    @apply flex flex-col gap-space-md;
 }
 
 .rsui-form-fieldset__fields--padded {

package/components/metric_card.css

@@ -167,7 +167,8 @@
    on it — and the alternative is inventing a second readable ink per tone to
    preserve a nicety. tone-light keeps its semantic colour, so it keeps the split. */
 .rsui-metric-card--tone-green .rsui-metric-card__comparison-context,
-.rsui-metric-card--tone-teal .rsui-metric-card__comparison-context {
+.rsui-metric-card--tone-teal .rsui-metric-card__comparison-context,
+.rsui-metric-card--tone-bloom .rsui-metric-card__comparison-context {
     color: var(--rsui-metric-card-ink-muted);
 }
 
@@ -247,6 +248,43 @@
     --rsui-metric-card-rule: rgba(255, 255, 255, 0.18);
 }
 
+/* For a MetricCard sitting on PageHeader's bloom band, and the one tone whose surface is
+   NOT opaque.
+
+   This is not the header's own stats strip — that is PageHeaderStat, a 150px tile with a
+   serif figure, and the two are different objects. This tone is for the case where a full
+   MetricCard, with its comparison and trend, is the content sitting on a bloom surface.
+
+   The band it sits on runs Journey Green at one end to Warm Mauve at the other, so an
+   opaque tile is the wrong colour at one end of its own row whichever step it takes.
+   Warm Mauve 900 was tried first and reads as a mauve panel dropped on the green end.
+   A white scrim instead lets the band through, so each tile picks up the part of the
+   sweep it is standing on and the row reads as one thing.
+
+   THE COST, MEASURED, AND WHAT IT DECIDES. A scrim can only lighten, so the tile is
+   always lighter than the band beneath it, and the band's lightest point is already the
+   tightest place on it. Compositing 9% white over that point — rgb(133, 107, 129):
+
+     white       4.77:1  PASS
+     Grey 200    3.97:1  fails
+     Grey 300    3.34:1  fails
+
+   So this is the one tone with NO muted ink: --rsui-metric-card-ink-muted is white too,
+   and the step between a tile's number and its label is carried by size and weight, which
+   is what the design does anyway. Nothing darker than white clears AA through a scrim on
+   this band, so a muted colour here would be a quiet failure rather than a choice.
+
+   9% is the ceiling, not a taste value: 12% takes white itself to 4.46:1. A hoverable
+   tile is safe because Card's hover scrim is DARK — it moves the tile away from the
+   limit, not towards it. Raise this figure and white goes under; re-measure rather than
+   nudge it. */
+.rsui-metric-card--tone-bloom {
+    --rsui-metric-card-surface: rgba(255, 255, 255, 0.09);
+    --rsui-metric-card-ink: var(--Colors-Base-white);
+    --rsui-metric-card-ink-muted: var(--Colors-Base-white);
+    --rsui-metric-card-rule: rgba(255, 255, 255, 0.18);
+}
+
 /* The white-label case: same layout, inverted ink. */
 .rsui-metric-card--tone-light {
     --rsui-metric-card-surface: var(--Colors-Modern-Bone-200);
@@ -273,17 +311,23 @@
     color: var(--rsui-metric-card-ink-muted);
 }
 
-/* The semantic status inks are unreadable on the two DARK tiles, measured:
+/* The semantic status inks are unreadable on the DARK tiles, measured:
+
+     ink                          tone-green   tone-teal   tone-bloom
+                                    #0e5942     #0f373c     (scrim)
+     --color-text-success #067647    1.46:1      2.26:1      1.20:1
+     --color-text-error   #b42318    1.26:1      1.96:1      1.38:1
 
-     ink                          on tone-green #0e5942   on tone-teal #0f373c
-     --color-text-success #067647          1.46:1                 2.26:1
-     --color-text-error   #b42318          1.26:1                 1.96:1
+   tone-bloom is measured on the lightest tile the scrim can produce,
+   rgb(133, 107, 129) — the band's lightest point seen through 9% white.
 
-   Both invisible — the same failure this file already documents for text-brand
+   All invisible — the same failure this file already documents for text-brand
    on a toned tile. So the comparison gives up its colour there and takes the
    tile's muted ink, exactly as the active state gives up its brand number, and
    the arrow direction plus the consumer's word carry the meaning on their own.
-   Journey Green 200 measures 5.92:1 and Deep Teal 300 6.36:1, both clearing AA.
+   Journey Green 200 measures 5.92:1 and Deep Teal 300 6.36:1, both clearing AA;
+   on tone-bloom the muted ink IS white, for the reason that tone documents, so
+   the comparison lands on white at 4.75:1 there.
 
    tone-light is deliberately NOT in this list. Its surface is Modern Bone 200
    (#f9f8f6), where success measures 5.36:1 and error 6.19:1 — both pass AA, so
@@ -291,21 +335,25 @@
 
    (0,2,0), so it outranks the (0,1,0) sentiment modifiers wherever they sit. */
 .rsui-metric-card--tone-green .rsui-metric-card__comparison,
-.rsui-metric-card--tone-teal .rsui-metric-card__comparison {
+.rsui-metric-card--tone-teal .rsui-metric-card__comparison,
+.rsui-metric-card--tone-bloom .rsui-metric-card__comparison {
     color: var(--rsui-metric-card-ink-muted);
 }
 
 /* The solid badge goes with it. Filling it with the error ink on a dark tile would
    reproduce exactly the 1.26:1 the rule above exists to avoid, so it takes the
    tile's muted ink and puts the arrow in the tile's own surface colour — the
-   same 5.92:1 and 6.36:1 pairing, read the other way round.
+   same 5.92:1 / 6.36:1 pairing, read the other way round. On tone-bloom the
+   surface is a scrim rather than a colour, so the knocked-out arrow shows the
+   band through it, which is the same effect one step further out.
 
    The ringed badge needs no rule of its own: its border is `currentColor`, and the
    rule above has already moved the comparison's ink to the tile's muted value, so
    the ring follows it. This is the tone where solid-vs-ringed does its real work,
    because once the colour is stripped it is the only sentiment signal left. */
 .rsui-metric-card--tone-green .rsui-metric-card__comparison--negative .rsui-metric-card__comparison-icon,
-.rsui-metric-card--tone-teal .rsui-metric-card__comparison--negative .rsui-metric-card__comparison-icon {
+.rsui-metric-card--tone-teal .rsui-metric-card__comparison--negative .rsui-metric-card__comparison-icon,
+.rsui-metric-card--tone-bloom .rsui-metric-card__comparison--negative .rsui-metric-card__comparison-icon {
     background-color: var(--rsui-metric-card-ink-muted);
     color: var(--rsui-metric-card-surface);
 }

package/components/page_header.css

@@ -62,6 +62,27 @@
     @apply lg:text-[2.5rem] lg:leading-[1.15] lg:tracking-[-0.01em] lg:font-black;
 }
 
+/* An eyebrow above the h1, matching card_header.css's: xs, semibold, uppercase, wide
+   tracking, in the secondary ink so it labels the title rather than competing with it.
+   The two are deliberately the same recipe — an eyebrow means the same thing on a page
+   as it does on a card, and a second type style for it would be a second answer to one
+   question.
+
+   8px down to the title, the brand's smallest step, carried as a margin on this element
+   rather than as a gap on the parent so an absent eyebrow contributes nothing. Same
+   reason card_header.css gives. */
+.rsui-page-header__eyebrow {
+    @apply flex items-center gap-x-space-xs mb-space-xs;
+    @apply text-xs font-semibold uppercase tracking-wider text-text-secondary;
+}
+
+/* A badge brings its own case, size and tracking, so it must not inherit the uppercase
+   treatment meant for plain text. Badge sets no text-transform of its own, so without
+   this the uppercase leaks in. */
+.rsui-page-header__eyebrow .rsui-badge {
+    @apply normal-case tracking-normal;
+}
+
 .rsui-page-header__title-text-container {
     @apply flex flex-row gap-x-space-lg items-center;
 }
@@ -75,6 +96,110 @@
     @apply text-base leading-normal text-text-secondary;
 }
 
+/* ── The stats row ────────────────────────────────────────────────────────────
+   Ported from the /home/v2 twin rather than re-derived, because that band is the
+   thing this is meant to reproduce and it had already been worked out at every
+   width. Every number below is its number.
+
+   A wrapping row rather than a scrolling one: these are a handful of counts, and
+   a count you cannot see is not a summary.
+
+   Full width below lg, where __top is a column and the tiles sit under the title;
+   auto from lg up, where __top is a row and they sit beside it.
+   --------------------------------------------------------------------------- */
+.rsui-page-header__stats {
+    /* stretch, not start: a two-line label must not leave its tile shorter than
+       the one beside it. */
+    @apply w-full flex items-stretch gap-[10px];
+    @apply lg:w-auto lg:shrink-0;
+}
+
+/* The band carries four things in one row at desktop width and needs two rows
+   before that. The twin wrapped at 1280 rather than at 1024 because the three
+   counts plus a trailing action need about 600px, which squeezes the title hard
+   long before the layout actually breaks. */
+.rsui-page-header__top:has(.rsui-page-header__stats) {
+    @apply flex-wrap gap-[18px] lg:gap-[20px] xl:gap-[40px];
+}
+
+/* The title takes the rest of the row and the tiles keep their size, rather than
+   the two sharing it. min-width: 0 so a long title wraps instead of forcing the
+   tiles out of the row. */
+.rsui-page-header__top:has(.rsui-page-header__stats) .rsui-page-header__title {
+    @apply lg:grow lg:min-w-0 lg:basis-full xl:basis-auto;
+}
+
+/* One tile. 150px is the twin's width, at which its three labels sit on one line.
+
+   The leading edge is reserved whether or not it is painted, so a tile carrying a
+   rail and one without still line up — the mistake worth avoiding here is adding
+   the border only on the accented tile and knocking that tile 3px out of the row. */
+.rsui-page-header__stat {
+    @apply flex flex-col items-start gap-px;
+    @apply w-full px-[16px] py-[12px] text-left;
+    @apply border-0 border-s-[3px] border-solid border-s-transparent rounded-[10px];
+    @apply lg:w-[150px];
+
+    background: var(--rsui-page-header-tile, var(--color-background-secondary));
+    border-inline-start-color: var(--rsui-page-header-stat-accent, transparent);
+    font: inherit;
+}
+
+/* Below lg the row is full width, so the tiles share it rather than sitting at a
+   fixed size with the rest of the row empty beside them. */
+.rsui-page-header__stats > .rsui-page-header__stat {
+    @apply flex-1 lg:flex-none;
+}
+
+/* Only a tile that DOES something gets the pointer and the hover. A stat that
+   only reports a number is not a control, and PageHeaderStat renders it as a div
+   precisely so it does not pretend to be one. */
+.rsui-page-header__stat--interactive {
+    @apply cursor-pointer no-underline transition-colors duration-150;
+}
+
+/* Hover DARKENS on the dark tones rather than lightening, which is the opposite of the
+   twin and deliberate. Lifting a scrim from 9% to 16% takes white itself to 4.10:1 on the
+   band's lightest point — the hover state would be the one that fails. Darkening moves
+   every ink on the tile away from its limit instead, and still reads as a state change.
+   tone-light darkens too, through its own solid step. */
+.rsui-page-header__stat--interactive:hover {
+    background: var(--rsui-page-header-tile-hover, var(--color-background-secondary-contrast));
+}
+
+/* The figure is the one place the serif is right at this size: it is a number
+   being read as a headline, which is the range the brand keeps Newsreader for.
+   tabular-nums so a row of counts does not shift as the numbers change. */
+.rsui-page-header__stat-value {
+    @apply font-redseed-heading text-[2.875rem] font-semibold leading-none tabular-nums;
+
+    color: var(--rsui-page-header-ink, var(--color-text-primary));
+}
+
+/* The label takes the tone's INK rather than its muted ink, and the step down to it is
+   carried by size and weight — 46px semibold against 12px medium is already a long way.
+
+   That is a contrast result, not a preference. A tile is a scrim, so it is always lighter
+   than the band under it, and a muted ink measured against the BAND does not survive the
+   tile. Composited over each tone's own worst ground:
+
+     tone     tile ground        its muted ink          white
+     green    rgb(32, 92, 74)    JourneyGreen300 4.18   7.79
+     teal     rgb(34, 67, 71)    DeepTeal300     5.32  10.75
+     bloom    rgb(133, 107, 129) Grey 200        3.97   4.77
+
+   Two of the three fail, and bloom's is the band's lightest point — reachable, because a
+   header with no actions lets the title grow and pushes the tiles to the right edge, which
+   is exactly where that point is. In situ at 1440 with an action present the same tile
+   measures 6.83:1, but a library component does not get to assume the layout it is given.
+
+   tone-light resolves this to Grey 900 through the same rule, at 16.08:1 on its tile. */
+.rsui-page-header__stat-label {
+    @apply text-xs font-medium leading-[1.3];
+
+    color: var(--rsui-page-header-ink, var(--color-text-primary));
+}
+
 .rsui-page-header__status-actions {
     @apply flex-1 flex gap-x-space-xs items-center justify-between lg:pr-space-xs;
 }
@@ -151,11 +276,36 @@
     @apply p-space-lg;
 }
 
+/* The band reaches the viewport edges; its text does not. calc(50% - 50vw) pulls each
+   side out to the edge and the matching padding puts the content back on the container's
+   inner edge, so the greeting lines up with the logo and nav above it.
+
+   Measured in JS first, which is the wrong answer: a measured value goes stale whenever
+   the element resizes without the trigger you chose firing, and the band silently insets
+   itself again. CSS cannot go stale.
+
+   The vertical padding is the toned header's own and is not touched here, so this is
+   purely a horizontal escape. See the prop for the `overflow-x: clip` the document has to
+   carry. */
+.rsui-page-header--bleed {
+    /* width: auto is load-bearing. The base rule sets w-full, and a box with an explicit
+       width does not grow when its margins go negative — it just shifts. With w-full held
+       the band moved left to the viewport edge and stopped short on the right by exactly
+       the amount it had moved, which looks like a one-sided bug and is not one. */
+    @apply w-auto;
+
+    margin-inline: calc(50% - 50vw);
+    padding-inline: calc(50vw - 50%);
+}
+
 .rsui-page-header--tone-green {
     --rsui-page-header-bg: var(--Colors-Journey-Green-800);
     --rsui-page-header-ink: var(--Colors-Base-white);
     --rsui-page-header-ink-muted: var(--Colors-Journey-Green-300);
     --rsui-page-header-rule: rgba(255, 255, 255, 0.18);
+    --rsui-page-header-accent: var(--Colors-Warm-Yellow-400);
+    --rsui-page-header-tile: rgba(255, 255, 255, 0.09);
+    --rsui-page-header-tile-hover: rgba(0, 0, 0, 0.12);
 }
 
 .rsui-page-header--tone-teal {
@@ -163,6 +313,60 @@
     --rsui-page-header-ink: var(--Colors-Base-white);
     --rsui-page-header-ink-muted: var(--Colors-Deep-Teal-300);
     --rsui-page-header-rule: rgba(255, 255, 255, 0.18);
+    --rsui-page-header-accent: var(--Colors-Warm-Yellow-400);
+    --rsui-page-header-tile: rgba(255, 255, 255, 0.09);
+    --rsui-page-header-tile-hover: rgba(0, 0, 0, 0.12);
+}
+
+/* The brand's hero treatment: three soft radial washes over a green-to-mauve
+   sweep, so the band warms across its width instead of running dark green end to
+   end. Every colour is a primary identity ramp — Journey Green and Deep Teal
+   carry the base, Warm Yellow / Soft Lilac / Warm Mauve are the washes. No
+   secondary accents.
+
+   A TONE rather than a boolean layered over green or teal. The alphas below are
+   a contrast budget measured against THIS base sweep; put the same washes over a
+   different background and the measurement is void, so there is nothing to
+   compose with.
+
+   THE ALPHAS ARE MEASURED, NOT CHOSEN. All four layers were composited on a
+   200x200 grid across eight band sizes from 1920x150 down to 375x320, and the
+   lightest point anywhere in the band taken as the worst case — the right test
+   for a library component, where a consumer may put text anywhere along the
+   band, rather than the worst point under one particular text box.
+
+   The lightest point is the Soft Lilac centre at 96% 30%, where the washes
+   combine to alpha 0.320 and the surface resolves to rgb(121, 92, 117).
+   Against it:
+
+     Base white          5.82:1  PASS
+     Grey 200            4.84:1  PASS  <- the muted ink below
+     Deep Teal 200       4.00:1  large text only
+     Journey Green 300   3.12:1  large text only
+
+   Which is why the muted ink is NOT Journey Green 300, the muted step the green
+   tone uses: it fails AA at the lightest point of this band. Move a centre or
+   raise an alpha and this has to be measured again; do not eyeball it. */
+.rsui-page-header--tone-bloom {
+    --rsui-page-header-bg:
+        /* Warm Yellow 500 — above the band, left of centre where the base is greenest */
+        radial-gradient(50% 130% at 44% -20%, rgba(238, 220, 91, 0.34) 0%, rgba(238, 220, 91, 0) 62%),
+        /* Soft Lilac 500 — the right edge, the pink */
+        radial-gradient(55% 130% at 96% 30%, rgba(233, 184, 222, 0.32) 0%, rgba(233, 184, 222, 0) 62%),
+        /* Warm Mauve 500 — below the band, deepening the purple end */
+        radial-gradient(70% 125% at 88% 112%, rgba(185, 125, 168, 0.38) 0%, rgba(185, 125, 168, 0) 65%),
+        /* base sweep: Journey Green 800 -> Deep Teal 700 -> Warm Mauve 950 */
+        linear-gradient(115deg, var(--Colors-Journey-Green-800) 0%, var(--Colors-Deep-Teal-700) 42%, var(--Colors-Warm-Mauve-950) 100%);
+    --rsui-page-header-ink: var(--Colors-Base-white);
+    --rsui-page-header-ink-muted: var(--Colors-Grey-200);
+    --rsui-page-header-rule: rgba(255, 255, 255, 0.18);
+    /* Warm Yellow 400, the twin's accent: 5.37:1 on this band. */
+    --rsui-page-header-accent: var(--Colors-Warm-Yellow-400);
+    /* A scrim rather than a colour, so each tile picks up the part of the sweep
+       it is standing on and a row of them reads as one thing rather than as
+       panels dropped on a band. */
+    --rsui-page-header-tile: rgba(255, 255, 255, 0.09);
+    --rsui-page-header-tile-hover: rgba(0, 0, 0, 0.12);
 }
 
 /* The white-label case. Same layout, inverted ink — a client's own background
@@ -172,6 +376,10 @@
     --rsui-page-header-ink: var(--Colors-Grey-900);
     --rsui-page-header-ink-muted: var(--Colors-Grey-600);
     --rsui-page-header-rule: var(--Colors-Grey-300);
+    /* A scrim is invisible on a light band, so this tone names solid steps. */
+    --rsui-page-header-accent: var(--Colors-Journey-Green-700);
+    --rsui-page-header-tile: var(--Colors-Modern-Bone-200);
+    --rsui-page-header-tile-hover: var(--Colors-Grey-200);
 }
 
 /* Ink application is tone-agnostic: only the variable values differ, so the
@@ -184,6 +392,53 @@
     color: var(--rsui-page-header-ink-muted);
 }
 
+/* The eyebrow takes the muted ink for the same reason the subtitle does: it is
+   the quieter of the two lines around the title, and text-text-secondary is a
+   dark grey that disappears on every tone but light. */
+.rsui-page-header--toned .rsui-page-header__eyebrow {
+    color: var(--rsui-page-header-ink-muted);
+}
+
+/* ── The band's type ──────────────────────────────────────────────────────────
+   Ported from the /home/v2 twin, which is the design this tone reproduces.
+
+   A DELIBERATE DEPARTURE from the h1 rule at the top of this file, and worth a
+   reviewer's eye rather than a quiet landing. That rule drops Newsreader for the
+   sans steps, citing the book's restriction of Newsreader to Header 1 and its
+   own sizes — and it is right for a page title. This is not a page title; it is
+   a hero band, the same surface the marketing site sets in Newsreader, and it
+   carries a greeting rather than the name of a record. The departure is scoped
+   to this one tone, so every other header keeps the sans title.
+
+   27px below lg, 36px from lg up — the twin's two sizes.
+   --------------------------------------------------------------------------- */
+.rsui-page-header--tone-bloom .rsui-page-header__title h1 {
+    @apply font-redseed-heading text-[1.6875rem] font-semibold;
+    @apply leading-[1.1] tracking-[-0.01em];
+    @apply lg:text-[2.25rem] lg:leading-[1.1] lg:font-semibold;
+}
+
+/* The eyebrow sits tight to the greeting — 3px, not the 8px a card eyebrow takes
+   — because the two read as one block of address here rather than as a label and
+   the thing it labels. */
+.rsui-page-header--tone-bloom .rsui-page-header__eyebrow {
+    @apply mb-[3px] tracking-[0.06em];
+}
+
+/* And the line under the title sits away from it, at 7px and one step down in
+   size: it is a second sentence, not a subtitle wrapping the first. */
+.rsui-page-header--tone-bloom .rsui-page-header__subtitle {
+    @apply mt-[7px] text-sm;
+}
+
+/* The one word in that line that is the point of it. Available on every tone,
+   because a band with a highlight in it is not specific to this one. */
+.rsui-page-header--toned .rsui-page-header__subtitle strong {
+    @apply font-semibold;
+
+    color: var(--rsui-page-header-accent, var(--rsui-page-header-ink));
+}
+
 .rsui-page-header--toned .rsui-page-header__meta {
     border-top: 1px solid var(--rsui-page-header-rule);
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-tailwindcss",
-    "version": "7.66.0",
+    "version": "7.68.0",
     "description": "RedSeed UI Tailwindcss",
     "main": "index.js",
     "style": "index.css",

package/tokens.css

@@ -11,7 +11,14 @@
     --color-text-success: #067647;
     --color-text-warning: #b54708;
     --color-text-error: #b42318;
-    --color-text-info: #0077cc;
+    /* #0077cc measured 4.46:1 on its own fill (--color-background-info, #f6fbfd),
+       just under the 4.5 AA threshold for body text. #0070c0 is the smallest step
+       that clears it — 4.94:1 — so the info blue moves as little as it can while
+       being legible. Every other ground it sits on improves too: 4.66 -> 5.15 on
+       white.
+       --color-background-info-contrast keeps #0077cc deliberately: it is a
+       BACKGROUND, so darkening it would change surfaces rather than fix text. */
+    --color-text-info: #0070c0;
     /* Warm-Mauve-800, not -600: the AI treatments set this over the pale AI gradient
        (#ebe0fa -> #fff6eb), where -600 measured 2.93:1 and failed WCAG AA for 14px text.
        -800 clears it at 4.52:1 at the gradient's worst point. Consumed by Badge AI,