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

package/src/theme/styles/overrides/rail.css

@@ -145,18 +145,22 @@ html .rp-doc-layout__sidebar > :first-child:not(.cp-sidebar-top) {
 }
 
 html .cp-sidebar-bottom {
-  /* Grow to fill the remaining sidebar space so the nav tree stacks
-     from the top and this band occupies everything below it. When the
-     nav tree is short, the band is tall and its content (promo +
-     below-links) sits at its bottom via `justify-content: flex-end`. */
-  flex: 1 0 auto;
+  /* Size to content and sit directly under the nav tree. `flex: 0 0 auto`
+     (no grow) is deliberate: growing to fill (`1 0 auto`) stretched the
+     band across all leftover sidebar height, and a short nav tree left a
+     tall empty band with its content (promo + below-links) stranded at the
+     bottom. With no grow the band is exactly as tall as its content and
+     the promo/links hug the last nav item. */
+  flex: 0 0 auto;
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
-  /* When the sidebar scrolls (nav tree taller than viewport), this band
-     stays glued to the viewport bottom so the promo is always visible.
-     `z-index: 3` so the band paints above the thin overlay scrollbar
-     thumb so it doesn't appear to "go through" the band region. */
+  /* When the nav tree overflows the viewport the sidebar scrolls; this
+     band stays glued to the viewport bottom (`sticky bottom: 0`) so the
+     promo/links remain visible while the tree scrolls behind them. With a
+     short (non-scrolling) nav tree the sticky offset is never engaged, so
+     the band simply flows under the last nav item. `z-index: 3` paints it
+     above the thin overlay scrollbar thumb so it doesn't appear to "go
+     through" the band region. */
   position: sticky;
   bottom: 0;
   z-index: 3;
@@ -189,6 +193,19 @@ html .rp-outline__title {
   display: none;
 }
 
+/* "On this page" outline — truncate long headings to a single line with
+   an ellipsis instead of wrapping. Rspress already sets a native `title`
+   on each `.rp-toc-item` anchor, so hovering a truncated heading reveals
+   the full text. Targets `.rp-toc-item__text`, shared by the desktop
+   rail and the mobile outline dropdown. */
+html .rp-toc-item__text {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 html .rp-doc-layout__doc {
   background: var(--cp-c-bg);
 }

package/src/theme/styles/overrides/rspress.css

@@ -16,11 +16,16 @@
  */
 
 @layer ciderpress.overrides {
-  html:root {
-    /* Fonts — map Geist into Rspress's font stack */
-    --rp-font-family-base: 'Geist', ui-sans-serif, system-ui, sans-serif;
-    --rp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
-  }
+  /* ── Fonts — deliberately NOT set here.
+
+     Rspress declares `--rp-font-family-base` / `--rp-font-family-mono` on
+     `:root` *unlayered*, and unlayered declarations beat every cascade
+     layer regardless of selector specificity — so a `html:root` rule in
+     this layer silently lost and Rspress's Inter/Menlo defaults stayed in
+     force. Both vars are now emitted from the active theme's own unlayered
+     block (`COMPAT_VAR_MAP` in `@ciderpress/theme`), which wins on
+     specificity, with a fallback declaration in
+     `styles/overrides/tokens.css`. ─────────────────────────────────── */
 
   /* ── LLMs UI — Ciderpress mounts its own `<LlmsContainer />` inside
      `<CiderpressDocsBar />`. The H1 placement is suppressed natively

package/src/theme/styles/overrides/section-card.css

@@ -31,6 +31,15 @@
   gap: 10px;
 }
 
+/* Page badges pinned to the right of the card title row. */
+.cp-section-card__badges {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: 0 0 auto;
+}
+
 .cp-section-card:hover {
   border-color: var(--cp-c-brand-1);
   background: var(--cp-c-bg-elv);

package/src/theme/styles/overrides/sidebar.css

@@ -24,6 +24,28 @@
     }
   }
 
+  /* ── Long titles — single-line ellipsis, badge stays pinned ──── */
+  /* The item's left slot holds the label; constrain it so the label
+     truncates instead of pushing the badge (right slot) out of view.
+     A `title` attribute is added by the Sidebar effect on overflow. */
+  html .rp-sidebar-item__left {
+    min-width: 0;
+    flex: 1 1 auto;
+    overflow: hidden;
+  }
+
+  html .rp-sidebar-item__left > .rp-doc {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  html .rp-sidebar-item__right {
+    flex: 0 0 auto;
+    margin-left: 6px;
+  }
+
   /* ── Group section headers — mono ALL CAPS (mockup pattern) ──── */
   html .rp-sidebar-section-header {
     font-family: var(--cp-font-family-mono);

package/src/theme/styles/overrides/tokens.css

@@ -35,30 +35,43 @@
   :root {
     /* ── Font families ──────────────────────────────────────── */
     /**
-   * Default body / UI font — Geist Mono. Whole site reads as a
-   * terminal-style mono surface.
+   * The active theme owns every font on the page. `--cp-ff-sans`,
+   * `--cp-ff-mono`, and `--cp-ff-display` are the canonical tokens
+   * (`fonts.family.{sans,mono,display}` in `@ciderpress/theme`); each theme
+   * emits all three from its own unlayered block, so the values below only
+   * apply when no theme CSS is present at all.
+   *
+   * Semantics:
+   *   sans     base UI + prose font — body, nav, sidebar, hero, cards, docs
+   *   mono     code, terminal chrome, eyebrow labels
+   *   display  decorative headline / brand-mark face (falls back to sans)
+   *
+   * These values mirror `SHARED_FONTS.family` in `@ciderpress/theme`, so a
+   * themeless page degrades to the house default rather than to a different
+   * design: `sans` is proportional (Inter), `mono` is Geist Mono, `display`
+   * is Geist Pixel Square. Putting the mono stack in `sans` turns every
+   * proportional surface — hero, body, nav, sidebar — monospace; the
+   * regression guard in `packages/theme/src/fonts.test.ts` exists for that.
    */
-    --cp-font-family-base: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
-    /**
-   * Optional sans fallback — exposed for cases that explicitly want
-   * proportional Geist (e.g. very long prose passages).
-   */
-    --cp-font-family-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
-    /**
-   * Decorative pixel-art font — opt-in for brand marks, headlines, etc.
-   * Apply with `font-family: var(--cp-font-family-pixel)` on the target.
-   */
-    --cp-font-family-pixel: 'Geist Pixel Square', 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;
+
     /**
-   * Monospace alias — same as base. Kept for callsites that explicitly
-   * tag "this should be monospace" (code, shortcuts, eyebrow labels) so
-   * the intent stays readable in the stylesheet.
+   * Compatibility aliases. Every one of these resolves through a canonical
+   * token above, so a rule written against the older name still follows the
+   * active theme. Themes re-declare them in their own block (see
+   * `COMPAT_VAR_MAP` in `@ciderpress/theme`) — the declarations here are the
+   * no-theme-CSS fallback.
    */
-    --cp-font-family-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', monospace;
-
-    /* Canonical aliases matching TOKEN_TO_CSS_VAR (fonts.family.sans/mono). */
-    --cp-ff-sans: var(--cp-font-family-sans);
-    --cp-ff-mono: var(--cp-font-family-mono);
+    --cp-font-family-base: var(--cp-ff-sans);
+    --cp-font-family-sans: var(--cp-ff-sans);
+    --cp-font-family-mono: var(--cp-ff-mono);
+    --cp-font-family-pixel: var(--cp-ff-display);
+    --rp-font-family-base: var(--cp-ff-sans);
+    --rp-font-family-mono: var(--cp-ff-mono);
 
     /* ── Font weights ───────────────────────────────────────── */
     --cp-fw-regular: 400;
@@ -272,13 +285,18 @@
     --cp-announce-h: 36px;
   }
 
-  /* ── Typography defaults — match the mockup (14px / 1.5 / Geist) ── */
+  /* ── Typography defaults — match the mockup (14px / 1.5) ──────────
+     `body` is listed for completeness only: Rspress's own unlayered
+     `body { font-family: var(--rp-font-family-base) }` outranks anything
+     in a layer, so the document font is really carried by the theme's
+     `--rp-font-family-base` declaration. Both sides resolve to
+     `fonts.family.sans`, so the two agree. ──────────────────────────── */
   html body,
   html .rp-doc,
   html .rspress-doc,
   html .rp-home-hero,
   html .rp-nav {
-    font-family: var(--cp-font-family-base);
+    font-family: var(--cp-ff-sans);
   }
 
   html body {

package/src/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/src/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/src/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/src/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/src/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/src/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;
 }