This is a full working page — a card summarizing a run, with a status badge and an action button — built from three components: .ods-card, .ods-badge, .ods-btn. Both versions render identically, because the React version is just a typed wrapper over the same classes.

Plain HTML

<!doctype html>
<html lang="en" data-theme="dark" data-density="comfortable">
<head>
  <link rel="stylesheet" href="css/tokens.css">
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/components.css">
</head>
<body>
  <main class="ods-page">
    <div class="ods-card" style="max-width: 360px;">
      <div class="ods-card-header">
        <div class="ods-card-title">Triage Agent · Incident #4821</div>
        <span class="ods-badge -success">Resolved</span>
      </div>
      <div class="ods-card-body">
        <p class="text-body text-muted">
          Rolled back <code>checkout-svc</code> to <code>v2.30.4</code>. Error rate back to baseline.
        </p>
      </div>
      <div class="ods-card-footer">
        <button class="ods-btn -secondary -sm">View trace</button>
      </div>
    </div>
  </main>
</body>
</html>

React, via @operant/ui

import { Card, CardHeader, CardTitle, CardBody, CardFooter, Badge, Button } from "@operant/ui";

export default function RunSummary() {
  return (
    <main className="ods-page">
      <Card style={{ maxWidth: 360 }}>
        <CardHeader>
          <CardTitle>Triage Agent · Incident #4821</CardTitle>
          <Badge variant="success">Resolved</Badge>
        </CardHeader>
        <CardBody>
          <p className="text-body text-muted">
            Rolled back <code>checkout-svc</code> to <code>v2.30.4</code>. Error rate back to
            baseline.
          </p>
        </CardBody>
        <CardFooter>
          <Button variant="secondary" size="sm">View trace</Button>
        </CardFooter>
      </Card>
    </main>
  );
}

Both markups resolve against the exact same tokens, so both render correctly in light and dark theme, and in comfortable or compact density, without any additional code.

What just happened

• .ods-card / Card composes header · body · footer — see anatomy in Card.
• .ods-badge -success / <Badge variant="success"> is a status label that always pairs a semantic color with text — never color alone.
• .ods-btn -secondary -sm / <Button variant="secondary" size="sm"> is a secondary-hierarchy action; see Button for the full variant set and when to use each.

Next

• Theming — how data-theme/data-density and the token layers work.
• Playground — paste this snippet in and iterate live.
• Generator — describe a UI in a prompt and get a starting point like the one above.