Feature:UI primitives

app/compliance/page.tsx

@@ -1,11 +1,15 @@
+import { Badge, EmptyState } from "@/components/ui";
+
 export default function Page() {
   return (
     <section className="section">
-      <span className="tag">Compliance</span>
-      <h2>Compliance surface — product definition TBD.</h2>
-      <p style={{ color: "var(--muted)" }}>
-        Scaffold page — replace with production content, data loaders, and analytics.
-      </p>
+      <Badge>Compliance</Badge>
+      <h2>Compliance surface — product definition TBD.</h2>
+      <EmptyState 
+        title="Under Construction" 
+        description="Scaffold page — replace with production content, data loaders, and analytics." 
+      />
     </section>
   );
 }
+

app/contracts/page.tsx

@@ -1,11 +1,15 @@
+import { Badge, EmptyState } from "@/components/ui";
+
 export default function Page() {
   return (
     <section className="section">
-      <span className="tag">Contracts</span>
-      <h2>Contracts surface — product definition TBD.</h2>
-      <p style={{ color: "var(--muted)" }}>
-        Scaffold page — replace with production content, data loaders, and analytics.
-      </p>
+      <Badge>Contracts</Badge>
+      <h2>Contracts surface — product definition TBD.</h2>
+      <EmptyState 
+        title="Under Construction" 
+        description="Scaffold page — replace with production content, data loaders, and analytics." 
+      />
     </section>
   );
 }
+

app/contributors/page.tsx

@@ -1,11 +1,15 @@
+import { Badge, EmptyState } from "@/components/ui";
+
 export default function Page() {
   return (
     <section className="section">
-      <span className="tag">Contributors</span>
-      <h2>Contributors surface — product definition TBD.</h2>
-      <p style={{ color: "var(--muted)" }}>
-        Scaffold page — replace with production content, data loaders, and analytics.
-      </p>
+      <Badge>Contributors</Badge>
+      <h2>Contributors surface — product definition TBD.</h2>
+      <EmptyState 
+        title="Under Construction" 
+        description="Scaffold page — replace with production content, data loaders, and analytics." 
+      />
     </section>
   );
 }
+

app/docs/page.tsx

@@ -1,11 +1,15 @@
+import { Badge, EmptyState } from "@/components/ui";
+
 export default function Page() {
   return (
     <section className="section">
-      <span className="tag">Documentation</span>
-      <h2>Technical specs, governance, and integration guides.</h2>
-      <p style={{ color: "var(--muted)" }}>
-        Scaffold page — replace with production content, data loaders, and analytics.
-      </p>
+      <Badge>Docs</Badge>
+      <h2>Docs surface — product definition TBD.</h2>
+      <EmptyState 
+        title="Under Construction" 
+        description="Scaffold page — replace with production content, data loaders, and analytics." 
+      />
     </section>
   );
 }
+

app/globals.css

@@ -1,4 +1,5 @@
 :root {
+  /* Dark mode (default for now) */
   --bg: #070b14;
   --surface: #0f1727;
   --text: #eaf2ff;
@@ -8,6 +9,18 @@
   --ring: color-mix(in srgb, #59c2ff 35%, transparent);
 }
 
+@media (prefers-color-scheme: light) {
+  :root {
+    --bg: #f8fafc;
+    --surface: #ffffff;
+    --text: #0f172a;
+    --muted: #64748b;
+    --accent: #0284c7;
+    --accent-2: #10b981;
+    --ring: color-mix(in srgb, var(--accent) 35%, transparent);
+  }
+}
+
 * { box-sizing: border-box; }
 
 body {
@@ -290,3 +303,22 @@ a { color: inherit; text-decoration: none; }
   background: color-mix(in srgb, var(--surface) 65%, transparent);
   letter-spacing: 0.04em;
 }
+
+.grid-cols-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; padding: 18px 0 8px; }
+.grid-cols-auto-lg { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
+.grid-gap-16 { display: grid; gap: 16px; padding: 8px 0 40px; }
+.text-muted-max-62 { color: var(--muted); max-width: 62ch; margin-bottom: 24px; }
+.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
+
+
+.mb-16 { margin-bottom: 16px; }
+
+
+.mt-12 { margin-top: 12px; }
+.mt-16 { margin-top: 16px; }
+
+
+.mt-8 { margin-top: 8px; }
+.text-muted { color: var(--muted); }
+.text-sm { font-size: 0.85rem; }
+

app/layout.tsx

@@ -67,3 +67,4 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     </html>
   );
 }
