From b94912789f7d7be93def334aeb3377dd0dad409d Mon Sep 17 00:00:00 2001
From: "Zimin A.N." <zimin.an@nstart.space>
Date: Mon, 11 May 2026 14:31:35 +0300
Subject: [PATCH] fix(fonts): semantic typography utilities per handoff (7
 roles)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Заменяет blanket override из MR !45 на типизированную type scale per
design_handoff_ordinis_mdm/README.md "Scale" section.

Семь semantic @utility в styles.css:
  text-title-xl  22/600   — modal title, section header
  text-title-lg  17/600   — page title в editor
  text-title-md  15/600   — dictionary card title
  text-body      13/400   — workhorse: body, buttons, tabs, inputs
  text-cell      12.5/500 — table cell text
  text-mono      11/500   — Mono: IDs, dates, FK refs (font-mono baked in)
  text-cap       10.5/600 — Tektur UPPERCASE caption (font/uppercase baked in)

Audit phases:
  P1: добавил 7 утилит, font/uppercase/tracking baked где надо
  P2: 43 deterministic codemods (font-mono+text-2xs/[11px] → text-mono,
      [15/17/22]px+font-semibold → text-title-*, [12.5]px → text-cell,
      [10.5]px+uppercase+tracking → text-cap)
  P3: 64 text-sm → text-body (handoff workhorse), 84 text-2xs context-aware
      (TableCell → text-cell, bare → text-cell, плюс cleanup caps в backticks
      template literals который Phase 2 пропустил), 25 text-xs (6 → text-mono
      когда с font-mono, 19 → text-cell), 8 titles text-base/lg → text-title-*
  P4: убрал --text-2xs override (no users), оставил --text-sm: 13px scoped
      к @nstart/ui passthrough (см. comment в styles.css — убирается в Stage 3.9)

Stats:
  text-body: 69 | text-cell: 99 | text-mono: 50 | text-cap: 42
  text-title-xl: 5 | text-title-lg: 5 | text-title-md: 7
  text-sm/text-2xs/text-xs в src/: 0 (только в styles.css комментариях)

Поведение всех 277 typography usages теперь явно соответствует handoff —
каждое место осознанно выбрано под роль, не плажирующий override.
---
 ordinis-admin-ui/src/auth/AuthBadge.tsx       |  2 +-
 ordinis-admin-ui/src/auth/RequireAuth.tsx     |  8 +-
 .../src/components/form/SchemaDrivenForm.tsx  | 10 +--
 .../src/components/geo/AoiPickerDialog.tsx    |  8 +-
 .../src/components/graph/DictionaryGraph.tsx  |  8 +-
 .../src/components/layout/Sidebar.tsx         | 13 ++-
 .../src/components/layout/TopBar.tsx          |  6 +-
 .../lineage/CascadeConfirmDialog.tsx          | 14 ++--
 .../lineage/DictionaryDependentsPanel.tsx     |  6 +-
 .../components/lineage/DictionaryHubView.tsx  | 12 +--
 .../lineage/RecordDependentsPanel.tsx         | 12 +--
 .../components/record/RecordHistoryDrawer.tsx | 10 +--
 .../schema/DictionaryEditorDialog.tsx         | 18 ++--
 .../components/schema/EventsPreviewTab.tsx    | 12 +--
 .../src/components/schema/PropertyEditor.tsx  |  6 +-
 .../timetravel/TimeTravelPicker.tsx           | 22 ++---
 .../src/components/version/UpdateBanner.tsx   |  2 +-
 .../src/components/version/VersionBadge.tsx   |  2 +-
 ordinis-admin-ui/src/routes/audit.tsx         | 18 ++--
 .../src/routes/dictionaries.$name.tsx         | 66 +++++++--------
 .../src/routes/dictionaries.index.tsx         | 20 ++---
 ordinis-admin-ui/src/routes/my-drafts.tsx     | 14 ++--
 ordinis-admin-ui/src/routes/outbox.tsx        | 12 +--
 ordinis-admin-ui/src/routes/reviews.tsx       | 26 +++---
 ordinis-admin-ui/src/routes/search.tsx        | 10 +--
 ordinis-admin-ui/src/routes/webhooks.$id.tsx  | 42 +++++-----
 .../src/routes/webhooks.index.tsx             | 10 +--
 ordinis-admin-ui/src/styles.css               | 84 +++++++++++++++----
 ordinis-admin-ui/src/ui/components/alert.tsx  |  2 +-
 ordinis-admin-ui/src/ui/components/badge.tsx  |  2 +-
 ordinis-admin-ui/src/ui/components/button.tsx |  4 +-
 ordinis-admin-ui/src/ui/components/card.tsx   |  4 +-
 ordinis-admin-ui/src/ui/components/dialog.tsx |  4 +-
 .../src/ui/components/dropdown-menu.tsx       | 10 +--
 .../src/ui/components/empty-state.tsx         |  4 +-
 ordinis-admin-ui/src/ui/components/input.tsx  |  8 +-
 ordinis-admin-ui/src/ui/components/label.tsx  |  2 +-
 .../src/ui/components/loading-block.tsx       |  2 +-
 .../src/ui/components/page-header.tsx         |  4 +-
 .../src/ui/components/popover.tsx             |  2 +-
 ordinis-admin-ui/src/ui/components/scope.tsx  |  2 +-
 ordinis-admin-ui/src/ui/components/sheet.tsx  |  4 +-
 ordinis-admin-ui/src/ui/components/tabs.tsx   |  2 +-
 .../src/ui/components/textarea.tsx            |  6 +-
 .../src/ui/components/toaster.tsx             |  2 +-
 .../src/ui/components/tooltip.tsx             |  2 +-
 46 files changed, 296 insertions(+), 243 deletions(-)

