@hraness/design-kit 0.34.0 → 0.35.0

package/src/portfolio.ts

@@ -108,11 +108,39 @@ export type PortfolioProvenance = Readonly<{
   files: readonly Readonly<{ path: string; sha256: string }>[];
 }>;
 
+export type PortfolioPackTone = "rose" | "indigo" | "amber" | "emerald";
+
+/** The homepage categories, in the same order as hraness.com. */
+export type PortfolioPack = Readonly<{
+  slug: string;
+  title: string;
+  tone: PortfolioPackTone;
+  members: readonly PortfolioProductId[];
+}>;
+
+export type PortfolioStudioItem = Readonly<{
+  productId: PortfolioProductId;
+  href: string;
+  name: string;
+  role: string;
+  mark: string;
+  domain: string;
+}>;
+
+/** Product-neutral data shaped for the shared MarketingRelated composition. */
+export type PortfolioStudioGroup = Readonly<{
+  heading: string;
+  headingId: string;
+  tone: PortfolioPackTone | "neutral";
+  items: readonly PortfolioStudioItem[];
+}>;
+
 export type PortfolioSnapshot = Readonly<{
   contract: "hraness.design-kit-portfolio/v1";
   formatVersion: 1;
   provenance: PortfolioProvenance;
   products: Readonly<Record<PortfolioProductId, PortfolioProduct>>;
+  packs: readonly PortfolioPack[];
   relations: readonly PortfolioRelation[];
   /** SHA-256 of the snapshot's compact JSON without this key. Pin it in a consumer test. */
   digest: string;
@@ -154,6 +182,7 @@ function deepFreeze<T>(value: T): T {
 /** The whole snapshot, frozen so one consumer cannot change another's facts at runtime. */
 export const portfolioFacts: PortfolioSnapshot = deepFreeze(portfolioSnapshot);
 export const portfolioProducts: PortfolioSnapshot["products"] = portfolioFacts.products;
+export const portfolioPacks: readonly PortfolioPack[] = portfolioFacts.packs;
 export const portfolioRelations: PortfolioSnapshot["relations"] = portfolioFacts.relations;
 export const portfolioProvenance: PortfolioProvenance = portfolioFacts.provenance;
 export const portfolioDigest: string = portfolioFacts.digest;
@@ -224,3 +253,47 @@ export function usesPairs(): readonly PortfolioUsesPair[] {
     target: product(relation.target),
   }));
 }
+
+/**
+ * Present only the caller's selected products, once each, in the homepage's
+ * category and member order. Categories with no selected products disappear.
+ * Products outside a pack follow in a neutral group. This does not infer an
+ * integration or expand a site's curated related-product selection.
+ */
+export function portfolioRelatedGroups(
+  ids: readonly PortfolioProductId[],
+  headingPrefix = "related",
+): readonly PortfolioStudioGroup[] {
+  if (!/^[a-z][a-z0-9-]*$/u.test(headingPrefix)) {
+    throw new PortfolioFactsError("The related heading prefix must be a lowercase HTML identifier.");
+  }
+  const selected = new Set(ids.map((id) => product(id).id));
+  const item = (id: PortfolioProductId): PortfolioStudioItem => {
+    const entry = product(id);
+    return {
+      productId: id,
+      href: entry.canonicalUrl,
+      name: entry.messaging.names.name,
+      role: entry.oneLiner,
+      mark: entry.mark,
+      domain: entry.canonicalUrl.replace(/^https?:\/\/(?:www\.)?([^/:?#]+).*$/u, "$1"),
+    };
+  };
+  const groups: PortfolioStudioGroup[] = [];
+  for (const pack of portfolioPacks) {
+    const members = pack.members.filter((id) => selected.delete(id));
+    if (members.length > 0) groups.push({
+      heading: pack.title,
+      headingId: `${headingPrefix}-${pack.slug}`,
+      tone: pack.tone,
+      items: members.map(item),
+    });
+  }
+  if (selected.size > 0) groups.push({
+    heading: "More from Hraness",
+    headingId: `${headingPrefix}-more`,
+    tone: "neutral",
+    items: portfolioProductIds.filter((id) => selected.has(id)).map(item),
+  });
+  return groups;
+}

package/src/product-marketing-foundation.css

@@ -108,6 +108,21 @@
   text-underline-offset: 0.16em;
 }
 
+
+.hraness-marketing-page :where(p, li, dd, dt, figcaption) a:not([role="button"], [data-emphasis], [data-hraness-marketing], [data-foil]),
+.hraness-marketing-maker__links a {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.2em;
+}
+
+.hraness-marketing-page :where(p, li, dd, dt, figcaption) a:not([role="button"], [data-emphasis], [data-hraness-marketing], [data-foil]):is(:hover, :focus-visible),
+.hraness-marketing-maker__links a:is(:hover, :focus-visible) {
+  text-decoration-color: currentColor;
+}
+
 .hraness-marketing-page :where(code, kbd, pre) {
   font-family: var(--hraness-marketing-mono-font);
 }
@@ -431,3 +446,17 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
 }
 
 }
