feat(admin-ui): catalog refresh + token migration (Stage 3.2)

ordinis-admin-ui/src/auth/AuthBadge.tsx

@@ -15,7 +15,7 @@ export function AuthBadge() {
 
   if (auth.isLoading) {
     return (
-      <span className="text-2xs uppercase tracking-label text-carbon/60">
+      <span className="text-2xs uppercase tracking-[0.10em] text-mute">
         {t('loading')}
       </span>
     )
@@ -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-carbon">
+      <span className="inline-flex items-center gap-1 text-sm text-ink">
         <UserIcon size={14} weight="duotone" />
         <span className="hidden sm:inline">{display}</span>
       </span>

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-primary">Ошибка входа</h1>
+          <h1 className="text-lg font-sans">Ошибка входа</h1>
-          <p className="text-sm text-carbon/70">
+          <p className="text-sm 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-ultramarain text-ultramarain px-4 py-2 text-sm hover:bg-orbit"
+            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"
             onClick={() => {
               window.location.href = '/'
             }}

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-carbon/60 px-2">
+            <div className="sm:col-span-2 text-2xs text-mute px-2">
               {t('form.idSourceNote', { field: idSource })}
             </div>
           )}
@@ -327,9 +327,9 @@ const FieldBody = ({
       <div>
         <FieldLabel required={required}>
           {label}{' '}
-          <span className="text-2xs uppercase tracking-label text-carbon/60 ml-1">i18n</span>
+          <span className="text-2xs uppercase tracking-[0.10em] text-mute ml-1">i18n</span>
         </FieldLabel>
-        <div className="space-y-2 pl-3 border-l-2 border-regolith mt-1">
+        <div className="space-y-2 pl-3 border-l-2 border-line mt-1">
           {supportedLocales.map((loc) => (
             <Controller
               key={loc}
@@ -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-carbon/70 normal-case tracking-normal whitespace-nowrap shrink-0 w-14">
+                  <span className="text-xs font-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,7 +599,7 @@ const DateTimeField = ({ label, value, defaultTime, onChange, hint, error }: Dat
           />
         </div>
       </div>
-      {hint && !error && <p className="text-2xs text-carbon/60 mt-1">{hint}</p>}
+      {hint && !error && <p className="text-2xs text-mute mt-1">{hint}</p>}
       {error && <p className="text-2xs text-mars mt-1">{error}</p>}
     </div>
   )
@@ -797,11 +797,11 @@ 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-secondary',
+                'w-full appearance-none border rounded-sm pl-3 pr-10 py-2 text-sm font-display',
                 'bg-white text-black transition-colors',
-                'focus:outline-none focus:ring-1 focus:ring-ultramarain focus:border-ultramarain',
+                'focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent',
-                errorMsg ? 'border-mars' : 'border-regolith hover:border-carbon/40',
+                errorMsg ? 'border-mars' : 'border-line hover:border-carbon/40',
-                isLoading ? 'cursor-wait text-carbon/60' : 'cursor-pointer',
+                isLoading ? 'cursor-wait text-mute' : 'cursor-pointer',
               ].join(' ')}
             >
               <option value="">{isLoading ? '…' : '—'}</option>
@@ -816,9 +816,9 @@ const ReferenceSelectField = ({
               aria-hidden="true"
             >
               {isLoading ? (
-                <CircleNotchIcon size={16} weight="bold" className="text-ultramarain animate-spin" />
+                <CircleNotchIcon size={16} weight="bold" className="text-accent animate-spin" />
               ) : (
-                <CaretDownIcon size={16} weight="regular" className="text-carbon/40" />
+                <CaretDownIcon size={16} weight="regular" className="text-mute/70" />
               )}
             </div>
           </div>

ordinis-admin-ui/src/components/geo/AoiPickerDialog.tsx

@@ -163,10 +163,10 @@ export const AoiPickerDialog = ({ isOpen, onClose, onApply, initial }: Props) =>
         type="button"
         onClick={() => setDrawMode(active ? 'idle' : mode)}
         className={[
-          'px-3 py-1.5 text-xs font-secondary rounded-sm border transition-colors',
+          'px-3 py-1.5 text-xs font-display rounded-sm border transition-colors',
           active
-            ? 'border-ultramarain bg-ultramarain text-white'
+            ? 'border-accent bg-accent text-white'
-            : 'border-regolith bg-white text-carbon hover:border-carbon/40',
+            : 'border-line bg-white text-ink hover:border-carbon/40',
         ].join(' ')}
       >
         {label}
@@ -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-carbon/70">{t('aoi.dialog.help')}</p>
+      <p className="text-sm 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-secondary rounded-sm border border-regolith bg-white text-carbon hover:border-carbon/40 disabled:opacity-40 disabled:cursor-not-allowed"
+          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"
         >
           {t('aoi.dialog.clear')}
         </button>
         {drawMode === 'polygon' && (
-          <span className="text-2xs text-carbon/60">
+          <span className="text-2xs text-mute">
             {t('aoi.dialog.polygonHint')}
           </span>
         )}
@@ -205,7 +205,7 @@ export const AoiPickerDialog = ({ isOpen, onClose, onApply, initial }: Props) =>
 
       <div
         ref={mapDivRef}
-        className="rounded-sm border border-regolith shrink-0"
+        className="rounded-sm border border-line shrink-0"
         style={{ display: 'block', width: '100%', height: 520, minHeight: 520 }}
         aria-label={t('aoi.dialog.mapAriaLabel')}
       />

ordinis-admin-ui/src/components/lineage/CascadeConfirmDialog.tsx

@@ -119,7 +119,7 @@ export const CascadeConfirmDialog = ({
         {plan && (
           <>
             {/* Header summary */}
-            <p className="text-sm text-carbon">
+            <p className="text-sm text-ink">
               {hasBlockers
                 ? t('cascade.summary.blocked', {
                     blockers: plan.blockers.length,
@@ -144,16 +144,16 @@ export const CascadeConfirmDialog = ({
                       <span className="font-mono">
                         {b.sourceDict}/{b.businessKey}
                       </span>
-                      <span className="text-carbon/60">.{b.sourceField}</span>
+                      <span className="text-mute">.{b.sourceField}</span>
                     </li>
                   ))}
                   {plan.blockers.length > 5 && (
-                    <li className="text-carbon/60">
+                    <li className="text-mute">
                       {t('cascade.blockers.more', { count: plan.blockers.length - 5 })}
                     </li>
                   )}
                 </ul>
-                <p className="mt-2 text-2xs text-carbon/70">
+                <p className="mt-2 text-2xs 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-primary">
+                  <h4 className="text-sm font-sans">
                     {t('cascade.cascade.title', { count: plan.cascade.length })}
                   </h4>
                 </div>
@@ -176,13 +176,13 @@ export const CascadeConfirmDialog = ({
                     return (
                       <li
                         key={key}
-                        className="border border-regolith rounded-sm px-3 py-2 text-2xs"
+                        className="border border-line rounded-sm px-3 py-2 text-2xs"
                       >
                         <div className="flex items-center gap-2 mb-1">
-                          <span className="font-mono text-ultramarain">
+                          <span className="font-mono text-accent">
                             {first.sourceDisplayName ?? first.sourceDict}
                           </span>
-                          <span className="font-mono text-carbon/70">
+                          <span className="font-mono text-ink-2">
                             .{first.sourceField}
                           </span>
                           <Badge variant={onCloseVariant(first.onClose)}>
@@ -190,14 +190,14 @@ export const CascadeConfirmDialog = ({
                           </Badge>
                           <Badge variant="neutral">{entries.length}</Badge>
                         </div>
-                        <ul className="text-2xs text-carbon/70 ml-1 space-y-0.5">
+                        <ul className="text-2xs text-ink-2 ml-1 space-y-0.5">
                           {sample.map((e) => (
                             <li key={e.recordId} className="font-mono">
                               · {e.businessKey}
                             </li>
                           ))}
                           {overflow > 0 && (
-                            <li className="text-carbon/50">
+                            <li className="text-mute">
                               {t('cascade.cascade.more', { count: overflow })}
                             </li>
                           )}
@@ -224,7 +224,7 @@ export const CascadeConfirmDialog = ({
               <div>
                 <label
                   htmlFor="cascade-reason"
-                  className="text-2xs text-carbon/70 uppercase tracking-label"
+                  className="text-2xs text-ink-2 uppercase tracking-[0.10em]"
                 >
                   {t('cascade.reason.label')}
                 </label>
@@ -242,7 +242,7 @@ export const CascadeConfirmDialog = ({
               <div>
                 <label
                   htmlFor="cascade-confirm"
-                  className="text-2xs text-carbon/70 uppercase tracking-label"
+                  className="text-2xs text-ink-2 uppercase tracking-[0.10em]"
                 >
                   {t('cascade.confirmGate.label', { word: 'CONFIRM' })}
                 </label>
@@ -264,7 +264,7 @@ export const CascadeConfirmDialog = ({
         )}
 
         {/* Footer actions */}
-        <div className="flex items-center justify-end gap-2 pt-2 border-t border-regolith">
+        <div className="flex items-center justify-end gap-2 pt-2 border-t border-line">
           <Button
             variant="secondary"
             onClick={onClose}

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-primary text-carbon">
+        <h3 className="text-sm font-sans text-ink">
           {t('lineage.usedBy.title')}
         </h3>
-        <span className="text-2xs text-carbon/60">
+        <span className="text-2xs text-mute">
           {t('lineage.usedBy.count', { count: data.length })}
         </span>
       </div>
@@ -48,21 +48,21 @@ 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-regolith bg-white text-2xs"
+            className="flex items-center gap-2 px-2.5 py-1.5 rounded-sm border border-line bg-white text-2xs"
           >
             <Link
               to="/dictionaries/$name"
               params={{ name: d.sourceDict }}
-              className="text-ultramarain hover:underline font-mono"
+              className="text-accent hover:underline font-mono"
               aria-label={t('lineage.usedBy.openSourceDict', {
                 dict: d.sourceDisplayName ?? d.sourceDict,
               })}
             >
               {d.sourceDisplayName ?? d.sourceDict}
             </Link>
-            <span className="font-mono text-carbon/70">.{d.sourceField}</span>
+            <span className="font-mono text-ink-2">.{d.sourceField}</span>
-            <ArrowRightIcon weight="bold" size={12} className="text-carbon/40" />
+            <ArrowRightIcon weight="bold" size={12} className="text-mute/70" />
-            <span className="font-mono text-carbon/70">{d.targetField}</span>
+            <span className="font-mono text-ink-2">{d.targetField}</span>
             {d.activeRecordsInSourceDict > 0 && (
               <Badge variant="neutral">
                 {t('lineage.usedBy.activeCount', {

ordinis-admin-ui/src/components/lineage/DictionaryHubView.tsx

@@ -54,7 +54,7 @@ const NeighborCard = ({
     to="/dictionaries/$name"
     params={{ name: dict.name }}
     search={{ view: 'hub' }}
-    className={`group block bg-white border border-regolith rounded-lg p-3 transition hover:shadow-hover hover:border-ultramarain/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ultramarain/40 ${
+    className={`group block bg-white border border-line rounded-lg p-3 transition hover:shadow-hover hover:border-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ${
       side === 'left' ? 'text-right' : 'text-left'
     }`}
   >
@@ -65,11 +65,11 @@ const NeighborCard = ({
         }`}
         aria-hidden="true"
       />
-      <h4 className="font-primary text-[14px] font-semibold text-ultramarain truncate group-hover:underline">
+      <h4 className="font-sans text-[14px] font-semibold text-accent truncate group-hover:underline">
         {dict.displayName ?? dict.name}
       </h4>
     </div>
-    <div className="mt-0.5 font-mono text-[10px] text-carbon/60 truncate">
+    <div className="mt-0.5 font-mono text-[10px] text-mute truncate">
       {dict.name}
     </div>
   </Link>
@@ -85,7 +85,7 @@ const SectionLabel = ({
   const { t } = useTranslation()
   return (
     <div
-      className={`text-2xs uppercase tracking-label text-carbon/60 mb-2 ${
+      className={`text-2xs uppercase tracking-[0.10em] 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-carbon/40 text-right italic">
+          <div className="text-2xs text-mute/70 text-right italic">
             {t('hub.noOutgoing', { defaultValue: 'нет исходящих ссылок' })}
           </div>
         ) : (
@@ -156,7 +156,7 @@ export function DictionaryHubView({ detail }: { detail: DictionaryDetail }) {
       {/* Center: focused dict (large card) */}
       <div className="md:order-2 order-1 relative">
         <div
-          className="relative bg-white rounded-xl p-5 border-2 border-ultramarain"
+          className="relative bg-white rounded-xl p-5 border-2 border-accent"
           style={{ boxShadow: '0 18px 36px -22px rgba(20,30,140,.5)' }}
         >
           <div className="flex items-start gap-2 mb-2 flex-wrap">
@@ -166,22 +166,22 @@ export function DictionaryHubView({ detail }: { detail: DictionaryDetail }) {
                 {t('dict.list.approval', { defaultValue: 'approval' })}
               </Badge>
             )}
-            <span className="ml-auto font-mono text-[11px] text-carbon/60">
+            <span className="ml-auto font-mono text-[11px] text-mute">
               v{detail.schemaVersion}
             </span>
           </div>
-          <h2 className="font-primary text-[22px] font-semibold text-ultramarain leading-tight">
+          <h2 className="font-sans text-[22px] font-semibold text-accent leading-tight">
             {detail.displayName ?? detail.name}
           </h2>
-          <div className="font-mono text-[11px] text-carbon/60 mt-0.5">
+          <div className="font-mono text-[11px] text-mute mt-0.5">
             {detail.name}
           </div>
           {detail.description && (
-            <p className="text-[13px] text-carbon mt-3 leading-relaxed">
+            <p className="text-[13px] text-ink mt-3 leading-relaxed">
               {detail.description}
             </p>
           )}
-          <div className="mt-4 pt-3 border-t border-regolith flex items-center justify-between text-2xs uppercase tracking-label text-carbon/60">
+          <div className="mt-4 pt-3 border-t border-line flex items-center justify-between text-2xs uppercase tracking-[0.10em] text-mute">
             <span>{detail.bundle}</span>
             <span>{detail.supportedLocales.join(', ')}</span>
             {typeof detail.recordCount === 'number' && (
@@ -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-carbon/40 italic">
+          <div className="text-2xs text-mute/70 italic">
             {t('hub.noIncoming', { defaultValue: 'никто не ссылается' })}
           </div>
         ) : (

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-primary text-carbon">
+        <h3 className="text-sm 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-carbon/60 px-2 py-0.5 rounded-sm border border-regolith"
+              className="text-2xs 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-carbon/60">
+          <span className="text-2xs text-mute">
             {t('lineage.refs.total', { count: data.total })}
           </span>
         </div>
@@ -91,16 +91,16 @@ 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-regolith bg-regolith/30 text-2xs"
+            className="flex items-center gap-1.5 px-2 py-1 rounded-sm border border-line bg-line/30 text-2xs"
           >
             <Link
               to="/dictionaries/$name"
               params={{ name: s.sourceDict }}
-              className="text-ultramarain hover:underline font-mono"
+              className="text-accent hover:underline font-mono"
             >
               {s.sourceDisplayName ?? s.sourceDict}
             </Link>
-            <span className="font-mono text-carbon/70">.{s.sourceField}</span>
+            <span className="font-mono text-ink-2">.{s.sourceField}</span>
             <Badge variant="neutral">{s.count}</Badge>
             <Badge variant={onCloseVariant(s.onClose)}>
               {t(`lineage.onClose.${s.onClose}`)}
@@ -111,7 +111,7 @@ export const RecordDependentsPanel = ({ dictionaryName, businessKey }: Props) =>
 
       {/* Items list */}
       {data.items.length > 0 && (
-        <ul className="divide-y divide-regolith border border-regolith rounded-sm">
+        <ul className="divide-y divide-regolith border border-line rounded-sm">
           {data.items.map((r) => (
             <li
               key={r.id}
@@ -119,13 +119,13 @@ export const RecordDependentsPanel = ({ dictionaryName, businessKey }: Props) =>
             >
               <div className="min-w-0 flex-1">
                 <div className="flex items-center gap-2">
-                  <span className="font-mono text-carbon/70">{r.sourceDict}</span>
+                  <span className="font-mono text-ink-2">{r.sourceDict}</span>
-                  <span className="text-carbon/40">/</span>
+                  <span className="text-mute/70">/</span>
                   <Link
                     to="/dictionaries/$name"
                     params={{ name: r.sourceDict }}
                     search={{ q: r.businessKey }}
-                    className="text-ultramarain hover:underline font-mono truncate"
+                    className="text-accent hover:underline font-mono truncate"
                     aria-label={t('lineage.refs.openSourceRecord', {
                       key: r.businessKey,
                     })}
@@ -135,10 +135,10 @@ export const RecordDependentsPanel = ({ dictionaryName, businessKey }: Props) =>
                   <ArrowSquareOutIcon
                     weight="bold"
                     size={12}
-                    className="text-carbon/40 shrink-0"
+                    className="text-mute/70 shrink-0"
                   />
                 </div>
-                <div className="text-carbon/60 mt-0.5">
+                <div className="text-mute mt-0.5">
                   {t('lineage.refs.field', { field: r.sourceField })} ·{' '}
                   {t('lineage.refs.created', {
                     when: new Date(r.createdAt).toLocaleString(),
@@ -162,7 +162,7 @@ export const RecordDependentsPanel = ({ dictionaryName, businessKey }: Props) =>
           >
             {t('pagination.prev')}
           </Button>
-          <span className="text-carbon/70">
+          <span className="text-ink-2">
             {t('pagination.pageOf', { page: page + 1, total: totalPages })}
           </span>
           <Button

ordinis-admin-ui/src/components/record/RecordHistoryDrawer.tsx

@@ -40,10 +40,10 @@ export const RecordHistoryDrawer = ({ open, onClose, dictionaryName, businessKey
           </Alert>
         )}
         {data && data.length === 0 && (
-          <p className="text-sm text-carbon/60">{t('history.empty')}</p>
+          <p className="text-sm text-mute">{t('history.empty')}</p>
         )}
         {data && data.length > 0 && (
-          <ol className="relative border-l-2 border-regolith pl-5 space-y-4">
+          <ol className="relative border-l-2 border-line pl-5 space-y-4">
             {data.map((rec, idx) => {
               const isLatest = idx === 0
               const displayVersion = data.length - idx
@@ -65,7 +65,7 @@ export const RecordHistoryDrawer = ({ open, onClose, dictionaryName, businessKey
                   <span
                     className={`absolute -left-[27px] top-1 h-3 w-3 rounded-full border-2 ${
                       isLatest && status === 'active'
-                        ? 'bg-ultramarain border-ultramarain'
+                        ? 'bg-accent border-accent'
                         : status === 'future'
                           ? 'bg-orbit border-horizon'
                           : status === 'expired'
@@ -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-primary text-ultramarain">v{displayVersion}</span>
+                    <span className="text-sm 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-carbon/70 space-y-0.5">
+                  <div className="text-2xs 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-ultramarain cursor-pointer hover:underline">
+                    <summary className="text-2xs text-accent cursor-pointer hover:underline">
                       {t('history.viewData')}
                     </summary>
-                    <pre className="mt-1 bg-regolith/30 rounded p-2 text-2xs font-mono overflow-x-auto">
+                    <pre className="mt-1 bg-line/30 rounded p-2 text-2xs font-mono overflow-x-auto">
                       {JSON.stringify(rec.data, null, 2)}
                     </pre>
                   </details>

ordinis-admin-ui/src/components/schema/DictionaryEditorDialog.tsx

@@ -202,7 +202,7 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
 
         <div className={activeTab === 'metadata' ? 'block' : 'hidden'}>
           {!isEdit && (
-            <div className="mb-3 p-3 rounded-md border border-ultramarain/20 bg-ultramarain/4">
+            <div className="mb-3 p-3 rounded-md border border-accent/20 bg-accent/4">
               <SingleSelect
                 label={t('schema.template.label')}
                 hint={t('schema.template.hint')}
@@ -300,7 +300,7 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
             />
             {/* CEO plan E2: per-dict Redis projection opt-in. Default false.
                 Включается когда dict хочет 10k+ RPS на read-api (вместо PG). */}
-            <label className="md:col-span-2 flex items-start gap-3 px-3 py-2 rounded-sm border border-regolith bg-regolith/20 cursor-pointer">
+            <label className="md:col-span-2 flex items-start gap-3 px-3 py-2 rounded-sm border border-line bg-line/20 cursor-pointer">
               <input
                 type="checkbox"
                 checked={redisProjection}
@@ -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-primary text-carbon">
+                <span className="block text-sm font-sans text-ink">
                   {t('schema.redisProjection.label')}
                 </span>
-                <span className="block text-2xs text-carbon/60 mt-0.5">
+                <span className="block text-2xs text-mute mt-0.5">
                   {t('schema.redisProjection.hint')}
                 </span>
               </span>
@@ -320,7 +320,7 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
             {/* Approval Workflow v2: per-dict opt-in. Default false. Включается
                 для критичных dicts (ground_station, spacecraft и т.д.) где
                 один admin не должен иметь power публиковать без review. */}
-            <label className="md:col-span-2 flex items-start gap-3 px-3 py-2 rounded-sm border border-orbit/40 bg-orbit/8 cursor-pointer">
+            <label className="md:col-span-2 flex items-start gap-3 px-3 py-2 rounded-sm border border-warn bg-warn-bg cursor-pointer">
               <input
                 type="checkbox"
                 checked={approvalRequired}
@@ -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-primary text-carbon">
+                <span className="block text-sm font-sans text-ink">
                   {t('schema.approvalRequired.label')}
                 </span>
-                <span className="block text-2xs text-carbon/60 mt-0.5">
+                <span className="block text-2xs text-mute mt-0.5">
                   {t('schema.approvalRequired.hint')}
                 </span>
               </span>
@@ -341,7 +341,7 @@ export const DictionaryEditorDialog = ({ open, mode, onClose, onSuccess }: Props
               <div className="md:col-span-2">
                 <label
                   htmlFor="approval-min-role"
-                  className="text-2xs uppercase tracking-label text-carbon/70"
+                  className="text-2xs uppercase tracking-[0.10em] text-ink-2"
                 >
                   {t('schema.approvalMinRole.label')}
                 </label>
@@ -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-carbon/60 mt-0.5">
+                <p className="text-2xs 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-regolith/30 rounded p-3 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
+          <pre className="bg-line/30 rounded p-3 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
             {JSON.stringify(schemaJson, null, 2)}
           </pre>
         </div>

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-carbon/70">
+      <p className="text-sm 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-carbon/70">
+            <span className="text-2xs text-ink-2">
               {t('schema.events.topic')}:
             </span>
-            <code className="text-2xs font-mono text-ultramarain">
+            <code className="text-2xs font-mono text-accent">
               {current.topic}
             </code>
           </div>
-          <p className="text-2xs text-carbon/60">{current.description}</p>
+          <p className="text-2xs text-mute">{current.description}</p>
-          <pre className="bg-regolith/30 rounded p-3 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
+          <pre className="bg-line/30 rounded p-3 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
             {JSON.stringify(current.envelope, null, 2)}
           </pre>
-          <p className="text-2xs text-carbon/50">
+          <p className="text-2xs text-mute">
             {t('schema.events.disclaimer')}
           </p>
         </div>

ordinis-admin-ui/src/components/schema/PropertyEditor.tsx

@@ -49,9 +49,9 @@ export const PropertyEditor = ({
   const update = (patch: Partial<PropertyDef>) => onChange({ ...prop, ...patch })
 
   return (
-    <div className="border border-regolith rounded-lg p-3 space-y-3 bg-white">
+    <div className="border border-line rounded-lg p-3 space-y-3 bg-white">
       <div className="flex items-start justify-between gap-2">
-        <span className="text-2xs uppercase tracking-label text-carbon/60">
+        <span className="text-2xs uppercase tracking-[0.10em] text-mute">
           {t('schema.property')} #{index + 1}
         </span>
         <div className="flex items-center gap-1">
@@ -119,13 +119,13 @@ 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="font-medium text-carbon">
+          <div className="font-medium text-ink">
             {t('schema.opaque.title')}
           </div>
-          <div className="text-carbon/70">
+          <div className="text-ink-2">
             {t('schema.opaque.hint')}
           </div>
-          <pre className="font-mono text-2xs bg-white border border-regolith rounded p-2 overflow-auto max-h-40">
+          <pre className="font-mono text-2xs bg-white border border-line rounded p-2 overflow-auto max-h-40">
             {JSON.stringify(prop.rawSchema ?? {}, null, 2)}
           </pre>
         </div>
@@ -260,7 +260,7 @@ const ReferenceTargetPicker = ({ value, onChange }: ReferenceTargetPickerProps)
   const isValid = Boolean(refDict && refField)
 
   return (
-    <div className="border border-ultramarain/20 bg-ultramarain/4 rounded-md p-3 space-y-3">
+    <div className="border border-accent/20 bg-accent/4 rounded-md p-3 space-y-3">
       <div>
         <FieldLabel required>{t('schema.reference.title')}</FieldLabel>
         <FieldHint>{t('schema.reference.hint')}</FieldHint>

ordinis-admin-ui/src/components/timetravel/TimeTravelPicker.tsx

@@ -50,15 +50,15 @@ export function TimeTravelPicker({
   }, [marks, valueDate])
 
   return (
-    <div className="flex flex-col gap-3 px-4 py-3 rounded-md border border-orbit/40 bg-orbit/4 text-sm">
+    <div className="flex flex-col gap-3 px-4 py-3 rounded-md border border-warn bg-warn-bg text-sm">
       <div className="flex items-center gap-2">
-        <ClockCounterClockwiseIcon weight="bold" size={16} className="text-orbit" />
+        <ClockCounterClockwiseIcon weight="bold" size={16} className="text-warn" />
-        <span className="text-2xs font-secondary uppercase tracking-label text-carbon/70">
+        <span className="text-2xs font-display uppercase tracking-[0.10em] text-ink-2">
           {t('timeTravel.label')}
         </span>
         <button
           type="button"
-          className="ml-auto text-2xs text-carbon/60 hover:text-carbon hover:underline inline-flex items-center gap-1"
+          className="ml-auto text-2xs text-mute hover:text-ink hover:underline inline-flex items-center gap-1"
           onClick={onClose}
         >
           <XIcon weight="bold" size={12} />
@@ -314,7 +314,7 @@ function TimelineTrack({
       )}
 
       {marks.length > 0 && (
-        <div className="text-2xs text-carbon/50 font-secondary mt-1">
+        <div className="text-2xs text-mute font-display mt-1">
           {marks.length === 1
             ? '1 точка изменений'
             : marks.length < 5
@@ -340,7 +340,7 @@ function QuickPresets({ onPick }: { onPick: (deltaMs: number) => void }) {
   ]
   return (
     <div className="flex flex-wrap items-center gap-1.5">
-      <span className="text-2xs uppercase tracking-label text-carbon/60 font-secondary mr-1">
+      <span className="text-2xs uppercase tracking-[0.10em] text-mute font-display mr-1">
         {t('timeTravel.quickPresets')}
       </span>
       {presets.map((p) => (
@@ -348,7 +348,7 @@ function QuickPresets({ onPick }: { onPick: (deltaMs: number) => void }) {
           key={p.key}
           type="button"
           onClick={() => onPick(p.deltaMs)}
-          className="px-2.5 py-1 rounded-full border border-regolith hover:border-ultramarain hover:bg-ultramarain/4 text-2xs font-mono uppercase tracking-label text-carbon transition-colors"
+          className="px-2.5 py-1 rounded-full border border-line hover:border-accent hover:bg-accent/4 text-2xs font-mono uppercase tracking-[0.10em] text-ink transition-colors"
         >
           {p.label}
         </button>
@@ -386,23 +386,23 @@ function StatusFooter({
 
   if (!valueDate) {
     return (
-      <div className="text-2xs text-carbon/60 font-secondary italic">
+      <div className="text-2xs text-mute font-display italic">
         {t('timeTravel.hint')}
       </div>
     )
   }
 
   return (
-    <div className="flex flex-wrap items-center gap-2 pt-2 border-t border-orbit/20">
+    <div className="flex flex-wrap items-center gap-2 pt-2 border-t border-warn/30">
-      <ClockCounterClockwiseIcon weight="regular" size={14} className="text-orbit shrink-0" />
+      <ClockCounterClockwiseIcon weight="regular" size={14} className="text-warn shrink-0" />
-      <span className="text-xs font-mono text-carbon/80">
+      <span className="text-xs font-mono text-ink">
         {valueDate.toLocaleString(lang === 'en' ? 'en-US' : 'ru-RU', {
           dateStyle: 'long',
           timeStyle: 'short',
         })}
       </span>
       {relativeLabel && (
-        <span className="text-2xs text-carbon/60 font-secondary lowercase">
+        <span className="text-2xs 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-regolith bg-white text-2xs font-mono text-center"
+          className="w-10 px-1.5 py-0.5 rounded-sm border border-line bg-white text-2xs font-mono text-center"
           aria-label={t('timeTravel.hours')}
         />
-        <span className="text-carbon/50 font-mono text-2xs">:</span>
+        <span className="text-mute font-mono text-2xs">:</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-regolith bg-white text-2xs font-mono text-center"
+          className="w-10 px-1.5 py-0.5 rounded-sm border border-line bg-white text-2xs font-mono text-center"
           aria-label={t('timeTravel.minutes')}
         />
       </span>
       <button
         type="button"
-        className="ml-auto text-2xs text-ultramarain hover:underline"
+        className="ml-auto text-2xs text-accent hover:underline"
         onClick={onClear}
       >
         {t('timeTravel.clear')}

ordinis-admin-ui/src/components/version/VersionBadge.tsx

@@ -29,17 +29,17 @@ export function VersionBadge() {
 
   return (
     <span
-      className="inline-flex items-center gap-1.5 text-xs text-carbon/60 font-mono select-none"
+      className="inline-flex items-center gap-1.5 text-xs text-mute font-mono select-none"
       title={tooltip}
     >
       {updateAvailable && (
         <span
           aria-label="Доступна новая версия"
-          className="inline-block w-1.5 h-1.5 rounded-full bg-ultramarain animate-pulse"
+          className="inline-block w-1.5 h-1.5 rounded-full bg-accent animate-pulse"
         />
       )}
       <span>v{clientVersion}</span>
-      <span className="text-carbon/40">·</span>
+      <span className="text-mute/70">·</span>
       <span>{clientCommit.substring(0, 7)}</span>
     </span>
   )

ordinis-admin-ui/src/lib/scope-style.ts

@@ -11,32 +11,46 @@ export const SCOPE_ORDER: ReadonlyArray<DataScope> = [
 ]
 
 /**
- * Solid background classes for ●-shaped scope indicators (size-2 dots,
+ * Solid background classes для •-shaped scope indicators (size-2 dots,
- * section-header bullets).
+ * section-header bullets). Use design handoff tokens (Tailwind v4 @theme):
+ *  - PUBLIC → accent (terracotta, primary brand)
+ *  - INTERNAL → warn (amber)
+ *  - RESTRICTED → pink (brick)
  */
 export const SCOPE_DOT: Record<DataScope, string> = {
-  PUBLIC: 'bg-emerald-500',
+  PUBLIC: 'bg-accent',
-  INTERNAL: 'bg-amber-500',
+  INTERNAL: 'bg-warn',
-  RESTRICTED: 'bg-rose-500',
+  RESTRICTED: 'bg-pink',
+}
+
+/** Same colors но для text-color (PUB chip filled bg, etc.). */
+export const SCOPE_TEXT: Record<DataScope, string> = {
+  PUBLIC: 'text-accent',
+  INTERNAL: 'text-warn',
+  RESTRICTED: 'text-pink',
+}
+
+/** Same colors но для tinted background (pill chips, banner backgrounds). */
+export const SCOPE_BG_TINT: Record<DataScope, string> = {
+  PUBLIC: 'bg-accent-bg',
+  INTERNAL: 'bg-warn-bg',
+  RESTRICTED: 'bg-pink-bg',
 }
 
 /**
- * `before:` background classes used for the 4px left-accent stripe on
+ * `before:` background classes для 4px left-accent stripe на card'ах.
- * dictionary cards. Pair with `relative` + `before:absolute before:left-0
+ * Pair with `relative` + `before:absolute before:left-0 before:top-0
- * before:top-0 before:bottom-0 before:w-1 before:rounded-l-lg`.
+ * before:bottom-0 before:w-1 before:rounded-l-lg`.
  */
 export const SCOPE_ACCENT: Record<DataScope, string> = {
-  PUBLIC: 'before:bg-emerald-500',
+  PUBLIC: 'before:bg-accent',
-  INTERNAL: 'before:bg-amber-500',
+  INTERNAL: 'before:bg-warn',
-  RESTRICTED: 'before:bg-rose-500',
+  RESTRICTED: 'before:bg-pink',
 }
 
-/**
+/** Solid border-top classes для page-level scope banner stripes. */
- * Solid border-top classes for page-level scope banner stripes (used on
- * dictionary detail page).
- */
 export const SCOPE_BORDER_TOP: Record<DataScope, string> = {
-  PUBLIC: 'border-t-emerald-500',
+  PUBLIC: 'border-t-accent',
-  INTERNAL: 'border-t-amber-500',
+  INTERNAL: 'border-t-warn',
-  RESTRICTED: 'border-t-rose-500',
+  RESTRICTED: 'border-t-pink',
 }

ordinis-admin-ui/src/routes/audit.tsx

@@ -299,7 +299,7 @@ function ActiveFilterChips({ filters, onRemove }: ActiveFilterChipsProps) {
   const { t } = useTranslation()
   return (
     <div className="flex flex-wrap items-center gap-2">
-      <span className="text-2xs uppercase tracking-label text-carbon/70">
+      <span className="text-2xs uppercase tracking-[0.10em] text-ink-2">
         {t('audit.filter.active')}
       </span>
       {filters.map((f) => (
@@ -309,14 +309,14 @@ function ActiveFilterChips({ filters, onRemove }: ActiveFilterChipsProps) {
           onClick={() => onRemove(f.key)}
           className={[
             'inline-flex items-center gap-1.5 px-2 py-1 rounded-sm border text-2xs',
-            'bg-white border-regolith hover:border-carbon/40 hover:bg-regolith/30',
+            'bg-white border-line hover:border-carbon/40 hover:bg-line/30',
             'transition-colors group',
           ].join(' ')}
           title={t('audit.filter.removeChip')}
         >
-          <span className="text-carbon/70">{f.label}:</span>
+          <span className="text-ink-2">{f.label}:</span>
           <span className="font-medium text-black">{f.value}</span>
-          <XIcon size={12} className="text-carbon/50 group-hover:text-mars" />
+          <XIcon size={12} className="text-mute group-hover:text-mars" />
         </button>
       ))}
     </div>
@@ -356,7 +356,7 @@ function FilterPanel({
   }
 
   return (
-    <div className="bg-white border border-regolith rounded-lg p-4 space-y-3">
+    <div className="bg-white border border-line rounded-lg p-4 space-y-3">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
         <SingleSelect
           label={t('audit.filter.dictionary')}
@@ -411,7 +411,7 @@ function FilterPanel({
           }
         />
       </div>
-      <div className="flex justify-end gap-2 pt-2 border-t border-regolith">
+      <div className="flex justify-end gap-2 pt-2 border-t border-line">
         <Button type="button" variant="secondary" onClick={onReset}>
           {t('audit.filter.reset')}
         </Button>
@@ -486,7 +486,7 @@ function AuditRow({ row }: { row: AuditEntry }) {
         </TableCell>
         <TableCell>
           <span
-            className="font-mono text-2xs text-carbon/70"
+            className="font-mono text-2xs text-ink-2"
             title={row.traceId ?? ''}
           >
             {row.traceId ? row.traceId.slice(0, 8) : '—'}
@@ -504,29 +504,29 @@ function AuditRow({ row }: { row: AuditEntry }) {
       {open && (
         <TableRow>
           <TableCell colSpan={8}>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 bg-regolith/30 rounded p-3">
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3 bg-line/30 rounded p-3">
               <div>
-                <div className="text-2xs uppercase tracking-label text-carbon/70 mb-1">
+                <div className="text-2xs uppercase tracking-[0.10em] 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-regolith rounded p-2 max-h-60 overflow-auto">
+                <pre className="text-2xs font-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)
                     : '—'}
                 </pre>
               </div>
               <div>
-                <div className="text-2xs uppercase tracking-label text-carbon/70 mb-1">
+                <div className="text-2xs uppercase tracking-[0.10em] 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-regolith rounded p-2 max-h-60 overflow-auto">
+                <pre className="text-2xs font-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-carbon/70 flex flex-wrap gap-x-4 gap-y-1 pt-1">
+                <div className="md:col-span-2 text-2xs 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 && (
@@ -563,7 +563,7 @@ function Pagination({
   return (
     <div className="flex items-center justify-between flex-wrap gap-3">
       <div className="flex items-center gap-2 text-sm">
-        <span className="text-carbon/70">{t('audit.page.size')}</span>
+        <span className="text-ink-2">{t('audit.page.size')}</span>
         <SingleSelect
           options={PAGE_SIZE_OPTIONS}
           value={String(size)}

ordinis-admin-ui/src/routes/dictionaries.$name.tsx

@@ -493,12 +493,12 @@ function DictionaryDetail() {
       <PageHeader
         breadcrumb={
           <div className="flex items-center gap-3 text-sm">
-            <Link to="/dictionaries" className="text-carbon/70 hover:text-ultramarain">
+            <Link to="/dictionaries" className="text-ink-2 hover:text-accent">
               ← {t('nav.dictionaries')}
             </Link>
             {scope && (
-              <span className="flex items-center gap-1.5 text-carbon/70">
+              <span className="flex items-center gap-1.5 text-ink-2">
-                <span className="text-carbon/40">·</span>
+                <span className="text-mute/70">·</span>
                 <span
                   className={`inline-block size-2 rounded-full ${SCOPE_DOT[scope]}`}
                   aria-hidden="true"
@@ -569,7 +569,7 @@ function DictionaryDetail() {
       {/* View toggle: Записи (default table-based view) | Связи (Hub view с
           neighbors на боках). Per design handoff B. */}
       {detailQuery.data && (
-        <div role="group" aria-label="View mode" className="flex border border-regolith rounded-sm overflow-hidden w-fit">
+        <div role="group" aria-label="View mode" className="flex border border-line rounded-sm overflow-hidden w-fit">
           {(['records', 'hub'] as const).map((mode) => {
             const active = (urlSearch.view ?? 'records') === mode
             return (
@@ -586,10 +586,10 @@ function DictionaryDetail() {
                   })
                 }
                 aria-pressed={active}
-                className={`px-3 py-1 text-2xs uppercase tracking-label transition focus:outline-none focus:ring-2 focus:ring-ultramarain/40 ${
+                className={`px-3 py-1 text-2xs uppercase tracking-[0.10em] transition focus:outline-none focus:ring-2 focus:ring-accent/40 ${
                   active
-                    ? 'bg-orbit/40 text-ultramarain'
+                    ? 'bg-accent-bg text-accent'
-                    : 'hover:bg-orbit/20 text-carbon'
+                    : 'hover:bg-accent-bg/20 text-ink'
                 }`}
               >
                 {t(`dict.view.${mode}`, {
@@ -611,8 +611,8 @@ function DictionaryDetail() {
       )}
 
       {aoi && (
-        <div className="flex items-center gap-3 px-3 py-2 rounded-sm border border-ultramarain/30 bg-ultramarain/4 text-sm">
+        <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-carbon/80">
+          <span className="font-mono text-xs text-ink">
             {aoi.kind === 'bbox'
               ? t('aoi.activeBbox', { value: aoi.bboxCsv })
               : t('aoi.activePolygon', {
@@ -621,7 +621,7 @@ function DictionaryDetail() {
           </span>
           <button
             type="button"
-            className="text-xs text-ultramarain hover:underline"
+            className="text-xs text-accent hover:underline"
             onClick={handleAoiClear}
           >
             {t('aoi.clear')}
@@ -644,16 +644,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-orbit/40 bg-orbit/8 text-sm">
+        <div className="flex items-center gap-3 px-3 py-2 rounded-sm border border-warn bg-warn-bg text-sm">
-          <ClockCounterClockwiseIcon weight="bold" size={16} className="text-orbit shrink-0" />
+          <ClockCounterClockwiseIcon weight="bold" size={16} className="text-warn shrink-0" />
-          <span className="font-mono text-xs text-carbon/80">
+          <span className="font-mono text-xs text-ink">
             {t('timeTravel.viewing', {
               date: new Date(timeTravelAt).toLocaleString(),
             })}
           </span>
           <button
             type="button"
-            className="text-xs text-ultramarain hover:underline ml-auto"
+            className="text-xs text-accent hover:underline ml-auto"
             onClick={() => setTimeTravelAt(undefined)}
           >
             {t('timeTravel.clear')}
@@ -694,10 +694,10 @@ 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-label font-secondary transition-colors',
+                      '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',
                       active
-                        ? 'border-ultramarain bg-ultramarain/8 text-ultramarain'
+                        ? 'border-accent bg-accent/8 text-accent'
-                        : 'border-regolith bg-white text-carbon/70 hover:border-carbon/40',
+                        : 'border-line bg-white text-ink-2 hover:border-carbon/40',
                     ].join(' ')}
                   >
                     <span
@@ -710,14 +710,14 @@ function DictionaryDetail() {
               })}
             </div>
             {filtersActive && (
-              <div className="flex items-center gap-2 text-xs text-carbon/70">
+              <div className="flex items-center gap-2 text-xs text-ink-2">
                 <span>
                   {t('dict.filter.matched', { count: filteredCount, total: totalRecords })}
                 </span>
                 <button
                   type="button"
                   onClick={handleClearFilters}
-                  className="text-ultramarain hover:underline"
+                  className="text-accent hover:underline"
                 >
                   {t('dict.filter.clear')}
                 </button>
@@ -796,7 +796,7 @@ function DictionaryDetail() {
                     if (v == null || v === '') {
                       return (
                         <TableCell key={c.key}>
-                          <span className="text-2xs text-carbon/40">—</span>
+                          <span className="text-2xs text-mute/70">—</span>
                         </TableCell>
                       )
                     }
@@ -807,8 +807,8 @@ function DictionaryDetail() {
                           className={[
                             'inline-block px-1.5 py-0.5 rounded-sm font-mono text-2xs',
                             c.isFk
-                              ? 'bg-ultramarain/8 text-ultramarain'
+                              ? 'bg-accent/8 text-accent'
-                              : 'bg-carbon/8 text-carbon/80',
+                              : 'bg-carbon/8 text-ink',
                           ].join(' ')}
                         >
                           {text}
@@ -820,7 +820,7 @@ function DictionaryDetail() {
                     <Badge variant="info">{r.dataScope}</Badge>
                   </TableCell>
                   <TableCell>
-                    <span className="text-2xs text-carbon/60">
+                    <span className="text-2xs text-mute">
                       {new Date(r.validFrom).toLocaleDateString()}
                     </span>
                   </TableCell>
@@ -943,7 +943,7 @@ function DictionaryDetail() {
       >
         {edit.kind === 'close-confirm' && (
           <div className="space-y-4">
-            <p className="text-sm text-carbon">
+            <p className="text-sm text-ink">
               {t('dict.confirmClose.body', { key: edit.record.businessKey })}
             </p>
             <TextInput
@@ -955,7 +955,7 @@ function DictionaryDetail() {
             {serverErrorMessage(closeMut.error) && (
               <Alert variant="error">{serverErrorMessage(closeMut.error)}</Alert>
             )}
-            <div className="flex justify-end gap-2 pt-2 border-t border-regolith">
+            <div className="flex justify-end gap-2 pt-2 border-t border-line">
               <Button
                 type="button"
                 variant="ghost"
@@ -1062,7 +1062,7 @@ function BulkSelectionToolbar({
     <div
       className={[
         'sticky top-0 z-10 -mx-1 flex items-center justify-between gap-3',
-        'bg-ultramarain text-white rounded-md shadow-sm px-4 py-2',
+        'bg-accent text-white rounded-md shadow-sm px-4 py-2',
       ].join(' ')}
     >
       <div className="flex items-center gap-3">
@@ -1123,7 +1123,7 @@ 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-carbon/70 tabular-nums">
+      <span className="text-2xs text-ink-2 tabular-nums">
         {t('dict.page.range', { from, to, total: totalCount })}
       </span>
       <div className="flex items-center gap-3 text-sm">
@@ -1136,7 +1136,7 @@ function RecordsPagination({
         >
           {t('dict.page.prev')}
         </Button>
-        <span className="tabular-nums text-2xs text-carbon/70">
+        <span className="tabular-nums text-2xs text-ink-2">
           {t('dict.page.of', { cur: page + 1, total: totalPages })}
         </span>
         <Button
@@ -1202,7 +1202,7 @@ function BulkCloseDialog({
         </div>
 
         {(result.skipped.length > 0 || result.errors.length > 0) && (
-          <div className="border border-regolith rounded p-3 max-h-48 overflow-auto bg-regolith/30">
+          <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">
               {result.skipped.map((s) => (
                 <li key={`s-${s.businessKey}`} className="text-saturn">
@@ -1218,7 +1218,7 @@ function BulkCloseDialog({
           </div>
         )}
 
-        <div className="flex justify-end pt-2 border-t border-regolith">
+        <div className="flex justify-end pt-2 border-t border-line">
           <Button type="button" variant="primary" onClick={onClose}>
             {t('dict.bulk.dismiss')}
           </Button>
@@ -1229,7 +1229,7 @@ function BulkCloseDialog({
 
   return (
     <div className="space-y-4">
-      <p className="text-sm text-carbon">{t('dict.bulk.confirmBody', { count })}</p>
+      <p className="text-sm text-ink">{t('dict.bulk.confirmBody', { count })}</p>
       <TextInput
         label={t('dict.confirmClose.reason')}
         placeholder={t('dict.confirmClose.reasonPlaceholder')}
@@ -1237,7 +1237,7 @@ function BulkCloseDialog({
         onChange={(e) => onReasonChange(e.target.value)}
       />
       {serverError && <Alert variant="error">{serverError}</Alert>}
-      <div className="flex justify-end gap-2 pt-2 border-t border-regolith">
+      <div className="flex justify-end gap-2 pt-2 border-t border-line">
         <Button
           type="button"
           variant="ghost"

ordinis-admin-ui/src/routes/dictionaries.index.tsx

@@ -84,10 +84,11 @@ export const groupByBundle = (
 }
 
 // Scope strip color — vertical 3px на левом крае карточки.
+// Использует design handoff tokens — auto-switch в dark mode.
 const SCOPE_STRIP: Record<DataScope, string> = {
-  PUBLIC: 'bg-emerald-500',
+  PUBLIC: 'bg-accent',
-  INTERNAL: 'bg-amber-500',
+  INTERNAL: 'bg-warn',
-  RESTRICTED: 'bg-rose-500',
+  RESTRICTED: 'bg-pink',
 }
 
 // ===== Route =====
@@ -252,7 +253,7 @@ function DictionariesPage() {
           />
         </div>
 
-        <span className="text-2xs uppercase tracking-label text-carbon/60 whitespace-nowrap font-mono">
+        <span className="text-2xs uppercase tracking-[0.10em] text-mute whitespace-nowrap font-mono">
           {filtered.length}/{data.length}
         </span>
 
@@ -272,10 +273,10 @@ 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-label flex items-center gap-1 border transition focus:outline-none focus:ring-2 focus:ring-ultramarain/40 font-mono ${
+                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 ${
                   selected
-                    ? 'border-ultramarain bg-orbit/40 text-ultramarain'
+                    ? 'border-accent bg-accent-bg text-accent'
-                    : 'border-regolith hover:border-ultramarain/60 text-carbon'
+                    : 'border-line hover:border-accent/60 text-ink'
                 }`}
               >
                 <span
@@ -283,14 +284,14 @@ function DictionariesPage() {
                   aria-hidden="true"
                 />
                 {t(`dict.list.section.${scope}.short`)}
-                <span className="text-carbon/60 ml-0.5">{count}</span>
+                <span className="text-mute ml-0.5">{count}</span>
               </button>
             )
           })}
         </div>
 
         {/* Vertical divider */}
-        <span className="h-5 w-px bg-regolith" aria-hidden="true" />
+        <span className="h-5 w-px bg-line" aria-hidden="true" />
 
         {/* Bundle filter — chips inline */}
         <div
@@ -302,10 +303,10 @@ function DictionariesPage() {
             type="button"
             onClick={() => setBundle(undefined)}
             aria-pressed={!bundleFilter}
-            className={`px-2 py-1 rounded-sm text-2xs uppercase tracking-label border transition focus:outline-none focus:ring-2 focus:ring-ultramarain/40 ${
+            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 ${
               !bundleFilter
-                ? 'border-ultramarain bg-orbit/40 text-ultramarain'
+                ? 'border-accent bg-accent-bg text-accent'
-                : 'border-regolith hover:border-ultramarain/60 text-carbon'
+                : 'border-line hover:border-accent/60 text-ink'
             }`}
           >
             {t('dict.list.bundle.all')}
@@ -320,31 +321,31 @@ function DictionariesPage() {
                   type="button"
                   onClick={() => setBundle(selected ? undefined : bundle)}
                   aria-pressed={selected}
-                  className={`px-2 py-1 rounded-sm text-2xs uppercase tracking-label flex items-center gap-1 border transition focus:outline-none focus:ring-2 focus:ring-ultramarain/40 font-mono ${
+                  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 ${
                     selected
-                      ? 'border-ultramarain bg-orbit/40 text-ultramarain'
+                      ? 'border-accent bg-accent-bg text-accent'
-                      : 'border-regolith hover:border-ultramarain/60 text-carbon'
+                      : 'border-line hover:border-accent/60 text-ink'
                   }`}
                 >
                   {bundle}
-                  <span className="text-carbon/60">{count}</span>
+                  <span className="text-mute">{count}</span>
                 </button>
               )
             })}
         </div>
 
         {/* Vertical divider + deps toggle */}
-        <span className="h-5 w-px bg-regolith" aria-hidden="true" />
+        <span className="h-5 w-px bg-line" aria-hidden="true" />
 
         <button
           type="button"
           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-label border transition focus:outline-none focus:ring-2 focus:ring-ultramarain/40 ${
+          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 ${
             withDepsOnly
-              ? 'border-ultramarain bg-orbit/40 text-ultramarain'
+              ? 'border-accent bg-accent-bg text-accent'
-              : 'border-regolith hover:border-ultramarain/60 text-carbon'
+              : 'border-line hover:border-accent/60 text-ink'
           }`}
         >
           {t('dict.list.deps.short')}
@@ -353,8 +354,8 @@ function DictionariesPage() {
 
       {/* Empty state */}
       {filtered.length === 0 ? (
-        <div className="border border-regolith rounded-lg p-12 text-center bg-orbit/10">
+        <div className="border border-line rounded-lg p-12 text-center bg-surface-2">
-          <p className="font-primary text-lg text-ultramarain mb-2">
+          <p className="font-sans text-lg text-accent mb-2">
             {t('dict.list.search.empty')}
           </p>
           {filtersActive && (
@@ -367,11 +368,11 @@ function DictionariesPage() {
         // Bundle-grouped 2-col card grid
         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-regolith">
+            <h2 className="flex items-baseline gap-3 pb-2 border-b border-line">
-              <span className="text-sm uppercase tracking-label text-ultramarain font-mono font-medium">
+              <span className="text-sm uppercase tracking-[0.10em] text-accent font-mono font-medium">
                 {bundle}
               </span>
-              <span className="text-2xs uppercase tracking-label text-carbon/60">
+              <span className="text-2xs uppercase tracking-[0.10em] text-mute">
                 · {items.length} {t('dict.list.records.short')}
               </span>
             </h2>
@@ -433,10 +434,11 @@ const FkChip = ({
     to="/dictionaries/$name"
     params={{ name: to }}
     onClick={(e) => e.stopPropagation()}
-    className={`inline-flex items-center px-1.5 py-0.5 rounded font-mono text-[11px] transition focus:outline-none focus:ring-2 focus:ring-ultramarain/40 ${
+    title={to}
+    className={`inline-flex items-center px-[7px] py-[2px] rounded-[4px] font-mono text-[11px] transition focus:outline-none focus:ring-2 focus:ring-accent/40 ${
       dim
-        ? 'border border-dashed border-regolith text-carbon/60 hover:border-ultramarain/60 hover:text-ultramarain'
+        ? 'border border-dashed border-line text-mute hover:border-accent/60 hover:text-accent'
-        : 'border border-regolith bg-orbit/30 text-ultramarain hover:bg-orbit/60'
+        : 'bg-accent-bg text-accent hover:bg-accent hover:text-on-accent'
     }`}
   >
     {label}
@@ -457,30 +459,30 @@ const DictCard = ({ d, t }: { d: DictionaryDefinition; t: TFunc }) => {
     <Link
       to="/dictionaries/$name"
       params={{ name: d.name }}
-      className="grid grid-cols-[3px_1fr_auto] bg-white border border-regolith rounded-lg overflow-hidden transition hover:shadow-hover hover:-translate-y-px focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ultramarain/40"
+      className="grid grid-cols-[3px_1fr_auto] bg-surface border border-line rounded-lg overflow-hidden transition-all hover:-translate-y-px hover:shadow-md hover:border-line-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
     >
-      {/* Scope strip 3px вертикальная полоса */}
+      {/* Scope strip 3px вертикальная полоса (handoff spec) */}
       <span className={SCOPE_STRIP[d.scope]} aria-hidden="true" />
 
       {/* Body */}
       <div className="px-3.5 py-3 min-w-0">
         <div className="flex items-baseline gap-2.5 flex-wrap">
-          <h3 className="font-primary text-[15px] font-semibold text-ultramarain truncate">
+          <h3 className="text-[15px] font-semibold text-navy truncate">
             {d.displayName ?? d.name}
           </h3>
-          <span className="font-mono text-[11px] text-carbon/60 truncate">{d.name}</span>
+          <span className="font-mono text-[11px] text-mute truncate">{d.name}</span>
           {d.approvalRequired && (
             <Badge variant="warning">{t('dict.list.approval')}</Badge>
           )}
         </div>
         {d.description && (
-          <p className="text-[12px] text-carbon mt-1 leading-snug line-clamp-2">
+          <p className="text-[12px] text-ink-2 mt-1 leading-snug line-clamp-2">
             {d.description}
           </p>
         )}
         {hasFkRow && (
           <div className="flex flex-wrap items-center gap-1.5 mt-2.5">
-            <span className="text-2xs uppercase tracking-label text-carbon/60 mr-1">
+            <span className="text-2xs font-display uppercase tracking-[0.10em] text-mute mr-1">
               {t('dict.list.fk.usedBy', { count: refBy.length })}
             </span>
             {refBy.slice(0, MAX_REFBY_CHIPS).map((dep) => (
@@ -492,7 +494,7 @@ const DictCard = ({ d, t }: { d: DictionaryDefinition; t: TFunc }) => {
               />
             ))}
             {refBy.length > MAX_REFBY_CHIPS && (
-              <span className="font-mono text-[11px] text-carbon/60">
+              <span className="font-mono text-[11px] text-mute">
                 +{refBy.length - MAX_REFBY_CHIPS}
               </span>
             )}
@@ -503,11 +505,11 @@ 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-carbon/60 whitespace-nowrap">
+        <span className="font-mono text-[11px] text-mute whitespace-nowrap">
           v{d.schemaVersion}
         </span>
         {typeof d.recordCount === 'number' && (
-          <span className="text-2xs uppercase tracking-label text-carbon/50 whitespace-nowrap">
+          <span className="text-2xs font-display uppercase tracking-[0.10em] text-mute/80 whitespace-nowrap">
             {t('dict.list.recordCount', { count: d.recordCount })}
           </span>
         )}

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-carbon/60">
+            <p className="text-2xs text-mute">
               {t('myDrafts.total', { count: drafts.data.totalElements })}
             </p>
           </div>
@@ -109,10 +109,10 @@ function MyDraftsPage() {
                   <TableCell>
                     <Badge variant={statusVariant(d.status)}>{d.status}</Badge>
                   </TableCell>
-                  <TableCell className="text-2xs text-carbon/70">
+                  <TableCell className="text-2xs text-ink-2">
                     {new Date(d.submittedAt).toLocaleString()}
                   </TableCell>
-                  <TableCell className="text-2xs text-carbon/70">
+                  <TableCell className="text-2xs text-ink-2">
                     {d.reviewedAt
                       ? new Date(d.reviewedAt).toLocaleString()
                       : '—'}
@@ -120,7 +120,7 @@ function MyDraftsPage() {
                   <TableCell className="font-mono text-2xs">
                     {d.reviewerId ?? '—'}
                   </TableCell>
-                  <TableCell className="text-2xs text-carbon/80 max-w-md">
+                  <TableCell className="text-2xs 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-carbon/40">—</span>
+                      <span className="text-2xs text-mute/70">—</span>
                     )}
                   </TableCell>
                 </TableRow>

ordinis-admin-ui/src/routes/outbox.tsx

@@ -105,7 +105,7 @@ function OutboxPage() {
                   <TableCell>{row.attemptCount}</TableCell>
                   <TableCell>
                     <span
-                      className="text-2xs text-carbon/70 truncate max-w-md inline-block align-middle"
+                      className="text-2xs text-ink-2 truncate max-w-md inline-block align-middle"
                       title={row.lastError ?? ''}
                     >
                       {row.lastError ?? '—'}
@@ -162,13 +162,13 @@ function StatCard({ label, value, tone }: StatCardProps) {
       ? 'text-mars'
       : tone === 'success'
         ? 'text-grass'
-        : 'text-ultramarain'
+        : 'text-accent'
   return (
-    <div className="bg-white border border-regolith rounded-lg p-4">
+    <div className="bg-white border border-line rounded-lg p-4">
-      <div className="text-2xs uppercase tracking-label text-carbon/70 mb-1">
+      <div className="text-2xs uppercase tracking-[0.10em] text-ink-2 mb-1">
         {label}
       </div>
-      <div className={`text-2xl font-primary tabular-nums ${colour}`}>{value}</div>
+      <div className={`text-2xl font-sans tabular-nums ${colour}`}>{value}</div>
     </div>
   )
 }

ordinis-admin-ui/src/routes/reviews.tsx

@@ -196,10 +196,10 @@ 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-carbon/60">
+            <p className="text-2xs text-mute">
               {t('reviews.queueTotal', { count: queue.data.totalElements })}
               {anySelected ? (
-                <span className="ml-2 text-ultramarain font-medium">
+                <span className="ml-2 text-accent font-medium">
                   · {t('reviews.bulk.selectedCount', { count: selection.size })}
                 </span>
               ) : null}
@@ -264,7 +264,7 @@ function ReviewsPage() {
                     <Link
                       to="/dictionaries/$name"
                       params={{ name: d.dictionaryId }}
-                      className="text-ultramarain hover:underline font-mono text-2xs"
+                      className="text-accent hover:underline font-mono text-2xs"
                     >
                       {d.dictionaryId.slice(0, 8)}…
                     </Link>
@@ -274,7 +274,7 @@ function ReviewsPage() {
                     <Badge variant={operationVariant(d.operation)}>{d.operation}</Badge>
                   </TableCell>
                   <TableCell className="font-mono text-2xs">{d.makerId}</TableCell>
-                  <TableCell className="text-2xs text-carbon/70">
+                  <TableCell className="text-2xs 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-carbon/70">
+          <p className="text-2xs text-ink-2">
             {t('reviews.bulk.rejectModalDescription')}
           </p>
           <TextArea
@@ -403,18 +403,18 @@ function ReviewDrawer({ draftId, onClose }: DrawerProps) {
             <div className="flex flex-wrap items-center gap-2 text-2xs">
               <Badge variant={operationVariant(draft.operation)}>{draft.operation}</Badge>
               <span className="font-mono">{draft.businessKey}</span>
-              <span className="text-carbon/60">
+              <span className="text-mute">
                 {t('reviews.drawer.maker')}: {draft.makerId}
               </span>
-              <span className="text-carbon/60">
+              <span className="text-mute">
                 {t('reviews.drawer.submitted')}:{' '}
                 {new Date(draft.submittedAt).toLocaleString()}
               </span>
             </div>
 
             {draft.makerComment && (
-              <div className="px-3 py-2 rounded-sm border border-regolith bg-regolith/30 text-2xs">
+              <div className="px-3 py-2 rounded-sm border border-line bg-line/30 text-2xs">
-                <span className="text-carbon/60 uppercase tracking-label font-secondary">
+                <span className="text-mute uppercase tracking-[0.10em] font-display">
                   {t('reviews.drawer.makerComment')}:
                 </span>{' '}
                 {draft.makerComment}
@@ -423,23 +423,23 @@ function ReviewDrawer({ draftId, onClose }: DrawerProps) {
 
             <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
               <div>
-                <p className="text-2xs uppercase tracking-label text-carbon/60 mb-1">
+                <p className="text-2xs uppercase tracking-[0.10em] text-mute mb-1">
                   {t('reviews.drawer.live')}
                 </p>
                 {liveQ.isLoading && <LoadingBlock size="sm" label={t('loading')} />}
                 {liveQ.data === null && (
-                  <p className="text-2xs text-carbon/60 italic">
+                  <p className="text-2xs text-mute italic">
                     {t('reviews.drawer.noLive')}
                   </p>
                 )}
                 {liveQ.data && (
-                  <pre className="bg-regolith/30 rounded p-2 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
+                  <pre className="bg-line/30 rounded p-2 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
                     {JSON.stringify(liveQ.data.data, null, 2)}
                   </pre>
                 )}
               </div>
               <div>
-                <p className="text-2xs uppercase tracking-label text-carbon/60 mb-1">
+                <p className="text-2xs uppercase tracking-[0.10em] text-mute mb-1">
                   {t('reviews.drawer.proposed')}
                 </p>
                 {draft.operation === 'CLOSE' ? (
@@ -447,7 +447,7 @@ function ReviewDrawer({ draftId, onClose }: DrawerProps) {
                     {t('reviews.drawer.closeNote')}
                   </p>
                 ) : (
-                  <pre className="bg-ultramarain/4 rounded p-2 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
+                  <pre className="bg-accent/4 rounded p-2 text-2xs font-mono overflow-x-auto whitespace-pre-wrap">
                     {JSON.stringify(draft.data, null, 2)}
                   </pre>
                 )}
@@ -460,10 +460,10 @@ function ReviewDrawer({ draftId, onClose }: DrawerProps) {
               </Alert>
             )}
 
-            <div className="border-t border-regolith pt-3 space-y-2">
+            <div className="border-t border-line pt-3 space-y-2">
               <label
                 htmlFor="review-comment"
-                className="text-2xs uppercase tracking-label text-carbon/70"
+                className="text-2xs uppercase tracking-[0.10em] text-ink-2"
               >
                 {t('reviews.drawer.comment')}
               </label>

ordinis-admin-ui/src/routes/search.tsx

@@ -70,7 +70,7 @@ function SearchPage() {
       </form>
 
       {tooShort && (
-        <p className="text-2xs text-carbon/60">{t('search.tooShort')}</p>
+        <p className="text-2xs 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-carbon/60">
+          <p className="text-2xs 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-primary text-ultramarain hover:underline"
+                    className="text-sm font-sans text-accent hover:underline"
                   >
                     {g.dictDisplayName ?? g.dictName}
                   </Link>
@@ -116,13 +116,13 @@ function SearchPage() {
                         to="/dictionaries/$name"
                         params={{ name: g.dictName }}
                         search={{ q: it.businessKey }}
-                        className="font-mono text-ultramarain hover:underline truncate"
+                        className="font-mono text-accent hover:underline truncate"
                       >
                         {it.businessKey}
                       </Link>
                       <div className="flex items-center gap-2 shrink-0">
                         <Badge variant="neutral">{it.dataScope}</Badge>
-                        <span className="text-carbon/60">
+                        <span className="text-mute">
                           {new Date(it.createdAt).toLocaleString()}
                         </span>
                       </div>
@@ -136,7 +136,7 @@ function SearchPage() {
       )}
 
       {!hasQuery && !tooShort && (
-        <p className="text-2xs text-carbon/60">{t('search.intro')}</p>
+        <p className="text-2xs text-mute">{t('search.intro')}</p>
       )}
     </div>
   )

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-carbon/70 hover:text-ultramarain">
+          <Link to="/webhooks" className="text-sm text-ink-2 hover:text-accent">
             ← {t('nav.webhooks')}
           </Link>
         }
@@ -169,7 +169,7 @@ function WebhookDetailPage() {
                 {data.scopeFilter.map((s) => (
                   <span
                     key={s}
-                    className="inline-flex items-center gap-1 text-2xs uppercase tracking-label"
+                    className="inline-flex items-center gap-1 text-2xs uppercase tracking-[0.10em]"
                   >
                     <span className={`inline-block size-2 rounded-full ${SCOPE_DOT[s]}`} aria-hidden />
                     {s}
@@ -177,7 +177,7 @@ function WebhookDetailPage() {
                 ))}
               </div>
             ) : (
-              <span className="text-2xs text-carbon/50">{t('webhooks.allScopes')}</span>
+              <span className="text-2xs text-mute">{t('webhooks.allScopes')}</span>
             )}
           </InfoRow>
           <InfoRow label={t('webhooks.field.dictionaryFilter')}>
@@ -207,7 +207,7 @@ function WebhookDetailPage() {
 
       <div>
         <div className="flex items-center justify-between mb-3">
-          <h2 className="font-primary text-base text-ultramarain">
+          <h2 className="font-sans text-base text-accent">
             {t('webhooks.deliveries.title')}
           </h2>
           <IconButton
@@ -232,10 +232,10 @@ 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-label font-secondary transition-colors',
+                  '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',
                   active
-                    ? 'border-ultramarain bg-ultramarain/8 text-ultramarain'
+                    ? 'border-accent bg-accent/8 text-accent'
-                    : 'border-regolith bg-white text-carbon/70 hover:border-carbon/40',
+                    : 'border-line bg-white text-ink-2 hover:border-carbon/40',
                 ].join(' ')}
               >
                 {s}
@@ -249,7 +249,7 @@ function WebhookDetailPage() {
                 setPage(0)
                 setStatusFilter(undefined)
               }}
-              className="text-xs text-ultramarain hover:underline ml-2"
+              className="text-xs text-accent hover:underline ml-2"
             >
               {t('webhooks.deliveries.filter.clear')}
             </button>
@@ -293,7 +293,7 @@ function WebhookDetailPage() {
                         <span className="font-mono text-2xs">{d.attemptCount}</span>
                       </TableCell>
                       <TableCell>
-                        <span className="text-2xs text-carbon/70">
+                        <span className="text-2xs text-ink-2">
                           {d.lastAttemptAt
                             ? new Date(d.lastAttemptAt).toLocaleString()
                             : '—'}
@@ -305,7 +305,7 @@ function WebhookDetailPage() {
                         </span>
                       </TableCell>
                       <TableCell>
-                        <span className="text-2xs text-carbon/70 line-clamp-2 max-w-md inline-block">
+                        <span className="text-2xs 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-carbon/70 self-center">
+            <span className="text-sm text-ink-2 self-center">
               {page + 1} / {deliveries.data.totalPages}
             </span>
             <Button
@@ -384,7 +384,7 @@ function TestResultAlert({
       action={
         <button
           type="button"
-          className="text-xs text-carbon/70 hover:text-carbon"
+          className="text-xs text-ink-2 hover:text-ink"
           onClick={onDismiss}
         >
           ✕
@@ -394,7 +394,7 @@ function TestResultAlert({
       <div className="space-y-1 text-sm">
         {result.httpStatus != null && (
           <div>
-            <span className="text-2xs uppercase tracking-label text-carbon/60 mr-2">
+            <span className="text-2xs uppercase tracking-[0.10em] text-mute mr-2">
               HTTP
             </span>
             <span className="font-mono">{result.httpStatus}</span>
@@ -402,14 +402,14 @@ function TestResultAlert({
         )}
         {result.latencyMs != null && (
           <div>
-            <span className="text-2xs uppercase tracking-label text-carbon/60 mr-2">
+            <span className="text-2xs uppercase tracking-[0.10em] text-mute mr-2">
               {t('webhooks.test.latency')}
             </span>
             <span className="font-mono">{result.latencyMs} ms</span>
           </div>
         )}
         {result.message && (
-          <div className="font-mono text-2xs text-carbon/80 whitespace-pre-wrap break-all">
+          <div className="font-mono text-2xs text-ink whitespace-pre-wrap break-all">
             {result.message}
           </div>
         )}
@@ -421,7 +421,7 @@ function TestResultAlert({
 function InfoRow({ label, children }: { label: string; children: React.ReactNode }) {
   return (
     <div>
-      <div className="text-2xs uppercase tracking-label text-carbon/60 mb-1">
+      <div className="text-2xs uppercase tracking-[0.10em] text-mute mb-1">
         {label}
       </div>
       <div>{children}</div>
@@ -446,13 +446,13 @@ function RotateRevealModal({
         className="bg-white rounded-lg p-6 max-w-xl w-full space-y-4"
         onClick={(e) => e.stopPropagation()}
       >
-        <h3 className="font-primary text-lg text-ultramarain">
+        <h3 className="font-sans text-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-regolith rounded-md p-3">
+        <div className="bg-carbon/5 border border-line rounded-md p-3">
           <code className="font-mono text-2xs break-all">{secret}</code>
         </div>
         <div className="flex justify-end">

ordinis-admin-ui/src/routes/webhooks.index.tsx

@@ -112,7 +112,7 @@ function WebhooksPage() {
                     <Link
                       to="/webhooks/$id"
                       params={{ id: sub.id }}
-                      className="font-medium text-ultramarain hover:underline"
+                      className="font-medium text-accent hover:underline"
                     >
                       {sub.name}
                     </Link>
@@ -127,12 +127,12 @@ function WebhooksPage() {
                   </TableCell>
                   <TableCell>
                     {sub.dictionaryFilter && sub.dictionaryFilter.length > 0 ? (
-                      <span className="text-2xs text-carbon">
+                      <span className="text-2xs text-ink">
                         {sub.dictionaryFilter.slice(0, 3).join(', ')}
                         {sub.dictionaryFilter.length > 3 && ` +${sub.dictionaryFilter.length - 3}`}
                       </span>
                     ) : (
-                      <span className="text-2xs text-carbon/50">{t('webhooks.allDicts')}</span>
+                      <span className="text-2xs text-mute">{t('webhooks.allDicts')}</span>
                     )}
                   </TableCell>
                   <TableCell>
@@ -175,14 +175,14 @@ function WebhooksPage() {
 function ScopeChips({ scopes }: { scopes?: DataScope[] | null }) {
   const { t } = useTranslation()
   if (!scopes || scopes.length === 0) {
-    return <span className="text-2xs text-carbon/50">{t('webhooks.allScopes')}</span>
+    return <span className="text-2xs text-mute">{t('webhooks.allScopes')}</span>
   }
   return (
     <div className="flex gap-1">
       {scopes.map((s) => (
         <span
           key={s}
-          className="inline-flex items-center gap-1 text-2xs uppercase tracking-label"
+          className="inline-flex items-center gap-1 text-2xs uppercase tracking-[0.10em]"
           title={s}
         >
           <span className={`inline-block size-2 rounded-full ${SCOPE_DOT[s]}`} aria-hidden />
@@ -367,7 +367,7 @@ function SecretRevealModal({
         <Alert variant="warning" title={t('webhooks.secret.warningTitle')}>
           {t('webhooks.secret.warning')}
         </Alert>
-        <div className="bg-carbon/5 border border-regolith rounded-md p-3">
+        <div className="bg-carbon/5 border border-line rounded-md p-3">
           <code className="font-mono text-2xs break-all">{revealed.secret}</code>
         </div>
         <div className="flex justify-end gap-2">