@carlonicora/nextjs-jsonapi 1.129.1 → 1.130.0

package/src/components/containers/ReactMarkdownContainer.tsx

@@ -70,7 +70,7 @@ export function ReactMarkdownContainer({
                 <ol className={`list-decimal ${size === "small" ? "pl-3" : "pl-4"}`}>{children}</ol>
               ),
               h1: ({ children }) => (
-                <h1 className={size === "small" ? "my-1 mt-2 text-sm font-bold" : "my-2 mt-4 text-3xl font-medium"}>
+                <h1 className={size === "small" ? "my-1 mt-2 text-sm font-bold" : "my-2 mt-4 text-3xl font-semibold"}>
                   {children}
                 </h1>
               ),
@@ -106,7 +106,7 @@ export function ReactMarkdownContainer({
         <div className="mt-2 flex justify-end">
           <button
             onClick={handleToggle}
-            className="flex items-center gap-1 rounded-md px-3 py-1.5 text-sm text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900"
+            className="text-primary flex items-center gap-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors hover:bg-gray-100 hover:underline"
             aria-label={isExpanded ? t("show_less") : t("show_more")}
           >
             <span>{isExpanded ? t("show_less") : t("show_more")}</span>

package/src/components/editors/BlockNoteDiffInlineContent.tsx

@@ -55,7 +55,7 @@ export const diffWordInlineContentSpec = createReactInlineContentSpec(
             <Button
               size="sm"
               variant="ghost"
-              className="m-0 h-6 w-6 p-0 text-green-600 hover:bg-green-50 hover:text-green-700"
+              className="text-success m-0 h-6 w-6 p-0 hover:bg-green-50 hover:text-success"
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -70,7 +70,7 @@ export const diffWordInlineContentSpec = createReactInlineContentSpec(
             <Button
               size="sm"
               variant="ghost"
-              className="m-0 h-6 w-6 p-0 text-red-600 hover:bg-red-50 hover:text-red-700"
+              className="text-destructive m-0 h-6 w-6 p-0 hover:bg-red-50 hover:text-destructive"
               onClick={(e) => {
                 e.preventDefault();
                 e.stopPropagation();
@@ -93,15 +93,15 @@ export const diffWordInlineContentSpec = createReactInlineContentSpec(
         <span className="group relative inline-flex items-center">
           <span
             className={cn("rounded-sm px-1 transition-all duration-200", {
-              "border border-green-300 bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300":
+              "text-success border border-green-300 bg-green-100 dark:bg-green-900/30 dark:text-success":
                 isAddition && !accepted && !rejected,
-              "border border-green-400 bg-green-200 text-green-900": isAddition && accepted,
-              "border border-gray-300 bg-gray-100 text-gray-500 line-through": isAddition && rejected,
+              "text-success border border-green-400 bg-green-200": isAddition && accepted,
+              "text-muted-foreground border border-gray-300 bg-gray-100 line-through": isAddition && rejected,
 
-              "border border-red-300 bg-red-100 text-red-800 line-through dark:bg-red-900/30 dark:text-red-300":
+              "text-destructive border border-red-300 bg-red-100 line-through dark:bg-red-900/30 dark:text-destructive":
                 isRemoval && !accepted && !rejected,
-              "border border-gray-400 bg-gray-200 text-gray-600 line-through": isRemoval && accepted,
-              "border border-red-400 bg-red-200 text-red-900 line-through": isRemoval && rejected,
+              "text-muted-foreground border border-gray-400 bg-gray-200 line-through": isRemoval && accepted,
+              "text-destructive border border-red-400 bg-red-200 line-through": isRemoval && rejected,
             })}
           >
             {text}
@@ -112,7 +112,7 @@ export const diffWordInlineContentSpec = createReactInlineContentSpec(
               <Button
                 size="sm"
                 variant="ghost"
-                className="m-0 h-6 w-6 p-0 text-green-600 hover:bg-green-50 hover:text-green-700"
+                className="text-success m-0 h-6 w-6 p-0 hover:bg-green-50 hover:text-success"
                 onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
@@ -127,7 +127,7 @@ export const diffWordInlineContentSpec = createReactInlineContentSpec(
               <Button
                 size="sm"
                 variant="ghost"
-                className="m-0 h-6 w-6 p-0 text-red-600 hover:bg-red-50 hover:text-red-700"
+                className="text-destructive m-0 h-6 w-6 p-0 hover:bg-red-50 hover:text-destructive"
                 onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();

package/src/components/editors/BlockNoteEditor.tsx

@@ -148,7 +148,7 @@ const createDiffActionsInlineContentSpec = (
                 diffIds.split(",").forEach((id: string) => handleAcceptChange(id.trim()));
               }}
             >
-              <CheckIcon className="h-3 w-3 text-green-600" />
+              <CheckIcon className="text-success h-3 w-3" />
             </Button>
             <Button
               title="Reject change"
@@ -159,7 +159,7 @@ const createDiffActionsInlineContentSpec = (
                 diffIds.split(",").forEach((id: string) => handleRejectChange(id.trim()));
               }}
             >
-              <XIcon className="h-3 w-3 text-red-600" />
+              <XIcon className="text-destructive h-3 w-3" />
             </Button>
           </span>
         );

package/src/components/forms/FormCheckbox.tsx

@@ -38,10 +38,10 @@ export function FormCheckbox({ form, id, name, labelBefore, description, isRequi
         {(field) => (
           <div className="flex gap-x-4">
             {labelBefore && label()}
-            {labelBefore && isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
+            {labelBefore && isRequired && <span className="ml-1 text-destructive">*</span>}
             <Checkbox id={id} checked={field.value ?? false} onCheckedChange={field.onChange} />
             {!labelBefore && label()}
-            {!labelBefore && isRequired && <span className="text-destructive ml-2 font-semibold">*</span>}
+            {!labelBefore && isRequired && <span className="ml-1 text-destructive">*</span>}
           </div>
         )}
       </FormFieldWrapper>

package/src/components/forms/FormFieldWrapper.tsx

@@ -43,7 +43,7 @@ export function FormFieldWrapper<T extends FieldValues>({
           {label && (
             <FieldLabel>
               {label}
-              {isRequired && <span className="text-destructive ml-1 font-semibold">*</span>}
+              {isRequired && <span className="ml-1 text-destructive">*</span>}
             </FieldLabel>
           )}
           {children(field, fieldState)}

package/src/components/forms/FormSlider.tsx

@@ -28,7 +28,7 @@ export function FormSlider({
         {() => (
           <div>
             {showPercentage && (
-              <div className="text-muted-foreground mb-2 flex w-full justify-center text-xs">{`${value}%`}</div>
+              <div className="text-muted-foreground mb-2 flex w-full justify-center text-xs/relaxed">{`${value}%`}</div>
             )}
             <Slider
               onValueChange={(val) => {

package/src/components/forms/GdprConsentCheckbox.tsx

@@ -28,7 +28,7 @@ export function GdprConsentCheckbox<T extends FieldValues>({
           <div className="space-y-1 leading-none">
             <span className="text-sm font-normal">
               {label}
-              {required && <span className="text-destructive ml-1">*</span>}
+              {required && <span className="ml-1 text-destructive">*</span>}
             </span>
             {description && <FieldDescription className="text-xs">{description}</FieldDescription>}
           </div>

package/src/components/hero/EntitySection.tsx

@@ -2,6 +2,7 @@
 
 import { ReactNode } from "react";
 import { cn } from "../../utils";
+import { MicroLabel } from "../typography";
 
 type EntitySectionProps = {
   title: string;
@@ -13,7 +14,7 @@ type EntitySectionProps = {
 export function EntitySection({ title, columns, children, className }: EntitySectionProps) {
   return (
     <div className={cn("flex w-full flex-col gap-y-3", className)}>
-      <h3 className="text-muted-foreground text-xs font-semibold tracking-wider uppercase">{title}</h3>
+      <MicroLabel as="h3">{title}</MicroLabel>
       {columns ? (
         <div
           className={cn(

package/src/components/index.ts

@@ -12,6 +12,7 @@ export * from "./forms";
 export * from "./navigations";
 export * from "./pages";
 export * from "./tables";
+export * from "./typography";
 export * from "./grids";
 export * from "./fiscal";
 export * from "./hero";

package/src/components/typography/DetailField.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { cn } from "../../utils/cn";
+
+type DetailFieldProps = React.ComponentProps<"div"> & {
+  label: string;
+  value?: React.ReactNode;
+  horizontal?: boolean;
+  labelWidth?: string;
+};
+
+function DetailField({
+  label,
+  value,
+  horizontal = false,
+  labelWidth,
+  className,
+  children,
+  ...props
+}: DetailFieldProps) {
+  return (
+    <div
+      data-slot="detail-field"
+      className={cn(horizontal ? "flex items-baseline gap-2" : "flex flex-col gap-0.5", className)}
+      {...props}
+    >
+      <span className={cn("text-muted-foreground text-xs", horizontal && labelWidth && cn("shrink-0", labelWidth))}>
+        {label}
+      </span>
+      <div className="text-sm">{value ?? children}</div>
+    </div>
+  );
+}
+
+export { DetailField };
+export type { DetailFieldProps };

package/src/components/typography/MicroLabel.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { cn } from "../../utils/cn";
+
+type MicroLabelProps = React.ComponentProps<"h4"> & {
+  as?: "h3" | "h4" | "span";
+};
+
+function MicroLabel({ as: Tag = "h4", className, children, ...props }: MicroLabelProps) {
+  return (
+    <Tag
+      data-slot="micro-label"
+      className={cn("text-muted-foreground text-xs font-semibold tracking-wider uppercase", className)}
+      {...props}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+export { MicroLabel };
+export type { MicroLabelProps };

package/src/components/typography/SectionHeader.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { cn } from "../../utils/cn";
+
+type SectionHeaderProps = React.ComponentProps<"h3"> & {
+  level?: 2 | 3;
+};
+
+function SectionHeader({ level = 3, className, children, ...props }: SectionHeaderProps) {
+  const Tag = level === 2 ? "h2" : "h3";
+  return (
+    <Tag data-slot="section-header" className={cn("text-lg font-semibold", className)} {...props}>
+      {children}
+    </Tag>
+  );
+}
+
+export { SectionHeader };
+export type { SectionHeaderProps };

package/src/components/typography/index.ts

@@ -0,0 +1,6 @@
+export { SectionHeader } from "./SectionHeader";
+export type { SectionHeaderProps } from "./SectionHeader";
+export { MicroLabel } from "./MicroLabel";
+export type { MicroLabelProps } from "./MicroLabel";
+export { DetailField } from "./DetailField";
+export type { DetailFieldProps } from "./DetailField";

package/src/features/assistant/components/parts/AssistantEmptyState.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import { useTranslations } from "next-intl";
 import { Sparkles } from "lucide-react";
 import { Label, Switch } from "../../../../shadcnui";
+import { SectionHeader } from "../../../../components/typography";
 import { AssistantComposer } from "./AssistantComposer";
 
 interface Props {
@@ -30,7 +31,7 @@ export function AssistantEmptyState({ onSend, operatorMode = false, onOperatorMo
           <div className="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-blue-400 to-violet-500 text-white">
             <Sparkles className="h-5 w-5" />
           </div>
-          <h3 className="text-foreground text-xl font-semibold">{t("features.assistant.empty_state.title")}</h3>
+          <SectionHeader>{t("features.assistant.empty_state.title")}</SectionHeader>
           <p className="text-muted-foreground mt-1 text-sm">{t("features.assistant.empty_state.subtitle")}</p>
         </div>
         <AssistantComposer value={draft} onValueChange={setDraft} onSend={onSend} />

package/src/features/assistant/components/parts/AssistantSidebar.tsx

@@ -3,6 +3,7 @@
 import { useTranslations } from "next-intl";
 import { Plus } from "lucide-react";
 import { Button } from "../../../../shadcnui";
+import { MicroLabel } from "../../../../components/typography";
 import type { AssistantInterface } from "../../data/AssistantInterface";
 import { groupThreadsByBucket } from "../../utils/groupThreadsByBucket";
 
@@ -21,7 +22,7 @@ export function AssistantSidebar({ threads, activeId, onSelect, onNew }: Props)
     if (items.length === 0) return null;
     return (
       <div className="mb-2">
-        <div className="text-muted-foreground px-2 py-1 text-xs font-semibold uppercase tracking-wider">{label}</div>
+        <MicroLabel className="px-2 py-1">{label}</MicroLabel>
         {items.map((thread) => (
           <button
             key={thread.id}

package/src/features/auth/components/buttons/GoogleSignInButton.tsx

@@ -23,7 +23,7 @@ export function GoogleSignInButton({ referralCode }: GoogleSignInButtonProps) {
   return (
     <Link href={buildGoogleOAuthUrl()} className="flex w-full justify-end">
       <Button
-        className="w-full bg-white hover:bg-gray-50 text-gray-700 border border-gray-300"
+        className="text-muted-foreground w-full border border-gray-300 bg-white hover:bg-gray-50"
         variant="outline"
         data-testid="page-login-button-google"
       >

package/src/features/auth/components/forms/Register.tsx

@@ -300,7 +300,7 @@ export default function Register() {
                           className="flex w-full"
                         >
                           <Button
-                            className="w-full bg-white hover:bg-gray-50 text-gray-700 border border-gray-300"
+                            className="text-muted-foreground w-full border border-gray-300 bg-white hover:bg-gray-50"
                             variant="outline"
                             type="button"
                           >

package/src/features/auth/components/forms/TwoFactorChallenge.tsx

@@ -120,7 +120,7 @@ export function TwoFactorChallenge() {
   return (
     <>
       <CardHeader data-testid="page-2fa-challenge">
-        <CardTitle className="text-primary text-2xl">{t("auth.two_factor.verification_required")}</CardTitle>
+        <CardTitle className="text-primary">{t("auth.two_factor.verification_required")}</CardTitle>
         <CardDescription>{t("auth.two_factor.enter_verification_code")}</CardDescription>
       </CardHeader>
       <CardContent>
@@ -180,11 +180,11 @@ export function TwoFactorChallenge() {
                   onChange={(e) => setBackupCode(e.target.value.toUpperCase())}
                   placeholder="XXXXXXXX"
                   maxLength={8}
-                  className={`w-48 text-center font-mono uppercase ${backupError ? "border-destructive" : ""}`}
+                  className={`w-48 text-center tabular-nums uppercase ${backupError ? "border-destructive" : ""}`}
                   disabled={isVerifying}
                   data-testid="backup-code-input"
                 />
-                {backupError && <p className="text-sm text-destructive">{backupError}</p>}
+                {backupError && <p className="text-destructive text-xs/relaxed">{backupError}</p>}
                 <Button
                   onClick={handleBackupSubmit}
                   disabled={isVerifying || backupCode.length < 8}

package/src/features/auth/components/two-factor/BackupCodesDialog.tsx

@@ -122,7 +122,7 @@ export function BackupCodesDialog({ remainingCodes, onRegenerate, trigger }: Bac
           </div>
         ) : (
           <div className="flex flex-col gap-4">
-            <div className="grid grid-cols-2 gap-2 p-4 bg-muted rounded-lg font-mono text-sm">
+            <div className="grid grid-cols-2 gap-2 p-4 bg-muted rounded-lg tabular-nums text-sm">
               {codes.map((code, index) => (
                 <div key={index} className="text-center" data-testid={`backup-code-${index}`}>
                   {code}

package/src/features/auth/components/two-factor/TotpInput.tsx

@@ -75,13 +75,13 @@ export function TotpInput({ onComplete, disabled = false, autoFocus = true, erro
             onKeyDown={(e) => handleKeyDown(index, e)}
             onPaste={handlePaste}
             disabled={disabled}
-            className={`w-12 h-14 text-center text-2xl font-mono ${error ? "border-destructive" : ""}`}
+            className={`w-12 h-14 text-center text-2xl tabular-nums ${error ? "border-destructive" : ""}`}
             data-testid={`totp-input-${index}`}
           />
         ))}
       </div>
       {error && (
-        <p className="text-sm text-destructive" data-testid="totp-error">
+        <p className="text-destructive text-xs/relaxed" data-testid="totp-error">
           {error}
         </p>
       )}

package/src/features/auth/components/two-factor/TwoFactorSettings.tsx

@@ -84,9 +84,9 @@ export function TwoFactorSettings() {
       <CardHeader>
         <div className="flex items-center gap-2">
           {isEnabled ? (
-            <ShieldCheck className="h-6 w-6 text-green-600" />
+            <ShieldCheck className="text-success h-6 w-6" />
           ) : (
-            <ShieldAlert className="h-6 w-6 text-yellow-600" />
+            <ShieldAlert className="text-warning h-6 w-6" />
           )}
           <div>
             <CardTitle>{t("auth.two_factor.title")}</CardTitle>
@@ -146,7 +146,7 @@ export function TwoFactorSettings() {
             <Separator />
             <div className="flex items-center justify-between">
               <div>
-                <h3 className="font-medium text-green-600">{t("auth.two_factor.enable_2fa")}</h3>
+                <h3 className="text-success font-medium">{t("auth.two_factor.enable_2fa")}</h3>
                 <p className="text-sm text-muted-foreground">{t("auth.two_factor.enable_description")}</p>
               </div>
               <Button onClick={handleEnable2FA} disabled={isEnabling}>

package/src/features/billing/components/cards/BillingUsageSummaryCard.tsx

@@ -30,7 +30,7 @@ export function BillingUsageSummaryCard({
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Usage This Month</CardTitle>
+          <CardTitle>Usage This Month</CardTitle>
           <Activity className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
@@ -45,11 +45,11 @@ export function BillingUsageSummaryCard({
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Usage This Month</CardTitle>
+          <CardTitle>Usage This Month</CardTitle>
           <Activity className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
-          <p className="text-sm text-destructive">{error}</p>
+          <p className="text-destructive text-xs/relaxed">{error}</p>
         </CardContent>
       </Card>
     );
@@ -67,7 +67,7 @@ export function BillingUsageSummaryCard({
   return (
     <Card className="cursor-pointer hover:bg-accent/50 transition-colors" onClick={onViewDetailsClick}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">Usage This Month</CardTitle>
+        <CardTitle>Usage This Month</CardTitle>
         <Activity className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>

package/src/features/billing/components/cards/CustomerInfoCard.tsx

@@ -42,7 +42,7 @@ export function CustomerInfoCard({ customer, loading, error }: CustomerInfoCardP
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Billing Account</CardTitle>
+          <CardTitle>Billing Account</CardTitle>
           <User className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
@@ -58,11 +58,11 @@ export function CustomerInfoCard({ customer, loading, error }: CustomerInfoCardP
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Billing Account</CardTitle>
+          <CardTitle>Billing Account</CardTitle>
           <User className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
-          <p className="text-sm text-destructive">{error}</p>
+          <p className="text-destructive text-xs/relaxed">{error}</p>
         </CardContent>
       </Card>
     );
@@ -72,7 +72,7 @@ export function CustomerInfoCard({ customer, loading, error }: CustomerInfoCardP
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Billing Account</CardTitle>
+          <CardTitle>Billing Account</CardTitle>
           <User className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
@@ -86,7 +86,7 @@ export function CustomerInfoCard({ customer, loading, error }: CustomerInfoCardP
   return (
     <Card>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">Billing Account</CardTitle>
+        <CardTitle>Billing Account</CardTitle>
         <User className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
@@ -96,7 +96,7 @@ export function CustomerInfoCard({ customer, loading, error }: CustomerInfoCardP
           {customer.balance !== undefined && customer.balance !== 0 && (
             <p className="text-sm">
               <span className="text-muted-foreground">Credit Balance: </span>
-              <span className={customer.balance < 0 ? "text-green-600" : "text-destructive"}>
+              <span className={customer.balance < 0 ? "text-success" : "text-destructive"}>
                 {formatBalance(customer.balance, customer.currency)}
               </span>
             </p>

package/src/features/billing/components/cards/InvoicesSummaryCard.tsx

@@ -46,7 +46,7 @@ export function InvoicesSummaryCard({ invoices, loading, error, onViewAllClick }
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Recent Invoices</CardTitle>
+          <CardTitle>Recent Invoices</CardTitle>
           <ReceiptIcon className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
@@ -62,11 +62,11 @@ export function InvoicesSummaryCard({ invoices, loading, error, onViewAllClick }
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Recent Invoices</CardTitle>
+          <CardTitle>Recent Invoices</CardTitle>
           <ReceiptIcon className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
-          <p className="text-sm text-destructive">{error}</p>
+          <p className="text-destructive text-xs/relaxed">{error}</p>
         </CardContent>
       </Card>
     );
@@ -80,7 +80,7 @@ export function InvoicesSummaryCard({ invoices, loading, error, onViewAllClick }
   return (
     <Card className="cursor-pointer hover:bg-accent/50 transition-colors" onClick={onViewAllClick}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">Recent Invoices</CardTitle>
+        <CardTitle>Recent Invoices</CardTitle>
         <ReceiptIcon className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>
@@ -100,7 +100,7 @@ export function InvoicesSummaryCard({ invoices, loading, error, onViewAllClick }
             </p>
             <div className="flex items-center gap-4 text-xs text-muted-foreground">
               {paidInvoices.length > 0 && <span>{paidInvoices.length} paid</span>}
-              {openInvoices.length > 0 && <span className="text-orange-600">{openInvoices.length} open</span>}
+              {openInvoices.length > 0 && <span className="text-warning">{openInvoices.length} open</span>}
               <span className="flex items-center">
                 View all
                 <ChevronRight className="h-3 w-3 ml-1" />

package/src/features/billing/components/cards/PaymentMethodSummaryCard.tsx

@@ -36,7 +36,7 @@ export function PaymentMethodSummaryCard({
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Payment Method</CardTitle>
+          <CardTitle>Payment Method</CardTitle>
           <Wallet className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
@@ -51,11 +51,11 @@ export function PaymentMethodSummaryCard({
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Payment Method</CardTitle>
+          <CardTitle>Payment Method</CardTitle>
           <Wallet className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
-          <p className="text-sm text-destructive">{error}</p>
+          <p className="text-destructive text-xs/relaxed">{error}</p>
         </CardContent>
       </Card>
     );
@@ -67,7 +67,7 @@ export function PaymentMethodSummaryCard({
   return (
     <Card className="cursor-pointer hover:bg-accent/50 transition-colors" onClick={onManageClick}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">Payment Method</CardTitle>
+        <CardTitle>Payment Method</CardTitle>
         <Wallet className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>

package/src/features/billing/components/cards/SubscriptionSummaryCard.tsx

@@ -54,7 +54,7 @@ export function SubscriptionSummaryCard({
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
+          <CardTitle>Subscriptions</CardTitle>
           <CreditCard className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
@@ -70,11 +70,11 @@ export function SubscriptionSummaryCard({
     return (
       <Card>
         <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
+          <CardTitle>Subscriptions</CardTitle>
           <CreditCard className="h-4 w-4 text-muted-foreground" />
         </CardHeader>
         <CardContent>
-          <p className="text-sm text-destructive">{error}</p>
+          <p className="text-destructive text-xs/relaxed">{error}</p>
         </CardContent>
       </Card>
     );
@@ -88,7 +88,7 @@ export function SubscriptionSummaryCard({
   return (
     <Card className="cursor-pointer hover:bg-accent/50 transition-colors" onClick={onManageClick}>
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-        <CardTitle className="text-sm font-medium">Subscriptions</CardTitle>
+        <CardTitle>Subscriptions</CardTitle>
         <CreditCard className="h-4 w-4 text-muted-foreground" />
       </CardHeader>
       <CardContent>

package/src/features/billing/components/containers/BillingDashboardContainer.tsx

@@ -328,7 +328,7 @@ export function BillingDashboardContainer() {
       {/* Header */}
       <div className="flex items-center gap-x-3">
         <Wallet className="h-8 w-8" />
-        <h1 className="text-3xl font-bold">Billing</h1>
+        <h1 className="text-primary text-3xl font-semibold">Billing</h1>
       </div>
 
       {/* Initial Loading State */}
@@ -367,7 +367,7 @@ export function BillingDashboardContainer() {
           </CardContent>
           {errors.customer && (
             <CardContent className="pt-0">
-              <p className="text-center text-sm text-destructive">{errors.customer}</p>
+              <p className="text-center text-destructive text-xs/relaxed">{errors.customer}</p>
             </CardContent>
           )}
         </Card>