From 2b10ffb5eec07765eecb7dd9d8b86832fcf165d7 Mon Sep 17 00:00:00 2001
From: blueogin <grilucosy@gmail.com>
Date: Thu, 27 Aug 2026 11:17:08 -0400
Subject: [PATCH 1/3] fix: update background color to "$backgroundSurface" for
 consistency across components

---
 .../ai-credits-widget/src/components/buy/BuyerKeyPanel.tsx    | 4 ++--
 .../src/components/buy/OperatorConsentStep.tsx                | 4 ++--
 .../src/components/manage/BuyerOperatorCard.tsx               | 2 +-
 .../ai-credits-widget/src/components/manage/SetupSnippet.tsx  | 2 +-
 .../ai-credits-widget/src/components/setup/HowToUseView.tsx   | 4 ++--
 .../ai-credits-widget/src/components/setup/SignerKeyPanel.tsx | 1 -
 .../ai-credits-widget/src/components/shared/AddressView.tsx   | 3 +--
 7 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/ai-credits-widget/src/components/buy/BuyerKeyPanel.tsx b/packages/ai-credits-widget/src/components/buy/BuyerKeyPanel.tsx
index 5a1e92e5..063bab27 100644
--- a/packages/ai-credits-widget/src/components/buy/BuyerKeyPanel.tsx
+++ b/packages/ai-credits-widget/src/components/buy/BuyerKeyPanel.tsx
@@ -62,7 +62,7 @@ export function BuyerKeyPanel({
               Address (registered on-chain)
             </Text>
             <XStack
-              backgroundColor="$backgroundMuted"
+              backgroundColor="$backgroundSurface"
               borderRadius="$2"
               padding="$3"
               justifyContent="space-between"
@@ -109,7 +109,7 @@ export function BuyerKeyPanel({
                   </Text>
                 </AiCreditsStatusNotice>
                 <XStack
-                  backgroundColor="$backgroundMuted"
+                  backgroundColor="$backgroundSurface"
                   borderRadius="$2"
                   padding="$3"
                   justifyContent="space-between"
diff --git a/packages/ai-credits-widget/src/components/buy/OperatorConsentStep.tsx b/packages/ai-credits-widget/src/components/buy/OperatorConsentStep.tsx
index fa840224..ec80806b 100644
--- a/packages/ai-credits-widget/src/components/buy/OperatorConsentStep.tsx
+++ b/packages/ai-credits-widget/src/components/buy/OperatorConsentStep.tsx
@@ -12,7 +12,7 @@ import {
   XStack,
   YStack,
 } from '@goodwidget/ui'
-import { truncateAddress, compactButtonProps } from '../shared/styles'
+import { truncateAddress, compactButtonProps, monospaceSingleLineStyle } from '../shared/styles'
 
 interface OperatorConsentStepProps {
   buyerPubKey: string | null
@@ -110,7 +110,7 @@ export function OperatorConsentStep({
       {buyerPubKey && (
         <Text fontSize="$2" lineHeight="$2">
           Buyer address:{' '}
-          <Text fontFamily="$mono" fontSize="$2">
+          <Text fontSize="$2" style={monospaceSingleLineStyle}>
             {truncateAddress(buyerPubKey)}
           </Text>
         </Text>
diff --git a/packages/ai-credits-widget/src/components/manage/BuyerOperatorCard.tsx b/packages/ai-credits-widget/src/components/manage/BuyerOperatorCard.tsx
index 840c5cf5..bd04c489 100644
--- a/packages/ai-credits-widget/src/components/manage/BuyerOperatorCard.tsx
+++ b/packages/ai-credits-widget/src/components/manage/BuyerOperatorCard.tsx
@@ -60,7 +60,7 @@ function CopyableValue({ value, display }: { value: string; display?: string })
 
   return (
     <XStack
-      backgroundColor="$backgroundMuted"
+      backgroundColor="$backgroundSurface"
       borderRadius="$2"
       padding="$2"
       justifyContent="space-between"
diff --git a/packages/ai-credits-widget/src/components/manage/SetupSnippet.tsx b/packages/ai-credits-widget/src/components/manage/SetupSnippet.tsx
index 707131f9..edc58381 100644
--- a/packages/ai-credits-widget/src/components/manage/SetupSnippet.tsx
+++ b/packages/ai-credits-widget/src/components/manage/SetupSnippet.tsx
@@ -69,7 +69,7 @@ export function SetupSnippet() {
       {expanded && (
         <YStack gap="$2">
           <YStack
-            backgroundColor="$backgroundMuted"
+            backgroundColor="$backgroundSurface"
             borderRadius="$2"
             padding="$3"
             width="100%"
diff --git a/packages/ai-credits-widget/src/components/setup/HowToUseView.tsx b/packages/ai-credits-widget/src/components/setup/HowToUseView.tsx
index 2c0ff569..afc03159 100644
--- a/packages/ai-credits-widget/src/components/setup/HowToUseView.tsx
+++ b/packages/ai-credits-widget/src/components/setup/HowToUseView.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { Anchor, Badge, BadgeText, Button, ButtonText, Card, Icon, Text, XStack, YStack } from '@goodwidget/ui'
 
-/** YouTube video URL for the getting-started walkthrough. Replace with final video ID once published. */
-const VIDEO_URL = 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
+/** YouTube video URL for the getting-started walkthrough.*/
+const VIDEO_URL = 'https://youtu.be/Anb2GkLqs24'
 
 /** Notion written guide URL. */
 const WRITTEN_GUIDE_URL = 'https://app.notion.com/p/gooddollar/Full-Setup-Walkthrough-Widget-AntSeed-VPR-3c0f258232f08184bee9cd440cc93059'
diff --git a/packages/ai-credits-widget/src/components/setup/SignerKeyPanel.tsx b/packages/ai-credits-widget/src/components/setup/SignerKeyPanel.tsx
index ddd79621..cb389459 100644
--- a/packages/ai-credits-widget/src/components/setup/SignerKeyPanel.tsx
+++ b/packages/ai-credits-widget/src/components/setup/SignerKeyPanel.tsx
@@ -182,7 +182,6 @@ export function SignerKeyPanel({
         flex={compact ? undefined : 1}
         alignSelf={compact ? 'stretch' : undefined}
         size={compact ? 'sm' : 'lg'}
-        variant="outline"
         {...compactButtonProps}
         onPress={() => setChoice('generate')}
       >
diff --git a/packages/ai-credits-widget/src/components/shared/AddressView.tsx b/packages/ai-credits-widget/src/components/shared/AddressView.tsx
index df5291b1..b90f85ec 100644
--- a/packages/ai-credits-widget/src/components/shared/AddressView.tsx
+++ b/packages/ai-credits-widget/src/components/shared/AddressView.tsx
@@ -11,7 +11,7 @@ export function AddressView({ label, address }: { label: string; address: string
         {label}
       </Text>
       <XStack
-        backgroundColor="$backgroundMuted"
+        backgroundColor="$backgroundSurface"
         borderRadius="$2"
         padding="$2"
         justifyContent="space-between"
@@ -19,7 +19,6 @@ export function AddressView({ label, address }: { label: string; address: string
       >
         <Text
           fontSize="$2"
-          fontFamily="$mono"
           flex={1}
           numberOfLines={1}
           style={monospaceSingleLineStyle}

From 73f7428f9ecc551b76415d16299abce6e149dd09 Mon Sep 17 00:00:00 2001
From: blueogin <grilucosy@gmail.com>
Date: Thu, 27 Aug 2026 11:40:37 -0400
Subject: [PATCH 2/3] fix: update text tone to "soft" for improved readability
 across components

---
 .../ai-credits-widget/src/AiCreditsWidget.tsx | 24 +++++++++----------
 .../src/components/buy/AiCreditsHero.tsx      |  2 +-
 .../src/components/buy/AmountPicker.tsx       | 12 +++++-----
 .../src/components/buy/BuyerKeyPanel.tsx      |  6 ++---
 .../components/buy/OperatorConsentStep.tsx    |  6 ++---
 .../src/components/history/HistoryTab.tsx     | 16 ++++++-------
 .../components/manage/BuyerOperatorCard.tsx   |  8 +++----
 .../manage/CreditsManagementCard.tsx          |  6 ++---
 .../src/components/manage/SetupSnippet.tsx    |  2 +-
 .../src/components/setup/AntseedSignerRow.tsx |  2 +-
 .../src/components/setup/HowToUseView.tsx     | 12 +++++-----
 .../components/setup/SetupBonusHighlight.tsx  |  6 ++---
 .../src/components/setup/SetupFaqView.tsx     |  2 +-
 .../components/setup/SetupGuidanceCard.tsx    |  8 +++----
 .../src/components/setup/SignerKeyPanel.tsx   | 12 +++++-----
 .../src/components/shared/AddressView.tsx     |  2 +-
 16 files changed, 63 insertions(+), 63 deletions(-)

diff --git a/packages/ai-credits-widget/src/AiCreditsWidget.tsx b/packages/ai-credits-widget/src/AiCreditsWidget.tsx
index de3c3a94..1951d362 100644
--- a/packages/ai-credits-widget/src/AiCreditsWidget.tsx
+++ b/packages/ai-credits-widget/src/AiCreditsWidget.tsx
@@ -75,7 +75,7 @@ function SetupConnectPrompt({
 }) {
   return (
     <YStack gap="$5" alignItems="center" paddingVertical="$6" width="100%">
-      <Text secondary center>
+      <Text tone="soft" center>
         Connect your wallet to get started
       </Text>
       <CircularActionButton
@@ -115,7 +115,7 @@ function SetupTabPanel({
         gBalance={state.gBalance}
         isGoodIdVerified={state.isGoodIdVerified}
       />
-      <Text secondary fontSize="$2">
+      <Text tone="soft" fontSize="$2">
         One-time setup — optional for now. Take the steps in any order, or skip ahead and come
         back when you are ready to buy.
       </Text>
@@ -170,7 +170,7 @@ function SwitchChainNotice({
           Wrong Network
         </Text>
       </XStack>
-      <Text secondary>Please switch to the Celo network to continue.</Text>
+      <Text tone="soft">Please switch to the Celo network to continue.</Text>
       <Button
         disabled={switching}
         onPress={() => {
@@ -191,7 +191,7 @@ function SwitchChainNotice({
           <Text color="$error" fontSize="$2">
             {shownError}
           </Text>
-          <Text secondary fontSize="$2">
+          <Text tone="soft" fontSize="$2">
             Some wallets cannot switch networks from a website. Change the network to Celo in your
             wallet app, then return here.
           </Text>
@@ -220,7 +220,7 @@ function BuyCreditsPanel({ state, actions, isPending, onPay }: BuyPanelProps) {
           <Text color="$error" fontWeight="700">
             Payment Failed
           </Text>
-          {state.error && <Text secondary>{state.error}</Text>}
+          {state.error && <Text tone="soft">{state.error}</Text>}
         </AiCreditsStatusNotice>
         <AiCreditsPurchaseFlow
           state={state}
@@ -236,7 +236,7 @@ function BuyCreditsPanel({ state, actions, isPending, onPay }: BuyPanelProps) {
         <Text color="$warning" fontWeight="700">
           Service Unavailable
         </Text>
-        <Text secondary>
+        <Text tone="soft">
           The AI credits service is temporarily unavailable. Your wallet has not been charged.
         </Text>
         <Button
@@ -259,7 +259,7 @@ function BuyCreditsPanel({ state, actions, isPending, onPay }: BuyPanelProps) {
           <Text color="$warning" fontWeight="700">
             Insufficient G$ Balance
           </Text>
-          <Text secondary>
+          <Text tone="soft">
             You need at least 1 G$ to purchase AI credits. Top up your wallet and try again.
           </Text>
         </AiCreditsStatusNotice>
@@ -275,7 +275,7 @@ function BuyCreditsPanel({ state, actions, isPending, onPay }: BuyPanelProps) {
       <Card>
         <YStack gap="$4" alignItems="center" padding="$4">
           <Spinner size="lg" />
-          <Text center secondary>
+          <Text center tone="soft">
             {message}
           </Text>
         </YStack>
@@ -289,7 +289,7 @@ function BuyCreditsPanel({ state, actions, isPending, onPay }: BuyPanelProps) {
             <Text color="$error" fontWeight="700">
               Deep link unavailable
             </Text>
-            <Text secondary>{state.error}</Text>
+            <Text tone="soft">{state.error}</Text>
           </AiCreditsStatusNotice>
         )}
 
@@ -305,13 +305,13 @@ function BuyCreditsPanel({ state, actions, isPending, onPay }: BuyPanelProps) {
             <Text color="$error" fontWeight="700">
               Request Failed
             </Text>
-            <Text secondary>{state.error}</Text>
+            <Text tone="soft">{state.error}</Text>
           </AiCreditsStatusNotice>
         )}
 
         {state.gBalance !== null && Number.parseFloat(state.gBalance) <= 0 && (
           <AiCreditsStatusNotice>
-            <Text secondary>You need G$ before you can buy AI credits.</Text>
+            <Text tone="soft">You need G$ before you can buy AI credits.</Text>
           </AiCreditsStatusNotice>
         )}
 
@@ -618,7 +618,7 @@ export function AiCreditsWidget({
       themeOverrides={themeOverrides}
       defaultTheme={defaultTheme}
     >
-      <YStack backgroundColor="$background" width="100%" data-testid={testId}>
+      <YStack backgroundColor="$backgroundSurface" width="100%" data-testid={testId}>
         <AiCreditsInner
           environment={environment}
           backendUrl={backendUrl}
diff --git a/packages/ai-credits-widget/src/components/buy/AiCreditsHero.tsx b/packages/ai-credits-widget/src/components/buy/AiCreditsHero.tsx
index bfb4d936..34fe3b0e 100644
--- a/packages/ai-credits-widget/src/components/buy/AiCreditsHero.tsx
+++ b/packages/ai-credits-widget/src/components/buy/AiCreditsHero.tsx
@@ -14,7 +14,7 @@ export function AiCreditsHero({ gBalance, isGoodIdVerified }: HeroCardProps) {
     <Card gap="$4" backgroundColor="$backgroundHover">
       <XStack justifyContent="space-between" alignItems="flex-start" gap="$2">
         <YStack gap="$1" flexShrink={1}>
-          <Text variant="label" secondary>
+          <Text variant="label" tone="soft">
             Your G$ Balance
           </Text>
           {gBalance !== null ? (
diff --git a/packages/ai-credits-widget/src/components/buy/AmountPicker.tsx b/packages/ai-credits-widget/src/components/buy/AmountPicker.tsx
index 3e1ac70d..5afd1726 100644
--- a/packages/ai-credits-widget/src/components/buy/AmountPicker.tsx
+++ b/packages/ai-credits-widget/src/components/buy/AmountPicker.tsx
@@ -256,14 +256,14 @@ export function AmountPicker({
       <XStack justifyContent="space-between" alignItems="center" gap="$2">
         <Heading level={5}>Buy Credits</Heading>
         {usd1ToGLabel && (
-          <Text fontSize="$2" secondary flexShrink={1} textAlign="right">
+          <Text fontSize="$2" tone="soft" flexShrink={1} textAlign="right">
             US$1 ≈ {usd1ToGLabel} G$
           </Text>
         )}
       </XStack>
 
       <XStack justifyContent="space-between" alignItems="center">
-        <Text variant="label" secondary>
+        <Text variant="label" tone="soft">
           Your G$ Balance
         </Text>
         {gBalance !== null ? (
@@ -286,7 +286,7 @@ export function AmountPicker({
         />
         <XStack justifyContent="space-between" alignItems="center" gap="$2">
           {depositG > 0 && depositEstUsd ? (
-            <Text fontSize="$1" secondary>
+            <Text fontSize="$1" tone="soft">
               ≈ {depositEstUsd}
             </Text>
           ) : depositG > 0 && quotePending ? (
@@ -294,7 +294,7 @@ export function AmountPicker({
           ) : (
             <YStack />
           )}
-          <Text fontSize="$1" secondary textAlign="right" flexShrink={0}>
+          <Text fontSize="$1" tone="soft" textAlign="right" flexShrink={0}>
             {depositMinUsdLabel}
           </Text>
         </XStack>
@@ -315,7 +315,7 @@ export function AmountPicker({
         />
         <XStack justifyContent="space-between" alignItems="center" gap="$2">
           {streamG > 0 && streamEstUsd ? (
-            <Text fontSize="$1" secondary>
+            <Text fontSize="$1" tone="soft">
               ≈ {streamEstUsd}/month
             </Text>
           ) : streamG > 0 && quotePending ? (
@@ -323,7 +323,7 @@ export function AmountPicker({
           ) : (
             <YStack />
           )}
-          <Text fontSize="$1" secondary textAlign="right" flexShrink={0}>
+          <Text fontSize="$1" tone="soft" textAlign="right" flexShrink={0}>
             {streamMinUsdLabel}
           </Text>
         </XStack>
diff --git a/packages/ai-credits-widget/src/components/buy/BuyerKeyPanel.tsx b/packages/ai-credits-widget/src/components/buy/BuyerKeyPanel.tsx
index 063bab27..0807d334 100644
--- a/packages/ai-credits-widget/src/components/buy/BuyerKeyPanel.tsx
+++ b/packages/ai-credits-widget/src/components/buy/BuyerKeyPanel.tsx
@@ -58,7 +58,7 @@ export function BuyerKeyPanel({
 
         {buyerPubKey && (
           <YStack gap="$2">
-            <Text variant="label" secondary>
+            <Text variant="label" tone="soft">
               Address (registered on-chain)
             </Text>
             <XStack
@@ -89,7 +89,7 @@ export function BuyerKeyPanel({
                   </Text>
                 </AiCreditsStatusNotice>
                 <XStack justifyContent="space-between" alignItems="center">
-                  <Text variant="label" secondary>
+                  <Text variant="label" tone="soft">
                     Private Key — save this securely
                   </Text>
                   <Button
@@ -134,7 +134,7 @@ export function BuyerKeyPanel({
                   </Button>
                 </XStack>
                 <AntseedSignerRow mode="generate" />
-                <Text fontSize="$2" secondary>
+                <Text fontSize="$2" tone="soft">
                   The public address above is the signer identity used for AI credits.
                 </Text>
               </>
diff --git a/packages/ai-credits-widget/src/components/buy/OperatorConsentStep.tsx b/packages/ai-credits-widget/src/components/buy/OperatorConsentStep.tsx
index ec80806b..18dfce76 100644
--- a/packages/ai-credits-widget/src/components/buy/OperatorConsentStep.tsx
+++ b/packages/ai-credits-widget/src/components/buy/OperatorConsentStep.tsx
@@ -31,10 +31,10 @@ interface OperatorConsentStepProps {
 function ConsentBullet({ children }: { children: React.ReactNode }) {
   return (
     <XStack gap="$2" alignItems="flex-start">
-      <Text fontSize="$2" secondary lineHeight="$3">
+      <Text fontSize="$2" tone="soft" lineHeight="$3">
         •
       </Text>
-      <Text fontSize="$2" secondary lineHeight="$3" flex={1}>
+      <Text fontSize="$2" tone="soft" lineHeight="$3" flex={1}>
         {children}
       </Text>
     </XStack>
@@ -128,7 +128,7 @@ export function OperatorConsentStep({
         </Text>
       ) : canRestoreKey ? (
         <>
-          <Text fontSize="$2" secondary lineHeight="$3">
+          <Text fontSize="$2" tone="soft" lineHeight="$3">
             This browser does not hold your signer key. Restore it from your wallet to continue —
             the same wallet always produces the same key.
           </Text>
diff --git a/packages/ai-credits-widget/src/components/history/HistoryTab.tsx b/packages/ai-credits-widget/src/components/history/HistoryTab.tsx
index d73bae6e..eebae4e7 100644
--- a/packages/ai-credits-widget/src/components/history/HistoryTab.tsx
+++ b/packages/ai-credits-widget/src/components/history/HistoryTab.tsx
@@ -119,7 +119,7 @@ function entryDetailRows(entry: GdCreditEntry): { label: string; value: string }
 function EntryDetailRow({ label, value }: { label: string; value: string }) {
   return (
     <XStack gap="$2" alignItems="flex-start" width="100%">
-      <Text fontSize="$1" fontWeight="600" secondary minWidth={72} flexShrink={0}>
+      <Text fontSize="$1" fontWeight="600" tone="soft" minWidth={72} flexShrink={0}>
         {label}
       </Text>
       <Text
@@ -314,7 +314,7 @@ function CreditHistoryEntryRow({
               {amounts.secondary}
             </Text>
           ) : null}
-          <Text fontSize="$1" secondary>
+          <Text fontSize="$1" tone="soft">
             {formatEntryDate(entry.createdAt)}
           </Text>
         </YStack>
@@ -575,14 +575,14 @@ export function HistoryTab({ state, actions, knownBuyers = [] }: HistoryTabProps
         <XStack alignItems="flex-start" justifyContent="space-between" gap="$2" width="100%">
           <YStack flex={1} gap="$0.5" minWidth={0}>
             <Heading level={4}>AI Credit History</Heading>
-            <Text fontSize="$1" secondary>
+            <Text fontSize="$1" tone="soft">
               {rangeSummary}
             </Text>
           </YStack>
         </XStack>
 
         <YStack gap="$1">
-          <Text fontSize="$1" fontWeight="600" secondary letterSpacing={0.6}>
+          <Text fontSize="$1" fontWeight="600" tone="soft" letterSpacing={0.6}>
             TOTAL ACCUMULATED
           </Text>
           <Text fontSize="$7" fontWeight="700" color="$color">
@@ -638,7 +638,7 @@ export function HistoryTab({ state, actions, knownBuyers = [] }: HistoryTabProps
       </XStack>
 
       <XStack alignItems="center" justifyContent="space-between" gap="$2" width="100%">
-        <Text fontSize="$1" fontWeight="700" secondary letterSpacing={0.6}>
+        <Text fontSize="$1" fontWeight="700" tone="soft" letterSpacing={0.6}>
           CREDIT HISTORY
         </Text>
         <XStack
@@ -665,7 +665,7 @@ export function HistoryTab({ state, actions, knownBuyers = [] }: HistoryTabProps
         <Card gap="$2">
           <YStack alignItems="center" paddingVertical="$4" gap="$2">
             <Spinner size="sm" />
-            <Text fontSize="$2" secondary>
+            <Text fontSize="$2" tone="soft">
               Loading credit history…
             </Text>
           </YStack>
@@ -691,13 +691,13 @@ export function HistoryTab({ state, actions, knownBuyers = [] }: HistoryTabProps
         </Card>
       ) : activeSources.length === 0 ? (
         <Card>
-          <Text fontSize="$2" secondary>
+          <Text fontSize="$2" tone="soft">
             Select at least one source to view history.
           </Text>
         </Card>
       ) : entries.length === 0 ? (
         <Card>
-          <Text fontSize="$2" secondary>
+          <Text fontSize="$2" tone="soft">
             No credit history matches these filters.
           </Text>
         </Card>
diff --git a/packages/ai-credits-widget/src/components/manage/BuyerOperatorCard.tsx b/packages/ai-credits-widget/src/components/manage/BuyerOperatorCard.tsx
index bd04c489..f7e568c7 100644
--- a/packages/ai-credits-widget/src/components/manage/BuyerOperatorCard.tsx
+++ b/packages/ai-credits-widget/src/components/manage/BuyerOperatorCard.tsx
@@ -209,13 +209,13 @@ export function BuyerOperatorCard({ state, actions }: BuyerOperatorCardProps) {
             <XStack alignItems="center" flexWrap="wrap">
               {/* Separators carry their own spacing: adjacent Text renders inline, so
                   the flex gap between two of them collapses. */}
-              <Text fontSize="$1" secondary style={monospaceSingleLineStyle}>
+              <Text fontSize="$1" tone="soft" style={monospaceSingleLineStyle}>
                 {`${truncateAddress(buyerPubKey)}  ·  `}
               </Text>
               <SignerStatus consented={operatorConsented} />
             </XStack>
           ) : (
-            <Text fontSize="$1" secondary>
+            <Text fontSize="$1" tone="soft">
               No signer key yet
             </Text>
           )}
@@ -227,7 +227,7 @@ export function BuyerOperatorCard({ state, actions }: BuyerOperatorCardProps) {
         <YStack gap="$4">
           {buyerPubKey && (
             <YStack gap="$2">
-              <Text variant="label" secondary>
+              <Text variant="label" tone="soft">
                 Active signer
               </Text>
               <YStack
@@ -301,7 +301,7 @@ export function BuyerOperatorCard({ state, actions }: BuyerOperatorCardProps) {
           {buyerPrvKey && (
             <YStack gap="$2">
               <XStack justifyContent="space-between" alignItems="center" gap="$2">
-                <Text variant="label" secondary>
+                <Text variant="label" tone="soft">
                   Private key
                 </Text>
                 <Button
diff --git a/packages/ai-credits-widget/src/components/manage/CreditsManagementCard.tsx b/packages/ai-credits-widget/src/components/manage/CreditsManagementCard.tsx
index 982fb544..bdabf6e4 100644
--- a/packages/ai-credits-widget/src/components/manage/CreditsManagementCard.tsx
+++ b/packages/ai-credits-widget/src/components/manage/CreditsManagementCard.tsx
@@ -38,7 +38,7 @@ function StatCell({ label, children }: { label: string; children: React.ReactNod
         minWidth: '28%',
       }}
     >
-      <Text fontSize="$1" secondary>
+      <Text fontSize="$1" tone="soft">
         {label}
       </Text>
       <YStack justifyContent="center">
@@ -188,7 +188,7 @@ export function CreditsManagementCard({ state, actions }: CreditsManagementCardP
 
       <XStack gap="$4" width="100%" alignItems="flex-start" flexWrap="wrap">
         <YStack gap="$2" flex={1} minWidth={0}>
-          <Text fontSize="$1" secondary>
+          <Text fontSize="$1" tone="soft">
             Total Credit (US$)
           </Text>
           {totalCreditDisplay !== null ? (
@@ -198,7 +198,7 @@ export function CreditsManagementCard({ state, actions }: CreditsManagementCardP
           )}
         </YStack>
         <YStack gap="$2" flex={1} minWidth={0}>
-          <Text fontSize="$1" secondary>
+          <Text fontSize="$1" tone="soft">
             Est. Monthly Credit (US$)
           </Text>
           {monthlyStreamUsdDisplay ? (
diff --git a/packages/ai-credits-widget/src/components/manage/SetupSnippet.tsx b/packages/ai-credits-widget/src/components/manage/SetupSnippet.tsx
index edc58381..92a52db0 100644
--- a/packages/ai-credits-widget/src/components/manage/SetupSnippet.tsx
+++ b/packages/ai-credits-widget/src/components/manage/SetupSnippet.tsx
@@ -81,7 +81,7 @@ export function SetupSnippet() {
               </Text>
             ))}
           </YStack>
-          <Text fontSize="$1" secondary>
+          <Text fontSize="$1" tone="soft">
             To connect AI tools to the AntSeed AI provider, see the{' '}
             <Anchor href={ANTSEED_API_DOCS_URL} target="_blank">
               AntSeed API guide
diff --git a/packages/ai-credits-widget/src/components/setup/AntseedSignerRow.tsx b/packages/ai-credits-widget/src/components/setup/AntseedSignerRow.tsx
index 0a5f219f..b536880e 100644
--- a/packages/ai-credits-widget/src/components/setup/AntseedSignerRow.tsx
+++ b/packages/ai-credits-widget/src/components/setup/AntseedSignerRow.tsx
@@ -34,7 +34,7 @@ export function AntseedSignerRow({ mode }: AntseedSignerRowProps) {
         style={{ width: '100%', height: 'auto', display: 'block', borderRadius: 8 }}
       />
 
-      <Text fontSize="$2" secondary textAlign="center" lineHeight="$3">
+      <Text fontSize="$2" tone="soft" textAlign="center" lineHeight="$3">
         {isGenerate ? (
           <>
             Copy the key above, then tap ↑ in Antseed&apos;s{' '}
diff --git a/packages/ai-credits-widget/src/components/setup/HowToUseView.tsx b/packages/ai-credits-widget/src/components/setup/HowToUseView.tsx
index afc03159..c21690cc 100644
--- a/packages/ai-credits-widget/src/components/setup/HowToUseView.tsx
+++ b/packages/ai-credits-widget/src/components/setup/HowToUseView.tsx
@@ -65,7 +65,7 @@ export function HowToUseView({ onBack }: HowToUseViewProps) {
         </ButtonText>
       </Button>
 
-      <Text fontSize="$2" secondary lineHeight="$3">
+      <Text fontSize="$2" tone="soft" lineHeight="$3">
         New here? Start with the 3-minute video — it covers the whole journey, start to finish.
       </Text>
 
@@ -104,7 +104,7 @@ export function HowToUseView({ onBack }: HowToUseViewProps) {
             <Text fontSize="$2" fontWeight="700">
               Getting started with AI credits
             </Text>
-            <Text fontSize="$1" secondary>
+            <Text fontSize="$1" tone="soft">
               Wallet → buy credits → connect Antseed
             </Text>
           </YStack>
@@ -122,7 +122,7 @@ export function HowToUseView({ onBack }: HowToUseViewProps) {
                   <Text fontSize="$2" fontWeight="700">
                     Full written guide{' '}
                   </Text>
-                  <Text fontSize="$2" secondary>
+                  <Text fontSize="$2" tone="soft">
                     Step-by-step walkthrough with screenshots, on Notion
                   </Text>
                 </Text>
@@ -135,7 +135,7 @@ export function HowToUseView({ onBack }: HowToUseViewProps) {
 
       {/* Quick summary section */}
       <YStack gap="$3">
-        <Text variant="label" secondary fontSize="$1" fontWeight="700" letterSpacing={1}>
+        <Text variant="label" tone="soft" fontSize="$1" fontWeight="700" letterSpacing={1}>
           QUICK SUMMARY
         </Text>
 
@@ -168,7 +168,7 @@ export function HowToUseView({ onBack }: HowToUseViewProps) {
                     <BadgeText>{step.tabLabel}</BadgeText>
                   </Badge>
                 </XStack>
-                <Text fontSize="$2" secondary lineHeight="$3">
+                <Text fontSize="$2" tone="soft" lineHeight="$3">
                   {step.description}
                 </Text>
               </YStack>
@@ -177,7 +177,7 @@ export function HowToUseView({ onBack }: HowToUseViewProps) {
         </YStack>
 
         {/* Security note */}
-        <Text fontSize="$1" secondary textAlign="center" paddingTop="$1">
+        <Text fontSize="$1" tone="soft" textAlign="center" paddingTop="$1">
           Your G$ wallet is never exposed — only the scoped signer key.
         </Text>
       </YStack>
diff --git a/packages/ai-credits-widget/src/components/setup/SetupBonusHighlight.tsx b/packages/ai-credits-widget/src/components/setup/SetupBonusHighlight.tsx
index 19041557..95434e2d 100644
--- a/packages/ai-credits-widget/src/components/setup/SetupBonusHighlight.tsx
+++ b/packages/ai-credits-widget/src/components/setup/SetupBonusHighlight.tsx
@@ -55,14 +55,14 @@ export function SetupBonusHighlight({
             <Text fontSize="$2" fontWeight="700" color="$primary">
               +{depositBonusPercent}%
             </Text>
-            <Text fontSize="$2" secondary>
+            <Text fontSize="$2" tone="soft">
               {' '}
               on deposits,{' '}
             </Text>
             <Text fontSize="$2" fontWeight="700" color="$primary">
               +{streamBonusPercent}%
             </Text>
-            <Text fontSize="$2" secondary>
+            <Text fontSize="$2" tone="soft">
               {' '}
               on streams — paid with G$
             </Text>
@@ -74,7 +74,7 @@ export function SetupBonusHighlight({
 
       {isExpanded && (
         <YStack backgroundColor="$background" borderRadius="$2" padding="$3">
-          <Text fontSize="$2" secondary lineHeight="$3">
+          <Text fontSize="$2" tone="soft" lineHeight="$3">
             {isGoodIdVerified ? (
               <>
                 Your wallet is{' '}
diff --git a/packages/ai-credits-widget/src/components/setup/SetupFaqView.tsx b/packages/ai-credits-widget/src/components/setup/SetupFaqView.tsx
index 36ffd6d2..1419d7df 100644
--- a/packages/ai-credits-widget/src/components/setup/SetupFaqView.tsx
+++ b/packages/ai-credits-widget/src/components/setup/SetupFaqView.tsx
@@ -88,7 +88,7 @@ function FaqItem({ question, answer, expanded, onToggle }: FaqItemProps) {
         <Icon name={expanded ? 'chevron-up' : 'chevron-down'} size="xs" color="muted" />
       </XStack>
       {expanded && (
-        <Text fontSize="$2" secondary lineHeight="$3">
+        <Text fontSize="$2" tone="soft" lineHeight="$3">
           {answer}
         </Text>
       )}
diff --git a/packages/ai-credits-widget/src/components/setup/SetupGuidanceCard.tsx b/packages/ai-credits-widget/src/components/setup/SetupGuidanceCard.tsx
index c3b22785..4a1a0365 100644
--- a/packages/ai-credits-widget/src/components/setup/SetupGuidanceCard.tsx
+++ b/packages/ai-credits-widget/src/components/setup/SetupGuidanceCard.tsx
@@ -40,7 +40,7 @@ export function SetupGuidanceCard({
     // part of the header rather than a separate panel.
     <YStack gap="$3" paddingHorizontal="$1">
       {/* Tagline */}
-      <Text fontSize="$3" secondary lineHeight="$4">
+      <Text fontSize="$3" tone="soft" lineHeight="$4">
         Buy AI credits with G$ for Claude Code, Codex, chat &amp; other AI tools.
       </Text>
 
@@ -52,7 +52,7 @@ export function SetupGuidanceCard({
 
       {/* WHAT'S INVOLVED section */}
       <YStack gap="$1">
-        <Text variant="label" secondary fontSize="$1" fontWeight="700" letterSpacing={1}>
+        <Text variant="label" tone="soft" fontSize="$1" fontWeight="700" letterSpacing={1}>
           WHAT&apos;S INVOLVED:
         </Text>
       </YStack>
@@ -78,7 +78,7 @@ export function SetupGuidanceCard({
             <Text fontSize="$2" fontWeight="700">
               Get G${' '}
             </Text>
-            <Text fontSize="$2" secondary>
+            <Text fontSize="$2" tone="soft">
               — claim UBI via GoodWallet, or buy G$ with your wallet of choice
             </Text>
           </Text>
@@ -104,7 +104,7 @@ export function SetupGuidanceCard({
             <Text fontSize="$2" fontWeight="700">
               Download Antseed{' '}
             </Text>
-            <Text fontSize="$2" secondary>
+            <Text fontSize="$2" tone="soft">
               — the free desktop app that runs your credits locally
             </Text>
           </Text>
diff --git a/packages/ai-credits-widget/src/components/setup/SignerKeyPanel.tsx b/packages/ai-credits-widget/src/components/setup/SignerKeyPanel.tsx
index cb389459..509f6ee0 100644
--- a/packages/ai-credits-widget/src/components/setup/SignerKeyPanel.tsx
+++ b/packages/ai-credits-widget/src/components/setup/SignerKeyPanel.tsx
@@ -113,7 +113,7 @@ export function SignerKeyPanel({
           <ButtonText>Back to Generate / Import</ButtonText>
         </Button>
         <Heading level={5}>Import Signer Key</Heading>
-        <Text secondary>
+        <Text>
           Already have a signer key in Antseed? Export it there and paste it below. It will be
           checked against the operator configured for this signer before you can continue.
         </Text>
@@ -147,7 +147,7 @@ export function SignerKeyPanel({
             <Text color="$error" fontWeight="700">
               Signer key cannot be used
             </Text>
-            <Text secondary>
+            <Text tone="soft">
               The imported signer key already has another operator configured. Paste a different
               signer key, or go back and generate a new one.
             </Text>
@@ -157,10 +157,10 @@ export function SignerKeyPanel({
             <Text color="$success" fontWeight="700">
               Signer imported
             </Text>
-            <Text secondary>
+            <Text tone="soft">
               {truncateAddress(state.buyerPubKey ?? '')} is now your active signer.
             </Text>
-            <Text secondary>
+            <Text tone="soft">
               {state.operatorConsented
                 ? 'GoodDollar is already configured as the operator.'
                 : currentOperator === ZERO_OPERATOR
@@ -209,13 +209,13 @@ export function SignerKeyPanel({
     <YStack gap="$3">
       {showHeading && <Heading level={5}>Signer Key</Heading>}
       {!compact && (
-        <Text secondary>
+        <Text tone="soft">
           A dedicated identity used only to buy and spend AI credits — separate from your wallet.
         </Text>
       )}
       {compact ? <YStack gap="$2">{choices}</YStack> : <XStack gap="$3">{choices}</XStack>}
       {!compact && (
-        <Text fontSize="$2" secondary>
+        <Text fontSize="$2" tone="soft">
           Generate is recommended for a fresh signer. Either direction uses the same key once it is
           set up in AntSeed.
         </Text>
diff --git a/packages/ai-credits-widget/src/components/shared/AddressView.tsx b/packages/ai-credits-widget/src/components/shared/AddressView.tsx
index b90f85ec..73d30dec 100644
--- a/packages/ai-credits-widget/src/components/shared/AddressView.tsx
+++ b/packages/ai-credits-widget/src/components/shared/AddressView.tsx
@@ -7,7 +7,7 @@ export function AddressView({ label, address }: { label: string; address: string
 
   return (
     <YStack gap="$1">
-      <Text fontSize="$1" secondary>
+      <Text fontSize="$1" tone="soft">
         {label}
       </Text>
       <XStack

From dc721a9f094f47a906b9863fb00450e335697c4f Mon Sep 17 00:00:00 2001
From: blueogin <grilucosy@gmail.com>
Date: Thu, 27 Aug 2026 11:55:18 -0400
Subject: [PATCH 3/3] fix: update background color to "$background" for
 consistency across components

---
 .../src/components/history/HistoryTab.tsx              | 10 +++++-----
 .../src/components/manage/BuyerOperatorCard.tsx        |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/ai-credits-widget/src/components/history/HistoryTab.tsx b/packages/ai-credits-widget/src/components/history/HistoryTab.tsx
index eebae4e7..6b826068 100644
--- a/packages/ai-credits-widget/src/components/history/HistoryTab.tsx
+++ b/packages/ai-credits-widget/src/components/history/HistoryTab.tsx
@@ -353,7 +353,7 @@ function SourceFilterChip({
       borderRadius="$full"
       borderWidth={1}
       borderColor={selected ? '$primary' : '$borderColor'}
-      backgroundColor={selected ? '$infoMuted' : '$backgroundDark'}
+      backgroundColor={selected ? '$infoMuted' : '$background'}
       hoverStyle={{
         opacity: 0.9,
       }}
@@ -398,7 +398,7 @@ function StatusFilterSelect({
         borderRadius="$3"
         borderWidth={1}
         borderColor="$borderColor"
-        backgroundColor="$backgroundDark"
+        backgroundColor="$background"
         cursor="pointer"
         onPress={() => setOpen((current) => !current)}
       >
@@ -418,7 +418,7 @@ function StatusFilterSelect({
           borderRadius="$3"
           borderWidth={1}
           borderColor="$borderColor"
-          backgroundColor="$backgroundDark"
+          backgroundColor="$background"
           overflow="hidden"
           zIndex={30}
         >
@@ -490,7 +490,7 @@ function BuyerFilterSelect({
         borderRadius="$3"
         borderWidth={1}
         borderColor="$borderColor"
-        backgroundColor="$backgroundDark"
+        backgroundColor="$background"
         cursor="pointer"
         onPress={() => setOpen((current) => !current)}
       >
@@ -510,7 +510,7 @@ function BuyerFilterSelect({
           borderRadius="$3"
           borderWidth={1}
           borderColor="$borderColor"
-          backgroundColor="$backgroundDark"
+          backgroundColor="$background"
           overflow="hidden"
           zIndex={35}
         >
diff --git a/packages/ai-credits-widget/src/components/manage/BuyerOperatorCard.tsx b/packages/ai-credits-widget/src/components/manage/BuyerOperatorCard.tsx
index f7e568c7..4609e73a 100644
--- a/packages/ai-credits-widget/src/components/manage/BuyerOperatorCard.tsx
+++ b/packages/ai-credits-widget/src/components/manage/BuyerOperatorCard.tsx
@@ -125,7 +125,7 @@ function BuyerSelector({
             borderRadius="$2"
             borderWidth={1}
             borderColor={isActive ? '$primary' : '$borderColor'}
-            backgroundColor={isActive ? '$infoMuted' : '$backgroundDark'}
+            backgroundColor={isActive ? '$infoMuted' : '$background'}
             cursor={isActive ? 'default' : 'pointer'}
             hoverStyle={isActive ? {} : { backgroundColor: '$backgroundPress' }}
             onPress={() => {
@@ -231,7 +231,7 @@ export function BuyerOperatorCard({ state, actions }: BuyerOperatorCardProps) {
                 Active signer
               </Text>
               <YStack
-                backgroundColor="$backgroundDark"
+                backgroundColor="$background"
                 borderRadius="$2"
                 borderWidth={1}
                 borderColor="$borderColor"