Merge branch 'feat/v1.2.1-catalog-refresh' into 'main'

feat(admin-ui): catalog refresh + token migration (Stage 3.2) See merge request 2-6/2-6-4/terravault/ordinis!36
2026-05-11 09:08:38 +00:00
parent 3e19fd2cf9 6db2a0c345
commit 057fd09589
24 changed files with 289 additions and 273 deletions
@@ -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>
@@ -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 = '/'
            }}
@@ -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>
@@ -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')}
      />
@@ -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}
@@ -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', {
@@ -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>
        ) : (
@@ -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
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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')}
@@ -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>
  )
@@ -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',
 }
@@ -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)}
@@ -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"
@@ -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>
        )}
@@ -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>
@@ -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>
  )
 }
@@ -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>
@@ -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>
  )
@@ -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">
@@ -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">