@ciderpress/ui 1.0.0-rc.10 → 1.0.0-rc.11

package/dist/theme/styles/rich-text.css

@@ -0,0 +1,106 @@
+/**
+ * Rich text — inline markup rendered from config copy.
+ *
+ * Config strings run through the inline renderer, so any display copy
+ * can carry `**emphasis**` (bold + brand colour), `==highlight==`,
+ * `*italic*`, `` `code` ``, links, and a whitelist of inline HTML. These rules keep that markup legible
+ * inside headings and body copy alike, where the document-level
+ * typography does not reach.
+ */
+
+/* Accent — what `**emphasis**` renders as, and the explicit form of
+   the hero title's auto-accent.
+
+   `--cp-c-brand-1` is a FILL colour: it is tuned to sit behind
+   `--cp-c-brand-fg`, not to be read as text on the page background. Used
+   directly here it failed WCAG AA in four theme/variant combinations, and
+   on mulled/dark it measured 2.38:1 — under even the 3:1 large-text floor,
+   so it failed at any size including the hero headline.
+
+   Accent copy lands in 16px/400 body text (`.cp-tabs__body`,
+   `.cp-split__body`), so the 4.5:1 bar applies. Every dark variant clears
+   it with `--cp-c-brand-light` (5.26:1 on honeycrisp and mulled, up to
+   15.22:1 on arcade) and every light variant with `--cp-c-brand-2`
+   (4.83:1 on amber, up to 9.35:1 on mulled). The variant-less fallback
+   matches the light rule because the unthemed page background is light.
+
+   `--cp-c-brand-lighter` is deliberately NOT used here. It is the palest
+   rung of the ramp, so it clears contrast by a wide margin (10.43:1 on
+   honeycrisp) but washes the hue out — a light red reads as pink, not as
+   the brand. `light` is the most saturated rung that still clears 4.5:1.
+
+   The same pair is used for the home eyebrows (`.cp-hero__eyebrow` aside,
+   which is a text-2 pill): see home.css, cta.css and split.css. Keep them
+   in step — they are the only other places brand colour carries text. */
+.cp-accent {
+  color: var(--cp-c-brand-2, var(--cp-c-brand-1));
+}
+
+html[data-cp-variant='dark'] .cp-accent {
+  color: var(--cp-c-brand-light, var(--cp-c-brand-1));
+}
+
+/* Inline code in display copy: the document code style is tuned for
+   prose, so scale it to the surrounding text instead. */
+.cp-hero__title code,
+.cp-hero__tagline code,
+.cp-split__title code,
+.cp-split__body code,
+.cp-tabs__title code,
+.cp-tabs__body code,
+.cp-cta__title code,
+.cp-cta__sub code,
+.cp-feature-section-head__title code,
+.cp-feature-section-head__sub code {
+  font-family: var(--cp-font-family-mono);
+  font-size: 0.9em;
+  padding: 0.1em 0.35em;
+  border-radius: var(--cp-radius-xs);
+  background: var(--cp-c-bg-soft);
+  border: 1px solid var(--cp-c-border);
+}
+
+/* Links inside display copy inherit their surroundings and pick up the
+   brand colour, rather than the document link treatment. */
+.cp-hero__tagline a,
+.cp-split__body a,
+.cp-tabs__body a,
+.cp-cta__sub a,
+.cp-feature-section-head__sub a {
+  color: var(--cp-c-brand-1);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* A heading link should not shout — keep the heading colour, mark it
+   with an underline only. */
+.cp-hero__title a,
+.cp-split__title a,
+.cp-tabs__title a,
+.cp-cta__title a,
+.cp-feature-section-head__title a {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+/* Highlight — what `==text==` renders as. `<mark>` defaults to a yellow
+   browser highlight, so retint it to the brand. The bare-element
+   selectors cover `<mark>` written as HTML in config copy, which carries
+   no class of its own. */
+.cp-mark,
+.cp-hero__title mark,
+.cp-hero__tagline mark,
+.cp-split__title mark,
+.cp-split__body mark,
+.cp-tabs__title mark,
+.cp-tabs__body mark,
+.cp-cta__title mark,
+.cp-cta__sub mark,
+.cp-feature-section-head__title mark,
+.cp-feature-section-head__sub mark {
+  background: var(--cp-c-brand-soft);
+  color: var(--cp-c-text-1);
+  padding: 0.05em 0.25em;
+  border-radius: var(--cp-radius-xs);
+}

package/dist/theme/styles/themes/amber.css

@@ -130,8 +130,11 @@ html[data-cp-theme='amber'][data-cp-variant='dark'] {
   --cp-radius-lg: 10px;
   --cp-radius-md-lg: 12px;
   --cp-radius-pill: 9999px;
-  --cp-ff-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --cp-ff-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --cp-ff-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-ff-display: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
   --cp-fw-regular: 400;
   --cp-fw-medium: 500;
   --cp-fw-semibold: 600;
@@ -270,6 +273,18 @@ html[data-cp-theme='amber'][data-cp-variant='dark'] {
   --rp-home-feature-bg: #1c1c1c;
   --rp-home-hero-secondary-color: rgba(245, 245, 245, 0.72);
   --rp-home-hero-title-color: #f5f5f5;
+  --rp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-pixel: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
 }
 
 html[data-cp-theme='amber'][data-cp-variant='light'] {
@@ -402,8 +417,11 @@ html[data-cp-theme='amber'][data-cp-variant='light'] {
   --cp-radius-lg: 10px;
   --cp-radius-md-lg: 12px;
   --cp-radius-pill: 9999px;
-  --cp-ff-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --cp-ff-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --cp-ff-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-ff-display: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
   --cp-fw-regular: 400;
   --cp-fw-medium: 500;
   --cp-fw-semibold: 600;
@@ -542,4 +560,16 @@ html[data-cp-theme='amber'][data-cp-variant='light'] {
   --rp-home-feature-bg: #f0dfb8;
   --rp-home-hero-secondary-color: rgba(58, 31, 4, 0.72);
   --rp-home-hero-title-color: #3a1f04;
+  --rp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-pixel: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
 }

package/dist/theme/styles/themes/arcade.css

@@ -130,8 +130,11 @@ html[data-cp-theme='arcade'][data-cp-variant='dark'] {
   --cp-radius-lg: 10px;
   --cp-radius-md-lg: 12px;
   --cp-radius-pill: 9999px;
-  --cp-ff-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --cp-ff-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --cp-ff-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-ff-display: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
   --cp-fw-regular: 400;
   --cp-fw-medium: 500;
   --cp-fw-semibold: 600;
@@ -270,4 +273,16 @@ html[data-cp-theme='arcade'][data-cp-variant='dark'] {
   --rp-home-feature-bg: #18183d;
   --rp-home-hero-secondary-color: rgba(224, 255, 224, 0.72);
   --rp-home-hero-title-color: #e0ffe0;
+  --rp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-pixel: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
 }

package/dist/theme/styles/themes/grannysmith.css

@@ -130,8 +130,11 @@ html[data-cp-theme='grannysmith'][data-cp-variant='dark'] {
   --cp-radius-lg: 10px;
   --cp-radius-md-lg: 12px;
   --cp-radius-pill: 9999px;
-  --cp-ff-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --cp-ff-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --cp-ff-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-ff-display: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
   --cp-fw-regular: 400;
   --cp-fw-medium: 500;
   --cp-fw-semibold: 600;
@@ -270,6 +273,18 @@ html[data-cp-theme='grannysmith'][data-cp-variant='dark'] {
   --rp-home-feature-bg: #1c1c1c;
   --rp-home-hero-secondary-color: rgba(245, 245, 245, 0.72);
   --rp-home-hero-title-color: #f5f5f5;
+  --rp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-pixel: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
 }
 
 html[data-cp-theme='grannysmith'][data-cp-variant='light'] {
@@ -402,8 +417,11 @@ html[data-cp-theme='grannysmith'][data-cp-variant='light'] {
   --cp-radius-lg: 10px;
   --cp-radius-md-lg: 12px;
   --cp-radius-pill: 9999px;
-  --cp-ff-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --cp-ff-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --cp-ff-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-ff-display: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
   --cp-fw-regular: 400;
   --cp-fw-medium: 500;
   --cp-fw-semibold: 600;
@@ -542,4 +560,16 @@ html[data-cp-theme='grannysmith'][data-cp-variant='light'] {
   --rp-home-feature-bg: #f0f0f0;
   --rp-home-hero-secondary-color: rgba(26, 26, 26, 0.72);
   --rp-home-hero-title-color: #1a1a1a;
+  --rp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-pixel: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
 }

package/dist/theme/styles/themes/honeycrisp.css

@@ -7,7 +7,7 @@ html[data-cp-theme='honeycrisp'][data-cp-variant='dark'] {
   --cp-c-brand-fg: #ffffff;
   --cp-c-brand-soft: rgba(220, 38, 38, 0.14);
   --cp-c-on-brand: #ffffff;
-  --cp-c-brand-light: #f87171;
+  --cp-c-brand-light: #ef4444;
   --cp-c-brand-lighter: #fca5a5;
   --cp-c-success: #16a34a;
   --cp-c-error: #dc2626;
@@ -97,7 +97,7 @@ html[data-cp-theme='honeycrisp'][data-cp-variant='dark'] {
   --cp-oas-deprecated: var(--cp-c-text-3);
   --cp-oas-required: #dc2626;
   --cp-button-brand-bg: #dc2626;
-  --cp-button-brand-hover-bg: #f87171;
+  --cp-button-brand-hover-bg: #ef4444;
   --cp-button-brand-active-bg: #b91c1c;
   --cp-button-brand-text: #ffffff;
   --cp-s-1: 1px;
@@ -130,8 +130,11 @@ html[data-cp-theme='honeycrisp'][data-cp-variant='dark'] {
   --cp-radius-lg: 10px;
   --cp-radius-md-lg: 12px;
   --cp-radius-pill: 9999px;
-  --cp-ff-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --cp-ff-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --cp-ff-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-ff-display: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
   --cp-fw-regular: 400;
   --cp-fw-medium: 500;
   --cp-fw-semibold: 600;
@@ -251,7 +254,7 @@ html[data-cp-theme='honeycrisp'][data-cp-variant='dark'] {
   --rp-c-bg-mute: #0a0a0a;
   --rp-c-bg-soft: #1c1c1c;
   --rp-c-brand: #dc2626;
-  --rp-c-brand-light: #f87171;
+  --rp-c-brand-light: #ef4444;
   --rp-c-brand-lighter: #fca5a5;
   --rp-c-brand-dark: #b91c1c;
   --rp-c-brand-darker: #7f1d1d;
@@ -270,6 +273,18 @@ html[data-cp-theme='honeycrisp'][data-cp-variant='dark'] {
   --rp-home-feature-bg: #1c1c1c;
   --rp-home-hero-secondary-color: rgba(245, 245, 245, 0.72);
   --rp-home-hero-title-color: #f5f5f5;
+  --rp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-pixel: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
 }
 
 html[data-cp-theme='honeycrisp'][data-cp-variant='light'] {
@@ -279,7 +294,7 @@ html[data-cp-theme='honeycrisp'][data-cp-variant='light'] {
   --cp-c-brand-fg: #ffffff;
   --cp-c-brand-soft: rgba(220, 38, 38, 0.14);
   --cp-c-on-brand: #ffffff;
-  --cp-c-brand-light: #f87171;
+  --cp-c-brand-light: #ef4444;
   --cp-c-brand-lighter: #fca5a5;
   --cp-c-success: #16a34a;
   --cp-c-error: #dc2626;
@@ -402,8 +417,11 @@ html[data-cp-theme='honeycrisp'][data-cp-variant='light'] {
   --cp-radius-lg: 10px;
   --cp-radius-md-lg: 12px;
   --cp-radius-pill: 9999px;
-  --cp-ff-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --cp-ff-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --cp-ff-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-ff-display: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
   --cp-fw-regular: 400;
   --cp-fw-medium: 500;
   --cp-fw-semibold: 600;
@@ -523,7 +541,7 @@ html[data-cp-theme='honeycrisp'][data-cp-variant='light'] {
   --rp-c-bg-mute: #ffffff;
   --rp-c-bg-soft: #f0f0f0;
   --rp-c-brand: #dc2626;
-  --rp-c-brand-light: #f87171;
+  --rp-c-brand-light: #ef4444;
   --rp-c-brand-lighter: #fca5a5;
   --rp-c-brand-dark: #b91c1c;
   --rp-c-brand-darker: #7f1d1d;
@@ -542,4 +560,16 @@ html[data-cp-theme='honeycrisp'][data-cp-variant='light'] {
   --rp-home-feature-bg: #f0f0f0;
   --rp-home-hero-secondary-color: rgba(26, 26, 26, 0.72);
   --rp-home-hero-title-color: #1a1a1a;
+  --rp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-pixel: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
 }

package/dist/theme/styles/themes/midnight.css

@@ -130,8 +130,11 @@ html[data-cp-theme='midnight'][data-cp-variant='dark'] {
   --cp-radius-lg: 10px;
   --cp-radius-md-lg: 12px;
   --cp-radius-pill: 9999px;
-  --cp-ff-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --cp-ff-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --cp-ff-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-ff-display: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
   --cp-fw-regular: 400;
   --cp-fw-medium: 500;
   --cp-fw-semibold: 600;
@@ -270,4 +273,16 @@ html[data-cp-theme='midnight'][data-cp-variant='dark'] {
   --rp-home-feature-bg: #111111;
   --rp-home-hero-secondary-color: rgba(240, 240, 240, 0.72);
   --rp-home-hero-title-color: #f0f0f0;
+  --rp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-pixel: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
 }

package/dist/theme/styles/themes/mulled.css

@@ -7,7 +7,7 @@
   --cp-c-brand-fg: #ffffff;
   --cp-c-brand-soft: rgba(153, 27, 27, 0.14);
   --cp-c-on-brand: #ffffff;
-  --cp-c-brand-light: #dc2626;
+  --cp-c-brand-light: #ef4444;
   --cp-c-brand-lighter: #f87171;
   --cp-c-success: #16a34a;
   --cp-c-error: #dc2626;
@@ -130,8 +130,11 @@
   --cp-radius-lg: 10px;
   --cp-radius-md-lg: 12px;
   --cp-radius-pill: 9999px;
-  --cp-ff-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --cp-ff-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --cp-ff-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-ff-display: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
   --cp-fw-regular: 400;
   --cp-fw-medium: 500;
   --cp-fw-semibold: 600;
@@ -251,7 +254,7 @@
   --rp-c-bg-mute: #0a0a0a;
   --rp-c-bg-soft: #1c1c1c;
   --rp-c-brand: #991b1b;
-  --rp-c-brand-light: #dc2626;
+  --rp-c-brand-light: #ef4444;
   --rp-c-brand-lighter: #f87171;
   --rp-c-brand-dark: #7f1d1d;
   --rp-c-brand-darker: #450a0a;
@@ -270,6 +273,18 @@
   --rp-home-feature-bg: #1c1c1c;
   --rp-home-hero-secondary-color: rgba(245, 245, 245, 0.72);
   --rp-home-hero-title-color: #f5f5f5;
+  --rp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-pixel: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
 }
 
 html[data-cp-theme='mulled'][data-cp-variant='dark'] {
@@ -279,7 +294,7 @@ html[data-cp-theme='mulled'][data-cp-variant='dark'] {
   --cp-c-brand-fg: #ffffff;
   --cp-c-brand-soft: rgba(153, 27, 27, 0.14);
   --cp-c-on-brand: #ffffff;
-  --cp-c-brand-light: #dc2626;
+  --cp-c-brand-light: #ef4444;
   --cp-c-brand-lighter: #f87171;
   --cp-c-success: #16a34a;
   --cp-c-error: #dc2626;
@@ -402,8 +417,11 @@ html[data-cp-theme='mulled'][data-cp-variant='dark'] {
   --cp-radius-lg: 10px;
   --cp-radius-md-lg: 12px;
   --cp-radius-pill: 9999px;
-  --cp-ff-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --cp-ff-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --cp-ff-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-ff-display: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
   --cp-fw-regular: 400;
   --cp-fw-medium: 500;
   --cp-fw-semibold: 600;
@@ -523,7 +541,7 @@ html[data-cp-theme='mulled'][data-cp-variant='dark'] {
   --rp-c-bg-mute: #0a0a0a;
   --rp-c-bg-soft: #1c1c1c;
   --rp-c-brand: #991b1b;
-  --rp-c-brand-light: #dc2626;
+  --rp-c-brand-light: #ef4444;
   --rp-c-brand-lighter: #f87171;
   --rp-c-brand-dark: #7f1d1d;
   --rp-c-brand-darker: #450a0a;
@@ -542,6 +560,18 @@ html[data-cp-theme='mulled'][data-cp-variant='dark'] {
   --rp-home-feature-bg: #1c1c1c;
   --rp-home-hero-secondary-color: rgba(245, 245, 245, 0.72);
   --rp-home-hero-title-color: #f5f5f5;
+  --rp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-pixel: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
 }
 
 html[data-cp-theme='mulled'][data-cp-variant='light'] {
@@ -551,7 +581,7 @@ html[data-cp-theme='mulled'][data-cp-variant='light'] {
   --cp-c-brand-fg: #ffffff;
   --cp-c-brand-soft: rgba(153, 27, 27, 0.14);
   --cp-c-on-brand: #ffffff;
-  --cp-c-brand-light: #dc2626;
+  --cp-c-brand-light: #ef4444;
   --cp-c-brand-lighter: #f87171;
   --cp-c-success: #16a34a;
   --cp-c-error: #dc2626;
@@ -674,8 +704,11 @@ html[data-cp-theme='mulled'][data-cp-variant='light'] {
   --cp-radius-lg: 10px;
   --cp-radius-md-lg: 12px;
   --cp-radius-pill: 9999px;
-  --cp-ff-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
+  --cp-ff-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   --cp-ff-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-ff-display: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
   --cp-fw-regular: 400;
   --cp-fw-medium: 500;
   --cp-fw-semibold: 600;
@@ -795,7 +828,7 @@ html[data-cp-theme='mulled'][data-cp-variant='light'] {
   --rp-c-bg-mute: #fbf6f4;
   --rp-c-bg-soft: #ead9d4;
   --rp-c-brand: #991b1b;
-  --rp-c-brand-light: #dc2626;
+  --rp-c-brand-light: #ef4444;
   --rp-c-brand-lighter: #f87171;
   --rp-c-brand-dark: #7f1d1d;
   --rp-c-brand-darker: #450a0a;
@@ -814,4 +847,16 @@ html[data-cp-theme='mulled'][data-cp-variant='light'] {
   --rp-home-feature-bg: #ead9d4;
   --rp-home-hero-secondary-color: rgba(42, 6, 6, 0.72);
   --rp-home-hero-title-color: #2a0606;
+  --rp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-base:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-sans:
+    'Inter var experimental', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --cp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --cp-font-family-pixel: 'Geist Pixel Square', ui-sans-serif, system-ui, sans-serif;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ciderpress/ui",
-  "version": "1.0.0-rc.10",
+  "version": "1.0.0-rc.11",
   "description": "Rspress plugin, theme components, and styles for ciderpress",
   "keywords": [
     "ciderpress",
@@ -65,8 +65,8 @@
     "react-aria-components": "^1.19.0",
     "ts-morph": "^28.0.0",
     "unist-util-visit": "^5.1.0",
-    "@ciderpress/config": "1.0.0-rc.7",
-    "@ciderpress/theme": "1.0.0-rc.4"
+    "@ciderpress/config": "1.0.0-rc.8",
+    "@ciderpress/theme": "1.0.0-rc.5"
   },
   "devDependencies": {
     "@ladle/react": "^5.1.1",

package/src/theme/components/home/cta.css

@@ -9,6 +9,21 @@
   padding: 0 32px;
 }
 
+.cp-cta__eyebrow {
+  font-family: var(--cp-font-family-mono);
+  font-size: var(--cp-fs-eyebrow);
+  text-transform: uppercase;
+  letter-spacing: var(--cp-letter-eyebrow);
+  /* Same shade pair as `.cp-accent` — `--cp-c-brand-1` is a fill colour and
+     misses 4.5:1 at this size on several themes. See styles/rich-text.css. */
+  color: var(--cp-c-brand-2, var(--cp-c-brand-1));
+  margin-bottom: var(--cp-s-12);
+}
+
+html[data-cp-variant='dark'] .cp-cta__eyebrow {
+  color: var(--cp-c-brand-light, var(--cp-c-brand-1));
+}
+
 .cp-cta__title {
   font-size: clamp(32px, 5vw, 56px);
   font-weight: 600;

package/src/theme/components/home/cta.tsx

@@ -1,6 +1,7 @@
-import { match } from 'massaman/match'
+import { match, P } from 'massaman/match'
 import type React from 'react'
 
+import { renderRichText } from '../../lib/rich-text.tsx'
 import { RouteLink } from '../../lib/route-link.tsx'
 import { safeUrl } from '../../lib/safe-url.ts'
 import type { HeroAction } from './hero'
@@ -8,6 +9,10 @@ import type { HeroAction } from './hero'
 import './cta.css'
 
 export interface CTAProps {
+  /**
+   * Small uppercase kicker rendered above the headline.
+   */
+  readonly eyebrow?: string
   /**
    * Headline.
    */
@@ -30,12 +35,15 @@ export interface CTAProps {
  * @returns React element.
  */
 export function CTA(props: CTAProps): React.ReactElement {
-  const { title, subtitle, actions } = props
+  const { eyebrow, title, subtitle, actions } = props
   const list = actions ?? []
 
   return (
     <section className="cp-cta">
       <div className="cp-cta__inner">
+        {match(eyebrow)
+          .with(P.string, (e) => <div className="cp-cta__eyebrow">{renderRichText(e)}</div>)
+          .otherwise(() => null)}
         <h2 className="cp-cta__title">{title}</h2>
         {match(subtitle)
           .with(undefined, () => null)

package/src/theme/components/home/feature-card.css

@@ -18,7 +18,7 @@
 }
 
 .cp-feature-card__title {
-  font-family: 'Geist Pixel Square', var(--rp-font-family-base, sans-serif);
+  font-family: var(--cp-ff-display);
   font-size: var(--cp-fs-feature-title);
   font-weight: var(--cp-fw-bold);
   color: var(--rp-c-text-1, var(--cp-c-text-1));

package/src/theme/components/home/feature-card.tsx

@@ -2,6 +2,7 @@ import { match, P } from 'massaman/match'
 import type React from 'react'
 
 import './feature-card.css'
+import { renderRichText } from '../../lib/rich-text.tsx'
 import { Card } from '../shared/card'
 import { CardIcon } from '../shared/card-icon'
 import type { CardIconInput } from '../shared/resolve-card-icon'
@@ -64,14 +65,14 @@ export function FeatureCard({
               className={clampClass('cp-feature-card__title', titleLines)}
               style={clampStyle(titleLines)}
             >
-              {title}
+              {renderRichText(title)}
             </span>
           </div>
           <span
             className={clampClass('cp-feature-card__desc', descriptionLines)}
             style={clampStyle(descriptionLines)}
           >
-            {description}
+            {renderRichText(description)}
           </span>
           {linkTail}
         </Card>