+
+/* Product-owned SVG content grammar; the diagram's React frame stays compiled. */
+@layer components.hraness-design-kit.legacy {
+.hraness-diagram .hraness-diagram__label { fill: var(--foreground); font-family: var(--font-text); font-size: 20px; font-weight: 500; }
+.hraness-diagram .hraness-diagram__detail { fill: var(--muted); font-family: var(--font-text); font-size: 16px; font-weight: 400; }
+.hraness-diagram .hraness-diagram__node { fill: var(--background); stroke: var(--line); stroke-width: 1; }
+.hraness-diagram .hraness-diagram__connector,
+.hraness-diagram .hraness-diagram__icon { color: var(--primary); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+@media (forced-colors: active) {
+.hraness-diagram .hraness-diagram__label, .hraness-diagram .hraness-diagram__detail { fill: CanvasText; }
+.hraness-diagram .hraness-diagram__node { fill: Canvas; stroke: CanvasText; }
+.hraness-diagram .hraness-diagram__connector, .hraness-diagram .hraness-diagram__icon { color: CanvasText; }
+}
+}

package/src/product-marketing.css

@@ -101,6 +101,21 @@
   text-underline-offset: 0.16em;
 }
 
+
+.hraness-marketing-page :where(p, li, dd, dt, figcaption) a:not([role="button"], [data-emphasis], [data-hraness-marketing], [data-foil]),
+.hraness-marketing-maker__links a {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.2em;
+}
+
+.hraness-marketing-page :where(p, li, dd, dt, figcaption) a:not([role="button"], [data-emphasis], [data-hraness-marketing], [data-foil]):is(:hover, :focus-visible),
+.hraness-marketing-maker__links a:is(:hover, :focus-visible) {
+  text-decoration-color: currentColor;
+}
+
 .hraness-marketing-page :where(code, kbd, pre) {
   font-family: var(--hraness-marketing-mono-font);
 }
@@ -749,6 +764,8 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   line-height: var(--hraness-marketing-summary-leading, 1.6);
 }
 
+.hraness-marketing-hero__install { inline-size: min(100%, 44rem); min-inline-size: 0; margin-block-start: 0.75rem; text-align: start; }
+
 .hraness-marketing-hero__example {
   max-inline-size: var(--hraness-marketing-example-measure, var(--hraness-marketing-copy-measure));
   margin-block-start: -0.35rem;
@@ -1029,6 +1046,11 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   line-height: 1.5;
 }
 
+.hraness-marketing-pillars[data-presentation="benefits"] { border-block: 0; gap: 2.75rem 3rem; }
+.hraness-marketing-pillars[data-presentation="benefits"] > div { border: 0; padding: 0; gap: 0.75rem; }
+.hraness-marketing-pillars__icon { display: block; inline-size: 1.5rem; block-size: 1.5rem; margin-block-end: 1.1rem; color: var(--primary); }
+.hraness-marketing-pillars__icon > svg { inline-size: 100%; block-size: 100%; }
+
 /* Product frame */
 
 .hraness-marketing-proof-frame {
@@ -1345,12 +1367,28 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   max-inline-size: none;
 }
 
-/* Related: labeled tiers of sibling cards */
+/* Studio products use the portfolio category rule and compact mark rows. */
+
+.hraness-marketing-related__groups {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
+  gap: 2.5rem 3.5rem;
+  align-items: start;
+}
 
 .hraness-marketing-related__group {
+  --hraness-marketing-related-tone: var(--hraness-marketing-ink);
   display: grid;
-  gap: 1.5rem;
+  gap: 1rem;
   min-inline-size: 0;
+  border-block-start: 2px solid var(--hraness-marketing-related-tone);
+  padding-block-start: 1rem;
+}
+
+@media (forced-colors: active) {
+  .hraness-marketing-related__group {
+    --hraness-marketing-related-tone: CanvasText;
+  }
 }
 
 .hraness-marketing-related__group-header {
@@ -1359,93 +1397,151 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   gap: 0.5rem;
 }
 