diff --git a/ordinis-admin-ui/src/auth/AuthBadge.tsx b/ordinis-admin-ui/src/auth/AuthBadge.tsx
index a6b5776..a8a0736 100644
--- a/ordinis-admin-ui/src/auth/AuthBadge.tsx
+++ b/ordinis-admin-ui/src/auth/AuthBadge.tsx
@@ -58,7 +58,7 @@ export function AuthBadge() {
 
   return (
     <div className="flex items-center gap-2">
-      <span className="inline-flex items-center gap-1 text-sm text-ink">
+      <span className="inline-flex items-center gap-1 text-body text-ink">
         <UserIcon size={14} weight="duotone" />
         <span className="hidden sm:inline">{display}</span>
       </span>
diff --git a/ordinis-admin-ui/src/auth/RequireAuth.tsx b/ordinis-admin-ui/src/auth/RequireAuth.tsx
index eb19619..3b7b41f 100644
--- a/ordinis-admin-ui/src/auth/RequireAuth.tsx
+++ b/ordinis-admin-ui/src/auth/RequireAuth.tsx
@@ -34,14 +34,14 @@ export function RequireAuth({ children }: { children: ReactNode }) {
     return (
       <div className="min-h-screen flex items-center justify-center p-8">
         <div className="max-w-md text-center space-y-2">
-          <h1 className="text-lg font-sans">Ошибка входа</h1>
-          <p className="text-sm text-ink-2">
+          <h1 className="text-title-lg font-sans">Ошибка входа</h1>
+          <p className="text-body text-ink-2">
             Keycloak вернул ошибку:{' '}
             <code className="font-mono">{oidcError}</code>
           </p>
           <button
             type="button"
-            className="mt-4 inline-flex items-center justify-center rounded-sm border border-accent text-accent px-4 py-2 text-sm hover:bg-accent-bg"
+            className="mt-4 inline-flex items-center justify-center rounded-sm border border-accent text-accent px-4 py-2 text-body hover:bg-accent-bg"
             onClick={() => {
               window.location.href = '/'
             }}
@@ -59,7 +59,7 @@ export function RequireAuth({ children }: { children: ReactNode }) {
   if (auth.error && !auth.isAuthenticated) {
     return (
       <>
-        <div className="px-4 py-2 bg-amber-50 border-b border-amber-200 text-xs text-amber-900 text-center">
+        <div className="px-4 py-2 bg-amber-50 border-b border-amber-200 text-cell text-amber-900 text-center">
           Авторизация недоступна: {auth.error.message}. Доступен просмотр публичных данных.
         </div>
         {children}
diff --git a/ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx b/ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx
index a8bf4cd..0811f1a 100644
--- a/ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx
+++ b/ordinis-admin-ui/src/components/form/SchemaDrivenForm.tsx
@@ -184,7 +184,7 @@ export const SchemaDrivenForm = ({
             </div>
           )}
           {idSource && (
-            <div className="sm:col-span-2 text-2xs text-mute px-2">
+            <div className="sm:col-span-2 text-cell text-mute px-2">
               {t('form.idSourceNote', { field: idSource })}
             </div>
           )}
@@ -337,7 +337,7 @@ const FieldBody = ({
               name={`data.${fieldKey}.${loc}` as `data.${string}`}
               render={({ field }) => (
                 <div className="flex items-center gap-3">
-                  <span className="text-xs font-mono text-ink-2 normal-case tracking-normal whitespace-nowrap shrink-0 w-14">
+                  <span className="text-mono text-ink-2 normal-case tracking-normal whitespace-nowrap shrink-0 w-14">
                     {loc === defaultLocale ? <strong>{loc}</strong> : loc}
                   </span>
                   <div className="flex-1 min-w-0">
@@ -599,8 +599,8 @@ const DateTimeField = ({ label, value, defaultTime, onChange, hint, error }: Dat
           />
         </div>
       </div>
-      {hint && !error && <p className="text-2xs text-mute mt-1">{hint}</p>}
-      {error && <p className="text-2xs text-mars mt-1">{error}</p>}
+      {hint && !error && <p className="text-cell text-mute mt-1">{hint}</p>}
+      {error && <p className="text-cell text-mars mt-1">{error}</p>}
     </div>
   )
 }
@@ -797,7 +797,7 @@ const ReferenceSelectField = ({
               // appearance-none убирает OS default стрелку.
               // py-2 (8px) match'ит TextInput высоту. pr-10 — место под адорнмент.
               className={[
-                'w-full appearance-none border rounded-sm pl-3 pr-10 py-2 text-sm font-display',
+                'w-full appearance-none border rounded-sm pl-3 pr-10 py-2 text-body font-display',
                 'bg-white text-black transition-colors',
                 'focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent',
                 errorMsg ? 'border-mars' : 'border-line hover:border-carbon/40',
diff --git a/ordinis-admin-ui/src/components/geo/AoiPickerDialog.tsx b/ordinis-admin-ui/src/components/geo/AoiPickerDialog.tsx
index 5e30044..bb3e57d 100644
--- a/ordinis-admin-ui/src/components/geo/AoiPickerDialog.tsx
+++ b/ordinis-admin-ui/src/components/geo/AoiPickerDialog.tsx
@@ -163,7 +163,7 @@ export const AoiPickerDialog = ({ isOpen, onClose, onApply, initial }: Props) =>
         type="button"
         onClick={() => setDrawMode(active ? 'idle' : mode)}
         className={[
-          'px-3 py-1.5 text-xs font-display rounded-sm border transition-colors',
+          'px-3 py-1.5 text-cell font-display rounded-sm border transition-colors',
           active
             ? 'border-accent bg-accent text-white'
             : 'border-line bg-white text-ink hover:border-carbon/40',
@@ -183,7 +183,7 @@ export const AoiPickerDialog = ({ isOpen, onClose, onApply, initial }: Props) =>
       panelClassName="max-h-[calc(100vh-2rem)] my-4 flex flex-col"
       bodyClassName="flex-1 flex flex-col gap-3 overflow-hidden"
     >
-      <p className="text-sm text-ink-2">{t('aoi.dialog.help')}</p>
+      <p className="text-body text-ink-2">{t('aoi.dialog.help')}</p>
 
       <div className="flex flex-wrap items-center gap-2">
         {toolbarBtn('rectangle', t('aoi.dialog.drawRectangle'))}
@@ -192,12 +192,12 @@ export const AoiPickerDialog = ({ isOpen, onClose, onApply, initial }: Props) =>
           type="button"
           onClick={handleClear}
           disabled={!shape}
-          className="px-3 py-1.5 text-xs font-display rounded-sm border border-line bg-white text-ink hover:border-carbon/40 disabled:opacity-40 disabled:cursor-not-allowed"
+          className="px-3 py-1.5 text-cell font-display rounded-sm border border-line bg-white text-ink hover:border-carbon/40 disabled:opacity-40 disabled:cursor-not-allowed"
         >
           {t('aoi.dialog.clear')}
         </button>
         {drawMode === 'polygon' && (
-          <span className="text-2xs text-mute">
+          <span className="text-cell text-mute">
             {t('aoi.dialog.polygonHint')}
           </span>
         )}
diff --git a/ordinis-admin-ui/src/components/graph/DictionaryGraph.tsx b/ordinis-admin-ui/src/components/graph/DictionaryGraph.tsx
index c1ad7fc..c7b7730 100644
--- a/ordinis-admin-ui/src/components/graph/DictionaryGraph.tsx
+++ b/ordinis-admin-ui/src/components/graph/DictionaryGraph.tsx
@@ -89,11 +89,11 @@ export function DictionaryGraph() {
   }
 
   if (dictsQuery.error) {
-    return <div className="text-sm text-pink">Ошибка загрузки: {String(dictsQuery.error)}</div>
+    return <div className="text-body text-pink">Ошибка загрузки: {String(dictsQuery.error)}</div>
   }
 
   if (dicts.length === 0) {
-    return <div className="text-sm text-mute">Справочники не найдены.</div>
+    return <div className="text-body text-mute">Справочники не найдены.</div>
   }
 
   return (
@@ -222,7 +222,7 @@ function GraphCanvas({
   return (
     <div ref={wrapperRef} className="relative w-full h-[calc(100vh-220px)] min-h-[500px] rounded-lg border border-line bg-surface overflow-hidden">
       {depsLoading && (
-        <div className="absolute top-3 right-3 z-10 text-2xs font-mono uppercase tracking-wider text-mute bg-surface/80 backdrop-blur px-2 py-1 rounded">
+        <div className="text-mono absolute top-3 right-3 z-10 uppercase tracking-wider text-mute bg-surface/80 backdrop-blur px-2 py-1 rounded">
           Загрузка связей…
         </div>
       )}
@@ -318,7 +318,7 @@ function GraphCanvas({
         })}
       </svg>
       {/* Legend */}
-      <div className="absolute bottom-3 left-3 flex flex-col gap-1 bg-surface/90 backdrop-blur px-3 py-2 rounded-md border border-line text-2xs">
+      <div className="absolute bottom-3 left-3 flex flex-col gap-1 bg-surface/90 backdrop-blur px-3 py-2 rounded-md border border-line text-cell">
         <div className="font-display uppercase tracking-wider text-mute mb-0.5">Bundle</div>
         {Object.entries(BUNDLE_COLORS)
           .filter(([k]) => k !== 'default')
diff --git a/ordinis-admin-ui/src/components/layout/Sidebar.tsx b/ordinis-admin-ui/src/components/layout/Sidebar.tsx
index 0d4cf9c..ea15e84 100644
--- a/ordinis-admin-ui/src/components/layout/Sidebar.tsx
+++ b/ordinis-admin-ui/src/components/layout/Sidebar.tsx
@@ -140,7 +140,7 @@ export function Sidebar() {
       {/* User block — sticky bottom */}
       {auth.isAuthenticated && auth.user?.profile && (
         <div className="border-t border-line px-3 py-3 flex items-center gap-2">
-          <div className="size-8 rounded-full bg-accent text-on-accent inline-flex items-center justify-center text-xs font-semibold">
+          <div className="size-8 rounded-full bg-accent text-on-accent inline-flex items-center justify-center text-cell font-semibold">
             {String(
               auth.user.profile.preferred_username ||
                 auth.user.profile.name ||
@@ -150,7 +150,7 @@ export function Sidebar() {
               .toUpperCase()}
           </div>
           <div className="min-w-0 flex-1">
-            <div className="text-xs font-medium text-ink truncate">
+            <div className="text-cell font-medium text-ink truncate">
               {String(
                 auth.user.profile.preferred_username ||
                   auth.user.profile.name ||
@@ -159,7 +159,7 @@ export function Sidebar() {
               )}
             </div>
             {auth.user.profile.email && (
-              <div className="text-2xs text-mute truncate">{String(auth.user.profile.email)}</div>
+              <div className="text-cell text-mute truncate">{String(auth.user.profile.email)}</div>
             )}
           </div>
         </div>
@@ -179,9 +179,8 @@ function SidebarLink({ to, label, icon: Icon, badge }: NavItem) {
     <Link
       to={to}
       className={cn(
-        // 13px per handoff spec для workhorse body text. text-sm = 14px (Tailwind),
-        // text-[13px] = exact handoff value.
-        'group flex items-center gap-2.5 px-3 py-1.5 rounded-md text-[13px] transition-colors',
+        // text-body = 13px workhorse per handoff (см. styles.css @utility).
+        'group flex items-center gap-2.5 px-3 py-1.5 rounded-md text-body transition-colors',
         active
           ? 'bg-accent-bg text-accent font-medium'
           : 'text-ink-2 hover:text-ink hover:bg-surface-2',
@@ -192,7 +191,7 @@ function SidebarLink({ to, label, icon: Icon, badge }: NavItem) {
       {badge !== undefined && (
         <span
           className={cn(
-            'inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-sm text-[11px] font-mono',
+            'inline-flex items-center justify-center min-w-5 h-5 px-1.5 rounded-sm text-mono',
             active
               ? 'bg-accent text-on-accent'
               : 'bg-surface-2 text-ink-2 group-hover:bg-line',
diff --git a/ordinis-admin-ui/src/components/layout/TopBar.tsx b/ordinis-admin-ui/src/components/layout/TopBar.tsx
index 182fd2a..b0a8903 100644
--- a/ordinis-admin-ui/src/components/layout/TopBar.tsx
+++ b/ordinis-admin-ui/src/components/layout/TopBar.tsx
@@ -60,12 +60,12 @@ export function TopBar() {
   return (
     <header className="h-14 shrink-0 border-b border-line bg-surface flex items-center px-4 sm:px-6 gap-3">
       {/* Breadcrumb — left */}
-      <nav className="flex items-center gap-1.5 text-sm min-w-0">
+      <nav className="flex items-center gap-1.5 text-body min-w-0">
         {breadcrumb.map((crumb, i) => {
           const isLast = i === breadcrumb.length - 1
           return (
             <span key={i} className="flex items-center gap-1.5 min-w-0">
-              {i > 0 && <span className="text-mute text-xs">/</span>}
+              {i > 0 && <span className="text-mute text-cell">/</span>}
               {crumb.to && !isLast ? (
                 <Link
                   to={crumb.to}
@@ -101,7 +101,7 @@ export function TopBar() {
           href="/docs/"
           target="_blank"
           rel="noreferrer noopener"
-          className="hidden sm:inline text-xs text-ink-2 hover:text-ink transition-colors"
+          className="hidden sm:inline text-cell text-ink-2 hover:text-ink transition-colors"
         >
           {t('nav.docs')}
         </a>
diff --git a/ordinis-admin-ui/src/components/lineage/CascadeConfirmDialog.tsx b/ordinis-admin-ui/src/components/lineage/CascadeConfirmDialog.tsx
index cdc6c01..459b08f 100644
--- a/ordinis-admin-ui/src/components/lineage/CascadeConfirmDialog.tsx
+++ b/ordinis-admin-ui/src/components/lineage/CascadeConfirmDialog.tsx
@@ -119,7 +119,7 @@ export const CascadeConfirmDialog = ({
         {plan && (
           <>
             {/* Header summary */}
-            <p className="text-sm text-ink">
+            <p className="text-body text-ink">
               {hasBlockers
                 ? t('cascade.summary.blocked', {
                     blockers: plan.blockers.length,
@@ -137,7 +137,7 @@ export const CascadeConfirmDialog = ({
                 variant="error"
                 title={t('cascade.blockers.title', { count: plan.blockers.length })}
               >
-                <ul className="space-y-1.5 mt-2 text-2xs">
+                <ul className="space-y-1.5 mt-2 text-cell">
                   {plan.blockers.slice(0, 5).map((b) => (
                     <li key={b.recordId} className="flex items-center gap-2">
                       <XCircleIcon weight="bold" size={12} className="text-aurora shrink-0" />
@@ -153,7 +153,7 @@ export const CascadeConfirmDialog = ({
                     </li>
                   )}
                 </ul>
-                <p className="mt-2 text-2xs text-ink-2">
+                <p className="mt-2 text-cell text-ink-2">
                   {t('cascade.blockers.resolveFirst')}
                 </p>
               </Alert>
@@ -164,7 +164,7 @@ export const CascadeConfirmDialog = ({
               <section className="space-y-2">
                 <div className="flex items-center gap-2">
                   <WarningIcon weight="bold" size={14} className="text-horizon" />
-                  <h4 className="text-sm font-sans">
+                  <h4 className="text-body font-sans">
                     {t('cascade.cascade.title', { count: plan.cascade.length })}
                   </h4>
                 </div>
@@ -176,7 +176,7 @@ export const CascadeConfirmDialog = ({
                     return (
                       <li
                         key={key}
-                        className="border border-line rounded-sm px-3 py-2 text-2xs"
+                        className="border border-line rounded-sm px-3 py-2 text-cell"
                       >
                         <div className="flex items-center gap-2 mb-1">
                           <span className="font-mono text-accent">
@@ -190,7 +190,7 @@ export const CascadeConfirmDialog = ({
                           </Badge>
                           <Badge variant="neutral">{entries.length}</Badge>
                         </div>
-                        <ul className="text-2xs text-ink-2 ml-1 space-y-0.5">
+                        <ul className="text-cell text-ink-2 ml-1 space-y-0.5">
                           {sample.map((e) => (
                             <li key={e.recordId} className="font-mono">
                               · {e.businessKey}
@@ -215,7 +215,7 @@ export const CascadeConfirmDialog = ({
                 variant="warning"
                 title={t('cascade.warnings.title', { count: plan.warnings.length })}
               >
-                <p className="text-2xs">{t('cascade.warnings.note')}</p>
+                <p className="text-cell">{t('cascade.warnings.note')}</p>
               </Alert>
             )}
 
diff --git a/ordinis-admin-ui/src/components/lineage/DictionaryDependentsPanel.tsx b/ordinis-admin-ui/src/components/lineage/DictionaryDependentsPanel.tsx
index 3fd90c5..295b430 100644
--- a/ordinis-admin-ui/src/components/lineage/DictionaryDependentsPanel.tsx
+++ b/ordinis-admin-ui/src/components/lineage/DictionaryDependentsPanel.tsx
@@ -37,10 +37,10 @@ export const DictionaryDependentsPanel = ({ dictionaryName }: Props) => {
   return (
     <Panel>
       <div className="flex items-center justify-between mb-3">
-        <h3 className="text-sm font-sans text-ink">
+        <h3 className="text-body font-sans text-ink">
           {t('lineage.usedBy.title')}
         </h3>
-        <span className="text-2xs text-mute">
+        <span className="text-cell text-mute">
           {t('lineage.usedBy.count', { count: data.length })}
         </span>
       </div>
@@ -48,7 +48,7 @@ export const DictionaryDependentsPanel = ({ dictionaryName }: Props) => {
         {data.map((d) => (
           <li
             key={`${d.sourceDict}.${d.sourceField}`}
-            className="flex items-center gap-2 px-2.5 py-1.5 rounded-sm border border-line bg-white text-2xs"
+            className="flex items-center gap-2 px-2.5 py-1.5 rounded-sm border border-line bg-white text-cell"
           >
             <Link
               to="/dictionaries/$name"
diff --git a/ordinis-admin-ui/src/components/lineage/DictionaryHubView.tsx b/ordinis-admin-ui/src/components/lineage/DictionaryHubView.tsx
index 2de8562..ce20cf4 100644
--- a/ordinis-admin-ui/src/components/lineage/DictionaryHubView.tsx
+++ b/ordinis-admin-ui/src/components/lineage/DictionaryHubView.tsx
@@ -85,7 +85,7 @@ const SectionLabel = ({
   const { t } = useTranslation()
   return (
     <div
-      className={`text-2xs uppercase tracking-[0.10em] text-mute mb-2 ${
+ className={`text-cap text-mute mb-2 ${
         side === 'left' ? 'text-right' : 'text-left'
       }`}
     >
@@ -141,7 +141,7 @@ export function DictionaryHubView({ detail }: { detail: DictionaryDetail }) {
       <div className="md:order-1 order-2 space-y-2">
         <SectionLabel side="left" count={outgoingDicts.length} />
         {outgoingDicts.length === 0 ? (
-          <div className="text-2xs text-mute/70 text-right italic">
+          <div className="text-cell text-mute/70 text-right italic">
             {t('hub.noOutgoing', { defaultValue: 'нет исходящих ссылок' })}
           </div>
         ) : (
@@ -166,14 +166,14 @@ export function DictionaryHubView({ detail }: { detail: DictionaryDetail }) {
                 {t('dict.list.approval', { defaultValue: 'approval' })}
               </Badge>
             )}
-            <span className="ml-auto font-mono text-[11px] text-mute">
+            <span className="text-mono ml-auto text-mute">
               v{detail.schemaVersion}
             </span>
           </div>
-          <h2 className="font-sans text-[22px] font-semibold text-accent leading-tight">
+          <h2 className="text-title-xl font-sans text-accent leading-tight">
             {detail.displayName ?? detail.name}
           </h2>
-          <div className="font-mono text-[11px] text-mute mt-0.5">
+          <div className="text-mono text-mute mt-0.5">
             {detail.name}
           </div>
           {detail.description && (
@@ -197,7 +197,7 @@ export function DictionaryHubView({ detail }: { detail: DictionaryDetail }) {
       <div className="md:order-3 order-3 space-y-2">
         <SectionLabel side="right" count={incomingDicts.length} />
         {incomingDicts.length === 0 ? (
-          <div className="text-2xs text-mute/70 italic">
+          <div className="text-cell text-mute/70 italic">
             {t('hub.noIncoming', { defaultValue: 'никто не ссылается' })}
           </div>
         ) : (
diff --git a/ordinis-admin-ui/src/components/lineage/RecordDependentsPanel.tsx b/ordinis-admin-ui/src/components/lineage/RecordDependentsPanel.tsx
index c66f7dd..f1b9990 100644
--- a/ordinis-admin-ui/src/components/lineage/RecordDependentsPanel.tsx
+++ b/ordinis-admin-ui/src/components/lineage/RecordDependentsPanel.tsx
@@ -68,19 +68,19 @@ export const RecordDependentsPanel = ({ dictionaryName, businessKey }: Props) =>
   return (
     <section className="space-y-3">
       <div className="flex items-center justify-between">
-        <h3 className="text-sm font-sans text-ink">
+        <h3 className="text-body font-sans text-ink">
           {t('lineage.refs.title')}
         </h3>
         <div className="flex items-center gap-2">
           {stale !== null && stale >= 2 && (
             <span
-              className="text-2xs text-mute px-2 py-0.5 rounded-sm border border-line"
+              className="text-cell text-mute px-2 py-0.5 rounded-sm border border-line"
               title={t('lineage.refs.staleHint')}
             >
               {t('lineage.refs.stale', { minutes: stale })}
             </span>
           )}
-          <span className="text-2xs text-mute">
+          <span className="text-cell text-mute">
             {t('lineage.refs.total', { count: data.total })}
           </span>
         </div>
@@ -91,7 +91,7 @@ export const RecordDependentsPanel = ({ dictionaryName, businessKey }: Props) =>
         {data.perSource.map((s) => (
           <li
             key={`${s.sourceDict}.${s.sourceField}`}
-            className="flex items-center gap-1.5 px-2 py-1 rounded-sm border border-line bg-line/30 text-2xs"
+            className="flex items-center gap-1.5 px-2 py-1 rounded-sm border border-line bg-line/30 text-cell"
           >
             <Link
               to="/dictionaries/$name"
@@ -115,7 +115,7 @@ export const RecordDependentsPanel = ({ dictionaryName, businessKey }: Props) =>
           {data.items.map((r) => (
             <li
               key={r.id}
-              className="flex items-center justify-between gap-3 px-3 py-2 text-2xs"
+              className="flex items-center justify-between gap-3 px-3 py-2 text-cell"
             >
               <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-2">
@@ -152,7 +152,7 @@ export const RecordDependentsPanel = ({ dictionaryName, businessKey }: Props) =>
 
       {/* Pagination */}
       {totalPages > 1 && (
-        <div className="flex items-center justify-between text-2xs">
+        <div className="flex items-center justify-between text-cell">
           <Button
             variant="secondary"
             size="sm"
diff --git a/ordinis-admin-ui/src/components/record/RecordHistoryDrawer.tsx b/ordinis-admin-ui/src/components/record/RecordHistoryDrawer.tsx
index 03dc8e4..90a0ddf 100644
--- a/ordinis-admin-ui/src/components/record/RecordHistoryDrawer.tsx
+++ b/ordinis-admin-ui/src/components/record/RecordHistoryDrawer.tsx
@@ -40,7 +40,7 @@ export const RecordHistoryDrawer = ({ open, onClose, dictionaryName, businessKey
           </Alert>
         )}
         {data && data.length === 0 && (
-          <p className="text-sm text-mute">{t('history.empty')}</p>
+          <p className="text-body text-mute">{t('history.empty')}</p>
         )}
         {data && data.length > 0 && (
           <ol className="relative border-l-2 border-line pl-5 space-y-4">
@@ -74,7 +74,7 @@ export const RecordHistoryDrawer = ({ open, onClose, dictionaryName, businessKey
                     }`}
                   />
                   <div className="flex items-center gap-2 mb-1">
-                    <span className="text-sm font-sans text-accent">v{displayVersion}</span>
+                    <span className="text-body font-sans text-accent">v{displayVersion}</span>
                     {isLatest && status === 'active' && (
                       <Badge variant="primary">{t('history.current')}</Badge>
                     )}
@@ -84,7 +84,7 @@ export const RecordHistoryDrawer = ({ open, onClose, dictionaryName, businessKey
                       <Badge variant="success">{t('history.active')}</Badge>
                     )}
                   </div>
-                  <div className="text-2xs text-ink-2 space-y-0.5">
+                  <div className="text-cell text-ink-2 space-y-0.5">
                     <div>
                       <span className="font-mono">{t('history.validFrom')}:</span>{' '}
                       {new Date(rec.validFrom).toLocaleString()}
@@ -102,10 +102,10 @@ export const RecordHistoryDrawer = ({ open, onClose, dictionaryName, businessKey
                     )}
                   </div>
                   <details className="mt-2">
-                    <summary className="text-2xs text-accent cursor-pointer hover:underline">
+                    <summary className="text-cell text-accent cursor-pointer hover:underline">
                       {t('history.viewData')}
                     </summary>
-                    <pre className="mt-1 bg-line/30 rounded p-2 text-2xs font-mono overflow-x-auto">
+                    <pre className="text-mono mt-1 bg-line/30 rounded p-2 overflow-x-auto">
                       {JSON.stringify(rec.data, null, 2)}
                     </pre>
                   </details>
diff --git a/ordinis-admin-ui/src/components/schema/DictionaryEditorDialog.tsx b/ordinis-admin-ui/src/components/schema/DictionaryEditorDialog.tsx
index e38bff5..f58a0d3 100644
--- a/ordinis-admin-ui/src/components/schema/DictionaryEditorDialog.tsx
+++ b/ordinis-admin-ui/src/components/schema/DictionaryEditorDialog.tsx
@@ -308,10 +308,10 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
                 className="mt-0.5 size-4 accent-ultramarain"
               />
               <span className="flex-1">
-                <span className="block text-sm font-sans text-ink">
+                <span className="block text-body font-sans text-ink">
                   {t('schema.redisProjection.label')}
                 </span>
-                <span className="block text-2xs text-mute mt-0.5">
+                <span className="block text-cell text-mute mt-0.5">
                   {t('schema.redisProjection.hint')}
                 </span>
               </span>
@@ -328,10 +328,10 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
                 className="mt-0.5 size-4 accent-orbit"
               />
               <span className="flex-1">
-                <span className="block text-sm font-sans text-ink">
+                <span className="block text-body font-sans text-ink">
                   {t('schema.approvalRequired.label')}
                 </span>
-                <span className="block text-2xs text-mute mt-0.5">
+                <span className="block text-cell text-mute mt-0.5">
                   {t('schema.approvalRequired.hint')}
                 </span>
               </span>
@@ -351,7 +351,7 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
                   onChange={(e) => setApprovalMinRole(e.target.value)}
                   placeholder="ordinis:internal"
                 />
-                <p className="text-2xs text-mute mt-0.5">
+                <p className="text-cell text-mute mt-0.5">
                   {t('schema.approvalMinRole.hint')}
                 </p>
               </div>
@@ -364,7 +364,7 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
         </div>
 
         <div className={activeTab === 'preview' ? 'block' : 'hidden'}>
-          <pre className="bg-line/30 rounded p-3 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
+          <pre className="text-mono bg-line/30 rounded p-3 overflow-x-auto whitespace-pre-wrap">
             {JSON.stringify(schemaJson, null, 2)}
           </pre>
         </div>
@@ -384,8 +384,8 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
         {isEdit && breaking && (
           <Alert variant="error" title={t('schema.diff.blockedTitle')}>
             <div className="space-y-2">
-              <p className="text-sm">{t('schema.diff.blockedBody')}</p>
-              <ul className="list-disc pl-5 text-sm space-y-0.5">
+              <p className="text-body">{t('schema.diff.blockedBody')}</p>
+              <ul className="list-disc pl-5 text-body space-y-0.5">
                 {changes
                   .filter((c) => c.severity === 'breaking')
                   .map((c, i) => (
@@ -400,7 +400,7 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
 
         {isEdit && !breaking && changes.length > 0 && (
           <Alert variant="info" title={t('schema.diff.compatibleTitle')}>
-            <ul className="list-disc pl-5 text-sm space-y-0.5">
+            <ul className="list-disc pl-5 text-body space-y-0.5">
               {changes.map((c, i) => (
                 <li key={i}>
                   <span className="font-mono">{c.field}</span> — {c.reason}
diff --git a/ordinis-admin-ui/src/components/schema/EventsPreviewTab.tsx b/ordinis-admin-ui/src/components/schema/EventsPreviewTab.tsx
index 02d004f..6737fd8 100644
--- a/ordinis-admin-ui/src/components/schema/EventsPreviewTab.tsx
+++ b/ordinis-admin-ui/src/components/schema/EventsPreviewTab.tsx
@@ -47,7 +47,7 @@ export const EventsPreviewTab = ({
 
   return (
     <div className="space-y-3">
-      <p className="text-sm text-ink-2">
+      <p className="text-body text-ink-2">
         {t('schema.events.intro')}
       </p>
 
@@ -57,18 +57,18 @@ export const EventsPreviewTab = ({
         <div className="space-y-2">
           <div className="flex items-center gap-2 flex-wrap">
             <Badge variant="info">{current.eventType}</Badge>
-            <span className="text-2xs text-ink-2">
+            <span className="text-cell text-ink-2">
               {t('schema.events.topic')}:
             </span>
-            <code className="text-2xs font-mono text-accent">
+            <code className="text-mono text-accent">
               {current.topic}
             </code>
           </div>
-          <p className="text-2xs text-mute">{current.description}</p>
-          <pre className="bg-line/30 rounded p-3 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
+          <p className="text-cell text-mute">{current.description}</p>
+          <pre className="text-mono bg-line/30 rounded p-3 overflow-x-auto whitespace-pre-wrap">
             {JSON.stringify(current.envelope, null, 2)}
           </pre>
-          <p className="text-2xs text-mute">
+          <p className="text-cell text-mute">
             {t('schema.events.disclaimer')}
           </p>
         </div>
diff --git a/ordinis-admin-ui/src/components/schema/PropertyEditor.tsx b/ordinis-admin-ui/src/components/schema/PropertyEditor.tsx
index 63a6858..a46dde2 100644
--- a/ordinis-admin-ui/src/components/schema/PropertyEditor.tsx
+++ b/ordinis-admin-ui/src/components/schema/PropertyEditor.tsx
@@ -118,14 +118,14 @@ export const PropertyEditor = ({
       />
 
       {prop.kind === 'opaque' && (
-        <div className="bg-amber-50 border border-amber-200 rounded-md p-3 text-2xs space-y-2">
+        <div className="bg-amber-50 border border-amber-200 rounded-md p-3 text-cell space-y-2">
           <div className="font-medium text-ink">
             {t('schema.opaque.title')}
           </div>
           <div className="text-ink-2">
             {t('schema.opaque.hint')}
           </div>
-          <pre className="font-mono text-2xs bg-white border border-line rounded p-2 overflow-auto max-h-40">
+          <pre className="text-mono bg-white border border-line rounded p-2 overflow-auto max-h-40">
             {JSON.stringify(prop.rawSchema ?? {}, null, 2)}
           </pre>
         </div>
@@ -285,7 +285,7 @@ const ReferenceTargetPicker = ({ value, onChange }: ReferenceTargetPickerProps)
         />
       </div>
       {!isValid && (
-        <div className="text-2xs text-mars">{t('schema.reference.required')}</div>
+        <div className="text-cell text-mars">{t('schema.reference.required')}</div>
       )}
     </div>
   )
diff --git a/ordinis-admin-ui/src/components/timetravel/TimeTravelPicker.tsx b/ordinis-admin-ui/src/components/timetravel/TimeTravelPicker.tsx
index 721c819..1bb6389 100644
--- a/ordinis-admin-ui/src/components/timetravel/TimeTravelPicker.tsx
+++ b/ordinis-admin-ui/src/components/timetravel/TimeTravelPicker.tsx
@@ -50,7 +50,7 @@ export function TimeTravelPicker({
   }, [marks, valueDate])
 
   return (
-    <div className="flex flex-col gap-3 px-4 py-3 rounded-md border border-warn bg-warn-bg text-sm">
+    <div className="flex flex-col gap-3 px-4 py-3 rounded-md border border-warn bg-warn-bg text-body">
       <div className="flex items-center gap-2">
         <ClockCounterClockwiseIcon weight="bold" size={16} className="text-warn" />
         <span className="text-cap font-display text-ink-2">
@@ -58,7 +58,7 @@ export function TimeTravelPicker({
         </span>
         <button
           type="button"
-          className="ml-auto text-2xs text-mute hover:text-ink hover:underline inline-flex items-center gap-1"
+          className="ml-auto text-cell text-mute hover:text-ink hover:underline inline-flex items-center gap-1"
           onClick={onClose}
         >
           <XIcon weight="bold" size={12} />
@@ -306,7 +306,7 @@ function TimelineTrack({
 
       {tooltipText && hover !== null && (
         <div
-          className="absolute -top-2 -translate-y-full px-2 py-0.5 rounded bg-carbon text-white text-2xs font-mono pointer-events-none whitespace-nowrap"
+          className="text-mono absolute -top-2 -translate-y-full px-2 py-0.5 rounded bg-carbon text-white pointer-events-none whitespace-nowrap"
           style={{ left: timeToX(hover), transform: 'translate(-50%, -100%)' }}
         >
           {tooltipText}
@@ -314,7 +314,7 @@ function TimelineTrack({
       )}
 
       {marks.length > 0 && (
-        <div className="text-2xs text-mute font-display mt-1">
+        <div className="text-cell text-mute font-display mt-1">
           {marks.length === 1
             ? '1 точка изменений'
             : marks.length < 5
@@ -386,7 +386,7 @@ function StatusFooter({
 
   if (!valueDate) {
     return (
-      <div className="text-2xs text-mute font-display italic">
+      <div className="text-cell text-mute font-display italic">
         {t('timeTravel.hint')}
       </div>
     )
@@ -395,14 +395,14 @@ function StatusFooter({
   return (
     <div className="flex flex-wrap items-center gap-2 pt-2 border-t border-warn/30">
       <ClockCounterClockwiseIcon weight="regular" size={14} className="text-warn shrink-0" />
-      <span className="text-xs font-mono text-ink">
+      <span className="text-mono text-ink">
         {valueDate.toLocaleString(lang === 'en' ? 'en-US' : 'ru-RU', {
           dateStyle: 'long',
           timeStyle: 'short',
         })}
       </span>
       {relativeLabel && (
-        <span className="text-2xs text-mute font-display lowercase">
+        <span className="text-cell text-mute font-display lowercase">
           ({relativeLabel})
         </span>
       )}
@@ -418,10 +418,10 @@ function StatusFooter({
               valueDate.getMinutes(),
             )
           }
-          className="w-10 px-1.5 py-0.5 rounded-sm border border-line bg-white text-2xs font-mono text-center"
+          className="text-mono w-10 px-1.5 py-0.5 rounded-sm border border-line bg-white text-center"
           aria-label={t('timeTravel.hours')}
         />
-        <span className="text-mute font-mono text-2xs">:</span>
+        <span className="text-mono text-mute">:</span>
         <input
           type="number"
           min={0}
@@ -433,13 +433,13 @@ function StatusFooter({
               Math.max(0, Math.min(59, parseInt(e.target.value, 10) || 0)),
             )
           }
-          className="w-10 px-1.5 py-0.5 rounded-sm border border-line bg-white text-2xs font-mono text-center"
+          className="text-mono w-10 px-1.5 py-0.5 rounded-sm border border-line bg-white text-center"
           aria-label={t('timeTravel.minutes')}
         />
       </span>
       <button
         type="button"
-        className="ml-auto text-2xs text-accent hover:underline"
+        className="ml-auto text-cell text-accent hover:underline"
         onClick={onClear}
       >
         {t('timeTravel.clear')}
diff --git a/ordinis-admin-ui/src/components/version/UpdateBanner.tsx b/ordinis-admin-ui/src/components/version/UpdateBanner.tsx
index 7683362..e45ee0a 100644
--- a/ordinis-admin-ui/src/components/version/UpdateBanner.tsx
+++ b/ordinis-admin-ui/src/components/version/UpdateBanner.tsx
@@ -44,7 +44,7 @@ export function UpdateBanner() {
       aria-live="polite"
       className="bg-accent text-on-accent"
     >
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-2 flex items-center gap-3 flex-wrap text-sm">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 py-2 flex items-center gap-3 flex-wrap text-body">
         <ArrowClockwise size={18} weight="bold" className="shrink-0" aria-hidden />
         <span className="flex-1 min-w-0">{message}</span>
         <div className="flex items-center gap-2 ml-auto">
diff --git a/ordinis-admin-ui/src/components/version/VersionBadge.tsx b/ordinis-admin-ui/src/components/version/VersionBadge.tsx
index 017c8a4..a1f92e9 100644
--- a/ordinis-admin-ui/src/components/version/VersionBadge.tsx
+++ b/ordinis-admin-ui/src/components/version/VersionBadge.tsx
@@ -40,7 +40,7 @@ export function VersionBadge() {
 
   return (
     <span
-      className="inline-flex items-center gap-1.5 text-xs text-mute font-mono select-none"
+      className="inline-flex items-center gap-1.5 text-mono text-mute select-none"
       title={tooltip}
     >
       {updateAvailable && (
diff --git a/ordinis-admin-ui/src/routes/audit.tsx b/ordinis-admin-ui/src/routes/audit.tsx
index 2b7dfdf..86eb3e8 100644
--- a/ordinis-admin-ui/src/routes/audit.tsx
+++ b/ordinis-admin-ui/src/routes/audit.tsx
@@ -308,7 +308,7 @@ function ActiveFilterChips({ filters, onRemove }: ActiveFilterChipsProps) {
           type="button"
           onClick={() => onRemove(f.key)}
           className={[
-            'inline-flex items-center gap-1.5 px-2 py-1 rounded-sm border text-2xs',
+            'inline-flex items-center gap-1.5 px-2 py-1 rounded-sm border text-cell',
             'bg-white border-line hover:border-carbon/40 hover:bg-line/30',
             'transition-colors group',
           ].join(' ')}
@@ -469,7 +469,7 @@ function AuditRow({ row }: { row: AuditEntry }) {
     <>
       <TableRow>
         <TableCell>
-          <span className="text-2xs tabular-nums">{timeLabel}</span>
+          <span className="text-cell tabular-nums">{timeLabel}</span>
         </TableCell>
         <TableCell>
           <Badge variant={actionVariant}>
@@ -478,7 +478,7 @@ function AuditRow({ row }: { row: AuditEntry }) {
         </TableCell>
         <TableCell>{row.dictionaryName ?? '—'}</TableCell>
         <TableCell>
-          <span className="font-mono text-xs">{row.businessKey ?? '—'}</span>
+          <span className=" text-mono">{row.businessKey ?? '—'}</span>
         </TableCell>
         <TableCell>{row.userId ?? 'anonymous'}</TableCell>
         <TableCell>
@@ -486,7 +486,7 @@ function AuditRow({ row }: { row: AuditEntry }) {
         </TableCell>
         <TableCell>
           <span
-            className="font-mono text-2xs text-ink-2"
+            className="text-mono text-ink-2"
             title={row.traceId ?? ''}
           >
             {row.traceId ? row.traceId.slice(0, 8) : '—'}
@@ -509,7 +509,7 @@ function AuditRow({ row }: { row: AuditEntry }) {
                 <div className="text-cap text-ink-2 mb-1">
                   {t('audit.diff.before')}
                 </div>
-                <pre className="text-2xs font-mono whitespace-pre-wrap break-all bg-white border border-line rounded p-2 max-h-60 overflow-auto">
+                <pre className="text-mono whitespace-pre-wrap break-all bg-white border border-line rounded p-2 max-h-60 overflow-auto">
                   {row.payloadBefore
                     ? JSON.stringify(row.payloadBefore, null, 2)
                     : '—'}
@@ -519,14 +519,14 @@ function AuditRow({ row }: { row: AuditEntry }) {
                 <div className="text-cap text-ink-2 mb-1">
                   {t('audit.diff.after')}
                 </div>
-                <pre className="text-2xs font-mono whitespace-pre-wrap break-all bg-white border border-line rounded p-2 max-h-60 overflow-auto">
+                <pre className="text-mono whitespace-pre-wrap break-all bg-white border border-line rounded p-2 max-h-60 overflow-auto">
                   {row.payloadAfter
                     ? JSON.stringify(row.payloadAfter, null, 2)
                     : '—'}
                 </pre>
               </div>
               {(row.ipAddress || row.userAgent || row.requestId) && (
-                <div className="md:col-span-2 text-2xs text-ink-2 flex flex-wrap gap-x-4 gap-y-1 pt-1">
+                <div className="md:col-span-2 text-cell text-ink-2 flex flex-wrap gap-x-4 gap-y-1 pt-1">
                   {row.ipAddress && <span>IP: {row.ipAddress}</span>}
                   {row.requestId && <span>req: {row.requestId}</span>}
                   {row.userAgent && (
@@ -562,7 +562,7 @@ function Pagination({
   const { t } = useTranslation()
   return (
     <div className="flex items-center justify-between flex-wrap gap-3">
-      <div className="flex items-center gap-2 text-sm">
+      <div className="flex items-center gap-2 text-body">
         <span className="text-ink-2">{t('audit.page.size')}</span>
         <SingleSelect
           options={PAGE_SIZE_OPTIONS}
@@ -570,7 +570,7 @@ function Pagination({
           onChange={(id) => onSizeChange(Number(id))}
         />
       </div>
-      <div className="flex items-center gap-3 text-sm">
+      <div className="flex items-center gap-3 text-body">
         <Button
           type="button"
           variant="secondary"
diff --git a/ordinis-admin-ui/src/routes/dictionaries.$name.tsx b/ordinis-admin-ui/src/routes/dictionaries.$name.tsx
index 27e995d..4f3f004 100644
--- a/ordinis-admin-ui/src/routes/dictionaries.$name.tsx
+++ b/ordinis-admin-ui/src/routes/dictionaries.$name.tsx
@@ -506,7 +506,7 @@ function DictionaryDetail() {
       )}
       <PageHeader
         breadcrumb={
-          <div className="flex items-center gap-3 text-sm">
+          <div className="flex items-center gap-3 text-body">
             <Link to="/dictionaries" className="text-ink-2 hover:text-accent">
               ← {t('nav.dictionaries')}
             </Link>
@@ -630,8 +630,8 @@ function DictionaryDetail() {
       )}
 
       {aoi && (
-        <div className="flex items-center gap-3 px-3 py-2 rounded-sm border border-accent/30 bg-accent/4 text-sm">
-          <span className="font-mono text-xs text-ink">
+        <div className="flex items-center gap-3 px-3 py-2 rounded-sm border border-accent/30 bg-accent/4 text-body">
+          <span className=" text-mono text-ink">
             {aoi.kind === 'bbox'
               ? t('aoi.activeBbox', { value: aoi.bboxCsv })
               : t('aoi.activePolygon', {
@@ -640,7 +640,7 @@ function DictionaryDetail() {
           </span>
           <button
             type="button"
-            className="text-xs text-accent hover:underline"
+            className="text-cell text-accent hover:underline"
             onClick={handleAoiClear}
           >
             {t('aoi.clear')}
@@ -667,16 +667,16 @@ function DictionaryDetail() {
 
       {/* Active state — ambient banner если ?at= задан, даже если picker закрыт. */}
       {timeTravelAt && !timeTravelOpen && (
-        <div className="flex items-center gap-3 px-3 py-2 rounded-sm border border-warn bg-warn-bg text-sm">
+        <div className="flex items-center gap-3 px-3 py-2 rounded-sm border border-warn bg-warn-bg text-body">
           <ClockCounterClockwiseIcon weight="bold" size={16} className="text-warn shrink-0" />
-          <span className="font-mono text-xs text-ink">
+          <span className=" text-mono text-ink">
             {t('timeTravel.viewing', {
               date: new Date(timeTravelAt).toLocaleString(),
             })}
           </span>
           <button
             type="button"
-            className="text-xs text-accent hover:underline ml-auto"
+            className="text-cell text-accent hover:underline ml-auto"
             onClick={() => setTimeTravelAt(undefined)}
           >
             {t('timeTravel.clear')}
@@ -717,7 +717,7 @@ function DictionaryDetail() {
                     onClick={() => toggleScope(s)}
                     aria-pressed={active}
                     className={[
-                      'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-sm border text-2xs uppercase tracking-[0.10em] font-display transition-colors',
+ 'text-cap inline-flex items-center gap-1.5 px-2.5 py-1 rounded-sm border transition-colors',
                       active
                         ? 'border-accent bg-accent/8 text-accent'
                         : 'border-line bg-white text-ink-2 hover:border-carbon/40',
@@ -733,7 +733,7 @@ function DictionaryDetail() {
               })}
             </div>
             {filtersActive && (
-              <div className="flex items-center gap-2 text-xs text-ink-2">
+              <div className="flex items-center gap-2 text-cell text-ink-2">
                 <span>
                   {t('dict.filter.matched', { count: filteredCount, total: totalRecords })}
                 </span>
@@ -800,7 +800,7 @@ function DictionaryDetail() {
                   )}
                   <TableCell>
                     <div className="flex items-center gap-1.5">
-                      <span className="font-mono text-2xs">{r.businessKey}</span>
+                      <span className="text-mono">{r.businessKey}</span>
                       {pendingByKey.has(r.businessKey) ? (
                         <span title={t('dict.pendingReview.tooltip')}>
                           <Badge variant="warning">{t('dict.pendingReview.label')}</Badge>
@@ -819,7 +819,7 @@ function DictionaryDetail() {
                     if (v == null || v === '') {
                       return (
                         <TableCell key={c.key}>
-                          <span className="text-2xs text-mute/70">—</span>
+                          <span className="text-cell text-mute/70">—</span>
                         </TableCell>
                       )
                     }
@@ -828,7 +828,7 @@ function DictionaryDetail() {
                       <TableCell key={c.key}>
                         <span
                           className={[
-                            'inline-block px-1.5 py-0.5 rounded-sm font-mono text-2xs',
+                            'inline-block px-1.5 py-0.5 rounded-sm font-mono text-cell',
                             c.isFk
                               ? 'bg-accent/8 text-accent'
                               : 'bg-carbon/8 text-ink',
@@ -843,7 +843,7 @@ function DictionaryDetail() {
                     <Badge variant="info">{r.dataScope}</Badge>
                   </TableCell>
                   <TableCell>
-                    <span className="text-2xs text-mute">
+                    <span className="text-cell text-mute">
                       {new Date(r.validFrom).toLocaleDateString()}
                     </span>
                   </TableCell>
@@ -970,7 +970,7 @@ function DictionaryDetail() {
       >
         {edit.kind === 'close-confirm' && (
           <div className="space-y-4">
-            <p className="text-sm text-ink">
+            <p className="text-body text-ink">
               {t('dict.confirmClose.body', { key: edit.record.businessKey })}
             </p>
             <TextInput
@@ -1093,13 +1093,13 @@ function BulkSelectionToolbar({
       ].join(' ')}
     >
       <div className="flex items-center gap-3">
-        <span className="text-sm font-medium tabular-nums">
+        <span className="text-body font-medium tabular-nums">
           {t('dict.bulk.selectedCount', { count, total: totalVisible })}
         </span>
         <button
           type="button"
           onClick={onClear}
-          className="inline-flex items-center gap-1 text-2xs underline-offset-2 hover:underline opacity-80 hover:opacity-100"
+          className="inline-flex items-center gap-1 text-cell underline-offset-2 hover:underline opacity-80 hover:opacity-100"
         >
           <XIcon size={12} weight="bold" />
           {t('dict.bulk.clearSelection')}
@@ -1150,10 +1150,10 @@ function RecordsPagination({
   const to = Math.min((page + 1) * pageSize, totalCount)
   return (
     <div className="flex items-center justify-between flex-wrap gap-3 px-2">
-      <span className="text-2xs text-ink-2 tabular-nums">
+      <span className="text-cell text-ink-2 tabular-nums">
         {t('dict.page.range', { from, to, total: totalCount })}
       </span>
-      <div className="flex items-center gap-3 text-sm">
+      <div className="flex items-center gap-3 text-body">
         <Button
           type="button"
           variant="secondary"
@@ -1163,7 +1163,7 @@ function RecordsPagination({
         >
           {t('dict.page.prev')}
         </Button>
-        <span className="tabular-nums text-2xs text-ink-2">
+        <span className="tabular-nums text-cell text-ink-2">
           {t('dict.page.of', { cur: page + 1, total: totalPages })}
         </span>
         <Button
@@ -1209,19 +1209,19 @@ function BulkCloseDialog({
       <div className="space-y-4">
         <div className="space-y-2">
           {result.closed.length > 0 && (
-            <div className="flex items-center gap-2 text-sm text-soyuz-green">
+            <div className="flex items-center gap-2 text-body text-soyuz-green">
               <CheckCircleIcon size={18} weight="fill" />
               <span>{t('dict.bulk.resultClosed', { count: result.closed.length })}</span>
             </div>
           )}
           {result.skipped.length > 0 && (
-            <div className="flex items-center gap-2 text-sm text-saturn">
+            <div className="flex items-center gap-2 text-body text-saturn">
               <WarningIcon size={18} weight="fill" />
               <span>{t('dict.bulk.resultSkipped', { count: result.skipped.length })}</span>
             </div>
           )}
           {result.errors.length > 0 && (
-            <div className="flex items-center gap-2 text-sm text-mars">
+            <div className="flex items-center gap-2 text-body text-mars">
               <XCircleIcon size={18} weight="fill" />
               <span>{t('dict.bulk.resultErrors', { count: result.errors.length })}</span>
             </div>
@@ -1230,7 +1230,7 @@ function BulkCloseDialog({
 
         {(result.skipped.length > 0 || result.errors.length > 0) && (
           <div className="border border-line rounded p-3 max-h-48 overflow-auto bg-line/30">
-            <ul className="text-2xs font-mono space-y-1">
+            <ul className="text-mono space-y-1">
               {result.skipped.map((s) => (
                 <li key={`s-${s.businessKey}`} className="text-saturn">
                   · {s.businessKey} — {s.reason}
@@ -1256,7 +1256,7 @@ function BulkCloseDialog({
 
   return (
     <div className="space-y-4">
-      <p className="text-sm text-ink">{t('dict.bulk.confirmBody', { count })}</p>
+      <p className="text-body text-ink">{t('dict.bulk.confirmBody', { count })}</p>
       <TextInput
         label={t('dict.confirmClose.reason')}
         placeholder={t('dict.confirmClose.reasonPlaceholder')}
@@ -1361,7 +1361,7 @@ function EditorTabBar({
             onClick={() => onChange(tab.id)}
             aria-pressed={isActive}
             className={[
-              'px-3.5 h-10 text-sm transition-colors -mb-px border-b-2',
+              'px-3.5 h-10 text-body transition-colors -mb-px border-b-2',
               isActive
                 ? 'border-accent text-ink font-semibold'
                 : 'border-transparent text-ink-2 hover:text-ink',
@@ -1382,14 +1382,14 @@ function FieldsTabContent({ detail }: { detail: { schemaJson: import('@/api/clie
   const entries = Object.entries(props)
   if (entries.length === 0) {
     return (
-      <div className="text-sm text-mute py-8 text-center">
+      <div className="text-body text-mute py-8 text-center">
         Schema без properties.
       </div>
     )
   }
   return (
     <div className="rounded-lg border border-line overflow-hidden">
-      <table className="w-full text-sm">
+      <table className="w-full text-body">
         <thead className="text-cap bg-surface-2 font-display text-mute">
           <tr>
             <th className="text-left px-3 py-2">name</th>
@@ -1404,15 +1404,15 @@ function FieldsTabContent({ detail }: { detail: { schemaJson: import('@/api/clie
         <tbody>
           {entries.map(([key, prop]) => (
             <tr key={key} className="border-t border-line-2 hover:bg-surface-2/50">
-              <td className="px-3 py-1.5 font-mono text-[12.5px]">{key}</td>
+              <td className="text-cell px-3 py-1.5 font-mono">{key}</td>
               <td className="px-3 py-1.5 text-ink-2">{prop.type ?? '—'}</td>
               <td className="px-3 py-1.5">{required.has(key) ? '✓' : ''}</td>
               <td className="px-3 py-1.5">{prop['x-unique'] ? '✓' : ''}</td>
               <td className="px-3 py-1.5">{prop['x-localized'] ? '✓' : ''}</td>
-              <td className="px-3 py-1.5 font-mono text-[11px] text-accent">
+              <td className="text-mono px-3 py-1.5 text-accent">
                 {prop['x-references'] ?? ''}
               </td>
-              <td className="px-3 py-1.5 text-ink-2 text-xs max-w-[300px] truncate">
+              <td className="px-3 py-1.5 text-ink-2 text-cell max-w-[300px] truncate">
                 {prop.description ?? ''}
               </td>
             </tr>
@@ -1437,13 +1437,13 @@ function JsonTabContent({ detail }: { detail: { schemaJson: import('@/api/client
 function EventsTabContent({ dictName }: { dictName: string }) {
   return (
     <div className="rounded-lg border border-line bg-surface p-6 text-center space-y-3">
-      <p className="text-sm text-ink-2">
+      <p className="text-body text-ink-2">
         События для справочника <span className="font-mono">{dictName}</span> — в общем аудит-логе.
       </p>
       <Link
         to="/audit"
         search={{ dict: dictName }}
-        className="inline-flex items-center gap-1 text-accent hover:underline text-sm"
+        className="inline-flex items-center gap-1 text-accent hover:underline text-body"
       >
         Открыть /audit с фильтром →
       </Link>
@@ -1454,7 +1454,7 @@ function EventsTabContent({ dictName }: { dictName: string }) {
 /** History tab — placeholder (Stage 3.x followup, требует backend changelog endpoint). */
 function HistoryTabContent() {
   return (
-    <div className="rounded-lg border border-dashed border-line bg-surface-2/30 p-8 text-center text-sm text-mute">
+    <div className="rounded-lg border border-dashed border-line bg-surface-2/30 p-8 text-center text-body text-mute">
       Timeline изменений справочника — скоро. Требует backend endpoint для schema versions.
     </div>
   )
diff --git a/ordinis-admin-ui/src/routes/dictionaries.index.tsx b/ordinis-admin-ui/src/routes/dictionaries.index.tsx
index ac7a4f2..a32651a 100644
--- a/ordinis-admin-ui/src/routes/dictionaries.index.tsx
+++ b/ordinis-admin-ui/src/routes/dictionaries.index.tsx
@@ -273,7 +273,7 @@ function DictionariesPage() {
                 onClick={() => toggleScope(scope)}
                 aria-pressed={selected}
                 title={t(`dict.list.section.${scope}`)}
-                className={`px-2 py-1 rounded-full text-2xs uppercase tracking-[0.10em] flex items-center gap-1 border transition focus:outline-none focus:ring-2 focus:ring-accent/40 font-mono ${
+ className={`text-cap px-2 py-1 rounded-full flex items-center gap-1 border transition focus:outline-none focus:ring-2 focus:ring-accent/40 font-mono ${
                   selected
                     ? 'border-accent bg-accent-bg text-accent'
                     : 'border-line hover:border-accent/60 text-ink'
@@ -303,7 +303,7 @@ function DictionariesPage() {
             type="button"
             onClick={() => setBundle(undefined)}
             aria-pressed={!bundleFilter}
-            className={`px-2 py-1 rounded-sm text-2xs uppercase tracking-[0.10em] border transition focus:outline-none focus:ring-2 focus:ring-accent/40 ${
+ className={`text-cap px-2 py-1 rounded-sm border transition focus:outline-none focus:ring-2 focus:ring-accent/40 ${
               !bundleFilter
                 ? 'border-accent bg-accent-bg text-accent'
                 : 'border-line hover:border-accent/60 text-ink'
@@ -321,7 +321,7 @@ function DictionariesPage() {
                   type="button"
                   onClick={() => setBundle(selected ? undefined : bundle)}
                   aria-pressed={selected}
-                  className={`px-2 py-1 rounded-sm text-2xs uppercase tracking-[0.10em] flex items-center gap-1 border transition focus:outline-none focus:ring-2 focus:ring-accent/40 font-mono ${
+ className={`text-cap px-2 py-1 rounded-sm flex items-center gap-1 border transition focus:outline-none focus:ring-2 focus:ring-accent/40 font-mono ${
                     selected
                       ? 'border-accent bg-accent-bg text-accent'
                       : 'border-line hover:border-accent/60 text-ink'
@@ -342,7 +342,7 @@ function DictionariesPage() {
           onClick={() => setSearch({ deps: withDepsOnly ? undefined : '1' })}
           aria-pressed={withDepsOnly}
           title={t('dict.list.deps.only')}
-          className={`px-2 py-1 rounded-sm text-2xs uppercase tracking-[0.10em] border transition focus:outline-none focus:ring-2 focus:ring-accent/40 ${
+ className={`text-cap px-2 py-1 rounded-sm border transition focus:outline-none focus:ring-2 focus:ring-accent/40 ${
             withDepsOnly
               ? 'border-accent bg-accent-bg text-accent'
               : 'border-line hover:border-accent/60 text-ink'
@@ -355,7 +355,7 @@ function DictionariesPage() {
       {/* Empty state */}
       {filtered.length === 0 ? (
         <div className="border border-line rounded-lg p-12 text-center bg-surface-2">
-          <p className="font-sans text-lg text-accent mb-2">
+          <p className="font-sans text-title-md text-accent mb-2">
             {t('dict.list.search.empty')}
           </p>
           {filtersActive && (
@@ -369,7 +369,7 @@ function DictionariesPage() {
         Array.from(grouped.entries()).map(([bundle, items]) => (
           <section key={bundle} className="space-y-3">
             <h2 className="flex items-baseline gap-3 pb-2 border-b border-line">
-              <span className="text-sm uppercase tracking-[0.10em] text-accent font-mono font-medium">
+              <span className="text-body uppercase tracking-[0.10em] text-accent font-mono font-medium">
                 {bundle}
               </span>
               <span className="text-cap text-mute">
@@ -467,10 +467,10 @@ const DictCard = ({ d, t }: { d: DictionaryDefinition; t: TFunc }) => {
       {/* Body */}
       <div className="px-3.5 py-3 min-w-0">
         <div className="flex items-baseline gap-2.5 flex-wrap">
-          <h3 className="text-[15px] font-semibold text-navy truncate">
+          <h3 className="text-title-md text-navy truncate">
             {d.displayName ?? d.name}
           </h3>
-          <span className="font-mono text-[11px] text-mute truncate">{d.name}</span>
+          <span className="text-mono text-mute truncate">{d.name}</span>
           {d.approvalRequired && (
             <Badge variant="warning">{t('dict.list.approval')}</Badge>
           )}
@@ -494,7 +494,7 @@ const DictCard = ({ d, t }: { d: DictionaryDefinition; t: TFunc }) => {
               />
             ))}
             {refBy.length > MAX_REFBY_CHIPS && (
-              <span className="font-mono text-[11px] text-mute">
+              <span className="text-mono text-mute">
                 +{refBy.length - MAX_REFBY_CHIPS}
               </span>
             )}
@@ -505,7 +505,7 @@ const DictCard = ({ d, t }: { d: DictionaryDefinition; t: TFunc }) => {
       {/* Right rail: scope badge + version */}
       <div className="px-3.5 py-3 flex flex-col items-end gap-1.5 shrink-0">
         <Badge variant="info">{d.scope}</Badge>
-        <span className="font-mono text-[11px] text-mute whitespace-nowrap">
+        <span className="text-mono text-mute whitespace-nowrap">
           v{d.schemaVersion}
         </span>
         {typeof d.recordCount === 'number' && (
diff --git a/ordinis-admin-ui/src/routes/my-drafts.tsx b/ordinis-admin-ui/src/routes/my-drafts.tsx
index 26eb668..f55dd90 100644
--- a/ordinis-admin-ui/src/routes/my-drafts.tsx
+++ b/ordinis-admin-ui/src/routes/my-drafts.tsx
@@ -82,7 +82,7 @@ function MyDraftsPage() {
       {drafts.data && drafts.data.totalElements > 0 && (
         <Panel>
           <div className="flex items-center justify-between mb-3">
-            <p className="text-2xs text-mute">
+            <p className="text-cell text-mute">
               {t('myDrafts.total', { count: drafts.data.totalElements })}
             </p>
           </div>
@@ -102,25 +102,25 @@ function MyDraftsPage() {
             <TableBody>
               {drafts.data.items.map((d) => (
                 <TableRow key={d.id}>
-                  <TableCell className="font-mono text-2xs">{d.businessKey}</TableCell>
+                  <TableCell className="text-mono">{d.businessKey}</TableCell>
                   <TableCell>
                     <Badge variant={operationVariant(d.operation)}>{d.operation}</Badge>
                   </TableCell>
                   <TableCell>
                     <Badge variant={statusVariant(d.status)}>{d.status}</Badge>
                   </TableCell>
-                  <TableCell className="text-2xs text-ink-2">
+                  <TableCell className="text-cell text-ink-2">
                     {new Date(d.submittedAt).toLocaleString()}
                   </TableCell>
-                  <TableCell className="text-2xs text-ink-2">
+                  <TableCell className="text-cell text-ink-2">
                     {d.reviewedAt
                       ? new Date(d.reviewedAt).toLocaleString()
                       : '—'}
                   </TableCell>
-                  <TableCell className="font-mono text-2xs">
+                  <TableCell className="text-mono">
                     {d.reviewerId ?? '—'}
                   </TableCell>
-                  <TableCell className="text-2xs text-ink max-w-md">
+                  <TableCell className="text-cell text-ink max-w-md">
                     {d.reviewComment ?? d.makerComment ?? '—'}
                   </TableCell>
                   <TableCell>
@@ -134,7 +134,7 @@ function MyDraftsPage() {
                         {t('myDrafts.action.withdraw')}
                       </Button>
                     ) : (
-                      <span className="text-2xs text-mute/70">—</span>
+                      <span className="text-cell text-mute/70">—</span>
                     )}
                   </TableCell>
                 </TableRow>
diff --git a/ordinis-admin-ui/src/routes/outbox.tsx b/ordinis-admin-ui/src/routes/outbox.tsx
index 900d916..4f523a9 100644
--- a/ordinis-admin-ui/src/routes/outbox.tsx
+++ b/ordinis-admin-ui/src/routes/outbox.tsx
@@ -90,29 +90,29 @@ function OutboxPage() {
               {dlq.data.content.map((row) => (
                 <TableRow key={row.id}>
                   <TableCell>
-                    <span className="font-mono text-2xs">{row.id}</span>
+                    <span className="text-mono">{row.id}</span>
                   </TableCell>
                   <TableCell>
                     <Badge variant="warning">{row.eventType}</Badge>
                   </TableCell>
                   <TableCell>{row.dictionaryName ?? '—'}</TableCell>
                   <TableCell>
-                    <span className="font-mono text-2xs">{row.aggregateId}</span>
+                    <span className="text-mono">{row.aggregateId}</span>
                   </TableCell>
                   <TableCell>
-                    <span className="font-mono text-2xs">{row.kafkaTopic}</span>
+                    <span className="text-mono">{row.kafkaTopic}</span>
                   </TableCell>
                   <TableCell>{row.attemptCount}</TableCell>
                   <TableCell>
                     <span
-                      className="text-2xs text-ink-2 truncate max-w-md inline-block align-middle"
+                      className="text-cell text-ink-2 truncate max-w-md inline-block align-middle"
                       title={row.lastError ?? ''}
                     >
                       {row.lastError ?? '—'}
                     </span>
                   </TableCell>
                   <TableCell>
-                    <span className="text-2xs tabular-nums">
+                    <span className="text-cell tabular-nums">
                       {new Date(row.dlqAt).toLocaleString()}
                     </span>
                   </TableCell>
@@ -120,7 +120,7 @@ function OutboxPage() {
               ))}
             </TableBody>
           </Table>
-          <div className="flex items-center justify-end gap-3 text-sm">
+          <div className="flex items-center justify-end gap-3 text-body">
             <Button
               type="button"
               variant="secondary"
diff --git a/ordinis-admin-ui/src/routes/reviews.tsx b/ordinis-admin-ui/src/routes/reviews.tsx
index bef38b0..7640104 100644
--- a/ordinis-admin-ui/src/routes/reviews.tsx
+++ b/ordinis-admin-ui/src/routes/reviews.tsx
@@ -160,7 +160,7 @@ function ReviewsPage() {
             </Button>
           }
         >
-          <ul className="space-y-1 text-2xs">
+          <ul className="space-y-1 text-cell">
             {bulkResult.approved.length > 0 && (
               <li>
                 {t('reviews.bulk.approvedCount', { count: bulkResult.approved.length })}
@@ -196,7 +196,7 @@ function ReviewsPage() {
       {queue.data && queue.data.totalElements > 0 && (
         <Panel>
           <div className="flex items-center justify-between mb-3 gap-3">
-            <p className="text-2xs text-mute">
+            <p className="text-cell text-mute">
               {t('reviews.queueTotal', { count: queue.data.totalElements })}
               {anySelected ? (
                 <span className="ml-2 text-accent font-medium">
@@ -264,17 +264,17 @@ function ReviewsPage() {
                     <Link
                       to="/dictionaries/$name"
                       params={{ name: d.dictionaryId }}
-                      className="text-accent hover:underline font-mono text-2xs"
+                      className="text-mono text-accent hover:underline"
                     >
                       {d.dictionaryId.slice(0, 8)}…
                     </Link>
                   </TableCell>
-                  <TableCell className="font-mono text-2xs">{d.businessKey}</TableCell>
+                  <TableCell className="text-mono">{d.businessKey}</TableCell>
                   <TableCell>
                     <Badge variant={operationVariant(d.operation)}>{d.operation}</Badge>
                   </TableCell>
-                  <TableCell className="font-mono text-2xs">{d.makerId}</TableCell>
-                  <TableCell className="text-2xs text-ink-2">
+                  <TableCell className="text-mono">{d.makerId}</TableCell>
+                  <TableCell className="text-cell text-ink-2">
                     {new Date(d.submittedAt).toLocaleString()}
                   </TableCell>
                   <TableCell>
@@ -304,7 +304,7 @@ function ReviewsPage() {
         title={t('reviews.bulk.rejectModalTitle', { count: selection.size })}
       >
         <div className="space-y-3">
-          <p className="text-2xs text-ink-2">
+          <p className="text-cell text-ink-2">
             {t('reviews.bulk.rejectModalDescription')}
           </p>
           <TextArea
@@ -400,7 +400,7 @@ function ReviewDrawer({ draftId, onClose }: DrawerProps) {
 
         {draft && (
           <>
-            <div className="flex flex-wrap items-center gap-2 text-2xs">
+            <div className="flex flex-wrap items-center gap-2 text-cell">
               <Badge variant={operationVariant(draft.operation)}>{draft.operation}</Badge>
               <span className="font-mono">{draft.businessKey}</span>
               <span className="text-mute">
@@ -413,7 +413,7 @@ function ReviewDrawer({ draftId, onClose }: DrawerProps) {
             </div>
 
             {draft.makerComment && (
-              <div className="px-3 py-2 rounded-sm border border-line bg-line/30 text-2xs">
+              <div className="px-3 py-2 rounded-sm border border-line bg-line/30 text-cell">
                 <span className="text-mute uppercase tracking-[0.10em] font-display">
                   {t('reviews.drawer.makerComment')}:
                 </span>{' '}
@@ -428,12 +428,12 @@ function ReviewDrawer({ draftId, onClose }: DrawerProps) {
                 </p>
                 {liveQ.isLoading && <LoadingBlock size="sm" label={t('loading')} />}
                 {liveQ.data === null && (
-                  <p className="text-2xs text-mute italic">
+                  <p className="text-cell text-mute italic">
                     {t('reviews.drawer.noLive')}
                   </p>
                 )}
                 {liveQ.data && (
-                  <pre className="bg-line/30 rounded p-2 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
+                  <pre className="text-mono bg-line/30 rounded p-2 overflow-x-auto whitespace-pre-wrap">
                     {JSON.stringify(liveQ.data.data, null, 2)}
                   </pre>
                 )}
@@ -443,11 +443,11 @@ function ReviewDrawer({ draftId, onClose }: DrawerProps) {
                   {t('reviews.drawer.proposed')}
                 </p>
                 {draft.operation === 'CLOSE' ? (
-                  <p className="text-2xs text-aurora italic">
+                  <p className="text-cell text-aurora italic">
                     {t('reviews.drawer.closeNote')}
                   </p>
                 ) : (
-                  <pre className="bg-accent/4 rounded p-2 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
+                  <pre className="text-mono bg-accent/4 rounded p-2 overflow-x-auto whitespace-pre-wrap">
                     {JSON.stringify(draft.data, null, 2)}
                   </pre>
                 )}
diff --git a/ordinis-admin-ui/src/routes/search.tsx b/ordinis-admin-ui/src/routes/search.tsx
index c305f77..060df02 100644
--- a/ordinis-admin-ui/src/routes/search.tsx
+++ b/ordinis-admin-ui/src/routes/search.tsx
@@ -70,7 +70,7 @@ function SearchPage() {
       </form>
 
       {tooShort && (
-        <p className="text-2xs text-mute">{t('search.tooShort')}</p>
+        <p className="text-cell text-mute">{t('search.tooShort')}</p>
       )}
 
       {hasQuery && result.isLoading && (
@@ -89,7 +89,7 @@ function SearchPage() {
 
       {hasQuery && result.data && result.data.total > 0 && (
         <>
-          <p className="text-2xs text-mute">
+          <p className="text-cell text-mute">
             {t('search.totalHits', { count: result.data.total })}
           </p>
           <div className="space-y-3">
@@ -100,7 +100,7 @@ function SearchPage() {
                     to="/dictionaries/$name"
                     params={{ name: g.dictName }}
                     search={{ q: urlSearch.q }}
-                    className="text-sm font-sans text-accent hover:underline"
+                    className="text-body font-sans text-accent hover:underline"
                   >
                     {g.dictDisplayName ?? g.dictName}
                   </Link>
@@ -110,7 +110,7 @@ function SearchPage() {
                   {g.items.map((it) => (
                     <li
                       key={`${g.dictName}-${it.businessKey}`}
-                      className="flex items-center justify-between gap-3 py-2 text-2xs"
+                      className="flex items-center justify-between gap-3 py-2 text-cell"
                     >
                       <Link
                         to="/dictionaries/$name"
@@ -136,7 +136,7 @@ function SearchPage() {
       )}
 
       {!hasQuery && !tooShort && (
-        <p className="text-2xs text-mute">{t('search.intro')}</p>
+        <p className="text-cell text-mute">{t('search.intro')}</p>
       )}
     </div>
   )
diff --git a/ordinis-admin-ui/src/routes/webhooks.$id.tsx b/ordinis-admin-ui/src/routes/webhooks.$id.tsx
index 8e0da29..5ab1cc2 100644
--- a/ordinis-admin-ui/src/routes/webhooks.$id.tsx
+++ b/ordinis-admin-ui/src/routes/webhooks.$id.tsx
@@ -115,7 +115,7 @@ function WebhookDetailPage() {
     <div className="space-y-6">
       <PageHeader
         breadcrumb={
-          <Link to="/webhooks" className="text-sm text-ink-2 hover:text-accent">
+          <Link to="/webhooks" className="text-body text-ink-2 hover:text-accent">
             ← {t('nav.webhooks')}
           </Link>
         }
@@ -156,7 +156,7 @@ function WebhookDetailPage() {
       <Panel>
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-4">
           <InfoRow label={t('webhooks.field.url')}>
-            <code className="font-mono text-2xs break-all">{data.url}</code>
+            <code className="text-mono break-all">{data.url}</code>
           </InfoRow>
           <InfoRow label={t('webhooks.col.status')}>
             <Badge variant={data.active ? 'success' : 'neutral'}>
@@ -177,28 +177,28 @@ function WebhookDetailPage() {
                 ))}
               </div>
             ) : (
-              <span className="text-2xs text-mute">{t('webhooks.allScopes')}</span>
+              <span className="text-cell text-mute">{t('webhooks.allScopes')}</span>
             )}
           </InfoRow>
           <InfoRow label={t('webhooks.field.dictionaryFilter')}>
-            <span className="text-2xs">
+            <span className="text-cell">
               {data.dictionaryFilter && data.dictionaryFilter.length > 0
                 ? data.dictionaryFilter.join(', ')
                 : t('webhooks.allDicts')}
             </span>
           </InfoRow>
           <InfoRow label={t('webhooks.field.eventTypeFilter')}>
-            <span className="text-2xs">
+            <span className="text-cell">
               {data.eventTypeFilter && data.eventTypeFilter.length > 0
                 ? data.eventTypeFilter.join(', ')
                 : t('webhooks.allEvents')}
             </span>
           </InfoRow>
           <InfoRow label="HMAC secret">
-            <code className="font-mono text-2xs">{data.hmacSecret}</code>
+            <code className="text-mono">{data.hmacSecret}</code>
           </InfoRow>
           <InfoRow label={t('webhooks.field.createdBy')}>
-            <span className="text-2xs">
+            <span className="text-cell">
               {data.createdBy} · {new Date(data.createdAt).toLocaleString()}
             </span>
           </InfoRow>
@@ -207,7 +207,7 @@ function WebhookDetailPage() {
 
       <div>
         <div className="flex items-center justify-between mb-3">
-          <h2 className="font-sans text-base text-accent">
+          <h2 className="font-sans text-title-md text-accent">
             {t('webhooks.deliveries.title')}
           </h2>
           <IconButton
@@ -232,7 +232,7 @@ function WebhookDetailPage() {
                 onClick={() => handleStatusToggle(s)}
                 aria-pressed={active}
                 className={[
-                  'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-sm border text-2xs uppercase tracking-[0.10em] font-display transition-colors',
+ 'text-cap inline-flex items-center gap-1.5 px-2.5 py-1 rounded-sm border transition-colors',
                   active
                     ? 'border-accent bg-accent/8 text-accent'
                     : 'border-line bg-white text-ink-2 hover:border-carbon/40',
@@ -249,7 +249,7 @@ function WebhookDetailPage() {
                 setPage(0)
                 setStatusFilter(undefined)
               }}
-              className="text-xs text-accent hover:underline ml-2"
+              className="text-cell text-accent hover:underline ml-2"
             >
               {t('webhooks.deliveries.filter.clear')}
             </button>
@@ -282,7 +282,7 @@ function WebhookDetailPage() {
                   return (
                     <TableRow key={d.id}>
                       <TableCell>
-                        <span className="font-mono text-2xs">{d.outboxEventId}</span>
+                        <span className="text-mono">{d.outboxEventId}</span>
                       </TableCell>
                       <TableCell>
                         <Badge variant={STATUS_BADGE[d.status] ?? 'neutral'}>
@@ -290,22 +290,22 @@ function WebhookDetailPage() {
                         </Badge>
                       </TableCell>
                       <TableCell>
-                        <span className="font-mono text-2xs">{d.attemptCount}</span>
+                        <span className="text-mono">{d.attemptCount}</span>
                       </TableCell>
                       <TableCell>
-                        <span className="text-2xs text-ink-2">
+                        <span className="text-cell text-ink-2">
                           {d.lastAttemptAt
                             ? new Date(d.lastAttemptAt).toLocaleString()
                             : '—'}
                         </span>
                       </TableCell>
                       <TableCell>
-                        <span className="font-mono text-2xs">
+                        <span className="text-mono">
                           {d.lastStatusCode ?? '—'}
                         </span>
                       </TableCell>
                       <TableCell>
-                        <span className="text-2xs text-ink-2 line-clamp-2 max-w-md inline-block">
+                        <span className="text-cell text-ink-2 line-clamp-2 max-w-md inline-block">
                           {d.lastError ?? '—'}
                         </span>
                       </TableCell>
@@ -337,7 +337,7 @@ function WebhookDetailPage() {
             >
               ←
             </Button>
-            <span className="text-sm text-ink-2 self-center">
+            <span className="text-body text-ink-2 self-center">
               {page + 1} / {deliveries.data.totalPages}
             </span>
             <Button
@@ -384,14 +384,14 @@ function TestResultAlert({
       action={
         <button
           type="button"
-          className="text-xs text-ink-2 hover:text-ink"
+          className="text-cell text-ink-2 hover:text-ink"
           onClick={onDismiss}
         >
           ✕
         </button>
       }
     >
-      <div className="space-y-1 text-sm">
+      <div className="space-y-1 text-body">
         {result.httpStatus != null && (
           <div>
             <span className="text-cap text-mute mr-2">
@@ -409,7 +409,7 @@ function TestResultAlert({
           </div>
         )}
         {result.message && (
-          <div className="font-mono text-2xs text-ink whitespace-pre-wrap break-all">
+          <div className="text-mono text-ink whitespace-pre-wrap break-all">
             {result.message}
           </div>
         )}
@@ -446,14 +446,14 @@ function RotateRevealModal({
         className="bg-white rounded-lg p-6 max-w-xl w-full space-y-4"
         onClick={(e) => e.stopPropagation()}
       >
-        <h3 className="font-sans text-lg text-accent">
+        <h3 className="font-sans text-title-lg text-accent">
           {t('webhooks.secret.rotatedTitle')}
         </h3>
         <Alert variant="warning" title={t('webhooks.secret.warningTitle')}>
           {t('webhooks.secret.rotatedWarning')}
         </Alert>
         <div className="bg-carbon/5 border border-line rounded-md p-3">
-          <code className="font-mono text-2xs break-all">{secret}</code>
+          <code className="text-mono break-all">{secret}</code>
         </div>
         <div className="flex justify-end">
           <Button variant="primary" onClick={onClose}>
diff --git a/ordinis-admin-ui/src/routes/webhooks.index.tsx b/ordinis-admin-ui/src/routes/webhooks.index.tsx
index a41c6d4..c69ef51 100644
--- a/ordinis-admin-ui/src/routes/webhooks.index.tsx
+++ b/ordinis-admin-ui/src/routes/webhooks.index.tsx
@@ -118,7 +118,7 @@ function WebhooksPage() {
                     </Link>
                   </TableCell>
                   <TableCell>
-                    <span className="font-mono text-2xs truncate max-w-xs inline-block align-middle">
+                    <span className="text-mono truncate max-w-xs inline-block align-middle">
                       {sub.url}
                     </span>
                   </TableCell>
@@ -127,12 +127,12 @@ function WebhooksPage() {
                   </TableCell>
                   <TableCell>
                     {sub.dictionaryFilter && sub.dictionaryFilter.length > 0 ? (
-                      <span className="text-2xs text-ink">
+                      <span className="text-cell text-ink">
                         {sub.dictionaryFilter.slice(0, 3).join(', ')}
                         {sub.dictionaryFilter.length > 3 && ` +${sub.dictionaryFilter.length - 3}`}
                       </span>
                     ) : (
-                      <span className="text-2xs text-mute">{t('webhooks.allDicts')}</span>
+                      <span className="text-cell text-mute">{t('webhooks.allDicts')}</span>
                     )}
                   </TableCell>
                   <TableCell>
@@ -175,7 +175,7 @@ function WebhooksPage() {
 function ScopeChips({ scopes }: { scopes?: DataScope[] | null }) {
   const { t } = useTranslation()
   if (!scopes || scopes.length === 0) {
-    return <span className="text-2xs text-mute">{t('webhooks.allScopes')}</span>
+    return <span className="text-cell text-mute">{t('webhooks.allScopes')}</span>
   }
   return (
     <div className="flex gap-1">
@@ -368,7 +368,7 @@ function SecretRevealModal({
           {t('webhooks.secret.warning')}
         </Alert>
         <div className="bg-carbon/5 border border-line rounded-md p-3">
-          <code className="font-mono text-2xs break-all">{revealed.secret}</code>
+          <code className="text-mono break-all">{revealed.secret}</code>
         </div>
         <div className="flex justify-end gap-2">
           <Button
diff --git a/ordinis-admin-ui/src/styles.css b/ordinis-admin-ui/src/styles.css
index d5d2563..dc7a05a 100644
--- a/ordinis-admin-ui/src/styles.css
+++ b/ordinis-admin-ui/src/styles.css
@@ -146,32 +146,86 @@
   --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
   --font-display: 'Tektur', 'Inter', sans-serif;
 
-  /* Font sizes per design_handoff_ordinis_mdm/README.md spec.
-   * Override Tailwind defaults так чтобы существующие utility classes
-   * автоматически соответствовали handoff:
-   *   text-sm  : 13px (workhorse — body, buttons, tabs)
-   *   text-xs  : 12px (default, без изменений — secondary meta)
-   *   text-2xs : 11px (custom — IDs, dates, table mono meta)
-   * Tektur caps 10.5px → используй .cap или text-cap utility (отдельно).
-   * Table cells 12.5px / page titles 17px / modal titles 22px — explicit
-   * через text-[Npx] arbitrary value по месту. */
+  /* Font scale.
+   *
+   * Наши собственные классы — семантические @utility ниже (text-body,
+   * text-cell, text-mono, text-title-*, text-cap). Каждая роль = место в UI.
+   *
+   * --text-sm: 13px — нужно потому что @nstart/ui dist внутри использует
+   * text-sm для buttons/inputs/forms (см. @source выше). Без этого override
+   * библиотечные компоненты ушли бы к Tailwind default 14px и разошлись с
+   * нашим handoff workhorse 13px. После Stage 3.9 (pnpm remove @nstart/ui)
+   * этот override можно убрать — наш код text-sm не использует.
+   *
+   * --text-2xs override НЕ нужен: убрали все usage в audit, text-2xs больше
+   * нигде не появляется. */
   --text-sm: 13px;
-  --text-sm--line-height: 1.4;
-  --text-2xs: 11px;
-  --text-2xs--line-height: 1.35;
+  --text-sm--line-height: 1.45;
 
   --radius-sm: 4px;
   --radius-md: 6px;
   --radius-lg: 8px;
 }
 
-/* Tektur caps utility — handoff 10.5px uppercase tracking 0.10em.
- * Codemod target: replace `text-2xs uppercase tracking-[0.10em]` → `text-cap`. */
+/* === Semantic typography utilities per design_handoff_ordinis_mdm/README.md ===
+ * Type system — 7 ролей, каждая соответствует месту в UI:
+ *
+ *   text-title-xl  — 22/600   modal title, section header (rare)
+ *   text-title-lg  — 17/600   page title в editor
+ *   text-title-md  — 15/600   dictionary card title
+ *   text-body      — 13/400   workhorse: body, buttons, tabs, inputs
+ *   text-cell      — 12.5/500 table cell text
+ *   text-mono      — 11/500   Mono: IDs, dates, FK refs
+ *   text-cap       — 10.5/600 Tektur UPPERCASE caption / section label
+ *
+ * Color и weight overrides поверх — добавлять отдельными utility classes
+ * (e.g. `text-body font-medium text-ink`). НЕ накладывать font-mono/
+ * font-display/uppercase/tracking — они baked в соответствующие utility. */
+
+@utility text-title-xl {
+  font-size: 22px;
+  font-weight: 600;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+}
+
+@utility text-title-lg {
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1.25;
+  letter-spacing: -0.005em;
+}
+
+@utility text-title-md {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+@utility text-body {
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 1.45;
+}
+
+@utility text-cell {
+  font-size: 12.5px;
+  font-weight: 500;
+  line-height: 1.35;
+}
+
+@utility text-mono {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
 @utility text-cap {
   font-family: var(--font-display);
   font-size: 10.5px;
-  line-height: 1;
   font-weight: 600;
+  line-height: 1;
   text-transform: uppercase;
   letter-spacing: 0.10em;
 }
diff --git a/ordinis-admin-ui/src/ui/components/alert.tsx b/ordinis-admin-ui/src/ui/components/alert.tsx
index b136d41..94dd4ca 100644
--- a/ordinis-admin-ui/src/ui/components/alert.tsx
+++ b/ordinis-admin-ui/src/ui/components/alert.tsx
@@ -7,7 +7,7 @@ import { cn } from '@/lib/utils'
  * shadcn-style API: children может быть [Title, Description] или произвольный.
  */
 const alertVariants = cva(
-  'relative w-full rounded-md border-l-4 px-4 py-3 text-sm [&>svg]:text-ink-2 [&>svg]:size-4 [&>svg]:absolute [&>svg]:left-3 [&>svg]:top-3 [&>svg+*]:pl-6',
+  'relative w-full rounded-md border-l-4 px-4 py-3 text-body [&>svg]:text-ink-2 [&>svg]:size-4 [&>svg]:absolute [&>svg]:left-3 [&>svg]:top-3 [&>svg+*]:pl-6',
   {
     variants: {
       variant: {
diff --git a/ordinis-admin-ui/src/ui/components/badge.tsx b/ordinis-admin-ui/src/ui/components/badge.tsx
index 2cf2cc7..00ec901 100644
--- a/ordinis-admin-ui/src/ui/components/badge.tsx
+++ b/ordinis-admin-ui/src/ui/components/badge.tsx
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
 
 const badgeVariants = cva(
-  'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-2xs font-medium font-mono uppercase tracking-wide whitespace-nowrap',
+  'inline-flex items-center gap-1 rounded-sm px-1.5 py-0.5 text-cell font-medium font-mono uppercase tracking-wide whitespace-nowrap',
   {
     variants: {
       variant: {
diff --git a/ordinis-admin-ui/src/ui/components/button.tsx b/ordinis-admin-ui/src/ui/components/button.tsx
index 516a743..e45a5f5 100644
--- a/ordinis-admin-ui/src/ui/components/button.tsx
+++ b/ordinis-admin-ui/src/ui/components/button.tsx
@@ -22,7 +22,7 @@ import { cn } from '@/lib/utils'
 const buttonVariants = cva(
   [
     'inline-flex items-center justify-center gap-2 whitespace-nowrap',
-    'rounded-md text-sm font-medium transition-colors',
+    'rounded-md text-body font-medium transition-colors',
     'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg',
     'disabled:pointer-events-none disabled:opacity-50',
     '[&_svg]:pointer-events-none [&_svg]:shrink-0',
@@ -42,7 +42,7 @@ const buttonVariants = cva(
           'text-accent underline-offset-4 hover:underline',
       },
       size: {
-        sm: 'h-7 px-2.5 text-xs',
+        sm: 'h-7 px-2.5 text-cell',
         md: 'h-9 px-3.5',
         lg: 'h-10 px-4',
         'icon-sm': 'h-6 w-6',
diff --git a/ordinis-admin-ui/src/ui/components/card.tsx b/ordinis-admin-ui/src/ui/components/card.tsx
index 7c26b08..62e0dfa 100644
--- a/ordinis-admin-ui/src/ui/components/card.tsx
+++ b/ordinis-admin-ui/src/ui/components/card.tsx
@@ -32,7 +32,7 @@ export const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttribut
     return (
       <h3
         ref={ref}
-        className={cn('text-base font-semibold leading-tight text-ink', className)}
+        className={cn('text-title-md text-ink', className)}
         {...props}
       />
     )
@@ -43,7 +43,7 @@ export const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(function CardDescription({ className, ...props }, ref) {
-  return <p ref={ref} className={cn('text-sm text-ink-2', className)} {...props} />
+  return <p ref={ref} className={cn('text-body text-ink-2', className)} {...props} />
 })
 
 export const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
diff --git a/ordinis-admin-ui/src/ui/components/dialog.tsx b/ordinis-admin-ui/src/ui/components/dialog.tsx
index 2a15782..74541de 100644
--- a/ordinis-admin-ui/src/ui/components/dialog.tsx
+++ b/ordinis-admin-ui/src/ui/components/dialog.tsx
@@ -118,7 +118,7 @@ export const DialogTitle = React.forwardRef<
   return (
     <DialogPrimitive.Title
       ref={ref}
-      className={cn('text-base font-semibold text-ink leading-tight', className)}
+      className={cn('text-title-xl text-ink', className)}
       {...props}
     />
   )
@@ -131,7 +131,7 @@ export const DialogDescription = React.forwardRef<
   return (
     <DialogPrimitive.Description
       ref={ref}
-      className={cn('text-sm text-ink-2', className)}
+      className={cn('text-body text-ink-2', className)}
       {...props}
     />
   )
diff --git a/ordinis-admin-ui/src/ui/components/dropdown-menu.tsx b/ordinis-admin-ui/src/ui/components/dropdown-menu.tsx
index 19b207b..9fc7a1d 100644
--- a/ordinis-admin-ui/src/ui/components/dropdown-menu.tsx
+++ b/ordinis-admin-ui/src/ui/components/dropdown-menu.tsx
@@ -20,7 +20,7 @@ export const DropdownMenuSubTrigger = React.forwardRef<
     <DropdownMenuPrimitive.SubTrigger
       ref={ref}
       className={cn(
-        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-surface-2 data-[state=open]:bg-surface-2',
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body outline-none focus:bg-surface-2 data-[state=open]:bg-surface-2',
         inset && 'pl-8',
         className,
       )}
@@ -77,7 +77,7 @@ export const DropdownMenuItem = React.forwardRef<
     <DropdownMenuPrimitive.Item
       ref={ref}
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-surface-2 focus:text-ink',
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-body outline-none transition-colors focus:bg-surface-2 focus:text-ink',
         'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         inset && 'pl-8',
         className,
@@ -95,7 +95,7 @@ export const DropdownMenuCheckboxItem = React.forwardRef<
     <DropdownMenuPrimitive.CheckboxItem
       ref={ref}
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-surface-2',
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-body outline-none transition-colors focus:bg-surface-2',
         'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         className,
       )}
@@ -120,7 +120,7 @@ export const DropdownMenuRadioItem = React.forwardRef<
     <DropdownMenuPrimitive.RadioItem
       ref={ref}
       className={cn(
-        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-surface-2',
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-body outline-none transition-colors focus:bg-surface-2',
         className,
       )}
       {...props}
@@ -142,7 +142,7 @@ export const DropdownMenuLabel = React.forwardRef<
   return (
     <DropdownMenuPrimitive.Label
       ref={ref}
-      className={cn('px-2 py-1.5 text-2xs font-semibold uppercase tracking-wider text-mute', inset && 'pl-8', className)}
+      className={cn('px-2 py-1.5 text-cell font-semibold uppercase tracking-wider text-mute', inset && 'pl-8', className)}
       {...props}
     />
   )
diff --git a/ordinis-admin-ui/src/ui/components/empty-state.tsx b/ordinis-admin-ui/src/ui/components/empty-state.tsx
index 5cf4697..00dd97f 100644
--- a/ordinis-admin-ui/src/ui/components/empty-state.tsx
+++ b/ordinis-admin-ui/src/ui/components/empty-state.tsx
@@ -27,8 +27,8 @@ export function EmptyState({
     >
       {icon && <div className="text-mute [&>svg]:size-8">{icon}</div>}
       <div className="space-y-1">
-        <div className="text-base font-semibold text-ink">{title}</div>
-        {description && <div className="text-sm text-ink-2 max-w-md">{description}</div>}
+        <div className="text-title-md text-ink">{title}</div>
+        {description && <div className="text-body text-ink-2 max-w-md">{description}</div>}
       </div>
       {action && <div className="mt-2">{action}</div>}
     </div>
diff --git a/ordinis-admin-ui/src/ui/components/input.tsx b/ordinis-admin-ui/src/ui/components/input.tsx
index 60d4dcf..c685a80 100644
--- a/ordinis-admin-ui/src/ui/components/input.tsx
+++ b/ordinis-admin-ui/src/ui/components/input.tsx
@@ -37,11 +37,11 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         aria-required={required || undefined}
         aria-invalid={Boolean(error) || undefined}
         className={cn(
-          'flex h-9 w-full rounded-md border border-line bg-surface px-3 py-1 text-sm text-ink',
+          'flex h-9 w-full rounded-md border border-line bg-surface px-3 py-1 text-body text-ink',
           'placeholder:text-mute',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-bg',
           'disabled:cursor-not-allowed disabled:opacity-50',
-          'file:border-0 file:bg-transparent file:text-sm file:font-medium',
+          'file:border-0 file:bg-transparent file:text-body file:font-medium',
           error && 'border-pink focus-visible:ring-pink',
           className,
         )}
@@ -64,9 +64,9 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
         )}
         {inputEl}
         {error ? (
-          <span className="text-xs text-pink">{error}</span>
+          <span className="text-cell text-pink">{error}</span>
         ) : hint ? (
-          <span className="text-xs text-mute">{hint}</span>
+          <span className="text-cell text-mute">{hint}</span>
         ) : null}
       </div>
     )
diff --git a/ordinis-admin-ui/src/ui/components/label.tsx b/ordinis-admin-ui/src/ui/components/label.tsx
index 9786d36..1ddff6f 100644
--- a/ordinis-admin-ui/src/ui/components/label.tsx
+++ b/ordinis-admin-ui/src/ui/components/label.tsx
@@ -10,7 +10,7 @@ export const Label = React.forwardRef<
     <LabelPrimitive.Root
       ref={ref}
       className={cn(
-        'text-2xs font-medium font-display uppercase tracking-[0.10em] text-mute leading-none',
+ 'text-cap font-medium text-mute ',
         'peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
         className,
       )}
diff --git a/ordinis-admin-ui/src/ui/components/loading-block.tsx b/ordinis-admin-ui/src/ui/components/loading-block.tsx
index 69c2bb9..e24e54a 100644
--- a/ordinis-admin-ui/src/ui/components/loading-block.tsx
+++ b/ordinis-admin-ui/src/ui/components/loading-block.tsx
@@ -35,7 +35,7 @@ export function LoadingBlock({ className, label, size = 'md', ...props }: Loadin
       {...props}
     >
       <Loader2 className={cn('animate-spin text-accent', s.icon)} />
-      {label && <span className="text-sm">{label}</span>}
+      {label && <span className="text-body">{label}</span>}
     </div>
   )
 }
diff --git a/ordinis-admin-ui/src/ui/components/page-header.tsx b/ordinis-admin-ui/src/ui/components/page-header.tsx
index 2331424..54eee70 100644
--- a/ordinis-admin-ui/src/ui/components/page-header.tsx
+++ b/ordinis-admin-ui/src/ui/components/page-header.tsx
@@ -32,8 +32,8 @@ export function PageHeader({
       )}
       <div className="flex items-start justify-between gap-3 flex-wrap">
         <div className="min-w-0">
-          <h1 className="text-lg font-semibold text-ink leading-tight truncate">{title}</h1>
-          {description && <p className="text-sm text-ink-2 mt-1 max-w-2xl">{description}</p>}
+          <h1 className="text-title-lg text-ink truncate">{title}</h1>
+          {description && <p className="text-body text-ink-2 mt-1 max-w-2xl">{description}</p>}
         </div>
         {actions && <div className="shrink-0 flex items-center gap-2">{actions}</div>}
       </div>
diff --git a/ordinis-admin-ui/src/ui/components/popover.tsx b/ordinis-admin-ui/src/ui/components/popover.tsx
index 2b0dadd..9465802 100644
--- a/ordinis-admin-ui/src/ui/components/popover.tsx
+++ b/ordinis-admin-ui/src/ui/components/popover.tsx
@@ -17,7 +17,7 @@ export const PopoverContent = React.forwardRef<
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          'z-50 w-72 rounded-md border border-line bg-surface p-3 text-sm text-ink shadow-lg outline-none',
+          'z-50 w-72 rounded-md border border-line bg-surface p-3 text-body text-ink shadow-lg outline-none',
           'data-[state=open]:animate-in data-[state=closed]:animate-out',
           'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
           'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
diff --git a/ordinis-admin-ui/src/ui/components/scope.tsx b/ordinis-admin-ui/src/ui/components/scope.tsx
index 470c90a..31b99b6 100644
--- a/ordinis-admin-ui/src/ui/components/scope.tsx
+++ b/ordinis-admin-ui/src/ui/components/scope.tsx
@@ -64,7 +64,7 @@ export function ScopeBadge({
   return (
     <span
       className={cn(
-        'inline-flex items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-2xs font-mono font-medium',
+        'inline-flex items-center gap-1.5 rounded-sm px-1.5 py-0.5 text-cell font-mono font-medium',
         SCOPE_BG[scope],
         className,
       )}
diff --git a/ordinis-admin-ui/src/ui/components/sheet.tsx b/ordinis-admin-ui/src/ui/components/sheet.tsx
index 8dee31d..861a8ed 100644
--- a/ordinis-admin-ui/src/ui/components/sheet.tsx
+++ b/ordinis-admin-ui/src/ui/components/sheet.tsx
@@ -113,7 +113,7 @@ export const SheetTitle = React.forwardRef<
   return (
     <DialogPrimitive.Title
       ref={ref}
-      className={cn('text-base font-semibold text-ink', className)}
+      className={cn('text-title-xl text-ink', className)}
       {...props}
     />
   )
@@ -126,7 +126,7 @@ export const SheetDescription = React.forwardRef<
   return (
     <DialogPrimitive.Description
       ref={ref}
-      className={cn('text-sm text-ink-2', className)}
+      className={cn('text-body text-ink-2', className)}
       {...props}
     />
   )
diff --git a/ordinis-admin-ui/src/ui/components/tabs.tsx b/ordinis-admin-ui/src/ui/components/tabs.tsx
index 8fb985f..ded0ada 100644
--- a/ordinis-admin-ui/src/ui/components/tabs.tsx
+++ b/ordinis-admin-ui/src/ui/components/tabs.tsx
@@ -33,7 +33,7 @@ export const TabsTrigger = React.forwardRef<
     <TabsPrimitive.Trigger
       ref={ref}
       className={cn(
-        'inline-flex items-center justify-center whitespace-nowrap px-3.5 h-10 text-sm text-ink-2 -mb-px',
+        'inline-flex items-center justify-center whitespace-nowrap px-3.5 h-10 text-body text-ink-2 -mb-px',
         'border-b-2 border-transparent transition-all hover:text-ink',
         'focus-visible:outline-none focus-visible:text-accent',
         'disabled:pointer-events-none disabled:opacity-50',
diff --git a/ordinis-admin-ui/src/ui/components/textarea.tsx b/ordinis-admin-ui/src/ui/components/textarea.tsx
index 7fc5f62..5c49e43 100644
--- a/ordinis-admin-ui/src/ui/components/textarea.tsx
+++ b/ordinis-admin-ui/src/ui/components/textarea.tsx
@@ -36,7 +36,7 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
         aria-required={required || undefined}
         aria-invalid={Boolean(error) || undefined}
         className={cn(
-          'flex w-full rounded-md border border-line bg-surface px-3 py-2 text-sm text-ink',
+          'flex w-full rounded-md border border-line bg-surface px-3 py-2 text-body text-ink',
           'placeholder:text-mute',
           'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-bg',
           'disabled:cursor-not-allowed disabled:opacity-50',
@@ -63,9 +63,9 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
         )}
         {textareaEl}
         {error ? (
-          <span className="text-xs text-pink">{error}</span>
+          <span className="text-cell text-pink">{error}</span>
         ) : hint ? (
-          <span className="text-xs text-mute">{hint}</span>
+          <span className="text-cell text-mute">{hint}</span>
         ) : null}
       </div>
     )
diff --git a/ordinis-admin-ui/src/ui/components/toaster.tsx b/ordinis-admin-ui/src/ui/components/toaster.tsx
index 12d2d3d..1e0146a 100644
--- a/ordinis-admin-ui/src/ui/components/toaster.tsx
+++ b/ordinis-admin-ui/src/ui/components/toaster.tsx
@@ -41,7 +41,7 @@ export function Toaster() {
         },
         classNames: {
           title: 'font-medium',
-          description: 'text-mute text-xs',
+          description: 'text-mute text-cell',
         },
       }}
     />
diff --git a/ordinis-admin-ui/src/ui/components/tooltip.tsx b/ordinis-admin-ui/src/ui/components/tooltip.tsx
index 0bc709e..10e3032 100644
--- a/ordinis-admin-ui/src/ui/components/tooltip.tsx
+++ b/ordinis-admin-ui/src/ui/components/tooltip.tsx
@@ -16,7 +16,7 @@ export const TooltipContent = React.forwardRef<
         ref={ref}
         sideOffset={sideOffset}
         className={cn(
-          'z-50 overflow-hidden rounded-sm bg-ink text-on-accent px-2 py-1 text-2xs font-medium shadow',
+          'z-50 overflow-hidden rounded-sm bg-ink text-on-accent px-2 py-1 text-cell font-medium shadow',
           'data-[state=open]:animate-in data-[state=closed]:animate-out',
           'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
           className,