From 8b35962efbe3d6e7582165e625d38d6a3dff35fd Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Wed, 28 Oct 2026 22:26:39 +0100
Subject: [PATCH] fix: show section labels in sentence case instead of all caps

---
 app/(main)/[locale]/login/page.tsx                 |  2 +-
 app/(main)/admin/_pages/policy.tsx                 |  2 +-
 app/(main)/admin/_pages/themes.tsx                 |  2 +-
 app/(main)/setup/page.tsx                          |  2 +-
 app/print.css                                      |  8 --------
 components/admin/admin-shell.tsx                   |  4 ++--
 components/calendar/calendar-agenda-view.tsx       |  2 +-
 components/calendar/calendar-day-view.tsx          |  2 +-
 components/calendar/calendar-search.tsx            |  2 +-
 components/calendar/calendar-sidebar-panel.tsx     |  8 ++++----
 components/calendar/calendar-toolbar.tsx           |  4 ++--
 components/calendar/calendar-week-view.tsx         |  2 +-
 components/command-palette/command-palette.tsx     |  2 +-
 components/contacts/contact-detail.tsx             |  2 +-
 components/contacts/contact-form.tsx               |  2 +-
 components/contacts/contact-list.tsx               |  2 +-
 components/contacts/contacts-sidebar.tsx           | 14 +++++++-------
 components/email/calendar-invitation-banner.tsx    |  2 +-
 components/email/email-viewer.tsx                  | 12 ++++++------
 components/email/plugin-search-results.tsx         |  2 +-
 components/email/read-receipt-banner.tsx           |  4 ++--
 components/files/files-sidebar.tsx                 |  2 +-
 components/global-search/global-search-palette.tsx |  4 ++--
 components/global-search/search-result-list.tsx    |  2 +-
 components/keyboard-shortcuts-modal.tsx            |  2 +-
 components/layout/mv-side-panel.tsx                |  2 +-
 components/protocol/protocol-account-picker.tsx    |  2 +-
 components/search/search-suggestions.tsx           |  4 ++--
 .../settings/address-book-management-settings.tsx  |  2 +-
 components/settings/delegates/delegate-dialog.tsx  |  2 +-
 .../settings/delegates/delegates-settings.tsx      |  2 +-
 components/settings/filter-settings.tsx            |  6 +++---
 components/settings/settings-app.tsx               |  4 ++--
 components/settings/share-collection-dialog.tsx    |  2 +-
 components/templates/template-picker.tsx           |  2 +-
 lib/__tests__/plugin-ui-kit.test.tsx               |  2 +-
 lib/plugin-sandbox/ui-kit/components.tsx           |  6 +++---
 37 files changed, 60 insertions(+), 68 deletions(-)

