xertica-ui 2.8.0 → 2.9.7

package/components/blocks/marketing/ServiceCardGrid.tsx

@@ -0,0 +1,238 @@
+import * as React from 'react';
+import { Check } from 'lucide-react';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+} from '../../ui/card';
+import { Button } from '../../ui/button';
+import { cn } from '../../shared/utils';
+
+export type BlockColor =
+  | 'primary'
+  | 'chart-1'
+  | 'chart-2'
+  | 'chart-3'
+  | 'chart-4'
+  | 'chart-5'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'destructive';
+
+const colorTokens: Record<BlockColor, { border: string; tint: string; icon: string }> = {
+  primary: { border: 'border-primary', tint: 'bg-primary/5', icon: 'text-primary' },
+  'chart-1': {
+    border: 'border-[var(--chart-1)]',
+    tint: 'bg-[var(--chart-1)]/5',
+    icon: 'text-[var(--chart-1)]',
+  },
+  'chart-2': {
+    border: 'border-[var(--chart-2)]',
+    tint: 'bg-[var(--chart-2)]/5',
+    icon: 'text-[var(--chart-2)]',
+  },
+  'chart-3': {
+    border: 'border-[var(--chart-3)]',
+    tint: 'bg-[var(--chart-3)]/5',
+    icon: 'text-[var(--chart-3)]',
+  },
+  'chart-4': {
+    border: 'border-[var(--chart-4)]',
+    tint: 'bg-[var(--chart-4)]/5',
+    icon: 'text-[var(--chart-4)]',
+  },
+  'chart-5': {
+    border: 'border-[var(--chart-5)]',
+    tint: 'bg-[var(--chart-5)]/5',
+    icon: 'text-[var(--chart-5)]',
+  },
+  success: { border: 'border-success', tint: 'bg-success/5', icon: 'text-success' },
+  info: { border: 'border-info', tint: 'bg-info/5', icon: 'text-info' },
+  warning: { border: 'border-warning', tint: 'bg-warning/5', icon: 'text-warning' },
+  destructive: { border: 'border-destructive', tint: 'bg-destructive/5', icon: 'text-destructive' },
+};
+
+export interface ServiceCardItem {
+  /** Omit to render the card without an icon chip. */
+  icon?: React.ReactNode;
+  color?: BlockColor;
+  category?: string;
+  title: string;
+  description: string;
+  checklist?: string[];
+  bullets?: string[];
+  cta?: { label: string; href?: string; onClick?: () => void };
+  /** Card surface tone — only applies when the grid's `variant` is `"card"`. */
+  background?: 'default' | 'white';
+  className?: string;
+}
+
+export interface ServiceCardGridProps {
+  items: ServiceCardItem[];
+  variant?: 'card' | 'plain';
+  columns?: 2 | 3 | 4;
+  className?: string;
+}
+
+const columnClasses: Record<2 | 3 | 4, string> = {
+  2: 'md:grid-cols-2',
+  3: 'md:grid-cols-3',
+  4: 'md:grid-cols-4',
+};
+
+/**
+ * Responsive grid of service/feature cards.
+ *
+ * @description
+ * Renders a list of `ServiceCardItem`s as either bordered `Card`s with an
+ * icon chip, checklist and CTA (`variant="card"`, e.g. a 3-up services
+ * section) or a borderless icon + title + description layout for compact
+ * 4-up feature grids (`variant="plain"`).
+ *
+ * @ai-rules
+ * 1. Use `variant="card"` for services that need a checklist/bullets/CTA; use `variant="plain"` for simple icon-grid feature lists.
+ * 2. `columns` sets the desktop column count (grid is always 1 column on mobile); it defaults to 3.
+ * 3. Each item's `color` maps to `colorTokens` — never hardcode chip colors.
+ * 4. `icon` is optional — omit it for an icon-less card (title + description, optionally with checklist/bullets/CTA).
+ * 5. Each item's `background` (`"default"` | `"white"`) only applies in `variant="card"`. Keep it uniform within a single grid — vary it across separate sections/blocks instead, e.g. by pairing a `bg-muted` wrapper section with `"default"` cards, rather than mixing tones inside one grid.
+ * 6. Pass `className: 'border'` on an item when its card sits directly on `bg-background` (the theme's `--card` and `--background` are identical in light mode, so without a border the card's own background is invisible there).
+ */
+export function ServiceCardGrid({
+  items,
+  variant = 'card',
+  columns = 3,
+  className,
+}: ServiceCardGridProps) {
+  return (
+    <div className={cn('grid grid-cols-1 gap-6 md:gap-8', columnClasses[columns], className)}>
+      {items.map((item, index) => (
+        <ServiceCard key={`${item.title}-${index}`} variant={variant} {...item} />
+      ))}
+    </div>
+  );
+}
+
+export interface ServiceCardProps extends ServiceCardItem {
+  variant?: 'card' | 'plain';
+  className?: string;
+}
+
+/**
+ * Single service/feature card, used standalone or via `ServiceCardGrid`.
+ *
+ * @description
+ * Pairs a token-tinted icon chip with a title and description. In
+ * `variant="card"` it renders inside a bordered `Card` with an optional
+ * category label, checklist, bullet list and footer CTA button. In
+ * `variant="plain"` it renders as a minimal chip + text stack with no
+ * chrome, checklist or CTA — for dense icon-grid layouts.
+ *
+ * @ai-rules
+ * 1. `checklist` and `bullets`/`cta` only render in `variant="card"`; they are ignored in `variant="plain"`.
+ * 2. Pass `icon` as a `lucide-react` element; it is sized automatically inside the chip. Omit it entirely for an icon-less card.
+ * 3. If `cta.href` is set the button renders as a link (`asChild`); otherwise it fires `cta.onClick`.
+ * 4. `background` is ignored in `variant="plain"` (no surface to color); it maps directly to the underlying `Card`'s `variant`.
+ */
+export function ServiceCard({
+  icon,
+  color = 'primary',
+  category,
+  title,
+  description,
+  checklist,
+  bullets,
+  cta,
+  variant = 'card',
+  background = 'default',
+  className,
+}: ServiceCardProps) {
+  const { border, tint, icon: iconColor } = colorTokens[color];
+
+  const iconChip = icon && (
+    <div className={cn('w-fit rounded-[var(--radius)] border p-3', border, tint)}>
+      <div className={cn('[&>svg]:size-6', iconColor)}>{icon}</div>
+    </div>
+  );
+
+  if (variant === 'plain') {
+    return (
+      <div className={cn('flex flex-col gap-3', className)}>
+        {iconChip}
+        <div>
+          {category && (
+            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              {category}
+            </p>
+          )}
+          <h3 className={cn('text-base font-semibold text-foreground', category && 'mt-1')}>
+            {title}
+          </h3>
+        </div>
+        <p className="text-sm leading-relaxed text-muted-foreground">{description}</p>
+      </div>
+    );
+  }
+
+  return (
+    <Card variant={background} className={cn('flex h-full flex-col', className)}>
+      <CardHeader>
+        {iconChip}
+        <div>
+          {category && (
+            <p className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              {category}
+            </p>
+          )}
+          <CardTitle className={category ? 'mt-1' : undefined}>{title}</CardTitle>
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex-1 space-y-4">
+        <CardDescription className="leading-relaxed">{description}</CardDescription>
+
+        {checklist && checklist.length > 0 && (
+          <div className="divide-y divide-border">
+            {checklist.map(item => (
+              <div key={item} className="flex items-center gap-2.5 py-3">
+                <span
+                  className={cn(
+                    'flex size-5 shrink-0 items-center justify-center rounded-[var(--radius)] border',
+                    border,
+                    tint,
+                    iconColor
+                  )}
+                >
+                  <Check className="size-3.5" />
+                </span>
+                <span className="text-sm text-foreground">{item}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {bullets && bullets.length > 0 && (
+          <ul className="space-y-1.5">
+            {bullets.map(bullet => (
+              <li key={bullet} className="flex items-start gap-2 text-sm text-muted-foreground">
+                <span className="mt-2 size-1.5 shrink-0 rounded-full bg-muted-foreground" />
+                <span>{bullet}</span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </CardContent>
+
+      {cta && (
+        <CardFooter>
+          <Button variant="outline" className="w-full" onClick={cta.onClick} asChild={!!cta.href}>
+            {cta.href ? <a href={cta.href}>{cta.label}</a> : cta.label}
+          </Button>
+        </CardFooter>
+      )}
+    </Card>
+  );
+}

package/components/blocks/marketing/StatBand.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { cn } from '../../shared/utils';
+
+export type BlockColor =
+  | 'primary'
+  | 'chart-1'
+  | 'chart-2'
+  | 'chart-3'
+  | 'chart-4'
+  | 'chart-5'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'destructive';
+
+const colorTokens: Record<BlockColor, { bg: string; icon: string }> = {
+  primary: { bg: 'bg-primary/10', icon: 'text-primary' },
+  'chart-1': { bg: 'bg-[var(--chart-1)]/15', icon: 'text-[var(--chart-1)]' },
+  'chart-2': { bg: 'bg-[var(--chart-2)]/15', icon: 'text-[var(--chart-2)]' },
+  'chart-3': { bg: 'bg-[var(--chart-3)]/15', icon: 'text-[var(--chart-3)]' },
+  'chart-4': { bg: 'bg-[var(--chart-4)]/15', icon: 'text-[var(--chart-4)]' },
+  'chart-5': { bg: 'bg-[var(--chart-5)]/15', icon: 'text-[var(--chart-5)]' },
+  success: { bg: 'bg-success/10', icon: 'text-success' },
+  info: { bg: 'bg-info/10', icon: 'text-info' },
+  warning: { bg: 'bg-warning/10', icon: 'text-warning' },
+  destructive: { bg: 'bg-destructive/10', icon: 'text-destructive' },
+};
+
+export interface StatBandStat {
+  value: string;
+  label: string;
+  color?: BlockColor;
+}
+
+export interface StatBandProps extends React.HTMLAttributes<HTMLDivElement> {
+  stats: StatBandStat[];
+  columns?: 2 | 3 | 4;
+}
+
+const columnClasses: Record<2 | 3 | 4, string> = {
+  2: 'md:grid-cols-2',
+  3: 'md:grid-cols-3',
+  4: 'md:grid-cols-4',
+};
+
+/**
+ * Row of large highlighted stats with labels, no card chrome.
+ *
+ * @description
+ * Displays a set of headline numbers (e.g. "$5.5T", "3x", "9M+") side by side,
+ * each paired with a small muted label. Useful for social-proof or impact
+ * sections on marketing pages.
+ *
+ * @ai-rules
+ * 1. Pass 2-4 `stats`; `columns` defaults to `stats.length` capped at 4.
+ * 2. Each stat's `color` maps to a token from `colorTokens` — never hardcode colors.
+ * 3. This block has no background/border of its own; wrap it in a `<Card>` or section if chrome is needed.
+ */
+export function StatBand({ stats, columns, className, ...props }: StatBandProps) {
+  const resolvedColumns = (columns ?? Math.min(stats.length, 4)) as 2 | 3 | 4;
+
+  return (
+    <div
+      className={cn(
+        'grid grid-cols-2 gap-x-8 gap-y-10 md:gap-x-0',
+        columnClasses[resolvedColumns] ?? columnClasses[4],
+        className
+      )}
+      {...props}
+    >
+      {stats.map((stat, index) => {
+        const { icon: valueColor } = colorTokens[stat.color ?? 'primary'];
+        const isNewRow = index % resolvedColumns === 0;
+
+        return (
+          <div
+            key={index}
+            className={cn(
+              'flex flex-col items-center text-center sm:items-start sm:text-left',
+              isNewRow ? 'md:pl-0' : 'md:border-l md:border-border md:pl-10'
+            )}
+          >
+            <span
+              className={cn(
+                'text-3xl md:text-5xl font-bold tracking-tight tabular-nums',
+                valueColor
+              )}
+            >
+              {stat.value}
+            </span>
+            <span className="mt-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+              {stat.label}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/components/blocks/marketing/TopAccentCards.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react';
+import { Card, CardHeader, CardTitle, CardContent } from '../../ui/card';
+import { cn } from '../../shared/utils';
+
+export type BlockColor =
+  | 'primary'
+  | 'chart-1'
+  | 'chart-2'
+  | 'chart-3'
+  | 'chart-4'
+  | 'chart-5'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'destructive';
+
+const colorTokens: Record<BlockColor, string> = {
+  primary: 'border-t-primary',
+  'chart-1': 'border-t-[var(--chart-1)]',
+  'chart-2': 'border-t-[var(--chart-2)]',
+  'chart-3': 'border-t-[var(--chart-3)]',
+  'chart-4': 'border-t-[var(--chart-4)]',
+  'chart-5': 'border-t-[var(--chart-5)]',
+  success: 'border-t-success',
+  info: 'border-t-info',
+  warning: 'border-t-warning',
+  destructive: 'border-t-destructive',
+};
+
+export interface TopAccentCardItem {
+  title: string;
+  body: string;
+  bullets?: string[];
+  color?: BlockColor;
+  className?: string;
+}
+
+export interface TopAccentCardsProps {
+  items: TopAccentCardItem[];
+  className?: string;
+}
+
+/**
+ * Two-up framing cards with a colored top-border accent.
+ *
+ * @description
+ * A lightweight pairing block for "mission vs. problem" style framing copy:
+ * each card is a bordered `Card` whose top edge is thickened and tinted per
+ * `color`, with a title, body copy, and an optional plain bullet list. No
+ * icon chip and no CTA — use `ServiceCardGrid` when those are needed.
+ *
+ * @ai-rules
+ * 1. Each item's `color` maps to `colorTokens` and only tints the top border — never hardcode colors.
+ * 2. Keep the neutral `border-border` class before the accent `border-t-{color}` class in any className override — tailwind-merge drops the accent if the order is reversed.
+ * 3. Designed for 2 items; more will simply wrap onto a new row at the `sm:grid-cols-2` breakpoint.
+ * 4. `bullets` render as plain dot markers (no checkmark) — use `ServiceCardGrid`'s `checklist` instead when a checkmark/CTA is needed.
+ */
+export function TopAccentCards({ items, className }: TopAccentCardsProps) {
+  return (
+    <div className={cn('grid grid-cols-1 gap-6 sm:grid-cols-2 md:gap-8', className)}>
+      {items.map((item, index) => (
+        <Card
+          key={`${item.title}-${index}`}
+          className={cn(
+            'border border-t-4 border-border',
+            colorTokens[item.color ?? 'primary'],
+            item.className
+          )}
+        >
+          <CardHeader>
+            <CardTitle>{item.title}</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <p className="text-sm leading-relaxed text-muted-foreground">{item.body}</p>
+
+            {item.bullets && item.bullets.length > 0 && (
+              <ul className="space-y-1.5">
+                {item.bullets.map(bullet => (
+                  <li key={bullet} className="flex items-start gap-2 text-sm text-muted-foreground">
+                    <span className="mt-2 size-1.5 shrink-0 rounded-full bg-muted-foreground" />
+                    <span>{bullet}</span>
+                  </li>
+                ))}
+              </ul>
+            )}
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}

package/components/blocks/marketing/index.ts

@@ -0,0 +1,41 @@
+export { PillBadge } from './PillBadge';
+export type { PillBadgeProps, BlockColor } from './PillBadge';
+
+export { MarketingNavbar } from './MarketingNavbar';
+export type { MarketingNavbarProps, MarketingNavLink, MarketingNavbarCta } from './MarketingNavbar';
+
+export { Hero } from './Hero';
+export type { HeroProps, HeroCta } from './Hero';
+
+export { TopAccentCards } from './TopAccentCards';
+export type { TopAccentCardsProps, TopAccentCardItem } from './TopAccentCards';
+
+export { LogoCloud } from './LogoCloud';
+export type { LogoCloudProps, LogoCloudLogo } from './LogoCloud';
+
+export { StatBand } from './StatBand';
+export type { StatBandProps, StatBandStat } from './StatBand';
+
+export { FeatureRow } from './FeatureRow';
+export type { FeatureRowProps } from './FeatureRow';
+
+export { ServiceCardGrid, ServiceCard } from './ServiceCardGrid';
+export type { ServiceCardGridProps, ServiceCardItem, ServiceCardProps } from './ServiceCardGrid';
+
+export { EvidenceTimeline } from './EvidenceTimeline';
+export type { EvidenceTimelineProps, EvidenceTimelineItem } from './EvidenceTimeline';
+
+export { HowItWorksSteps } from './HowItWorksSteps';
+export type { HowItWorksStepsProps, HowItWorksStepItem } from './HowItWorksSteps';
+
+export { ComplianceBadgeRow } from './ComplianceBadgeRow';
+export type { ComplianceBadgeRowProps, ComplianceBadge } from './ComplianceBadgeRow';
+
+export { CTASection } from './CTASection';
+export type { CTASectionProps, CTASectionAction } from './CTASection';
+
+export { MarketingFooter } from './MarketingFooter';
+export type { MarketingFooterProps, MarketingFooterLink, MarketingFooterColumn } from './MarketingFooter';
+
+export { SectionHeading } from './SectionHeading';
+export type { SectionHeadingProps } from './SectionHeading';

package/components/brand/index.ts

@@ -1,4 +1,5 @@
 export * from './xertica-provider';
+export * from './isotype';
 export * from './xertica-logo';
 export * from './xertica-xlogo';
 export * from './xertica-orbe';

package/components/brand/isotype/Isotype.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { cn } from '../../shared/utils';
+import {
+  getIsotypeVariant,
+  ISOTYPE_COLORS,
+  ISOTYPE_PATTERNS,
+  type IsotypePatternId,
+} from './patterns';
+
+export interface IsotypeProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Which registered pattern to render. */
+  pattern?: IsotypePatternId;
+  /**
+   * Deterministic seed selecting one extra cell (beyond the pattern's own
+   * inherent blank cell) to also render as blank. Omit to render the pure
+   * base pattern with no randomization — the correct choice for canonical
+   * brand-mark placements (e.g. the landing page Hero).
+   */
+  variantSeed?: number;
+  /** Accessible label. Omit for purely decorative use. */
+  'aria-label'?: string;
+}
+
+/**
+ * A 4x4 grid brand mark — the first in a growing series of Xertica
+ * "isotipos". Cells render flush against each other so the grid reads as a
+ * single composed image.
+ *
+ * @ai-rules
+ * 1. Colors are fixed brand hex values (see `patterns.ts`), not theme tokens — never make them theme-reactive.
+ * 2. Never add a `gap-*` utility or per-cell border between cells — it breaks the "single image" look.
+ * 3. Add new isotypes via `ISOTYPE_PATTERNS`/`IsotypePatternId` in `patterns.ts`; this component never needs to change.
+ * 4. Only pass `variantSeed` for decorative/repeated placements — canonical brand-mark spots (Hero, nav) should use the pure base pattern.
+ */
+export function Isotype({
+  pattern = 'core',
+  variantSeed,
+  className,
+  'aria-label': ariaLabel,
+  ...props
+}: IsotypeProps) {
+  const cells =
+    variantSeed === undefined ? ISOTYPE_PATTERNS[pattern] : getIsotypeVariant(pattern, variantSeed);
+
+  return (
+    <div
+      role={ariaLabel ? 'img' : undefined}
+      aria-label={ariaLabel}
+      aria-hidden={ariaLabel ? undefined : true}
+      className={cn(
+        'grid aspect-square grid-cols-4 grid-rows-4',
+        className
+      )}
+      {...props}
+    >
+      {cells.map((cell, index) => (
+        <div
+          key={index}
+          style={{ backgroundColor: cell === 'blank' ? undefined : ISOTYPE_COLORS[cell] }}
+        />
+      ))}
+    </div>
+  );
+}

package/components/brand/isotype/IsotypeDiagonal.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { cn } from '../../shared/utils';
+import { ISOTYPE_COLORS } from './patterns';
+
+export interface IsotypeDiagonalProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Accessible label. Omit for purely decorative use. */
+  'aria-label'?: string;
+}
+
+const CELL = 25;
+const SIZE = 100;
+
+/**
+ * A single fixed diagonal-cut variation of the "core" grid isotype — the
+ * third mark in the Xertica "isotipos" series. Three color-pair boundaries
+ * (blue/green, magenta/red, and yellow's hypotenuse) all lie on the same
+ * outer-corner-to-outer-corner diagonal of the square.
+ *
+ * @ai-rules
+ * 1. Colors are fixed brand hex values (see `patterns.ts`), not theme tokens — never make them theme-reactive.
+ * 2. All 8 shapes' coordinates are interdependent — never move one vertex/rect without re-checking every seam it backs or is backed by.
+ * 3. This is one fixed composition, not a data-driven pattern — there is no variant/pattern prop and none should be added speculatively.
+ * 4. The blank polygon's `fill="none"` is required, not cosmetic — an SVG shape with no `fill` renders solid black, unlike a CSS `background-color` left unset.
+ * 5. `blue` and `red` are full-width backing rectangles, wider than the triangular shape they end up visually showing — `purple`/`green` paint over `blue`, and `magenta`/`brown` paint over `red`. A browser only renders a visible anti-aliasing seam where a shape's edge borders empty space; painting the diagonal-tip shapes directly over a same-side opaque rectangle means any imperfect edge coverage reveals more of that matching color instead of the page background, with no stroke or scale involved. Never shrink `blue`/`red` back down to their visible triangle, and never move `purple`/`green`/`magenta`/`brown` earlier than `blue`/`red` in paint order — the overlap and the order are what hide the seam.
+ */
+export function IsotypeDiagonal({
+  className,
+  'aria-label': ariaLabel,
+  ...props
+}: IsotypeDiagonalProps) {
+  return (
+    <div
+      role={ariaLabel ? 'img' : undefined}
+      aria-label={ariaLabel}
+      aria-hidden={ariaLabel ? undefined : true}
+      className={cn('aspect-square', className)}
+      {...props}
+    >
+      <svg viewBox={`0 0 ${SIZE} ${SIZE}`} className="h-full w-full" aria-hidden="true">
+        <rect x={0} y={0} width={SIZE} height={CELL} fill={ISOTYPE_COLORS.blue} />
+        <rect x={0} y={0} width={CELL} height={CELL} fill={ISOTYPE_COLORS.purple} />
+        <polygon points="100,0 75,25 75,75 100,75" fill={ISOTYPE_COLORS.green} />
+        <rect x={0} y={SIZE - CELL} width={SIZE} height={CELL} fill={ISOTYPE_COLORS.red} />
+        <polygon points="0,25 25,25 25,75 0,100" fill={ISOTYPE_COLORS.magenta} />
+        <rect x={SIZE - CELL} y={SIZE - CELL} width={CELL} height={CELL} fill={ISOTYPE_COLORS.brown} />
+        <polygon points="75,25 75,75 25,75" fill={ISOTYPE_COLORS.yellow} />
+        <polygon points="25,25 75,25 25,75" fill="none" />
+      </svg>
+    </div>
+  );
+}

package/components/brand/isotype/IsotypeFrames.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { cn } from '../../shared/utils';
+import { ISOTYPE_COLORS } from './patterns';
+import { ISOTYPE_FRAME_VARIANTS, type IsotypeFrameVariantId } from './frame-variants';
+
+export interface IsotypeFramesProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Which registered color-pair variant to render. */
+  variant?: IsotypeFrameVariantId;
+  /** Accessible label. Omit for purely decorative use. */
+  'aria-label'?: string;
+}
+
+const FRAME_SIZE = 78;
+const FRAME_THICKNESS = 27;
+/** CSS blend mode used to combine the two frames — the intersection color is whatever this mode produces, not a fixed value. */
+const FRAME_BLEND_MODE: React.CSSProperties['mixBlendMode'] = 'multiply';
+/** A sixth of the frame size — how far the front frame leans diagonally past the back frame. */
+const FRAME_OFFSET = FRAME_SIZE / 6;
+/** Painted first (behind); flush to the top-left corner. */
+const BACK_FRAME = { x: 0, y: 0 };
+/** Painted second (in front) — dominates the blend; shifted diagonally toward the bottom-right by FRAME_OFFSET. */
+const FRONT_FRAME = { x: FRAME_OFFSET, y: FRAME_OFFSET };
+/** Half the stroke width — the minimum symmetric margin so no painted stroke is clipped by the viewBox. */
+const VIEWBOX_MIN = -FRAME_THICKNESS / 2;
+const VIEWBOX_SIZE = FRAME_SIZE + FRAME_OFFSET + FRAME_THICKNESS;
+
+/**
+ * Two overlapping hollow square frames — the second mark in the Xertica
+ * "isotipos" series. Both frames render fully opaque; their intersection
+ * blends into a third color via a CSS mix-blend-mode, not transparency.
+ *
+ * @ai-rules
+ * 1. Colors are fixed brand hex values (see `patterns.ts`), not theme tokens — never make them theme-reactive.
+ * 2. The intersection color is a rendering side-effect of `FRAME_BLEND_MODE`, not data — never hardcode a third color per variant.
+ * 3. Add new color pairs via `ISOTYPE_FRAME_VARIANTS` in `frame-variants.ts`; this component never needs to change.
+ * 4. Pair order is `[back, front]` — the front (second) color dominates the intersection blend.
+ * 5. The root `isolate` class scopes the blend to these two frames — removing it would let the front frame blend against whatever sits behind this component on the page.
+ */
+export function IsotypeFrames({
+  variant = 'blue-magenta',
+  className,
+  'aria-label': ariaLabel,
+  ...props
+}: IsotypeFramesProps) {
+  const [backKey, frontKey] = ISOTYPE_FRAME_VARIANTS[variant];
+
+  return (
+    <div
+      role={ariaLabel ? 'img' : undefined}
+      aria-label={ariaLabel}
+      aria-hidden={ariaLabel ? undefined : true}
+      className={cn('isolate aspect-square', className)}
+      {...props}
+    >
+      <svg
+        viewBox={`${VIEWBOX_MIN} ${VIEWBOX_MIN} ${VIEWBOX_SIZE} ${VIEWBOX_SIZE}`}
+        className="h-full w-full"
+        aria-hidden="true"
+      >
+        <rect
+          x={BACK_FRAME.x}
+          y={BACK_FRAME.y}
+          width={FRAME_SIZE}
+          height={FRAME_SIZE}
+          fill="none"
+          stroke={ISOTYPE_COLORS[backKey]}
+          strokeWidth={FRAME_THICKNESS}
+        />
+        <rect
+          x={FRONT_FRAME.x}
+          y={FRONT_FRAME.y}
+          width={FRAME_SIZE}
+          height={FRAME_SIZE}
+          fill="none"
+          stroke={ISOTYPE_COLORS[frontKey]}
+          strokeWidth={FRAME_THICKNESS}
+          style={{ mixBlendMode: FRAME_BLEND_MODE }}
+        />
+      </svg>
+    </div>
+  );
+}