Components

Typography

The brand type as parts: display-face headings at 500 tracked tight, 16px Inter body, muted leads, blue-marked lists, mono inline code.

Text reference

npx -y github:anwarlemu/opencommerce-brand-cli#release add typography --surface site

Run from the target React 19.2+ app root with Tailwind CSS 4 and the @/* source alias. Source and examples as JSON.

typography.preview

Open router for commerce

Buy from any online store from a single endpoint.

Built for agents that buy

One SDK sits in front of every storefront. Call agentcard.purchase() with what to buy, and opencommerce finds the route, fills the cart and checks out.

What every order reports

The cart, with each item and its price
The payment, with the card that paid
The confirmation number from the merchant

Routes are cached and warmed, so a purchase lands in seconds instead of minutes.

Route timings

Route	Time
Cold	2m 40s
Warmed	9s

typography.small

Checkout completion

Updated 2 minutes ago

Carts, payment and confirmation are handled end to end, and every step reports back.

Add the Commerce SDK tool to your agent
Navigate catalogues and place orders
Follow orders and report back to users

Usage

use-it-for.md

Use for text a page writes by hand, outside Prose: headings with TypographyH1 to H4, body with TypographyP, the line under a heading with TypographyLead, inline code with TypographyInlineCode. For a whole article from markdown, use Prose.

avoid.md

Bold or caps headings
Tracking body text
Headings in Inter

Exports: TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyInlineCode, TypographyLarge, TypographyLead, TypographyList, TypographyMuted, TypographyP, TypographySmall, TypographyTable. Read the examples for composition and props.

Example

examples/typography.tsx

import { TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyInlineCode, TypographyLarge, TypographyLead, TypographyList, TypographyMuted, TypographyP, TypographySmall, TypographyTable } from "@/components/ui/typography";

export function Site() {
  return (
    <article className="mx-auto w-full max-w-2xl">
      <TypographyH1>Open router for commerce</TypographyH1>
      <TypographyLead className="mt-4">Buy from any online store from a single endpoint.</TypographyLead>
      <TypographyH2 className="mt-12">Built for agents that buy</TypographyH2>
      <TypographyP className="mt-4">
        One SDK sits in front of every storefront. Call <TypographyInlineCode>agentcard.purchase()</TypographyInlineCode> with what to buy, and opencommerce
        finds the route, fills the cart and checks out.
      </TypographyP>
      <TypographyH3 className="mt-8">What every order reports</TypographyH3>
      <TypographyList>
        <li>The cart, with each item and its price</li>
        <li>The payment, with the card that paid</li>
        <li>The confirmation number from the merchant</li>
      </TypographyList>
      <TypographyBlockquote>Routes are cached and warmed, so a purchase lands in seconds instead of minutes.</TypographyBlockquote>
      <TypographyH4 className="mt-8">Route timings</TypographyH4>
      <TypographyTable>
        <thead>
          <tr>
            <th>Route</th>
            <th>Time</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Cold</td>
            <td className="font-mono text-snippet">2m 40s</td>
          </tr>
          <tr>
            <td>Warmed</td>
            <td className="font-mono text-snippet">9s</td>
          </tr>
        </tbody>
      </TypographyTable>
    </article>
  );
}

export function Small() {
  return (
    <div className="mx-auto grid w-full max-w-2xl gap-3">
      <TypographyLarge>Checkout completion</TypographyLarge>
      <TypographySmall>Updated 2 minutes ago</TypographySmall>
      <TypographyMuted>Carts, payment and confirmation are handled end to end, and every step reports back.</TypographyMuted>
      <TypographyList ordered>
        <li>Add the Commerce SDK tool to your agent</li>
        <li>Navigate catalogues and place orders</li>
        <li>Follow orders and report back to users</li>
      </TypographyList>
    </div>
  );
}

Source

components/ui/typography.tsx

import * as React from "react";

import { cn } from "@/lib/utils";

// The brand's type as parts (globals.css h1 to h3, .lead, .mono; prose.tsx). Headings are the display face at 500,
// tracked tight: 48px for a page title, 44px for a section, 24px and 20px below; never bold, never caps. Body is 16px
// Inter at 1.6; secondary copy at 64 percent ink. Inline code is the platform mono in blue on the pale blue chip; a quote
// hangs on a 2px blue rule; lists take blue markers; a table has a mist head on hairlines.
function TypographyH1({ className, ...props }: React.ComponentProps<"h1">) {
  return <h1 className={cn("font-display text-h1 leading-heading font-medium tracking-hero text-balance text-fg", className)} {...props} />;
}

function TypographyH2({ className, ...props }: React.ComponentProps<"h2">) {
  return <h2 className={cn("font-display text-h2 leading-heading font-medium tracking-tighter text-balance text-fg", className)} {...props} />;
}

function TypographyH3({ className, ...props }: React.ComponentProps<"h3">) {
  return <h3 className={cn("font-display text-h3 leading-snug font-medium tracking-tight text-fg", className)} {...props} />;
}

function TypographyH4({ className, ...props }: React.ComponentProps<"h4">) {
  return <h4 className={cn("font-display text-h4 leading-snug font-medium tracking-tight text-fg", className)} {...props} />;
}

function TypographyP({ className, ...props }: React.ComponentProps<"p">) {
  return <p className={cn("text-body leading-body text-pretty text-fg [&:not(:first-child)]:mt-4", className)} {...props} />;
}

/** The line under a section heading: 16px at 64 percent ink, 576px wide at most. */
function TypographyLead({ className, ...props }: React.ComponentProps<"p">) {
  return <p className={cn("max-w-(--ds-layout-text) text-body-lg leading-lead text-pretty text-fg-muted", className)} {...props} />;
}

