@carlonicora/nextjs-jsonapi 1.129.1 → 1.131.0

package/src/features/billing/stripe-subscription/components/widgets/SubscriptionStatusBadge.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { Badge, type BadgeProps } from "../../../../../shadcnui";
 import { SubscriptionStatus } from "../../data";
 
 type SubscriptionStatusBadgeProps = {
@@ -9,47 +10,47 @@ type SubscriptionStatusBadgeProps = {
 
 type StatusConfig = {
   label: string;
-  color: string;
+  variant: BadgeProps["variant"];
 };
 
 const statusConfig: Record<SubscriptionStatus, StatusConfig> = {
   [SubscriptionStatus.ACTIVE]: {
     label: "Active",
-    color: "bg-green-100 text-green-800",
+    variant: "softGreen",
   },
   [SubscriptionStatus.TRIALING]: {
     label: "Trial",
-    color: "bg-blue-100 text-blue-800",
+    variant: "softBlue",
   },
   [SubscriptionStatus.PAST_DUE]: {
     label: "Past Due",
-    color: "bg-red-100 text-red-800",
+    variant: "softRed",
   },
   [SubscriptionStatus.CANCELED]: {
     label: "Canceled",
-    color: "bg-gray-100 text-gray-800",
+    variant: "softGray",
   },
   [SubscriptionStatus.PAUSED]: {
     label: "Paused",
-    color: "bg-yellow-100 text-yellow-800",
+    variant: "softYellow",
   },
   [SubscriptionStatus.UNPAID]: {
     label: "Unpaid",
-    color: "bg-orange-100 text-orange-800",
+    variant: "softOrange",
   },
   [SubscriptionStatus.INCOMPLETE]: {
     label: "Incomplete",
-    color: "bg-gray-100 text-gray-800",
+    variant: "softGray",
   },
   [SubscriptionStatus.INCOMPLETE_EXPIRED]: {
     label: "Expired",
-    color: "bg-gray-100 text-gray-800",
+    variant: "softGray",
   },
 };
 
 const cancelingConfig: StatusConfig = {
   label: "Canceling",
-  color: "bg-amber-100 text-amber-800",
+  variant: "softAmber",
 };
 
 export function SubscriptionStatusBadge({ status, cancelAtPeriodEnd }: SubscriptionStatusBadgeProps) {
@@ -58,5 +59,5 @@ export function SubscriptionStatusBadge({ status, cancelAtPeriodEnd }: Subscript
     ? cancelingConfig
     : statusConfig[status] || statusConfig[SubscriptionStatus.CANCELED];
 
-  return <span className={`${config.color} text-xs px-2 py-1 rounded-full font-medium`}>{config.label}</span>;
+  return <Badge variant={config.variant}>{config.label}</Badge>;
 }

package/src/features/billing/stripe-subscription/components/wizards/WizardStepPaymentMethod.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { PaymentMethodForm } from "../../../stripe-customer/components/forms/PaymentMethodForm";
+import { SectionHeader } from "../../../../../components/typography";
 
 type WizardStepPaymentMethodProps = {
   onBack: () => void;
@@ -12,7 +13,7 @@ export function WizardStepPaymentMethod({ onBack, onSuccess, isProcessing }: Wiz
   return (
     <div className="space-y-6">
       <div className="text-center">
-        <h3 className="font-semibold text-lg">Add Payment Method</h3>
+        <SectionHeader>Add Payment Method</SectionHeader>
         <p className="text-sm text-muted-foreground">Enter your card details to complete your subscription</p>
       </div>
 

package/src/features/billing/stripe-subscription/components/wizards/WizardStepReview.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { AlertCircle } from "lucide-react";
-import { Alert, AlertDescription, Button } from "../../../../../shadcnui";
+import { Alert, AlertDescription, Badge, Button } from "../../../../../shadcnui";
+import { SectionHeader } from "../../../../../components/typography";
 import { formatCurrency } from "../../../components/utils/currency";
 import { StripePriceInterface } from "../../../stripe-price/data/stripe-price.interface";
 import { ProrationPreviewInterface } from "../../../stripe-invoice/data/stripe-invoice.interface";
@@ -120,7 +121,7 @@ export function WizardStepReview({
     <div className="space-y-6">
       {/* Selected Plan Summary */}
       <div className="bg-muted/50 rounded-lg p-4 space-y-3">
-        <h3 className="font-semibold text-lg">Selected Plan</h3>
+        <SectionHeader>Selected Plan</SectionHeader>
         <div className="flex justify-between items-center">
           <div>
             <p className="font-medium">{selectedPrice.product?.name}</p>
@@ -132,14 +133,10 @@ export function WizardStepReview({
                 <p className="text-sm text-muted-foreground line-through">
                   {formatCurrency(selectedPrice.unitAmount || 0, selectedPrice.currency)}
                 </p>
-                <p className="font-semibold text-lg text-green-600">
+                <p className="text-success text-lg font-semibold">
                   {formatCurrency(discountedPrice, selectedPrice.currency)}
                 </p>
-                {discountDescription && (
-                  <span className="inline-block text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded-full">
-                    {discountDescription}
-                  </span>
-                )}
+                {discountDescription && <Badge variant="softGreen">{discountDescription}</Badge>}
               </>
             ) : (
               <p className="font-semibold text-lg">
@@ -156,25 +153,25 @@ export function WizardStepReview({
         <div
           className={`${isTrialUpgrade ? "bg-amber-50 border-amber-200" : "bg-blue-50 border-blue-200"} border rounded-lg p-4 space-y-2`}
         >
-          <h4 className={`font-medium ${isTrialUpgrade ? "text-amber-800" : "text-blue-800"}`}>
+          <h4 className={`font-medium ${isTrialUpgrade ? "text-warning" : "text-blue-800"}`}>
             {isTrialUpgrade ? "Trial Upgrade" : "Proration Summary"}
           </h4>
-          <p className={`text-sm ${isTrialUpgrade ? "text-amber-700" : "text-blue-700"}`}>
+          <p className={`text-sm ${isTrialUpgrade ? "text-warning" : "text-blue-700"}`}>
             {isTrialUpgrade
               ? "Your trial will end immediately and you will be charged the full price."
               : "Your next charge will be adjusted to account for the plan change."}
           </p>
           <div className="flex justify-between text-sm">
-            <span className={`${isTrialUpgrade ? "text-amber-600" : "text-blue-600"}`}>
+            <span className={`${isTrialUpgrade ? "text-warning" : "text-blue-600"}`}>
               {isTrialUpgrade ? "Amount to charge now:" : "Amount due now:"}
             </span>
-            <span className={`font-medium ${isTrialUpgrade ? "text-amber-800" : "text-blue-800"}`}>
+            <span className={`font-medium ${isTrialUpgrade ? "text-warning" : "text-blue-800"}`}>
               {discountedImmediateCharge !== null ? (
                 <>
                   <span className="line-through text-muted-foreground mr-2">
                     {formatCurrency(prorationPreview.immediateCharge, prorationPreview.currency)}
                   </span>
-                  <span className="text-green-600">
+                  <span className="text-success">
                     {formatCurrency(discountedImmediateCharge, prorationPreview.currency)}
                   </span>
                 </>

package/src/features/billing/stripe-usage/components/containers/UsageContainer.tsx

@@ -86,7 +86,7 @@ export function UsageContainer() {
       {/* Header */}
       <div className="flex items-center gap-x-3">
         <Activity className="h-8 w-8" />
-        <h1 className="text-3xl font-bold">Usage Tracking</h1>
+        <h1 className="text-primary text-3xl font-semibold">Usage Tracking</h1>
       </div>
 
       {/* Empty State */}
@@ -94,7 +94,7 @@ export function UsageContainer() {
         <div className="bg-muted/50 flex flex-col items-center justify-center gap-y-4 rounded-lg border-2 border-dashed border-gray-300 p-12">
           <Activity className="text-muted-foreground h-16 w-16" />
           <div className="text-center">
-            <h3 className="mb-2 text-xl font-semibold">No usage meters configured</h3>
+            <h3 className="mb-2 text-sm font-medium">No usage meters configured</h3>
             <p className="text-muted-foreground">
               Usage tracking will appear here when you have metered subscriptions with configured meters.
             </p>

package/src/features/billing/stripe-usage/components/details/UsageSummaryCard.tsx

@@ -52,8 +52,8 @@ export function UsageSummaryCard({ meter, summary }: UsageSummaryCardProps) {
           <Activity className="h-5 w-5" />
         </div>
         <div className="flex flex-col">
-          <h3 className="font-semibold">{displayName}</h3>
-          <p className="text-xs text-gray-500">{meter.id}</p>
+          <h3 className="text-sm font-medium">{displayName}</h3>
+          <p className="text-muted-foreground text-xs">{meter.id}</p>
         </div>
       </CardHeader>
 
@@ -61,7 +61,7 @@ export function UsageSummaryCard({ meter, summary }: UsageSummaryCardProps) {
         {/* Current Usage */}
         <div>
           <p className="text-3xl font-bold">{currentUsage.toLocaleString()}</p>
-          {hasLimit && <p className="text-sm text-gray-500">of {limit.toLocaleString()} used</p>}
+          {hasLimit && <p className="text-muted-foreground text-sm">of {limit.toLocaleString()} used</p>}
         </div>
 
         {/* Progress Bar */}
@@ -70,16 +70,16 @@ export function UsageSummaryCard({ meter, summary }: UsageSummaryCardProps) {
             <div className="h-2 w-full overflow-hidden rounded-full bg-gray-200">
               <div className={`h-full transition-all ${progressColor}`} style={{ width: `${progressWidth}%` }} />
             </div>
-            <p className="text-sm text-gray-500">{percentage?.toFixed(1)}% used</p>
+            <p className="text-muted-foreground text-sm">{percentage?.toFixed(1)}% used</p>
           </div>
         ) : (
-          <p className="text-sm text-gray-500">No limit set</p>
+          <p className="text-muted-foreground text-sm">No limit set</p>
         )}
 
         {/* Period Information */}
         {summary && summary.start && summary.end && (
           <div className="border-t pt-3">
-            <p className="text-xs text-gray-500">
+            <p className="text-muted-foreground text-xs">
               Period: {formatDate(summary.start)} - {formatDate(summary.end)}
             </p>
           </div>

package/src/features/billing/stripe-usage/components/lists/UsageHistoryTable.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../../../../shadcnui";
+import { SectionHeader } from "../../../../../components/typography";
 import { StripeUsageInterface } from "../../data/stripe-usage.interface";
 
 type UsageHistoryTableProps = {
@@ -39,7 +40,7 @@ export function UsageHistoryTable({ usageRecords }: UsageHistoryTableProps) {
 
   return (
     <div className="flex w-full flex-col gap-y-4">
-      <h2 className="text-xl font-semibold">Usage History</h2>
+      <SectionHeader level={2}>Usage History</SectionHeader>
       <div className="overflow-clip rounded-lg border">
         <Table>
           <TableHeader className="bg-muted">
@@ -60,7 +61,7 @@ export function UsageHistoryTable({ usageRecords }: UsageHistoryTableProps) {
                   <TableCell className="font-medium">{dateTime}</TableCell>
                   <TableCell className="text-muted-foreground">{record.meterEventName}</TableCell>
                   <TableCell className="text-right font-medium">{quantity}</TableCell>
-                  <TableCell className="text-muted-foreground text-sm font-mono">{record.stripeEventId}</TableCell>
+                  <TableCell className="text-muted-foreground text-sm tabular-nums">{record.stripeEventId}</TableCell>
                 </TableRow>
               );
             })}

package/src/features/company/components/details/CompanyContent.tsx

@@ -5,6 +5,7 @@ import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { ReactNode } from "react";
 import { AttributeElement } from "../../../../components";
+import { SectionHeader, MicroLabel } from "../../../../components/typography";
 import { FiscalDataDisplay } from "../../../../components/fiscal/FiscalDataDisplay";
 import { CompanyInterface } from "../../data";
 
@@ -34,7 +35,7 @@ export function CompanyContent({ company, actions }: CompanyContentProps) {
     <div className="flex flex-col gap-y-8">
       {/* Title Row */}
       <div className="flex w-full items-center justify-between">
-        <h2 className="text-lg font-semibold">{company.name}</h2>
+        <SectionHeader level={2}>{company.name}</SectionHeader>
         {actions && <div className="flex items-center gap-x-2">{actions}</div>}
       </div>
 
@@ -70,9 +71,7 @@ export function CompanyContent({ company, actions }: CompanyContentProps) {
       {/* Fiscal Data Section */}
       {company.fiscal_data && (
         <div className="flex flex-col gap-y-3">
-          <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
-            {t("company.sections.fiscal_data")}
-          </h3>
+          <MicroLabel>{t("company.sections.fiscal_data")}</MicroLabel>
           <FiscalDataDisplay fiscalData={company.fiscal_data} />
         </div>
       )}
@@ -80,9 +79,7 @@ export function CompanyContent({ company, actions }: CompanyContentProps) {
       {/* Address Details Section */}
       {hasAddressDetails(company) && (
         <div className="flex flex-col gap-y-3">
-          <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">
-            {t("company.sections.address_details")}
-          </h3>
+          <MicroLabel>{t("company.sections.address_details")}</MicroLabel>
           <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
             {company.street && <AttributeElement title={t("company.fields.street.label")} value={company.street} />}
             {company.street_number && (

package/src/features/company/components/details/TokenStatusIndicator.tsx

@@ -62,11 +62,11 @@ export function TokenStatusIndicator({ className, size = "md", showExtraPages =
 
   const getBatteryIcon = () => {
     if (percentage > 75) {
-      return <BatteryFull className={cn(iconSize, "text-green-500")} />;
+      return <BatteryFull className={cn(iconSize, "text-success")} />;
     } else if (percentage > 50) {
-      return <BatteryMedium className={cn(iconSize, "text-green-500")} />;
+      return <BatteryMedium className={cn(iconSize, "text-success")} />;
     } else if (percentage >= 25) {
-      return <BatteryLow className={cn(iconSize, "text-yellow-500")} />;
+      return <BatteryLow className={cn(iconSize, "text-warning")} />;
     } else {
       return <Battery className={cn(iconSize, "text-destructive")} />;
     }
@@ -74,9 +74,9 @@ export function TokenStatusIndicator({ className, size = "md", showExtraPages =
 
   const getStatusColor = () => {
     if (percentage > 50) {
-      return "text-green-500";
+      return "text-success";
     } else if (percentage >= 25) {
-      return "text-yellow-500";
+      return "text-warning";
     } else {
       return "text-destructive";
     }

package/src/features/company/components/forms/CompanyDeleter.tsx

@@ -99,7 +99,7 @@ function CompanyDeleterInternal({ company, isAdministrator }: CompanyDeleterInte
             <div className="flex w-full flex-col">
               <Label className="flex items-center">
                 {t(`company.fields.name.label`)}
-                <span className="text-destructive ml-2 font-semibold">*</span>
+                <span className="ml-1 text-destructive">*</span>
               </Label>
               <Input
                 className={`w-full`}

package/src/features/company/components/forms/CompanyEditor.tsx

@@ -20,6 +20,7 @@ import {
   parseFiscalData,
 } from "../../../../components";
 import type { FiscalDataHandle } from "../../../../components";
+import { SectionHeader } from "../../../../components/typography";
 import { Modules } from "../../../../core";
 import { useI18nRouter } from "../../../../i18n";
 import { getRoleId } from "../../../../roles";
@@ -223,7 +224,7 @@ function CompanyEditorInternal({
       <div className="flex w-full items-start justify-between gap-x-4">
         <div className="flex w-96 flex-col justify-start gap-y-4">
           <FileUploader value={files} onValueChange={setFiles} dropzoneOptions={dropzone} className="w-full p-4">
-            <FileInput className="text-neutral-300 outline-dashed">
+            <FileInput className="text-muted-foreground/50 outline-dashed">
               <div className="flex w-full flex-col items-center justify-center pt-3 pb-4">
                 <div className="flex w-full flex-col items-center justify-center pt-3 pb-4">
                   {file || company?.logo ? (
@@ -262,7 +263,7 @@ function CompanyEditorInternal({
               }
             }}
           />
-          <h3 className="mt-2 text-sm font-semibold">{t(`company.sections.fiscal_data`)}</h3>
+          <SectionHeader className="mt-2">{t(`company.sections.fiscal_data`)}</SectionHeader>
           <ItalianFiscalData ref={fiscalRef} initialData={parseFiscalData(company?.fiscal_data)} />
         </div>
         {canAccessFeatures && (

package/src/features/content/components/lists/ContentsList.tsx

@@ -5,6 +5,7 @@ import { Modules } from "../../../../core";
 import { usePageUrlGenerator } from "../../../../hooks";
 import { HoverCard, HoverCardContent, HoverCardTrigger, Link } from "../../../../shadcnui";
 import { getIconByModule } from "../../../../utils";
+import { SectionHeader } from "../../../../components/typography";
 import { ContributorsList } from "../../../user/components";
 import { ContentInterface } from "../../data";
 
@@ -17,7 +18,7 @@ export function ContentsList({ contentList }: ContentsListProps) {
 
   return (
     <div className="flex min-h-0 w-full flex-col overflow-y-auto">
-      <h2 className="text-xl font-semibold">{t(`content.news`)}</h2>
+      <SectionHeader level={2}>{t(`content.news`)}</SectionHeader>
       <div className="flex flex-col">
         {contentList.map((content) => (
           <ContentsListElement content={content} key={content.id} />

package/src/features/feature/components/forms/FormFeatures.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Checkbox, Label, ScrollArea } from "../../../../shadcnui";
+import { SectionHeader } from "../../../../components/typography";
 import { FeatureInterface } from "../../data";
 
 type FormFeaturesProps = {
@@ -30,7 +31,11 @@ export function FormFeatures({ form, name, features, featureField = "featureIds"
 
   return (
     <div className="flex w-full flex-col">
-      {name && <h2 className="mb-4 border-b text-lg font-semibold">{name}</h2>}
+      {name && (
+        <SectionHeader level={2} className="mb-4 border-b">
+          {name}
+        </SectionHeader>
+      )}
       <ScrollArea className="h-[40vh]">
         <div className="flex flex-col gap-y-2 pr-4">
           {features

package/src/features/help/components/HelpTOC.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
 import type { HelpHeading } from "../types/help-article.types";
+import { MicroLabel } from "../../../components/typography";
 
 export function HelpTOC({ headings }: { headings: readonly HelpHeading[] }) {
   const t = useTranslations();
@@ -26,9 +27,7 @@ export function HelpTOC({ headings }: { headings: readonly HelpHeading[] }) {
   if (headings.length === 0) return null;
   return (
     <nav aria-label={t("help.toc.title")} className="hidden lg:block">
-      <div className="text-muted-foreground mb-2 text-xs font-semibold tracking-wider uppercase">
-        {t("help.toc.title")}
-      </div>
+      <MicroLabel className="mb-2">{t("help.toc.title")}</MicroLabel>
       <ul className="space-y-1 text-sm">
         {headings.map((h) => (
           <li key={h.slug} style={{ paddingLeft: `${(h.depth - 2) * 0.75}rem` }}>

package/src/features/how-to/components/containers/HowToCommand.tsx

@@ -207,15 +207,15 @@ export default function HowToCommand({ pathname, extraGroups, onStartChat }: How
               {/* Keyboard hints footer */}
               <div className="text-muted-foreground flex items-center justify-center gap-4 border-t px-3 py-2 text-xs">
                 <span className="flex items-center gap-1">
-                  <kbd className="bg-muted rounded border px-1.5 py-0.5 font-mono text-xs">&#9166;</kbd>
+                  <kbd className="bg-muted rounded border px-1.5 py-0.5 tabular-nums text-xs">&#9166;</kbd>
                   {t(`howto.command.keyboard.select`)}
                 </span>
                 <span className="flex items-center gap-1">
-                  <kbd className="bg-muted rounded border px-1.5 py-0.5 font-mono text-xs">&#8593;&#8595;</kbd>
+                  <kbd className="bg-muted rounded border px-1.5 py-0.5 tabular-nums text-xs">&#8593;&#8595;</kbd>
                   {t(`howto.command.keyboard.navigate`)}
                 </span>
                 <span className="flex items-center gap-1">
-                  <kbd className="bg-muted rounded border px-1.5 py-0.5 font-mono text-xs">
+                  <kbd className="bg-muted rounded border px-1.5 py-0.5 tabular-nums text-xs">
                     {t(`howto.keyboard.esc`)}
                   </kbd>
                   {t(`howto.command.keyboard.close`)}

package/src/features/how-to/components/containers/HowToCommandViewer.tsx

@@ -6,6 +6,7 @@ import { useMemo } from "react";
 
 import { BlockNoteEditorContainer } from "../../../../components";
 import { Button } from "../../../../shadcnui";
+import { SectionHeader } from "../../../../components/typography";
 import { HowToInterface } from "../../data/HowToInterface";
 import { calculateReadingTime, extractHeadings } from "../../utils/blocknote";
 
@@ -29,7 +30,9 @@ export default function HowToCommandViewer({ howTo, onBack, onStartChat }: HowTo
           <ArrowLeft className="h-4 w-4" />
           <span className="ml-1">{t("howto.command.back")}</span>
         </Button>
-        <h2 className="flex-1 truncate text-lg font-semibold">{howTo.name}</h2>
+        <SectionHeader level={2} className="flex-1 truncate">
+          {howTo.name}
+        </SectionHeader>
         <div className="text-muted-foreground flex items-center gap-1.5 text-sm">
           <BookOpen className="h-4 w-4" />
           <span>{t("howto.reading_time.label", { minutes: readingTime })}</span>

package/src/features/notification/components/containers/NotificationsListContainer.tsx

@@ -13,7 +13,7 @@ function NotificationsListContainerContent() {
   if (error) {
     return (
       <div className="flex items-center justify-center p-8 text-center">
-        <div className="text-destructive text-sm">
+        <div className="text-destructive text-xs/relaxed">
           <p>Error loading notifications: {error}</p>
           <p className="text-muted-foreground mt-2">Please try refreshing the page.</p>
         </div>

package/src/features/notification/components/modals/NotificationModal.tsx

@@ -205,7 +205,7 @@ function NotificationModalContent({ isOpen, setIsOpen }: NotificationModalProps)
           <CardHeader className="p-4">
             <CardTitle>{t(`entities.notifications`, { count: 2 })}</CardTitle>
             {isLoading && <div className="text-muted-foreground text-xs">Loading...</div>}
-            {error && <div className="text-destructive text-xs">Error: {error}</div>}
+            {error && <div className="text-destructive text-xs/relaxed">Error: {error}</div>}
           </CardHeader>
           <Separator />
           <ScrollArea className="h-96">
@@ -214,7 +214,7 @@ function NotificationModalContent({ isOpen, setIsOpen }: NotificationModalProps)
                 <Fragment key={notification.id}>{generateNotification(notification, () => setIsOpen(false))}</Fragment>
               ))
             ) : (
-              <div className="p-4 text-center text-sm text-gray-500">{t(`notification.empty`)}</div>
+              <div className="text-muted-foreground p-4 text-center text-sm">{t(`notification.empty`)}</div>
             )}
           </ScrollArea>
         </Card>

package/src/features/oauth/components/OAuthClientCard.tsx

@@ -93,7 +93,7 @@ export function OAuthClientCard({ client, onClick, onEdit, onDelete }: OAuthClie
       </CardHeader>
       <CardContent>
         <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted-foreground">
-          <span className="font-mono">{truncatedId}</span>
+          <span className="tabular-nums">{truncatedId}</span>
           <span>Created {createdAgo}</span>
           <span>{client.isConfidential ? "Confidential" : "Public"}</span>
         </div>

package/src/features/oauth/components/OAuthClientDetail.tsx

@@ -94,7 +94,7 @@ export function OAuthClientDetail({
         <CardHeader>
           <div className="flex items-start justify-between">
             <div>
-              <CardTitle className="text-2xl">{client.name}</CardTitle>
+              <CardTitle>{client.name}</CardTitle>
               {client.description && <CardDescription className="mt-1">{client.description}</CardDescription>}
             </div>
             <div className="flex items-center gap-2">
@@ -110,18 +110,14 @@ export function OAuthClientDetail({
           <div className="space-y-2">
             <Label>Client ID</Label>
             <div className="flex gap-2">
-              <Input value={client.clientId} readOnly className="font-mono" />
+              <Input value={client.clientId} readOnly className="tabular-nums" />
               <Button
                 variant="outline"
                 size="icon"
                 onClick={() => copyToClipboard(client.clientId, "clientId")}
                 title="Copy Client ID"
               >
-                {copiedField === "clientId" ? (
-                  <Check className="h-4 w-4 text-green-600" />
-                ) : (
-                  <Copy className="h-4 w-4" />
-                )}
+                {copiedField === "clientId" ? <Check className="text-success h-4 w-4" /> : <Copy className="h-4 w-4" />}
               </Button>
             </div>
           </div>
@@ -130,7 +126,7 @@ export function OAuthClientDetail({
           <div className="space-y-2">
             <Label>Client Secret</Label>
             <div className="flex gap-2">
-              <Input value="••••••••••••••••••••••••••••••••" readOnly className="font-mono" />
+              <Input value="••••••••••••••••••••••••••••••••" readOnly className="tabular-nums" />
               {onRegenerateSecret && (
                 <Button
                   variant="outline"
@@ -155,7 +151,7 @@ export function OAuthClientDetail({
             <Label>Redirect URIs</Label>
             <ul className="space-y-1">
               {client.redirectUris.map((uri, index) => (
-                <li key={index} className="flex items-center gap-2 text-sm font-mono">
+                <li key={index} className="flex items-center gap-2 text-sm tabular-nums">
                   <ExternalLink className="h-3 w-3 text-muted-foreground" />
                   {uri}
                 </li>

package/src/features/oauth/components/OAuthClientForm.tsx

@@ -121,7 +121,7 @@ export function OAuthClientForm({ client, onSubmit, onCancel, isLoading = false
               disabled={isLoading}
               className={errors.name ? "border-destructive" : ""}
             />
-            {errors.name && <p className="text-sm text-destructive">{errors.name}</p>}
+            {errors.name && <p className="text-destructive text-xs/relaxed">{errors.name}</p>}
           </div>
 
           {/* Description */}
@@ -164,7 +164,7 @@ export function OAuthClientForm({ client, onSubmit, onCancel, isLoading = false
               <div className="flex items-start space-x-3 p-3 rounded-md border">
                 <RadioGroupItem value="confidential" id="confidential" className="mt-1" />
                 <div>
-                  <Label htmlFor="confidential" className="font-medium cursor-pointer">
+                  <Label htmlFor="confidential" className="cursor-pointer">
                     Confidential
                   </Label>
                   <p className="text-sm text-muted-foreground">
@@ -175,7 +175,7 @@ export function OAuthClientForm({ client, onSubmit, onCancel, isLoading = false
               <div className="flex items-start space-x-3 p-3 rounded-md border">
                 <RadioGroupItem value="public" id="public" className="mt-1" />
                 <div>
-                  <Label htmlFor="public" className="font-medium cursor-pointer">
+                  <Label htmlFor="public" className="cursor-pointer">
                     Public
                   </Label>
                   <p className="text-sm text-muted-foreground">

package/src/features/oauth/components/OAuthClientList.tsx

@@ -2,6 +2,7 @@
 
 import { Plus, Key } from "lucide-react";
 import { Button, Skeleton } from "../../../shadcnui";
+import { SectionHeader } from "../../../components/typography";
 import { OAuthClientCard } from "./OAuthClientCard";
 import { OAuthClientInterface } from "../interfaces/oauth.interface";
 
@@ -45,7 +46,7 @@ export function OAuthClientList({
     return (
       <div className="space-y-4">
         <div className="flex items-center justify-between">
-          <h2 className="text-2xl font-bold">{title}</h2>
+          <SectionHeader level={2}>{title}</SectionHeader>
           <Skeleton className="h-10 w-32" />
         </div>
         <div className="space-y-3">
@@ -62,7 +63,7 @@ export function OAuthClientList({
     return (
       <div className="space-y-4">
         <div className="flex items-center justify-between">
-          <h2 className="text-2xl font-bold">{title}</h2>
+          <SectionHeader level={2}>{title}</SectionHeader>
         </div>
         <div className="rounded-lg border border-destructive/50 bg-destructive/10 p-6 text-center">
           <p className="text-destructive">{error.message}</p>
@@ -76,7 +77,7 @@ export function OAuthClientList({
     return (
       <div className="space-y-4">
         <div className="flex items-center justify-between">
-          <h2 className="text-2xl font-bold">{title}</h2>
+          <SectionHeader level={2}>{title}</SectionHeader>
           {onCreateClick && (
             <Button onClick={onCreateClick}>
               <Plus className="h-4 w-4 mr-2" />
@@ -103,7 +104,7 @@ export function OAuthClientList({
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold">{title}</h2>
+        <SectionHeader level={2}>{title}</SectionHeader>
         {onCreateClick && (
           <Button onClick={onCreateClick}>
             <Plus className="h-4 w-4 mr-2" />

package/src/features/oauth/components/OAuthClientSecretDisplay.tsx

@@ -85,7 +85,7 @@ export function OAuthClientSecretDisplay({ secret, onDismiss, open, clientName }
 
         <div className="flex items-center space-x-2">
           <div className="flex-1">
-            <Input value={secret} readOnly className="font-mono text-sm" onClick={(e) => e.currentTarget.select()} />
+            <Input value={secret} readOnly className="tabular-nums text-sm" onClick={(e) => e.currentTarget.select()} />
           </div>
           <Button
             type="button"
@@ -94,11 +94,11 @@ export function OAuthClientSecretDisplay({ secret, onDismiss, open, clientName }
             onClick={handleCopy}
             title={copied ? "Copied!" : "Copy to clipboard"}
           >
-            {copied ? <Check className="h-4 w-4 text-green-600" /> : <Copy className="h-4 w-4" />}
+            {copied ? <Check className="text-success h-4 w-4" /> : <Copy className="h-4 w-4" />}
           </Button>
         </div>
 
-        {copied && <p className="text-sm text-green-600 text-center">Copied to clipboard!</p>}
+        {copied && <p className="text-success text-center text-sm">Copied to clipboard!</p>}
 
         <DialogFooter className="mt-4">
           <Button onClick={handleDismiss} className="w-full">