+

app/opengraph-image.tsx

@@ -87,3 +87,4 @@ export default function Image() {
     }
   );
 }
+

app/operators/page.tsx

@@ -37,43 +37,36 @@ const tiles = [
   { label: "Settlement latency (p95)", value: "6.4s", trend: [9.1, 8.7, 8.2, 7.6, 7.4, 6.9, 6.6, 6.4], tone: "good" as const },
 ];
 
+import { Badge, Card, Stat } from "../../components/ui";
+
 export default function Page() {
   return (
     <section className="section">
-      <span className="tag">Operators</span>
-      <h2>Operator dashboard</h2>
-      <p style={{ color: "var(--muted)", maxWidth: "62ch" }}>
+      <Badge>Operators</Badge>
+      <h2 className="mt-12">Operator dashboard</h2>
+      <p className="text-muted-max-62">
         Attestation volume, usage by model, and quota headroom. Every chart on
         this page ships its numbers as a table — an auditor asking for the
         underlying figures should not have to ask anyone.
       </p>
 
-      <div
-        style={{
-          display: "grid",
-          gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
-          gap: 16,
-          padding: "18px 0 8px",
-        }}
-      >
+      <div className="grid-cols-auto">
         {tiles.map((tile) => (
-          <div className="card" key={tile.label}>
-            <p style={{ color: "var(--muted)", fontSize: "0.82rem", margin: "0 0 6px" }}>
-              {tile.label}
-            </p>
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
-              <strong style={{ fontSize: "1.7rem", letterSpacing: "-0.02em" }}>{tile.value}</strong>
+          <Card key={tile.label}>
+            <Stat label={tile.label} value={tile.value} />
+            <div className="flex-between mt-8">
+              <span className="text-muted text-sm">Trend</span>
               <Sparkline
                 values={tile.trend}
                 label={`${tile.label} trend over 8 weeks`}
                 tone={tile.tone}
               />
             </div>
-          </div>
+          </Card>
         ))}
       </div>
 
-      <div style={{ display: "grid", gap: 16, padding: "8px 0 40px" }}>
+      <div className="grid-gap-16">
         <TimeSeries
           title="Attestation volume"
           summary="Accepted attestations rose from 412 to 690 per week over eight weeks, while disputes stayed flat between 15 and 31."
@@ -90,7 +83,7 @@ export default function Page() {
           unit="k tokens"
         />
 
-        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 16 }}>
+        <div className="grid-cols-auto-lg">
           <QuotaGauge
             title="Attestation quota"
             summary="690 of 800 weekly attestations used — 86%, past the 80% warning threshold."
@@ -110,3 +103,4 @@ export default function Page() {
     </section>
   );
 }
+

app/page.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { BrandLogo } from "@/components/brand-logo";
 import { ExpectedPages } from "@/components/expected-pages";