function TypographyLarge({ className, ...props }: React.ComponentProps<"div">) {
  return <div className={cn("font-display text-h5 leading-snug font-medium tracking-tight text-fg", className)} {...props} />;
}

function TypographySmall({ className, ...props }: React.ComponentProps<"small">) {
  return <small className={cn("text-body-sm leading-snug font-medium text-fg", className)} {...props} />;
}

function TypographyMuted({ className, ...props }: React.ComponentProps<"p">) {
  return <p className={cn("text-body-sm leading-relaxed text-fg-muted", className)} {...props} />;
}

function TypographyBlockquote({ className, ...props }: React.ComponentProps<"blockquote">) {
  return <blockquote className={cn("mt-6 border-l-2 border-brand pl-4 text-body leading-body text-fg-muted", className)} {...props} />;
}

function TypographyList({ className, ordered = false, ...props }: Omit<React.ComponentProps<"ul">, "ref"> & { ordered?: boolean }) {
  const Comp = ordered ? "ol" : "ul";
  return <Comp className={cn("my-4 flex flex-col gap-2 pl-5.5 text-body leading-body text-fg-muted marker:text-fg-brand", ordered ? "list-decimal" : "list-disc", className)} {...props} />;
}

function TypographyInlineCode({ className, ...props }: React.ComponentProps<"code">) {
  return <code className={cn("rounded-chip bg-tint px-1.5 py-px font-mono text-snippet text-fg-brand [overflow-wrap:anywhere]", className)} {...props} />;
}

/** A small table in running text: a mist head on hairlines, 14px rows. */
function TypographyTable({ className, ...props }: React.ComponentProps<"table">) {
  return (
    <div className="my-4.5 w-full overflow-x-auto">
      <table
        className={cn(
          "w-full border-collapse text-body-sm leading-relaxed [&_td]:border-b [&_td]:border-line [&_td]:px-3 [&_td]:py-2.5 [&_td]:align-top [&_th]:border-b [&_th]:border-line [&_th]:bg-subtle [&_th]:px-3 [&_th]:py-2.5 [&_th]:text-left [&_th]:font-normal [&_th]:text-fg-muted",
          className,
        )}
        {...props}
      />
    </div>
  );
}

export { TypographyBlockquote, TypographyH1, TypographyH2, TypographyH3, TypographyH4, TypographyInlineCode, TypographyLarge, TypographyLead, TypographyList, TypographyMuted, TypographyP, TypographySmall, TypographyTable };

Reference: opencommerce-agentcard-web src/app/globals.css (h1 to h3, .lead, .mono); prose.tsx.