diff --git a/app/(main)/[locale]/login/page.tsx b/app/(main)/[locale]/login/page.tsx
index 43b3080e6..4e50d0898 100644
--- a/app/(main)/[locale]/login/page.tsx
+++ b/app/(main)/[locale]/login/page.tsx
@@ -1629,7 +1629,7 @@ function LoginPageContent() {
                       <div className="absolute inset-0 flex items-center">
                         <span className="w-full border-t border-border/60" />
                       </div>
-                      <div className="relative flex justify-center text-xs uppercase">
+                      <div className="relative flex justify-center text-xs">
                         <span className="bg-background/80 px-3 text-muted-foreground">{t("or")}</span>
                       </div>
                     </div>
diff --git a/app/(main)/admin/_pages/policy.tsx b/app/(main)/admin/_pages/policy.tsx
index 2ce7fdaee..8308403b5 100644
--- a/app/(main)/admin/_pages/policy.tsx
+++ b/app/(main)/admin/_pages/policy.tsx
@@ -61,7 +61,7 @@ const PAGE = adminPageDef('policy');
 
 const fieldLabelClass = 'mb-1 block text-[11px] font-medium text-muted-foreground';
 const cardClass = 'rounded-md border border-border bg-muted/30 p-3';
-const subLabelClass = 'mt-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground';
+const subLabelClass = 'mt-2 text-xs font-semibold text-muted-foreground';
 
 /** Mirrors the sanitizer's URL rule so the admin sees the drop before saving. */
 function isValidDefaultAppUrl(raw: string): boolean {
diff --git a/app/(main)/admin/_pages/themes.tsx b/app/(main)/admin/_pages/themes.tsx
index f9701e63f..3163233a7 100644
--- a/app/(main)/admin/_pages/themes.tsx
+++ b/app/(main)/admin/_pages/themes.tsx
@@ -388,7 +388,7 @@ export function ThemesPage() {
           ))}
           {themes.length > 0 && (
             <>
-              <p className="mt-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Installed</p>
+              <p className="mt-2 text-xs font-semibold text-muted-foreground">Installed</p>
               {themes.map(theme => (
                 <SettingItem key={theme.id} label={theme.name}>
                   <ToggleSwitch checked={!disabledInstalled.includes(theme.id)} onChange={() => toggleAdminTheme(theme.id)} />
diff --git a/app/(main)/setup/page.tsx b/app/(main)/setup/page.tsx
index 875c1d124..a6c7efa2c 100644
--- a/app/(main)/setup/page.tsx
+++ b/app/(main)/setup/page.tsx
@@ -1610,7 +1610,7 @@ function SummaryGroup({ icon, title, children }: { icon: ReactNode; title: strin
     <div className="bg-card/50">
       <div className="flex items-center gap-2 px-3 py-2 bg-muted/40">
         <span className="text-muted-foreground">{icon}</span>
-        <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{title}</span>
+        <span className="text-xs font-semibold text-muted-foreground">{title}</span>
       </div>
       <div className="px-3 py-2 space-y-1.5">{children}</div>
     </div>
diff --git a/app/print.css b/app/print.css
index 89a88c8bb..5dd793f6c 100644
--- a/app/print.css
+++ b/app/print.css
@@ -226,8 +226,6 @@
   color: var(--pr-muted);
   font-size: 7.5pt;
   font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
 }
 
 .pr-month-week {
@@ -332,8 +330,6 @@
   color: var(--pr-muted);
   font-size: 7.5pt;
   font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
 }
 
 .pr-tg-date {
@@ -558,8 +554,6 @@
   color: var(--pr-muted);
   font-size: 7.5pt;
   font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
   break-after: avoid;
 }
 
@@ -655,8 +649,6 @@
   color: var(--pr-muted);
   font-size: 8.5pt;
   font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
   break-after: avoid;
 }
 
diff --git a/components/admin/admin-shell.tsx b/components/admin/admin-shell.tsx
index eac06295f..9ebd34467 100644
--- a/components/admin/admin-shell.tsx
+++ b/components/admin/admin-shell.tsx
@@ -328,7 +328,7 @@ export function AdminShell({ authenticated, isStalwartAutoLogin, configReadOnly,
                       {groupIndex > 0 && <div className="mx-5 my-2 border-t border-border" />}
                       {group.label && (
                         <div className="px-5 pb-1.5 pt-3">
-                          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{group.label}</span>
+                          <span className="text-xs font-semibold text-muted-foreground">{group.label}</span>
                         </div>
                       )}
                       {group.items.map(({ page, sections }) => {
@@ -414,7 +414,7 @@ export function AdminShell({ authenticated, isStalwartAutoLogin, configReadOnly,
                   {groupIndex > 0 && <div className="mx-1 my-2 border-t border-border" />}
                   {group.label && (
                     <div className="px-3 pb-1 pt-2.5">
-                      <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{group.label}</span>
+                      <span className="text-[11px] font-semibold text-muted-foreground">{group.label}</span>
                     </div>
                   )}
                   {group.items.map(({ page, sections }) => {
diff --git a/components/calendar/calendar-agenda-view.tsx b/components/calendar/calendar-agenda-view.tsx
index 4dd69715a..e453d8bac 100644
--- a/components/calendar/calendar-agenda-view.tsx
+++ b/components/calendar/calendar-agenda-view.tsx
@@ -218,7 +218,7 @@ export function CalendarAgendaView({
             </span>
             <span className="min-w-0 leading-tight">
               <span className={cn(
-                "block text-[11px] font-medium uppercase tracking-wide truncate",
+                "block text-[11px] font-medium truncate first-letter:uppercase",
                 today ? "text-primary" : "text-muted-foreground",
               )}>
                 {intlFormatter.dateTime(group.date, { month: "short", weekday: "short" })}
diff --git a/components/calendar/calendar-day-view.tsx b/components/calendar/calendar-day-view.tsx
index 3158d35dd..feb5f531c 100644
--- a/components/calendar/calendar-day-view.tsx
+++ b/components/calendar/calendar-day-view.tsx
@@ -371,7 +371,7 @@ export function CalendarDayView({
                     aria-label={intlFormatter.dateTime(day, { weekday: "long", month: "long", day: "numeric", year: "numeric" })}
                   >
                     <div className={cn(
-                      "w-10 text-center text-[11px] font-medium uppercase tracking-wide",
+                      "w-10 text-center text-[11px] font-medium first-letter:uppercase",
                       today ? "text-primary" : "text-muted-foreground",
                     )}>
                       {intlFormatter.dateTime(day, { weekday: "short" })}
diff --git a/components/calendar/calendar-search.tsx b/components/calendar/calendar-search.tsx
index 904335e61..5de72dfab 100644
--- a/components/calendar/calendar-search.tsx
+++ b/components/calendar/calendar-search.tsx
@@ -169,7 +169,7 @@ export function CalendarSearchResults({
 
   const section = (id: string, label: string, events: CalendarEvent[]) => events.length > 0 && (
     <section aria-labelledby={id} className="py-1">
-      <h2 id={id} className="px-2 sm:px-4 pt-3 pb-1 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+      <h2 id={id} className="px-2 sm:px-4 pt-3 pb-1 text-xs font-medium text-muted-foreground">
         {label}
       </h2>
       <div className="px-1 sm:px-2">{events.map(renderRow)}</div>
diff --git a/components/calendar/calendar-sidebar-panel.tsx b/components/calendar/calendar-sidebar-panel.tsx
index cce2785ff..687616242 100644
--- a/components/calendar/calendar-sidebar-panel.tsx
+++ b/components/calendar/calendar-sidebar-panel.tsx
@@ -483,7 +483,7 @@ export function CalendarSidebarPanel({
           ) : (
             <ChevronRight className="w-3 h-3 text-muted-foreground flex-shrink-0" />
           )}
-          <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider truncate" title={label}>{label}</span>
+          <span className="text-xs font-medium text-muted-foreground truncate" title={label}>{label}</span>
         </button>
         {onAdd && (
           <IconButton
@@ -571,7 +571,7 @@ export function CalendarSidebarPanel({
                   <div className="mt-1">
                     {owned.length > 0 && (
                       <div>
-                        <div className="ps-5 pe-3 py-0.5 text-[10px] font-medium text-muted-foreground/80 uppercase tracking-wider">
+                        <div className="ps-5 pe-3 py-0.5 text-[11px] font-medium text-muted-foreground/80">
                           {t('my_calendars')}
                         </div>
                         <div>
@@ -581,7 +581,7 @@ export function CalendarSidebarPanel({
                     )}
                     {sharedGroups.map((sg) => (
                       <div key={`${group.key}-shared-${sg.label}`} className="mt-2">
-                        <div className="ps-5 pe-3 py-0.5 text-[10px] font-medium text-muted-foreground/80 uppercase tracking-wider flex items-center gap-1">
+                        <div className="ps-5 pe-3 py-0.5 text-[11px] font-medium text-muted-foreground/80 flex items-center gap-1">
                           <Share2 className="w-3 h-3" />
                           {sg.label}
                         </div>
@@ -610,7 +610,7 @@ export function CalendarSidebarPanel({
               {renderSectionHeader('__others__', t('other_calendars'))}
               {!collapsedAccountGroups.has('__others__') && sharedAccountGroups.map((group) => (
                 <div key={group.accountName} className="mt-2">
-                  <div className="ps-5 pe-3 py-0.5 text-[10px] font-medium text-muted-foreground/80 uppercase tracking-wider flex items-center gap-1">
+                  <div className="ps-5 pe-3 py-0.5 text-[11px] font-medium text-muted-foreground/80 flex items-center gap-1">
                     <Share2 className="w-3 h-3" />
                     {group.accountName}
                   </div>
diff --git a/components/calendar/calendar-toolbar.tsx b/components/calendar/calendar-toolbar.tsx
index 0df801ef1..7763420d6 100644
--- a/components/calendar/calendar-toolbar.tsx
+++ b/components/calendar/calendar-toolbar.tsx
@@ -310,7 +310,7 @@ export function CalendarToolbar({
                   </IconButton>
                   {showCalendarDropdown && (
                     <div className="absolute top-full end-0 mt-1 z-50 bg-popover border border-border rounded-lg shadow-lg p-2 min-w-[180px]">
-                      <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2 px-1">
+                      <h3 className="text-xs font-medium text-muted-foreground mb-2 px-1">
                         {t("my_calendars")}
                       </h3>
                       <div className="space-y-0.5">
@@ -350,7 +350,7 @@ export function CalendarToolbar({
                         }
                         return Array.from(groups.values()).map((group) => (
                           <div key={group.accountName} className="mt-2">
-                            <h3 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-1 px-1">
+                            <h3 className="text-xs font-medium text-muted-foreground mb-1 px-1">
                               {group.accountName}
                             </h3>
                             <div className="space-y-0.5">
diff --git a/components/calendar/calendar-week-view.tsx b/components/calendar/calendar-week-view.tsx
index 6e54b307b..33ca71554 100644
--- a/components/calendar/calendar-week-view.tsx
+++ b/components/calendar/calendar-week-view.tsx
@@ -467,7 +467,7 @@ export function CalendarWeekView({
                 className="flex flex-col items-center gap-0.5 pt-2 pb-1.5 border-e border-border last:border-e-0"
               >
                 <div className={cn(
-                  "text-[11px] font-medium uppercase tracking-wide",
+                  "text-[11px] font-medium first-letter:uppercase",
                   todayCol ? "text-primary" : "text-muted-foreground",
                 )}>
                   {intlFormatter.dateTime(day, { weekday: "short" })}
diff --git a/components/command-palette/command-palette.tsx b/components/command-palette/command-palette.tsx
index 7b5982409..9624b7c50 100644
--- a/components/command-palette/command-palette.tsx
+++ b/components/command-palette/command-palette.tsx
@@ -367,7 +367,7 @@ function CommandPalette({ onClose, onShowShortcuts }: { onClose: () => void; onS
             return (
               <li key={command.id} role="presentation">
                 {showGroup && (
-                  <div aria-hidden="true" className="px-3 pt-2 pb-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                  <div aria-hidden="true" className="px-3 pt-2 pb-1 text-[11px] font-semibold text-muted-foreground">
                     {command.group}
                   </div>
                 )}
diff --git a/components/contacts/contact-detail.tsx b/components/contacts/contact-detail.tsx
index 0c68abca1..af8e2986c 100644
--- a/components/contacts/contact-detail.tsx
+++ b/components/contacts/contact-detail.tsx
@@ -498,7 +498,7 @@ function formatContexts(contexts: Record<string, boolean> | undefined, label: (k
 export function Section({ title, children, className }: { title: string; children: React.ReactNode; className?: string }) {
   return (
     <section className={cn("py-6", className)}>
-      <h3 className="text-xs font-semibold uppercase tracking-wide text-muted-foreground mb-3">{title}</h3>
+      <h3 className="text-xs font-semibold text-muted-foreground mb-3">{title}</h3>
       {children}
     </section>
   );
diff --git a/components/contacts/contact-form.tsx b/components/contacts/contact-form.tsx
index ebfe802a0..2a6141f43 100644
--- a/components/contacts/contact-form.tsx
+++ b/components/contacts/contact-form.tsx
@@ -145,7 +145,7 @@ function FormSection({ icon: Icon, title, children, collapsible, defaultOpen = t
         tabIndex={collapsible ? 0 : -1}
       >
         <Icon className="w-4 h-4 text-muted-foreground shrink-0" />
-        <h3 className="flex-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">{title}</h3>
+        <h3 className="flex-1 text-xs font-semibold text-muted-foreground">{title}</h3>
         {collapsible && (
           open ? <ChevronDown className="w-3.5 h-3.5 text-muted-foreground" /> : <ChevronRight className="w-3.5 h-3.5 text-muted-foreground" />
         )}
diff --git a/components/contacts/contact-list.tsx b/components/contacts/contact-list.tsx
index cd4429369..af79f41c0 100644
--- a/components/contacts/contact-list.tsx
+++ b/components/contacts/contact-list.tsx
@@ -747,7 +747,7 @@ export function ContactList({
               <div>
                 {groupedSections.map(({ letter, items }) => (
                   <section key={letter} role="group" aria-label={letter}>
-                    <div aria-hidden className="sticky top-0 z-10 px-4 py-0.5 bg-background/90 backdrop-blur-sm text-[11px] font-medium text-muted-foreground/70 uppercase tracking-wide">
+                    <div aria-hidden className="sticky top-0 z-10 px-4 py-0.5 bg-background/90 backdrop-blur-sm text-[11px] font-medium text-muted-foreground/70">
                       {letter}
                     </div>
                     {items.map(renderItem)}
diff --git a/components/contacts/contacts-sidebar.tsx b/components/contacts/contacts-sidebar.tsx
index 961393afc..e0210ec5e 100644
--- a/components/contacts/contacts-sidebar.tsx
+++ b/components/contacts/contacts-sidebar.tsx
@@ -364,7 +364,7 @@ export function ContactsSidebar({
                       <ChevronRight className="w-3 h-3 text-muted-foreground" />
                     )}
                     <User className="w-3 h-3 text-muted-foreground" />
-                    <span className="text-xs font-semibold text-foreground/90 uppercase tracking-wider truncate">
+                    <span className="text-xs font-semibold text-foreground/90 truncate">
                       {group.label}
                     </span>
                   </button>
@@ -373,7 +373,7 @@ export function ContactsSidebar({
                   <div className="ps-2">
                     {owned.length > 0 && (
                       <div className="mt-1">
-                        <div className="px-3 py-0.5 text-[10px] font-medium text-muted-foreground/80 uppercase tracking-wider">
+                        <div className="px-3 py-0.5 text-[11px] font-medium text-muted-foreground/80">
                           {t("address_books.title")}
                         </div>
                         {owned.map((book) => (
@@ -391,7 +391,7 @@ export function ContactsSidebar({
                     )}
                     {sharedGroups.map((sg) => (
                       <div key={`${group.key}-shared-${sg.label}`} className="mt-1">
-                        <div className="px-3 py-0.5 text-[10px] font-medium text-muted-foreground/80 uppercase tracking-wider flex items-center gap-1">
+                        <div className="px-3 py-0.5 text-[11px] font-medium text-muted-foreground/80 flex items-center gap-1">
                           <Share2 className="w-3 h-3" />
                           {sg.label}
                         </div>
@@ -426,7 +426,7 @@ export function ContactsSidebar({
                   ) : (
                     <ChevronDown className="w-3 h-3 text-muted-foreground" />
                   )}
-                  <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                  <span className="text-xs font-medium text-muted-foreground">
                     {t("address_books.title")}
                   </span>
                 </button>
@@ -468,7 +468,7 @@ export function ContactsSidebar({
               ) : (
                 <ChevronDown className="w-3 h-3 text-muted-foreground" />
               )}
-              <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+              <span className="text-xs font-medium text-muted-foreground">
                 {t("tabs.groups")}
               </span>
             </button>
@@ -506,7 +506,7 @@ export function ContactsSidebar({
             ) : (
               <ChevronDown className="w-3 h-3 text-muted-foreground" />
             )}
-            <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+            <span className="text-xs font-medium text-muted-foreground">
               {t("detail.categories")}
             </span>
           </button>
@@ -565,7 +565,7 @@ export function ContactsSidebar({
                   <ChevronDown className="w-3 h-3 text-muted-foreground" />
                 )}
                 <Share2 className="w-3 h-3 text-muted-foreground" />
-                <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider truncate">
+                <span className="text-xs font-medium text-muted-foreground truncate">
                   {t("address_books.shared_prefix", { name: group.accountName })}
                 </span>
               </button>
diff --git a/components/email/calendar-invitation-banner.tsx b/components/email/calendar-invitation-banner.tsx
index 5762db772..fa803723f 100644
--- a/components/email/calendar-invitation-banner.tsx
+++ b/components/email/calendar-invitation-banner.tsx
@@ -893,7 +893,7 @@ export function CalendarInvitationBanner({ email }: CalendarInvitationBannerProp
         {/* Eyebrow + title + collapse */}
         <div className="flex items-start justify-between gap-2">
           <div className="min-w-0 flex-1">
-            <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+            <div className="text-[11px] font-semibold text-muted-foreground">
               {bannerTitle}
             </div>
             {summary?.title && (
diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index bb44f8c9c..c38ab278e 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -1064,7 +1064,7 @@ function SidebarSection({ icon: Icon, title, children }: { icon: React.Component
     <div>
       <div className="flex items-center gap-2 mb-1.5">
         <Icon className="w-3.5 h-3.5 text-muted-foreground" />
-        <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wider">{title}</h4>
+        <h4 className="text-xs font-medium text-muted-foreground">{title}</h4>
       </div>
       <div className="space-y-1 ps-5.5">{children}</div>
     </div>
@@ -5270,7 +5270,7 @@ export function EmailViewer({
           const totalAttachmentSize = effectiveAttachments.reduce((s, a) => s + (a.size || 0), 0);
           const topMimeType = email.bodyStructure?.type;
           const SectionHeader = ({ children }: { children: React.ReactNode }) => (
-            <div className="text-[10px] font-semibold tracking-wider text-muted-foreground uppercase mb-1.5">
+            <div className="text-[11px] font-semibold text-muted-foreground mb-1.5">
               {children}
             </div>
           );
@@ -5304,7 +5304,7 @@ export function EmailViewer({
               >
                 <Icon className={cn("w-3.5 h-3.5 flex-shrink-0", status.color)} />
                 <span className="font-medium text-foreground">{name}</span>
-                <span className={cn("text-[10px] uppercase tracking-wider", status.color)}>
+                <span className={cn("text-[11px]", status.color)}>
                   {translateAuthResult(result)}
                 </span>
                 {extra && (
@@ -5454,7 +5454,7 @@ export function EmailViewer({
                           )} />
                           <span className="font-medium text-foreground">{t('authentication.spam_score')}</span>
                           <span className={cn(
-                            "text-[10px] uppercase tracking-wider",
+                            "text-[11px]",
                             email.spamScore > 5 ? "text-red-700 dark:text-red-400" :
                             email.spamScore > 2 ? "text-amber-700 dark:text-amber-400" :
                             "text-green-700 dark:text-green-400",
@@ -5665,7 +5665,7 @@ export function EmailViewer({
                       <ShieldAlert className="w-5 h-5" />
                     </div>
                     <div className="flex-1 min-w-0">
-                      <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+                      <div className="text-[11px] font-semibold text-muted-foreground">
                         {senderVerificationLabel}
                       </div>
                       <div className="text-sm font-medium text-foreground break-words">
@@ -5686,7 +5686,7 @@ export function EmailViewer({
                     </div>
                     <div className="flex-1 min-w-0 space-y-2">
                       <div>
-                        <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+                        <div className="text-[11px] font-semibold text-muted-foreground">
                           External Content
                         </div>
                         <div className="text-sm font-medium text-foreground break-words">
diff --git a/components/email/plugin-search-results.tsx b/components/email/plugin-search-results.tsx
index a136763d8..9f71b1505 100644
--- a/components/email/plugin-search-results.tsx
+++ b/components/email/plugin-search-results.tsx
@@ -130,7 +130,7 @@ export function PluginSearchResults({ surface, onOpenEmail }: PluginSearchResult
               onClick={() => toggle(group.id)}
               aria-expanded={open}
               aria-controls={listId}
-              className="flex w-full items-center gap-1.5 px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-muted-foreground hover:text-foreground"
+              className="flex w-full items-center gap-1.5 px-3 py-1.5 text-xs font-semibold text-muted-foreground hover:text-foreground"
             >
               {open ? <ChevronDown className="h-3.5 w-3.5" /> : <ChevronRight className="h-3.5 w-3.5" />}
               <span className="truncate">{group.heading}</span>
diff --git a/components/email/read-receipt-banner.tsx b/components/email/read-receipt-banner.tsx
index 079e3ed92..a6b5a8271 100644
--- a/components/email/read-receipt-banner.tsx
+++ b/components/email/read-receipt-banner.tsx
@@ -18,7 +18,7 @@ export function ReadReceiptBanner({ requestedBy, onSend, onIgnore }: ReadReceipt
   const [state, setState] = useState<'idle' | 'sending' | 'sent'>('idle');
 
   // Matches the host's "External Content" banner row: a round tinted icon chip,
-  // an uppercase eyebrow, a foreground message, and neutral bordered actions.
+  // a small muted label, a foreground message, and neutral bordered actions.
   if (state === 'sent') {
     return (
       <div className="flex items-center gap-3 py-1">
@@ -37,7 +37,7 @@ export function ReadReceiptBanner({ requestedBy, onSend, onIgnore }: ReadReceipt
       </div>
       <div className="flex-1 min-w-0 space-y-2">
         <div>
-          <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+          <div className="text-[11px] font-semibold text-muted-foreground">
             Read receipt
           </div>
           <div className="text-sm font-medium text-foreground break-words">
diff --git a/components/files/files-sidebar.tsx b/components/files/files-sidebar.tsx
index 18deac2d1..35407d56b 100644
--- a/components/files/files-sidebar.tsx
+++ b/components/files/files-sidebar.tsx
@@ -248,7 +248,7 @@ export function FilesSidebar({
         ? <ChevronRight className="w-3 h-3 text-muted-foreground" />
         : <ChevronDown className="w-3 h-3 text-muted-foreground" />}
       {icon}
-      <span className="text-xs font-medium text-muted-foreground uppercase tracking-wider truncate">{label}</span>
+      <span className="text-xs font-medium text-muted-foreground truncate">{label}</span>
     </button>
   );
 
diff --git a/components/global-search/global-search-palette.tsx b/components/global-search/global-search-palette.tsx
index d82ac22f6..bf05bbfbb 100644
--- a/components/global-search/global-search-palette.tsx
+++ b/components/global-search/global-search-palette.tsx
@@ -110,7 +110,7 @@ export function GlobalSearchPalette({ proShell = true }: { proShell?: boolean })
     if (hits.length === 0 && status.errors.length === 0 && status.status !== 'loading') return null;
     return (
       <div key={kind} className="py-1">
-        <div className="flex items-center gap-2 px-3 pt-2 pb-1 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+        <div className="flex items-center gap-2 px-3 pt-2 pb-1 text-xs font-semibold text-muted-foreground">
           {t(`scope_${kind}`)}
           <span className="inline-flex min-w-[18px] h-[18px] items-center justify-center rounded-full bg-muted px-1.5 text-[10px] font-semibold tabular-nums normal-case">
             {hits.length}
@@ -171,7 +171,7 @@ export function GlobalSearchPalette({ proShell = true }: { proShell?: boolean })
         <div className="flex-1 min-h-0 overflow-y-auto py-1">
           {showRecent && (
             <div className="py-1">
-              <div className="px-3 py-1 text-xs font-medium text-muted-foreground uppercase tracking-wide">{t('recent_searches')}</div>
+              <div className="px-3 py-1 text-xs font-medium text-muted-foreground">{t('recent_searches')}</div>
               {recentSearches.map((term) => (
                 <button
                   key={term}
diff --git a/components/global-search/search-result-list.tsx b/components/global-search/search-result-list.tsx
index 2aec10ce1..0ef43a863 100644
--- a/components/global-search/search-result-list.tsx
+++ b/components/global-search/search-result-list.tsx
@@ -68,7 +68,7 @@ export function SearchResultList({ outcome, kinds, flat, selectedKey, onSelect,
         if (hits.length === 0 && status.errors.length === 0 && status.status !== 'loading') return null;
         return (
           <section key={kind} className="pb-2">
-            <h3 className="flex items-center gap-2 px-3 pt-3 pb-1.5 text-xs font-semibold text-muted-foreground uppercase tracking-wider sticky top-0 z-10 bg-background">
+            <h3 className="flex items-center gap-2 px-3 pt-3 pb-1.5 text-xs font-semibold text-muted-foreground sticky top-0 z-10 bg-background">
               {t(`scope_${kind}`)}
               <span className="inline-flex min-w-[18px] h-[18px] items-center justify-center rounded-full bg-muted px-1.5 text-[10px] font-semibold tabular-nums normal-case">
                 {hits.length}{status.hasMore ? '+' : ''}
diff --git a/components/keyboard-shortcuts-modal.tsx b/components/keyboard-shortcuts-modal.tsx
index ec66d8caf..28a438e38 100644
--- a/components/keyboard-shortcuts-modal.tsx
+++ b/components/keyboard-shortcuts-modal.tsx
@@ -127,7 +127,7 @@ export function KeyboardShortcutsModal({ isOpen, onClose, app }: KeyboardShortcu
             if (rows.length === 0 && !extra?.length) return null;
             return (
               <section key={section.id} className={cn(section.wide && "md:col-span-2")}>
-                <h3 className="text-sm font-semibold text-foreground mb-3 uppercase tracking-wider">
+                <h3 className="text-sm font-semibold text-foreground mb-3">
                   {t(section.title)}
                 </h3>
                 {/* A wide section's two columns line up with the columns of the
diff --git a/components/layout/mv-side-panel.tsx b/components/layout/mv-side-panel.tsx
index 0013fa190..2a61cd326 100644
--- a/components/layout/mv-side-panel.tsx
+++ b/components/layout/mv-side-panel.tsx
@@ -111,7 +111,7 @@ function PanelHeader({ title, subtitle, href, onClose, children }: {
   return (
     <div className="flex items-start gap-1 px-4 pt-4 pb-2">
       <div className="min-w-0 flex-1">
-        <div className={cn(subtitle ? "text-[11px] font-medium uppercase tracking-wider text-muted-foreground" : "text-[22px] leading-7")}>{title}</div>
+        <div className={cn(subtitle ? "text-[11px] font-medium text-muted-foreground" : "text-[22px] leading-7")}>{title}</div>
         {subtitle && <div className="text-sm font-medium text-primary">{subtitle}</div>}
       </div>
       {children}
diff --git a/components/protocol/protocol-account-picker.tsx b/components/protocol/protocol-account-picker.tsx
index f6ed09f00..b30159652 100644
--- a/components/protocol/protocol-account-picker.tsx
+++ b/components/protocol/protocol-account-picker.tsx
@@ -81,7 +81,7 @@ export function ProtocolAccountPicker({
             <dl className="space-y-1.5 text-sm">
               {details.map((detail) => (
                 <div key={detail.label} className="grid grid-cols-[5.5rem_minmax(0,1fr)] gap-3">
-                  <dt className="text-xs font-medium uppercase tracking-wide text-muted-foreground">{detail.label}</dt>
+                  <dt className="text-xs font-medium text-muted-foreground">{detail.label}</dt>
                   <dd className="truncate text-foreground" title={detail.value}>{detail.value}</dd>
                 </div>
               ))}
diff --git a/components/search/search-suggestions.tsx b/components/search/search-suggestions.tsx
index 713ee5e82..5fcbe2ead 100644
--- a/components/search/search-suggestions.tsx
+++ b/components/search/search-suggestions.tsx
@@ -84,14 +84,14 @@ export function SearchSuggestions({
 
         const heading =
           (i === 0 && hasRecent && suggestion.kind === "recent" && (
-            <div className="px-3 pt-1 pb-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+            <div className="px-3 pt-1 pb-0.5 text-[11px] font-medium text-muted-foreground">
               {t("suggestions_recent")}
             </div>
           )) ||
           (i === firstContactIndex && (
             <div
               className={cn(
-                "px-3 pt-1 pb-0.5 text-[11px] font-medium uppercase tracking-wide text-muted-foreground",
+                "px-3 pt-1 pb-0.5 text-[11px] font-medium text-muted-foreground",
                 hasRecent && "mt-1 border-t border-border pt-2",
               )}
             >
diff --git a/components/settings/address-book-management-settings.tsx b/components/settings/address-book-management-settings.tsx
index dbefb97e6..33cadc9cb 100644
--- a/components/settings/address-book-management-settings.tsx
+++ b/components/settings/address-book-management-settings.tsx
@@ -331,7 +331,7 @@ export function AddressBookManagementSettings() {
           .filter(([accountId]) => !managedAccountId || accountId === managedAccountId)
           .map(([accountId, group]) => (
           <div key={accountId} className="mt-4 space-y-2">
-            <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wider flex items-center gap-1.5">
+            <h4 className="text-xs font-medium text-muted-foreground flex items-center gap-1.5">
               <Share2 className="w-3 h-3" />
               {t("shared_prefix", { name: group.accountName })}
             </h4>
diff --git a/components/settings/delegates/delegate-dialog.tsx b/components/settings/delegates/delegate-dialog.tsx
index 59137fa26..f718c2110 100644
--- a/components/settings/delegates/delegate-dialog.tsx
+++ b/components/settings/delegates/delegate-dialog.tsx
@@ -389,7 +389,7 @@ function PrincipalText({ principal }: { principal: Principal }) {
       <div className="flex items-center gap-2 truncate text-sm font-medium">
         <span className="truncate">{name}</span>
         {principal.type === "group" && (
-          <span className="rounded bg-muted px-1 py-0.5 text-[10px] font-normal uppercase text-muted-foreground">{t("group")}</span>
+          <span className="rounded bg-muted px-1 py-0.5 text-[11px] font-normal text-muted-foreground">{t("group")}</span>
         )}
       </div>
       {detail && <div className="truncate text-xs text-muted-foreground">{detail}</div>}
diff --git a/components/settings/delegates/delegates-settings.tsx b/components/settings/delegates/delegates-settings.tsx
index cfe714e81..8cb66323f 100644
--- a/components/settings/delegates/delegates-settings.tsx
+++ b/components/settings/delegates/delegates-settings.tsx
@@ -189,7 +189,7 @@ export function DelegatesSettings() {
                       <div className="flex items-center gap-2 truncate text-sm font-medium">
                         <span className="truncate">{display.name}</span>
                         {principal?.type === "group" && (
-                          <span className="rounded bg-muted px-1 py-0.5 text-[10px] font-normal uppercase text-muted-foreground">{t("group")}</span>
+                          <span className="rounded bg-muted px-1 py-0.5 text-[11px] font-normal text-muted-foreground">{t("group")}</span>
                         )}
                       </div>
                       {display.detail && <div className="truncate text-xs text-muted-foreground">{display.detail}</div>}
diff --git a/components/settings/filter-settings.tsx b/components/settings/filter-settings.tsx
index eaec733bb..abbcf833a 100644
--- a/components/settings/filter-settings.tsx
+++ b/components/settings/filter-settings.tsx
@@ -126,7 +126,7 @@ export function VisualRuleSummary({ rule }: { rule: FilterRule }) {
   return (
     <div className="mt-1.5 space-y-1 text-xs">
       <div className="flex items-baseline gap-1.5 flex-wrap">
-        <span className="text-[10px] font-semibold uppercase tracking-wider text-blue-500 dark:text-blue-400">
+        <span className="text-[11px] font-semibold text-blue-500 dark:text-blue-400">
           {t("if")}
         </span>
         {rule.conditions.map((c, i) => {
@@ -167,7 +167,7 @@ export function VisualRuleSummary({ rule }: { rule: FilterRule }) {
       </div>
 
       <div className="flex items-baseline gap-1.5 flex-wrap">
-        <span className="text-[10px] font-semibold uppercase tracking-wider text-emerald-500 dark:text-emerald-400">
+        <span className="text-[11px] font-semibold text-emerald-500 dark:text-emerald-400">
           {t("then")}
         </span>
         {rule.actions.map((a, i) => {
@@ -188,7 +188,7 @@ export function VisualRuleSummary({ rule }: { rule: FilterRule }) {
 
       {period && (
         <div className="flex items-baseline gap-1.5 flex-wrap">
-          <span className="text-[10px] font-semibold uppercase tracking-wider text-violet-500 dark:text-violet-400">
+          <span className="text-[11px] font-semibold text-violet-500 dark:text-violet-400">
             {t("period_title")}
           </span>
           <span className="min-w-0 max-w-full px-1.5 py-px rounded-sm bg-muted/60 text-foreground wrap-anywhere">
diff --git a/components/settings/settings-app.tsx b/components/settings/settings-app.tsx
index 74eadce9d..40ac6a51f 100644
--- a/components/settings/settings-app.tsx
+++ b/components/settings/settings-app.tsx
@@ -978,7 +978,7 @@ export function SettingsApp({ linkSegments: routeSegments }: SettingsAppProps =
                 {groupIndex > 0 && <div className="mx-5 my-2 border-t border-border" />}
                 {group.label && (
                   <div className="px-5 pt-3 pb-1.5">
-                    <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                    <span className="text-xs font-semibold text-muted-foreground">
                       {group.label}
                     </span>
                   </div>
@@ -1128,7 +1128,7 @@ export function SettingsApp({ linkSegments: routeSegments }: SettingsAppProps =
                 {groupIndex > 0 && <div className="mx-1 my-2 border-t border-border" />}
                 {group.label && (
                   <div className="px-3 pt-2.5 pb-1">
-                    <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+                    <span className="text-[11px] font-semibold text-muted-foreground">
                       {group.label}
                     </span>
                   </div>
diff --git a/components/settings/share-collection-dialog.tsx b/components/settings/share-collection-dialog.tsx
index 85b04b94b..30ee64f29 100644
--- a/components/settings/share-collection-dialog.tsx
+++ b/components/settings/share-collection-dialog.tsx
@@ -289,7 +289,7 @@ export function ShareCollectionDialog({
                         <div className="text-sm font-medium truncate flex items-center gap-2">
                           {p.name}
                           {p.type === "group" && (
-                            <span className="text-[10px] uppercase font-normal text-muted-foreground bg-muted rounded px-1 py-0.5">
+                            <span className="text-[11px] font-normal text-muted-foreground bg-muted rounded px-1 py-0.5">
                               {t("group")}
                             </span>
                           )}
diff --git a/components/templates/template-picker.tsx b/components/templates/template-picker.tsx
index 8580612dc..e763c3572 100644
--- a/components/templates/template-picker.tsx
+++ b/components/templates/template-picker.tsx
@@ -128,7 +128,7 @@ export function TemplatePicker({ isOpen, onClose, onSelect, accountId }: Templat
     if (items.length === 0) return null;
     return (
       <div className="mb-4" key={`${source.key}:${title}`}>
-        <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-1 px-3">
+        <h3 className="text-xs font-semibold text-muted-foreground mb-1 px-3">
           {title}
         </h3>
         <div className="space-y-0.5">{items.map((item) => renderTemplateItem(item, source))}</div>
diff --git a/lib/__tests__/plugin-ui-kit.test.tsx b/lib/__tests__/plugin-ui-kit.test.tsx
index a02a92f98..3ebf326d5 100644
--- a/lib/__tests__/plugin-ui-kit.test.tsx
+++ b/lib/__tests__/plugin-ui-kit.test.tsx
@@ -61,7 +61,7 @@ describe('plugin UI kit components', () => {
       ['components/files/file-views.tsx', 'border-b border-border/60'],
       ['components/files/files-header.tsx', 'px-1.5 py-1 rounded-md transition-colors truncate max-w-[16rem]'],
       ['components/email/email-viewer.tsx', 'w-10 h-10 rounded-full'],
-      ['components/email/email-viewer.tsx', 'text-[10px] font-semibold uppercase tracking-wider text-muted-foreground'],
+      ['components/email/email-viewer.tsx', 'text-[11px] font-semibold text-muted-foreground'],
       ['components/email/email-viewer.tsx', 'inline-flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md border border-border hover:bg-muted transition-colors min-h-[36px]'],
       ['components/identity/identity-form.tsx', 'flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground transition-all duration-200'],
     ];
diff --git a/lib/plugin-sandbox/ui-kit/components.tsx b/lib/plugin-sandbox/ui-kit/components.tsx
index f242267b6..656c80ef7 100644
--- a/lib/plugin-sandbox/ui-kit/components.tsx
+++ b/lib/plugin-sandbox/ui-kit/components.tsx
@@ -1173,7 +1173,7 @@ export function InfoBar({ tone = 'neutral', icon, eyebrow, title, children, comp
     return (
       <div className="bk flex flex-wrap items-center gap-x-3 gap-y-1.5 px-6 py-1.5 border-b border-border bg-muted/30 text-sm">
         {icon && <span className={cn('w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0', INFO_TONE[tone])}><Icon name={icon} size="sm" /></span>}
-        {eyebrow && <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">{eyebrow}</span>}
+        {eyebrow && <span className="text-[11px] font-semibold text-muted-foreground">{eyebrow}</span>}
         {title && <span className="min-w-0 flex-1 text-foreground break-words">{title}</span>}
         {children}
       </div>
@@ -1191,7 +1191,7 @@ export function InfoBar({ tone = 'neutral', icon, eyebrow, title, children, comp
           <div className="flex-1 min-w-0 space-y-2">
             {(eyebrow || title) && (
               <div>
-                {eyebrow && <div className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">{eyebrow}</div>}
+                {eyebrow && <div className="text-[11px] font-semibold text-muted-foreground">{eyebrow}</div>}
                 {title && <div className="text-sm font-medium text-foreground break-words">{title}</div>}
               </div>
             )}
@@ -1332,7 +1332,7 @@ export function Panel({ children }: Children) {
 
 /** The small caps heading of the message details' sections. */
 export function DetailHeading({ children }: Children) {
-  return <div className="bk text-[10px] font-semibold tracking-wider text-muted-foreground uppercase mb-1.5">{children}</div>;
+  return <div className="bk text-[11px] font-semibold text-muted-foreground mb-1.5">{children}</div>;
 }
 
 /** Label and value rows like the message details (From, Date, Size...). Children are DetailRows. */