-/* Tier headings take the third heading size so a display face never renders
- * at caption size. */
 .hraness-marketing-related__group-heading {
   margin: 0;
   color: var(--hraness-marketing-ink);
-  font-family: var(--hraness-marketing-heading-font);
-  font-weight: var(--hraness-marketing-heading-weight);
-  letter-spacing: var(--hraness-marketing-h2-tracking, -0.012em);
-  line-height: var(--hraness-marketing-h3-leading, 1.15);
+  font-family: var(--hraness-marketing-text-font);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.35;
   text-wrap: balance;
-  font-size: var(--hraness-marketing-h3-size, clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem));
+  font-size: 1.125rem;
 }
 
 .hraness-marketing-related__group-summary {
   margin: 0;
   color: var(--hraness-marketing-muted);
   font-family: var(--hraness-marketing-text-font);
-  font-size: 1.125rem;
+  font-size: 1rem;
   line-height: 1.5;
 }
 
-/* A related product is one linked row, as on the hraness.com project index:
- * its mark, its name, and its one-line description. Names and descriptions
- * stay in the text face at reading sizes. */
+.hraness-marketing-related__list {
+  --hraness-marketing-grid-columns: initial;
+  --_hraness-marketing-grid-track: max(16rem, calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 0.5rem) / var(--hraness-marketing-grid-columns)));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 100%)), 1fr));
+  display: grid;
+  gap: 0.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-inline-size: 0;
+}
+
+.hraness-marketing-related__item {
+  margin: 0;
+  min-inline-size: 0;
+}
+
 .hraness-marketing-related__card {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
   position: relative;
-  isolation: isolate;
   min-inline-size: 0;
-  min-block-size: 100%;
-  align-self: stretch;
-  gap: 1rem;
-  padding: clamp(1rem, 2vw, 1.25rem) clamp(1.125rem, 2.5vw, 1.5rem);
-  border: var(--hraness-marketing-surface-rule);
-  border-radius: var(--hraness-marketing-frame-radius);
-  background: var(--hraness-marketing-surface);
-  color: inherit;
+  min-block-size: 2.75rem;
+  gap: 0.85rem;
+  padding: 0.55rem 0.5rem;
+  margin-inline: 0;
+  border: 0;
+  border-radius: 0.375rem;
+  background-color: transparent;
+  color: var(--hraness-marketing-ink);
   text-decoration: none;
-  box-shadow: var(--hraness-marketing-surface-shadow);
+  box-shadow: none;
 }
 
 .hraness-marketing-related__card:hover {
-  box-shadow: 0 0 0 1px var(--hraness-marketing-line-strong);
+  background-color: color-mix(in srgb, var(--hraness-marketing-related-tone, var(--hraness-marketing-ink)) 6%, transparent);
 }
 
 .hraness-marketing-related__card:focus-visible {
-  outline: 2px solid var(--hraness-marketing-accent);
-  outline-offset: 2px;
+  outline: 2px solid var(--hraness-marketing-ink);
+  outline-offset: -2px;
 }
 
 .hraness-marketing-related__card-mark {
+  --hraness-foil-text-base: var(--hraness-marketing-related-tone, var(--hraness-marketing-ink));
+  color: var(--hraness-marketing-related-tone, var(--hraness-marketing-ink));
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
   display: inline-flex;
-  flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  inline-size: 2.75rem;
-  block-size: 2.75rem;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  margin-block-start: 0.1rem;
 }
 
 .hraness-marketing-related__card-text {
   display: grid;
-  gap: 0.25rem;
+  gap: 0.05rem;
   min-inline-size: 0;
 }
 
+.hraness-marketing-related__card-heading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: 0.6rem;
+}
+
 .hraness-marketing-related__card-name {
   margin: 0;
   color: var(--hraness-marketing-ink);
   font-family: var(--hraness-marketing-text-font);
-  font-size: 1.25rem;
-  font-weight: 700;
+  font-size: 1.0625rem;
+  font-weight: 600;
   letter-spacing: -0.01em;
-  line-height: 1.25;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.2em;
+}
+
+.hraness-marketing-related__card-domain {
+  color: var(--hraness-marketing-muted);
+  font-family: var(--hraness-marketing-text-font);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.5;
   overflow-wrap: anywhere;
 }
 
 .hraness-marketing-related__card-role {
   margin: 0;
-  color: var(--hraness-marketing-ink);
+  color: var(--hraness-marketing-muted);
   font-family: var(--hraness-marketing-text-font);
-  font-size: 1.0625rem;
+  font-size: 0.9375rem;
   line-height: 1.45;
+  overflow-wrap: anywhere;
   text-wrap: pretty;
 }
 