+import { Badge, Button, Card } from "@/components/ui";
 
 export default function HomePage() {
   return (
@@ -9,15 +10,15 @@ export default function HomePage() {
         <div className="landing-orbs" aria-hidden />
         <div className="landing-hero-inner">
           <BrandLogo className="landing-logo" aria-label="ModelTrace logo" />
-          <span className="tag">Stellar · Soroban · AI governance</span>
+          <Badge className="mb-16">Stellar · Soroban · AI governance</Badge>
           <h1 className="hero-headline">Prove every inference.</h1>
           <p
             className="landing-lead"
             dangerouslySetInnerHTML={{ __html: "ModelTrace turns AI usage into <strong>attested facts on-chain</strong>: which model ran, under which policy, and what it costs\u2014so procurement, finance, and auditors share one neutral layer." }}
           />
           <div className="landing-cta-row">
-            <Link href="/roadmap" className="cta">Ship the roadmap</Link>
-            <Link href="/contracts" className="cta-secondary">Read the contracts story</Link>
+            <Button as={Link} href="/roadmap" variant="primary">Ship the roadmap</Button>
+            <Button as={Link} href="/contracts" variant="secondary">Read the contracts story</Button>
           </div>
           <ul className="landing-stats">
             <li>Metered settlement</li>
@@ -28,21 +29,21 @@ export default function HomePage() {
       </section>
 
       <section className="landing-pillars">
-        <article className="landing-pillar">
+        <Card className="landing-pillar">
           <div className="landing-pillar-icon" aria-hidden>â—†</div>
           <h3>Attestation rail</h3>
           <p>Signed inference events tied to tiers—your billing disputes shrink.</p>
-        </article>
-        <article className="landing-pillar">
+        </Card>
+        <Card className="landing-pillar">
           <div className="landing-pillar-icon" aria-hidden>â—‡</div>
           <h3>Settlement logic</h3>
           <p>Soroban payment-router patterns built for fast finality on Stellar.</p>
-        </article>
-        <article className="landing-pillar">
+        </Card>
+        <Card className="landing-pillar">
           <div className="landing-pillar-icon" aria-hidden>â—‹</div>
           <h3>Operator-ready UX</h3>
           <p>Roadmap toward dashboards gateways and enterprises actually adopt.</p>
-        </article>
+        </Card>
       </section>
 
       <p className="landing-trust">Built for teams who sell or buy inference at scale—and cannot afford black-box invoices.</p>
@@ -51,3 +52,4 @@ export default function HomePage() {
     </>
   );
 }
+

app/product/page.tsx

@@ -1,11 +1,15 @@
+import { Badge, EmptyState } from "@/components/ui";
+
 export default function Page() {
   return (
     <section className="section">
-      <span className="tag">Product</span>
-      <h2>Product surface — product definition TBD.</h2>
-      <p style={{ color: "var(--muted)" }}>
-        Scaffold page — replace with production content, data loaders, and analytics.
-      </p>
+      <Badge>Product</Badge>
+      <h2>Product surface — product definition TBD.</h2>
+      <EmptyState 
+        title="Under Construction" 
+        description="Scaffold page — replace with production content, data loaders, and analytics." 
+      />
     </section>
   );
 }
+

app/roadmap/page.tsx

@@ -1,11 +1,15 @@
+import { Badge, EmptyState } from "@/components/ui";
+
 export default function Page() {
   return (
     <section className="section">
-      <span className="tag">Roadmap</span>
-      <h2>Milestones tied to protocol releases and grant checkpoints.</h2>
-      <p style={{ color: "var(--muted)" }}>
-        Scaffold page — replace with production content, data loaders, and analytics.
-      </p>
+      <Badge>Roadmap</Badge>
+      <h2>Roadmap surface — product definition TBD.</h2>
+      <EmptyState 
+        title="Under Construction" 
+        description="Scaffold page — replace with production content, data loaders, and analytics." 
+      />
     </section>
   );
 }
+

app/twitter-image.tsx

@@ -87,3 +87,4 @@ export default function Image() {
     }
   );
 }
+

components/brand-logo.tsx

@@ -27,3 +27,4 @@ export function BrandLogo({ className }: { className?: string }) {
     </svg>
   );
 }
+

components/charts/chart-frame.tsx

@@ -113,3 +113,4 @@ export function ChartFrame({
 }
 
 export { styles as chartStyles };
+

components/charts/data-table.tsx

@@ -76,3 +76,4 @@ export function DataTable({
     </table>
   );
 }
+

components/charts/quota-gauge.tsx

@@ -131,3 +131,4 @@ export function QuotaGauge({
     </ChartFrame>
   );
 }
+

components/charts/sparkline.tsx

@@ -65,3 +65,4 @@ export function Sparkline({
     </svg>
   );
 }
+

components/charts/stacked-bars.tsx

@@ -175,3 +175,4 @@ export function StackedBars({
     </ChartFrame>
   );
 }
+

components/charts/time-series.tsx

@@ -168,3 +168,4 @@ export function TimeSeries({
     </ChartFrame>
   );
 }
+