@open-mercato/ui 0.5.1-develop.2860.07af3a6a9d → 0.5.1-develop.2874.77704bccbd

package/src/backend/inputs/DateTimePicker.tsx

@@ -138,7 +138,7 @@ export function DateTimePicker({
           className={cn(
             'w-full h-9 flex items-center gap-2 rounded border px-3 text-sm text-left',
             'bg-background transition-colors',
-            'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
             'disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed',
             readOnly && 'cursor-default opacity-70',
             !formattedValue && 'text-muted-foreground',
@@ -176,7 +176,7 @@ export function DateTimePicker({
                 <button
                   type="button"
                   onClick={handleToday}
-                  className="text-sm text-primary hover:underline focus:outline-none"
+                  className="text-sm text-primary hover:underline focus-visible:outline-none"
                 >
                   {todayText}
                 </button>
@@ -185,7 +185,7 @@ export function DateTimePicker({
                 <button
                   type="button"
                   onClick={handleClear}
-                  className="text-sm text-muted-foreground hover:text-foreground hover:underline focus:outline-none ml-auto"
+                  className="text-sm text-muted-foreground hover:text-foreground hover:underline focus-visible:outline-none ml-auto"
                 >
                   {clearText}
                 </button>

package/src/backend/inputs/EventSelect.tsx

@@ -104,7 +104,7 @@ export function EventSelect({
     <select
       value={value}
       onChange={(e) => onChange(e.target.value)}
-      className={`h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className || ''}`}
+      className={`h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${className || ''}`}
       disabled={disabled || isLoading}
     >
       <option value="" disabled>

package/src/backend/inputs/LookupSelect.tsx

@@ -171,7 +171,7 @@ export function LookupSelect({
                 <div
                   key={item.id}
                   className={cn(
-                    'flex gap-3 rounded border bg-card p-3 transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
+                    'flex gap-3 rounded border bg-card p-3 transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background',
                     isSelected ? 'border-primary/70 bg-primary/5' : 'hover:border-primary/50'
                   )}
                   role="button"

package/src/backend/inputs/SwitchableMarkdownInput.tsx

@@ -78,7 +78,7 @@ export function SwitchableMarkdownInput({
   const editorClasses = editorClassName ?? 'w-full'
   const textareaClasses =
     textareaClassName
-    ?? 'w-full resize-none overflow-hidden rounded-lg border border-muted-foreground/20 bg-background px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary'
+    ?? 'w-full resize-none overflow-hidden rounded-lg border border-muted-foreground/20 bg-background px-3 py-2 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
 
   if (isMarkdownEnabled && !disableMarkdown) {
     return (

package/src/backend/inputs/TagsInput.tsx

@@ -205,7 +205,7 @@ export function TagsInput({
               <span className="flex flex-col items-start leading-tight">
                 <span className="whitespace-nowrap">{label}</span>
                 {description ? (
-                  <span className="text-[10px] text-muted-foreground">{description}</span>
+                  <span className="text-overline text-muted-foreground">{description}</span>
                 ) : null}
               </span>
               <IconButton
@@ -285,7 +285,7 @@ export function TagsInput({
               >
                 <span>{option.label}</span>
                 {option.description ? (
-                  <span className="text-[10px] text-muted-foreground">{option.description}</span>
+                  <span className="text-overline text-muted-foreground">{option.description}</span>
                 ) : null}
               </Button>
             ))}

package/src/backend/inputs/TimeInput.tsx

@@ -109,7 +109,7 @@ export function TimeInput({
 
   const inputClass = cn(
     'w-14 h-9 rounded border text-center text-sm tabular-nums',
-    'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
     disabled && 'bg-muted text-muted-foreground cursor-not-allowed',
     'disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed'
   )

package/src/backend/inputs/TimePicker.tsx

@@ -74,7 +74,7 @@ export function TimePicker({
           className={cn(
             'w-full h-9 flex items-center gap-2 rounded border px-3 text-sm text-left',
             'bg-background transition-colors',
-            'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1',
+            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1',
             'disabled:bg-muted disabled:text-muted-foreground disabled:cursor-not-allowed',
             readOnly && 'cursor-default opacity-70',
             !value && 'text-muted-foreground',
@@ -98,7 +98,7 @@ export function TimePicker({
               <button
                 type="button"
                 onClick={handleNow}
-                className="text-sm text-primary hover:underline focus:outline-none"
+                className="text-sm text-primary hover:underline focus-visible:outline-none"
               >
                 {nowText}
               </button>
@@ -107,7 +107,7 @@ export function TimePicker({
               <button
                 type="button"
                 onClick={handleClear}
-                className="text-sm text-muted-foreground hover:text-foreground hover:underline focus:outline-none ml-auto"
+                className="text-sm text-muted-foreground hover:text-foreground hover:underline focus-visible:outline-none ml-auto"
               >
                 {clearText}
               </button>

package/src/backend/messages/MessageObjectDetail.tsx

@@ -37,7 +37,7 @@ export function MessageObjectDetail(props: ObjectDetailProps) {
       {viewAction?.href ? (
         <Link
           href={resolveActionHref(viewAction.href, props.entityId)}
-          className="block rounded-md transition-opacity hover:opacity-75"
+          className="block rounded-md transition-opacity hover:opacity-80"
         >
           {preview}
         </Link>

package/src/backend/messages/MessageObjectPreview.tsx

@@ -20,7 +20,7 @@ export function MessageObjectPreview({
   const Icon = resolveIcon(icon)
 
   return (
-    <div className="flex items-start gap-3 rounded-md border bg-muted/20 p-3">
+    <div className="flex items-start gap-3 rounded-md border bg-muted/30 p-3">
       <Icon className="mt-0.5 h-4 w-4 text-muted-foreground" />
       <div className="min-w-0 flex-1 space-y-1">
         <div className="flex items-center gap-2">

package/src/backend/messages/message-compose-form-groups.tsx

@@ -228,7 +228,7 @@ function ComposeModeFields({ compose }: ComposeProps) {
         placeholder={compose.t('messages.placeholders.body', 'Write your message...')}
         inputId="messages-compose-body"
         rows={8}
-        textareaClassName="min-h-[180px] w-full rounded-md border bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+        textareaClassName="min-h-[180px] w-full rounded-md border bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
       />
 
       <div className="space-y-2">
@@ -256,7 +256,7 @@ function ReplyModeFields({ compose }: ComposeProps) {
         placeholder={compose.t('messages.placeholders.replyBody', 'Write your reply...')}
         inputId="messages-compose-body"
         rows={8}
-        textareaClassName="min-h-[180px] w-full rounded-md border bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+        textareaClassName="min-h-[180px] w-full rounded-md border bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
       />
 
       <div className="space-y-2">
@@ -289,7 +289,7 @@ function ForwardModeFields({ compose }: ComposeProps) {
         placeholder={compose.t('messages.placeholders.forwardContent', 'Review and edit forwarded content...')}
         inputId="messages-forward-note"
         rows={6}
-        textareaClassName="min-h-[140px] w-full rounded-md border bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+        textareaClassName="min-h-[140px] w-full rounded-md border bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
       />
     </>
   )

package/src/backend/notifications/NotificationCountBadge.tsx

@@ -7,7 +7,7 @@ export type NotificationCountBadgeProps = {
 export function NotificationCountBadge({ count }: NotificationCountBadgeProps) {
   if (count <= 0) return null
   return (
-    <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-destructive text-[10px] font-medium text-destructive-foreground">
+    <span className="absolute -top-1 -right-1 flex h-5 w-5 items-center justify-center rounded-full bg-destructive text-overline font-medium text-destructive-foreground">
       {count > 99 ? '99+' : count}
     </span>
   )

package/src/backend/notifications/NotificationPanel.tsx

@@ -120,13 +120,13 @@ export function NotificationPanel({
   return (
     <>
       <div
-        className="fixed inset-0 z-40 bg-black/20"
+        className="fixed inset-0 z-overlay bg-black/20"
         onClick={() => onOpenChange(false)}
         aria-hidden="true"
       />
 
       <div
-        className="fixed right-0 top-0 z-50 h-full w-full max-w-md border-l bg-background shadow-lg"
+        className="fixed right-0 top-0 z-modal h-full w-full max-w-md border-l bg-background shadow-lg"
         role="dialog"
         aria-modal="true"
         aria-label={t('notifications.title', 'Notifications')}
@@ -183,7 +183,7 @@ export function NotificationPanel({
           </Tabs>
 
           {dismissUndo && onUndoDismiss && (
-            <div className="border-b bg-muted/40 px-4 py-2 text-sm">
+            <div className="border-b bg-muted/50 px-4 py-2 text-sm">
               <div className="flex items-center justify-between gap-3">
                 <span>
                   {t('notifications.toast.dismissed', 'Notification dismissed')}

package/src/backend/progress/ProgressTopBar.tsx

@@ -58,7 +58,7 @@ export function ProgressTopBar({ className, t }: ProgressTopBarProps) {
             </>
           ) : (
             <>
-              <CheckCircle className="h-4 w-4 text-green-500" />
+              <CheckCircle className="h-4 w-4 text-status-success-icon" />
               <span className="text-muted-foreground">
                 {t('progress.recentlyCompleted', '{count} operations completed', { count: recentlyCompleted.length })}
               </span>
@@ -108,13 +108,13 @@ function ProgressJobCard({ job, t, onCancel }: { job: ProgressJobDto; t: Transla
     <div className={cn(
       'rounded-md border bg-card p-3',
       isFailed && 'border-destructive/50 bg-destructive/5',
-      isCompleted && 'border-green-500/50 bg-green-50/50 dark:bg-green-950/20',
+      isCompleted && 'border-status-success-border bg-status-success-bg',
     )}>
       <div className="flex items-start justify-between gap-2">
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2">
             {isActive && <Loader2 className="h-4 w-4 animate-spin text-primary flex-shrink-0" />}
-            {isCompleted && <CheckCircle className="h-4 w-4 text-green-500 flex-shrink-0" />}
+            {isCompleted && <CheckCircle className="h-4 w-4 text-status-success-icon flex-shrink-0" />}
             {isFailed && <XCircle className="h-4 w-4 text-destructive flex-shrink-0" />}
             <span className="font-medium truncate">{job.name}</span>
           </div>
@@ -170,7 +170,7 @@ function IndeterminateProgressBar({ className }: { className?: string }) {
   return (
     <div className={cn('relative w-full overflow-hidden rounded-full bg-secondary', className)}>
       <div className="absolute inset-y-0 left-0 w-1/2 animate-pulse rounded-full bg-primary/80" />
-      <div className="absolute inset-y-0 right-0 w-1/3 rounded-full bg-primary/40" />
+      <div className="absolute inset-y-0 right-0 w-1/3 rounded-full bg-primary/10" />
     </div>
   )
 }

package/src/backend/schedule/ScheduleAgenda.tsx

@@ -119,7 +119,7 @@ export function ScheduleAgenda({ items, range, timezone, onItemClick, onSlotClic
                         <span className="font-semibold">{item.title}</span>
                         {statusLabel ? <Badge variant="secondary">{statusLabel}</Badge> : null}
                       </div>
-                      <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+                      <div className="flex items-center justify-between text-overline text-muted-foreground">
                         <span>{formatTimeRange(item, timezone)}</span>
                         <span className="capitalize">{item.kind}</span>
                       </div>

package/src/backend/schedule/ScheduleCalendar.tsx

@@ -160,7 +160,7 @@ export default function ScheduleCalendar({
                 type="button"
                 variant="link"
                 size="sm"
-                className="h-auto p-0 text-[11px]"
+                className="h-auto p-0 text-overline"
                 onClick={(clickEvent) => {
                   clickEvent.stopPropagation()
                   onItemClick?.(resource)

package/src/backend/schedule/ScheduleGrid.tsx

@@ -119,7 +119,7 @@ export function ScheduleGrid({ items, range, timezone, onItemClick, onSlotClick,
                         <span className="font-semibold">{item.title}</span>
                         {statusLabel ? <Badge variant="secondary">{statusLabel}</Badge> : null}
                       </div>
-                      <div className="flex items-center justify-between text-[11px] text-muted-foreground">
+                      <div className="flex items-center justify-between text-overline text-muted-foreground">
                         <span>{formatTimeRange(item, timezone)}</span>
                         <span className="capitalize">{item.kind}</span>
                       </div>

package/src/backend/version-history/VersionHistoryPanel.tsx

@@ -142,12 +142,12 @@ export function VersionHistoryPanel({
   return (
     <>
       <div
-        className="fixed inset-0 z-40 bg-black/20"
+        className="fixed inset-0 z-overlay bg-black/20"
         onClick={() => onOpenChange(false)}
         aria-hidden="true"
       />
       <div
-        className="fixed right-0 top-0 z-50 h-full w-full max-w-md border-l bg-background shadow-lg"
+        className="fixed right-0 top-0 z-modal h-full w-full max-w-md border-l bg-background shadow-lg"
         role="dialog"
         aria-modal="true"
         aria-label={t('audit_logs.version_history.title')}
@@ -240,7 +240,7 @@ export function VersionHistoryPanel({
                       return (
                         <div
                           key={entry.id}
-                          className={`flex items-start justify-between gap-3 py-3 transition-colors hover:bg-muted/40 ${isRelatedEntry ? 'pl-8 pr-4 border-l-2 border-l-muted-foreground/20' : 'px-4'}`}
+                          className={`flex items-start justify-between gap-3 py-3 transition-colors hover:bg-muted/50 ${isRelatedEntry ? 'pl-8 pr-4 border-l-2 border-l-muted-foreground/20' : 'px-4'}`}
                         >
                           <Button
                             type="button"
@@ -249,7 +249,7 @@ export function VersionHistoryPanel({
                             onClick={() => setSelectedEntry(entry)}
                           >
                             {isRelatedEntry ? (
-                              <span className="text-[10px] uppercase tracking-wider text-muted-foreground/70 font-medium">
+                              <span className="text-overline uppercase tracking-wider text-muted-foreground/70 font-medium">
                                 {humanizeResourceKind(entry.resourceKind, t)}
                               </span>
                             ) : null}

package/src/frontend/AuthFooter.tsx

@@ -12,7 +12,7 @@ export function AuthFooter() {
     (typeof pathname === 'string' && pathname.startsWith('/onboarding'))
   if (!shouldShow) return null
   return (
-    <footer className="w-full border-t bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/50">
+    <footer className="w-full border-t bg-background/80 backdrop-blur supports-[backdrop-filter]:bg-background/80">
       <div className="max-w-screen-lg mx-auto px-4 py-3 flex flex-wrap items-center justify-end gap-4">
         <nav className="flex items-center gap-3 text-xs text-muted-foreground">
           <Link href="/terms" className="transition hover:text-foreground">

package/src/frontend/LanguageSwitcher.tsx

@@ -44,7 +44,7 @@ export function LanguageSwitcher() {
       <div className="relative">
         <select
           id={selectId}
-          className="appearance-none rounded-md border bg-background px-3 py-1 pr-8 text-xs focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 disabled:opacity-60"
+          className="appearance-none rounded-md border bg-background px-3 py-1 pr-8 text-xs focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 disabled:opacity-50"
           value={current}
           onChange={(event) => setLocale(event.target.value as Locale)}
           disabled={pending}

package/src/frontend/Layout.tsx

@@ -5,9 +5,9 @@ export function FrontendLayout({ header, footer, children }: { header?: React.Re
   return (
     <div className="min-h-svh flex flex-col">
       <FlashMessages />
-      {header ? <div className="border-b bg-background/60">{header}</div> : null}
+      {header ? <div className="border-b bg-background/80">{header}</div> : null}
       <div className="flex-1 min-h-0">{children}</div>
-      {footer ? <div className="border-t bg-background/60">{footer}</div> : null}
+      {footer ? <div className="border-t bg-background/80">{footer}</div> : null}
     </div>
   )
 }

package/src/index.ts

@@ -26,7 +26,12 @@ export * from './frontend/Layout'
 export * from './frontend/AuthFooter'
 export * from './frontend/LanguageSwitcher'
 export * from './primitives/button'
-export * from './primitives/icon-button' 
+export * from './primitives/icon-button'
+export * from './primitives/link-button'
+export * from './primitives/social-button'
+export * from './primitives/fancy-button'
+export * from './primitives/checkbox'
+export * from './primitives/checkbox-field'
 export * from './primitives/label'
 export * from './primitives/separator'
 export * from './primitives/spinner'

package/src/portal/PortalShell.tsx

@@ -94,7 +94,7 @@ function SidebarNavItem({
   if (!label) return null
 
   const cls = [
-    'flex items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] font-medium transition-colors',
+    'flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium transition-colors',
     active
       ? 'bg-foreground text-background'
       : 'text-muted-foreground hover:bg-muted hover:text-foreground',
@@ -124,7 +124,7 @@ function UserAvatar({ name, className }: { name?: string; className?: string })
     ? name.split(' ').map((w) => w[0]).slice(0, 2).join('').toUpperCase()
     : '?'
   return (
-    <div className={`flex items-center justify-center rounded-full bg-foreground text-[11px] font-semibold text-background ${className ?? 'size-8'}`}>
+    <div className={`flex items-center justify-center rounded-full bg-foreground text-overline font-semibold text-background ${className ?? 'size-8'}`}>
       {initials}
     </div>
   )
@@ -242,17 +242,17 @@ export function PortalShell({
   if (!authenticated) {
     return (
       <div className="flex min-h-svh flex-col bg-background" data-portal-handle={PORTAL_SHELL_HANDLE}>
-        <header className="sticky top-0 z-40 border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80" data-portal-handle={PORTAL_HEADER_HANDLE}>
+        <header className="sticky top-0 z-sticky border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80" data-portal-handle={PORTAL_HEADER_HANDLE}>
           <div className="mx-auto flex h-16 w-full max-w-screen-lg items-center justify-between px-6">
             <Link href={portalHome} className="flex items-center gap-2.5 text-foreground transition hover:opacity-80" aria-label={headerTitle}>
               <Image src={logo?.src ?? "/open-mercato.svg"} alt={logo?.alt ?? ""} width={28} height={28} className="" priority />
-              <span className="text-[15px] font-semibold tracking-tight">{headerTitle}</span>
+              <span className="text-base font-semibold tracking-tight">{headerTitle}</span>
             </Link>
             <nav aria-label="Primary" className="flex items-center gap-1">
-              <Button asChild variant="ghost" size="sm" className="text-[13px]">
+              <Button asChild variant="ghost" size="sm" className="text-sm">
                 <Link href={loginHref}>{t('portal.nav.login', 'Log In')}</Link>
               </Button>
-              <Button asChild size="sm" className="rounded-lg text-[13px]">
+              <Button asChild size="sm" className="rounded-lg text-sm">
                 <Link href={signupHref}>{t('portal.nav.signup', 'Sign Up')}</Link>
               </Button>
             </nav>
@@ -287,12 +287,12 @@ export function PortalShell({
       <div className="flex h-16 items-center gap-2.5 border-b px-5">
         <Link href={portalHome} className="flex items-center gap-2.5 text-foreground transition hover:opacity-80" aria-label={headerTitle}>
           <Image src={logo?.src ?? "/open-mercato.svg"} alt={logo?.alt ?? ""} width={22} height={22} className="" />
-          <span className="text-[14px] font-semibold tracking-tight truncate">{headerTitle}</span>
+          <span className="text-sm font-semibold tracking-tight truncate">{headerTitle}</span>
         </Link>
       </div>
 
       <nav aria-label="Portal navigation" className="flex-1 overflow-y-auto px-3 py-5">
-        <p className="mb-2 px-3 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground/50">
+        <p className="mb-2 px-3 text-overline font-semibold uppercase tracking-widest text-muted-foreground/50">
           {t('portal.nav.home', 'Portal')}
         </p>
         <div className="flex flex-col gap-0.5">
@@ -309,7 +309,7 @@ export function PortalShell({
 
         {mergedAccountItems.length > 0 ? (
           <div className="mt-8">
-            <p className="mb-2 px-3 text-[10px] font-semibold uppercase tracking-[0.12em] text-muted-foreground/50">
+            <p className="mb-2 px-3 text-overline font-semibold uppercase tracking-widest text-muted-foreground/50">
               {t('portal.nav.account', 'Account')}
             </p>
             <div className="flex flex-col gap-0.5">
@@ -332,12 +332,12 @@ export function PortalShell({
           <UserAvatar name={userName} className="size-8" />
           <div className="min-w-0 flex-1">
             {userName ? (
-              <p className="truncate text-[13px] font-medium leading-tight">{userName}</p>
+              <p className="truncate text-sm font-medium leading-tight">{userName}</p>
             ) : (
               <div className="h-4 w-24 animate-pulse rounded bg-muted" />
             )}
             {userEmail ? (
-              <p className="truncate text-[11px] text-muted-foreground">{userEmail}</p>
+              <p className="truncate text-overline text-muted-foreground">{userEmail}</p>
             ) : (
               <div className="mt-1 h-3 w-32 animate-pulse rounded bg-muted" />
             )}
@@ -346,7 +346,7 @@ export function PortalShell({
         <button
           type="button"
           onClick={onLogout}
-          className="mt-0.5 flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-[13px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+          className="mt-0.5 flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
           data-portal-handle={PORTAL_USER_MENU_HANDLE}
           data-menu-item-id="portal-logout"
         >
@@ -366,8 +366,8 @@ export function PortalShell({
       </aside>
 
       {mobileOpen ? (
-        <div className="fixed inset-0 z-50 lg:hidden">
-          <div className="absolute inset-0 bg-black/30 backdrop-blur-sm" onClick={closeMobile} />
+        <div className="fixed inset-0 z-modal lg:hidden">
+          <div className="absolute inset-0 bg-black/20 backdrop-blur-sm" onClick={closeMobile} />
           <aside className="relative z-10 h-full w-[280px] bg-background shadow-2xl">
             <div className="absolute right-3 top-4 z-20">
               <IconButton variant="ghost" size="sm" type="button" onClick={closeMobile} aria-label="Close menu">
@@ -398,7 +398,7 @@ export function PortalShell({
         </main>
 
         <footer className="border-t px-4 py-4 lg:px-8" data-portal-handle={PORTAL_FOOTER_HANDLE}>
-          <p className="text-[11px] text-muted-foreground/50">
+          <p className="text-overline text-muted-foreground/50">
             {t('portal.footer.copyright', '\u00A9 {year} All rights reserved.', { year: new Date().getFullYear() })}
           </p>
         </footer>

package/src/portal/components/PortalCard.tsx

@@ -35,7 +35,7 @@ export function PortalCardHeader({ title, description, label, action }: PortalCa
     <div className="mb-4 flex items-start justify-between gap-4">
       <div>
         {label ? (
-          <p className="mb-1.5 text-[11px] font-medium uppercase tracking-widest text-muted-foreground/60">
+          <p className="mb-1.5 text-overline font-medium uppercase tracking-widest text-muted-foreground/60">
             {label}
           </p>
         ) : null}
@@ -61,7 +61,7 @@ type PortalStatRowProps = {
 export function PortalStatRow({ label, value }: PortalStatRowProps) {
   return (
     <div className="flex items-center justify-between gap-4 py-2.5">
-      <span className="text-[11px] font-medium uppercase tracking-wider text-muted-foreground/70">
+      <span className="text-overline font-medium uppercase tracking-wider text-muted-foreground/70">
         {label}
       </span>
       <span className="text-sm font-medium text-foreground">{value}</span>

package/src/portal/components/PortalNotificationPanel.tsx

@@ -22,10 +22,10 @@ function CheckIcon({ className }: { className?: string }) {
 }
 
 const SEVERITY_STYLES: Record<string, string> = {
-  info: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400',
-  success: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400',
-  warning: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400',
-  error: 'bg-rose-100 text-rose-700 dark:bg-rose-900/30 dark:text-rose-400',
+  info: 'bg-status-info-bg text-status-info-text',
+  success: 'bg-status-success-bg text-status-success-text',
+  warning: 'bg-status-warning-bg text-status-warning-text',
+  error: 'bg-status-error-bg text-status-error-text',
 }
 
 type Tab = 'all' | 'unread'
@@ -84,19 +84,19 @@ export function PortalNotificationPanel({
   return (
     <>
       {/* Backdrop */}
-      <div className="fixed inset-0 z-50 bg-black/20 backdrop-blur-sm" onClick={onClose} />
+      <div className="fixed inset-0 z-modal bg-black/20 backdrop-blur-sm" onClick={onClose} />
 
       {/* Panel */}
       <div
         ref={panelRef}
-        className="fixed right-0 top-0 z-50 flex h-full w-full max-w-md flex-col border-l bg-background shadow-2xl"
+        className="fixed right-0 top-0 z-modal flex h-full w-full max-w-md flex-col border-l bg-background shadow-2xl"
       >
         {/* Header */}
         <div className="flex h-16 items-center justify-between border-b px-5">
           <div>
-            <h2 className="text-[15px] font-semibold">{t('portal.notifications.title', 'Notifications')}</h2>
+            <h2 className="text-base font-semibold">{t('portal.notifications.title', 'Notifications')}</h2>
             {unreadCount > 0 ? (
-              <p className="text-[11px] text-muted-foreground">
+              <p className="text-overline text-muted-foreground">
                 {t('portal.notifications.unreadSummary', '{count} unread', { count: unreadCount })}
               </p>
             ) : null}
@@ -107,7 +107,7 @@ export function PortalNotificationPanel({
                 type="button"
                 variant="ghost"
                 size="sm"
-                className="text-[12px] text-muted-foreground"
+                className="text-xs text-muted-foreground"
                 onClick={() => onMarkAllRead()}
               >
                 <CheckIcon className="mr-1 size-3.5" />
@@ -127,7 +127,7 @@ export function PortalNotificationPanel({
               key={tabId}
               type="button"
               onClick={() => setTab(tabId)}
-              className={`border-b-2 px-3 py-2.5 text-[13px] font-medium transition-colors ${
+              className={`border-b-2 px-3 py-2.5 text-sm font-medium transition-colors ${
                 tab === tabId
                   ? 'border-foreground text-foreground'
                   : 'border-transparent text-muted-foreground hover:text-foreground'
@@ -137,7 +137,7 @@ export function PortalNotificationPanel({
                 ? t('portal.notifications.tab.all', 'All')
                 : t('portal.notifications.tab.unread', 'Unread')}
               {tabId === 'unread' && unreadCount > 0 ? (
-                <span className="ml-1.5 inline-flex size-5 items-center justify-center rounded-full bg-foreground text-[10px] font-bold text-background">
+                <span className="ml-1.5 inline-flex size-5 items-center justify-center rounded-full bg-foreground text-overline font-bold text-background">
                   {unreadCount}
                 </span>
               ) : null}
@@ -164,22 +164,22 @@ export function PortalNotificationPanel({
                 }`}
               >
                 {/* Severity dot */}
-                <div className={`mt-1 flex size-8 shrink-0 items-center justify-center rounded-lg text-[10px] font-bold ${SEVERITY_STYLES[notification.severity] ?? SEVERITY_STYLES.info}`}>
+                <div className={`mt-1 flex size-8 shrink-0 items-center justify-center rounded-lg text-overline font-bold ${SEVERITY_STYLES[notification.severity] ?? SEVERITY_STYLES.info}`}>
                   {notification.severity.charAt(0).toUpperCase()}
                 </div>
 
                 {/* Content */}
                 <div className="min-w-0 flex-1">
                   <div className="flex items-start justify-between gap-2">
-                    <p className="text-[13px] font-medium leading-snug">
+                    <p className="text-sm font-medium leading-snug">
                       {notification.title}
                     </p>
-                    <span className="shrink-0 text-[11px] text-muted-foreground/60">
+                    <span className="shrink-0 text-overline text-muted-foreground/60">
                       {formatTime(notification.createdAt)}
                     </span>
                   </div>
                   {notification.body ? (
-                    <p className="mt-0.5 text-[12px] leading-relaxed text-muted-foreground">
+                    <p className="mt-0.5 text-xs leading-relaxed text-muted-foreground">
                       {notification.body}
                     </p>
                   ) : null}
@@ -191,7 +191,7 @@ export function PortalNotificationPanel({
                         type="button"
                         variant="ghost"
                         size="sm"
-                        className="h-auto px-2 py-1 text-[11px] text-muted-foreground"
+                        className="h-auto px-2 py-1 text-overline text-muted-foreground"
                         onClick={() => onMarkAsRead(notification.id)}
                       >
                         {t('portal.notifications.markRead', 'Mark read')}
@@ -201,7 +201,7 @@ export function PortalNotificationPanel({
                       type="button"
                       variant="ghost"
                       size="sm"
-                      className="h-auto px-2 py-1 text-[11px] text-muted-foreground"
+                      className="h-auto px-2 py-1 text-overline text-muted-foreground"
                       onClick={() => onDismiss(notification.id)}
                     >
                       {t('portal.notifications.dismiss', 'Dismiss')}
@@ -209,7 +209,7 @@ export function PortalNotificationPanel({
                     {notification.linkHref ? (
                       <a
                         href={notification.linkHref}
-                        className="ml-auto text-[11px] font-medium text-foreground underline underline-offset-2 hover:opacity-80"
+                        className="ml-auto text-overline font-medium text-foreground underline underline-offset-2 hover:opacity-80"
                         onClick={() => {
                           if (notification.status === 'unread') onMarkAsRead(notification.id)
                           onClose()

package/src/portal/components/PortalPageHeader.tsx

@@ -18,7 +18,7 @@ export function PortalPageHeader({ title, description, label, action }: PortalPa
     <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-4">
       <div>
         {label ? (
-          <p className="mb-1 text-[11px] font-medium uppercase tracking-widest text-muted-foreground/60">
+          <p className="mb-1 text-overline font-medium uppercase tracking-widest text-muted-foreground/60">
             {label}
           </p>
         ) : null}