+.hraness-marketing-related__group[data-tone="rose"] {
+  --hraness-marketing-related-tone: var(--hraness-studio-rose);
+}
+
+.hraness-marketing-related__group[data-tone="indigo"] {
+  --hraness-marketing-related-tone: var(--hraness-studio-indigo);
+}
+
+.hraness-marketing-related__group[data-tone="amber"] {
+  --hraness-marketing-related-tone: var(--hraness-studio-amber);
+}
+
+.hraness-marketing-related__group[data-tone="emerald"] {
+  --hraness-marketing-related-tone: var(--hraness-studio-emerald);
+}
+
+@media (forced-colors: active) {
+  .hraness-marketing-related__group[data-tone] { --hraness-marketing-related-tone: CanvasText; }
+}
+
 /* Primitives: numbered building blocks */
 
 .hraness-marketing-primitives {
@@ -1720,7 +1816,7 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
 }
 
 .hraness-marketing-quote figcaption a:hover {
-  text-decoration: underline;
+  text-decoration-line: underline;
 }
 
 /* Pricing */
@@ -2126,7 +2222,6 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   .hraness-marketing-trust-item,
   .hraness-marketing-card,
   .hraness-marketing-card__art,
-  .hraness-marketing-related__card,
   .hraness-marketing-quote,
   .hraness-marketing-plan {
     border: 1px solid CanvasText;

package/src/react/article.tsx

@@ -512,10 +512,10 @@ export type ComparisonRow = Readonly<{
 
 const COMPARISON_TEXT = { yes: "Yes", no: "No", partial: "Partly" } as const;
 
-function ComparisonGlyph({ kind }: Readonly<{ kind: "yes" | "no" | "partial" }>) {
+export function ComparisonGlyph({ kind, className }: Readonly<{ kind: "yes" | "no" | "partial"; className?: string }>) {
   const path = kind === "yes" ? "M3.5 8.5l3 3 6-7" : kind === "no" ? "M4.5 4.5l7 7m0-7l-7 7" : "M4 8h8";
   return (
-    <svg aria-hidden="true" className="plain-publication__comparison-glyph" focusable="false" height="16" viewBox="0 0 16 16" width="16">
+    <svg aria-hidden="true" className={joinClasses("plain-publication__comparison-glyph", className)} focusable="false" height="16" viewBox="0 0 16 16" width="16">
       <path d={path} fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.75" />
     </svg>
   );

package/src/react/design-gallery.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import { MarketingAccount, MarketingAccountActions } from "./marketing-account.js";
+import { MarketingComparison } from "./marketing-comparison.js";
+import { MarketingDiagram, DiagramArrowhead } from "./marketing-diagram.js";
 import {
   Badge,
   Button,
@@ -343,6 +346,7 @@ export function DesignSystemGallery({
           />
           <MarketingPillars
             ariaLabel="Relay in three points"
+            presentation="benefits"
             columns={3}
             pillars={[
               { label: "No hosted service", summary: "Jobs run on your machine and never wait on a server." },
@@ -523,41 +527,64 @@ export function DesignSystemGallery({
             columns={2}
             groups={[
               {
-                heading: "Sibling tools",
+                heading: "Relationships",
+                tone: "rose",
                 headingId: "design-gallery-related-tools",
                 items: [
                   {
                     href: "#gallery-install",
                     name: "Ledger",
+                    domain: "ledger.example",
                     role: "Long-term storage for run logs",
                   },
                   {
                     href: "#marketing",
                     name: "Index",
+                    domain: "index.example",
                     role: "A local search index",
                   },
                 ],
               },
               {
                 columns: 1,
-                heading: "Shared infrastructure",
+                heading: "Knowledge",
+                tone: "indigo",
                 headingId: "design-gallery-related-infra",
                 items: [
                   {
                     href: "#marketing",
                     name: "Relay",
+                    domain: "relay.example",
                     role: "The shared job runner",
                   },
                 ],
-                summary: "The runner the other tools depend on.",
               },
             ]}
-            heading="Related tools."
+            heading="Other tools from our studio"
             headingId="design-gallery-related-title"
             headingLevel={3}
-            label="Related"
-            summary="Each is a separate release. Its card says how it works with Relay."
           />
+          <MarketingDiagram width={720} height={216} label="Your sources stay on your device; your chosen agent reads the local workspace.">
+            <defs><DiagramArrowhead id="gallery-diagram-arrow" /></defs>
+            <rect className="hraness-diagram__node" x={24} y={40} width={276} height={136} rx={12} />
+            <rect className="hraness-diagram__node" x={420} y={40} width={276} height={136} rx={12} />
+            <path className="hraness-diagram__icon" d="M48 66h18v14H48z M53 84h8 M57 80v4" />
+            <text className="hraness-diagram__label" x={48} y={116}>Your sources</text>
+            <text className="hraness-diagram__detail" x={48} y={143}>Stored on your device</text>
+            <path className="hraness-diagram__connector" d="M320 108H400" markerEnd="url(#gallery-diagram-arrow)" />
+            <path className="hraness-diagram__icon" d="M444 73h18 M453 64v18 M447 67l12 12 M459 67l-12 12" />
+            <text className="hraness-diagram__label" x={444} y={116}>Your chosen agent</text>
+            <text className="hraness-diagram__detail" x={444} y={143}>Reads the local workspace</text>
+          </MarketingDiagram>
+          <MarketingComparison caption="Choose where your work lives" options={[{ name: "Relay" }, { name: "Hosted workspace" }]} highlight={0} rows={[
+            { label: "Works offline", values: [true, false] },
+            { label: "Bring your model", values: [true, { status: "optional", label: "On some plans" }] },
+            { label: "Local storage", values: [true, { status: "depends", detail: "Check the provider's export format." }] },
+            { label: "Cost", values: ["Free locally", "Subscription"] },
+          ]} note="An illustrative comparison. Product pages supply current facts and sources." />
+          <MarketingAccount id="gallery-account" summary="Keep your preferences and shared work together.">
+            <MarketingAccountActions primary={{ href: "#gallery-account", label: "Create account" }} signIn={{ href: "#gallery-account" }} />
+          </MarketingAccount>
           <MarketingMaker
             heading="Who builds Relay"
             headingId="design-gallery-maker-title"

package/src/react/index.ts

@@ -26,6 +26,8 @@ export * from "./procedural-recipe.js";
 export * from "./relative-time.js";
 export * from "./production-data-preview-notice.js";
 export * from "./product-marketing.js";
+export * from "./marketing-account.js";
+export * from "./marketing-comparison.js";
 export * from "./route-state.js";
 export * from "./sticky-offset.js";
 export * from "./surfaces.js";
@@ -37,3 +39,4 @@ export * from "./launch-beats.js";
 export * from "./social-kit-panel.js";
 export * from "./platform-icons.js";
 export * from "./platform-install.js";
+export * from "./marketing-diagram.js";

package/src/react/marketing-account.stylex.ts

@@ -0,0 +1,74 @@
+import * as stylex from "@stylexjs/stylex";
+
+export const marketingAccountStyles = stylex.create({
+  section: {
+    alignItems: "center",
+    "border-top": "var(--hraness-marketing-rule, 1px solid var(--line))",
+    color: "var(--foreground)",
+    display: "grid",
+    gap: "2rem 4rem",
+    gridTemplateColumns: { default: "minmax(0, 1fr)", "@media (min-width: 50rem)": "minmax(0, 1fr) minmax(0, 1fr)" },
+    paddingBlock: "clamp(2.5rem, 6vw, 4rem)",
+    scrollMarginTop: "calc(var(--hraness-sticky-offset, 5rem) + 2rem)",
+  },
+  copy: { minWidth: 0 },
+  heading: {
+    fontFamily: "var(--font-text)",
+    fontSize: "clamp(1.625rem, 1.3rem + 1vw, 2.25rem)",
+    fontWeight: 550,
+    letterSpacing: "-0.02em",
+    lineHeight: 1.15,
+    margin: 0,
+    textWrap: "balance",
+  },
+  summary: {
+    color: "var(--muted)",
+    fontSize: "1rem",
+    lineHeight: 1.6,
+    marginTop: "1rem",
+    maxWidth: "42ch",
+    textWrap: "pretty",
+  },
+  content: { minWidth: 0 },
+  actions: { alignItems: "center", display: "flex", flexWrap: "wrap", gap: "0.75rem 1.5rem" },
+  primary: {
+    alignItems: "center",
+    backgroundColor: { default: "var(--primary)", ":hover": "color-mix(in oklch, var(--primary) 88%, var(--foreground))", "@media (forced-colors: active)": "ButtonFace" },
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: { default: "transparent", "@media (forced-colors: active)": "ButtonText" },
+    borderRadius: "0.625rem",
+    color: { default: "var(--primary-foreground)", "@media (forced-colors: active)": "ButtonText" },
+    display: "inline-flex",
+    fontFamily: "var(--font-text)",
+    fontSize: "1.0625rem",
+    fontWeight: 550,
+    justifyContent: "center",
+    lineHeight: 1.3,
+    maxWidth: "100%",
+    minHeight: "3.5rem",
+    outline: { default: null, ":focus-visible": "2px solid var(--primary)" },
+    outlineOffset: { default: null, ":focus-visible": "3px" },
+    paddingBlock: "0.875rem",
+    paddingInline: "1.5rem",
+    textAlign: "center",
+    textDecoration: "none",
+  },
+  signIn: {
+    alignItems: "center",
+    color: "var(--foreground)",
+    display: "inline-flex",
+    fontFamily: "var(--font-text)",
+    fontSize: "1.0625rem",
+    fontWeight: 450,
+    lineHeight: 1.3,
+    minHeight: "3.5rem",
+    outline: { default: null, ":focus-visible": "2px solid var(--primary)" },
+    outlineOffset: { default: null, ":focus-visible": "3px" },
+    textDecorationLine: "underline",
+    textDecorationStyle: "dotted",
+    textDecorationColor: { default: "color-mix(in srgb, currentColor 45%, transparent)", ":hover": "currentColor", "@media (forced-colors: active)": "LinkText" },
+    textDecorationThickness: "1px",
+    textUnderlineOffset: "0.22em",
+  },
+});

package/src/react/marketing-account.tsx

@@ -0,0 +1,69 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+
+import { marketingAccountStyles as styles } from "./marketing-account.stylex.js";
+
+/** Optional account access near the end of a product's marketing page. */
+export function MarketingAccount({
+  children,
+  className,
+  heading = "Your account",
+  id = "account",
+  summary,
+}: Readonly<{
+  children: ReactNode;
+  className?: string;
+  heading?: string;
+  id?: string;
+  summary: ReactNode;
+}>) {
+  const presentation = stylex.props(styles.section);
+  return (
+    <section
+      {...presentation}
+      aria-labelledby={`${id}-heading`}
+      className={["hraness-marketing-account", presentation.className, className].filter(Boolean).join(" ")}
+      id={id}
+    >
+      <div {...stylex.props(styles.copy)}>
+        <h2 {...stylex.props(styles.heading)} id={`${id}-heading`}>{heading}</h2>
+        <div {...stylex.props(styles.summary)}>{summary}</div>
+      </div>
+      <div {...stylex.props(styles.content)}>{children}</div>
+    </section>
+  );
+}
+
+export interface MarketingAccountAction {
+  readonly href: string;
+  readonly analyticsEvent?: string;
+  readonly analyticsId?: string;
+}
+
+/** One prominent account action and an optional, equally tall sign-in link. */
+export function MarketingAccountActions({ primary, signIn }: Readonly<{
+  primary: MarketingAccountAction & Readonly<{ label: string }>;
+  signIn?: MarketingAccountAction;
+}>) {
+  return (
+    <div {...stylex.props(styles.actions)} className={`hraness-marketing-account__actions ${stylex.props(styles.actions).className}`}>
+      <a
+        {...stylex.props(styles.primary)}
+        className={`hraness-marketing-account__primary ${stylex.props(styles.primary).className}`}
+        data-analytics-event={primary.analyticsEvent}
+        data-analytics-id={primary.analyticsId}
+        data-emphasis="primary"
+        href={primary.href}
+      >{primary.label}</a>
+      {signIn === undefined ? null : (
+        <a
+          {...stylex.props(styles.signIn)}
+          className={`hraness-marketing-account__sign-in ${stylex.props(styles.signIn).className}`}
+          data-analytics-event={signIn.analyticsEvent}
+          data-analytics-id={signIn.analyticsId}
+          href={signIn.href}
+        >Sign in</a>
+      )}
+    </div>
+  );
+}