Merge branch 'fix/v1.3.1-fonts-semantic-audit' into 'main'

fix(fonts): semantic typography utilities per handoff (7 roles) See merge request 2-6/2-6-4/terravault/ordinis!47
2026-05-11 11:31:55 +00:00
parent 715b009e00 b94912789f
commit 2d3125f544
46 changed files with 296 additions and 243 deletions
@@ -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>
@@ -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>
+          <h1 className="text-title-lg font-sans">Ошибка входа</h1>
-          <p className="text-sm text-ink-2">
+          <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}
@@ -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>}
+      {hint && !error && <p className="text-cell text-mute mt-1">{hint}</p>}
-      {error && <p className="text-2xs text-mars mt-1">{error}</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',
@@ -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>
        )}
@@ -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')
@@ -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-body = 13px workhorse per handoff (см. styles.css @utility).
-        // text-[13px] = exact handoff value.
+        'group flex items-center gap-2.5 px-3 py-1.5 rounded-md text-body transition-colors',
        'group flex items-center gap-2.5 px-3 py-1.5 rounded-md text-[13px] 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',
@@ -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>
@@ -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>
            )}
@@ -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"
@@ -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>
        ) : (
@@ -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"
@@ -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>
@@ -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>
+              <p className="text-body">{t('schema.diff.blockedBody')}</p>
-              <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
                  .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}
@@ -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>
+          <p className="text-cell text-mute">{current.description}</p>
-          <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(current.envelope, null, 2)}
          </pre>
-          <p className="text-2xs text-mute">
+          <p className="text-cell text-mute">
            {t('schema.events.disclaimer')}
          </p>
        </div>
@@ -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>
  )
@@ -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')}
@@ -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">
@@ -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 && (
@@ -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"
@@ -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">
+        <div className="flex items-center gap-3 px-3 py-2 rounded-sm border border-accent/30 bg-accent/4 text-body">
-          <span className="font-mono text-xs text-ink">
+          <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>
  )
@@ -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' && (
@@ -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>
@@ -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"
@@ -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-mono">{d.makerId}</TableCell>
-                  <TableCell className="text-2xs text-ink-2">
+                  <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>
                )}
@@ -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>
  )
@@ -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}>
@@ -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
@@ -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.
+  /* Font scale.
-   * Override Tailwind defaults так чтобы существующие utility classes
+   *
-   * автоматически соответствовали handoff:
+   * Наши собственные классы — семантические @utility ниже (text-body,
-   *   text-sm  : 13px (workhorse — body, buttons, tabs)
+   * text-cell, text-mono, text-title-*, text-cap). Каждая роль = место в UI.
-   *   text-xs  : 12px (default, без изменений — secondary meta)
+   *
-   *   text-2xs : 11px (custom — IDs, dates, table mono meta)
+   * --text-sm: 13px — нужно потому что @nstart/ui dist внутри использует
-   * Tektur caps 10.5px → используй .cap или text-cap utility (отдельно).
+   * text-sm для buttons/inputs/forms (см. @source выше). Без этого override
-   * Table cells 12.5px / page titles 17px / modal titles 22px — explicit
+   * библиотечные компоненты ушли бы к Tailwind default 14px и разошлись с
-   * через text-[Npx] arbitrary value по месту. */
+   * нашим 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-sm--line-height: 1.45;
  --text-2xs: 11px;
  --text-2xs--line-height: 1.35;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
 }
-/* Tektur caps utility — handoff 10.5px uppercase tracking 0.10em.
+/* === Semantic typography utilities per design_handoff_ordinis_mdm/README.md ===
- * Codemod target: replace `text-2xs uppercase tracking-[0.10em]` → `text-cap`. */
+ * 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;
 }
@@ -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: {
@@ -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: {
@@ -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',
@@ -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>>(
@@ -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}
    />
  )
@@ -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}
    />
  )
@@ -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>
+        <div className="text-title-md text-ink">{title}</div>
-        {description && <div className="text-sm text-ink-2 max-w-md">{description}</div>}
+        {description && <div className="text-body text-ink-2 max-w-md">{description}</div>}
      </div>
      {action && <div className="mt-2">{action}</div>}
    </div>
@@ -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>
    )
@@ -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,
      )}
@@ -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>
  )
 }
@@ -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>
+          <h1 className="text-title-lg text-ink truncate">{title}</h1>
-          {description && <p className="text-sm text-ink-2 mt-1 max-w-2xl">{description}</p>}
+          {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>
@@ -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',
@@ -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,
      )}
@@ -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}
    />
  )
@@ -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',
@@ -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>
    )
@@ -41,7 +41,7 @@ export function Toaster() {
        },
        classNames: {
          title: 'font-medium',
-          description: 'text-mute text-xs',
+          description: 'text-mute text-cell',
        },
      }}
    />
@@ -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,