@leviosa-ai/detail-page-editor 0.2.2 → 0.3.1

package/components/detail-page/chart-inspector.tsx

@@ -80,7 +80,7 @@ function Cell({
           (e.target as HTMLInputElement).blur();
         }
       }}
-      className={`w-full min-w-0 rounded-md border border-neutral-200 bg-white px-2 py-1.5 text-sm text-neutral-900 outline-none focus:border-neutral-400 ${
+      className={`w-full min-w-0 rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface px-2 py-1.5 text-sm text-dpe-ink-900 outline-none focus:border-dpe-ink-400 ${
         align === "right" ? "text-right tabular-nums" : ""
       }`}
     />
@@ -220,10 +220,10 @@ export const ChartInspector = observer(function ChartInspector({
               type="button"
               aria-pressed={kind === spec.kind}
               onClick={() => apply({ kind })}
-              className={`h-8 rounded-md border text-xs transition-colors ${
+              className={`h-8 rounded-dpe-md border text-xs transition-colors ${
                 kind === spec.kind
-                  ? "border-neutral-300 bg-neutral-100 font-semibold text-neutral-900"
-                  : "border-neutral-200 bg-white text-neutral-600 hover:bg-neutral-50"
+                  ? "border-dpe-ink-300 bg-dpe-ink-100 font-dpe-semibold text-dpe-ink-900"
+                  : "border-dpe-ink-200 bg-dpe-surface text-dpe-ink-600 hover:bg-dpe-ink-50"
               }`}
             >
               {t(`detailPage.chart.kinds.${kind}`)}
@@ -231,7 +231,7 @@ export const ChartInspector = observer(function ChartInspector({
           ))}
         </div>
         {resolved.hiddenSeries > 0 ? (
-          <p className="mt-2 text-[11px] text-amber-600">
+          <p className="mt-2 text-[11px] text-dpe-warn-600">
             {t("detailPage.chart.hiddenSeries", { count: resolved.hiddenSeries })}
           </p>
         ) : null}
@@ -239,7 +239,7 @@ export const ChartInspector = observer(function ChartInspector({
 
       <Section title={t("detailPage.chart.data")}>
         <div onPaste={onPaste}>
-          <div className="flex items-center gap-1.5 pb-1 text-[11px] text-neutral-400">
+          <div className="flex items-center gap-1.5 pb-1 text-[11px] text-dpe-ink-400">
             <span className="flex-1">{t("detailPage.chart.columnLabel")}</span>
             {spec.data.series.map((series) => (
               <span key={series.name} className="w-20 text-right">
@@ -296,7 +296,7 @@ export const ChartInspector = observer(function ChartInspector({
                       },
                     })
                   }
-                  className="flex h-8 w-6 shrink-0 items-center justify-center rounded-md text-neutral-400 hover:text-red-500 disabled:cursor-not-allowed disabled:opacity-30"
+                  className="flex h-8 w-6 shrink-0 items-center justify-center rounded-dpe-md text-dpe-ink-400 hover:text-dpe-danger-500 disabled:cursor-not-allowed disabled:opacity-30"
                 >
                   <Trash2 size={14} />
                 </button>
@@ -306,12 +306,12 @@ export const ChartInspector = observer(function ChartInspector({
           <button
             type="button"
             onClick={() => setData(withRowAdded(spec.data))}
-            className="mt-2 inline-flex h-8 w-full items-center justify-center gap-1.5 rounded-md border border-neutral-200 bg-white text-xs font-medium text-neutral-600 hover:bg-neutral-50"
+            className="mt-2 inline-flex h-8 w-full items-center justify-center gap-1.5 rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface text-xs font-dpe-medium text-dpe-ink-600 hover:bg-dpe-ink-50"
           >
             <Plus size={14} />
             {t("detailPage.chart.addRow")}
           </button>
-          <p className="mt-1.5 text-[11px] text-neutral-400">
+          <p className="mt-1.5 text-[11px] text-dpe-ink-400">
             {notice ?? t("detailPage.chart.pasteHint")}
           </p>
         </div>
@@ -320,7 +320,7 @@ export const ChartInspector = observer(function ChartInspector({
       <Section title={t("detailPage.chart.display")}>
         <div className="grid grid-cols-2 gap-2">
           <label className="flex items-center gap-2">
-            <span className="w-10 shrink-0 text-xs text-neutral-500">
+            <span className="w-10 shrink-0 text-xs text-dpe-ink-500">
               {t("detailPage.chart.unit")}
             </span>
             <Cell
@@ -331,7 +331,7 @@ export const ChartInspector = observer(function ChartInspector({
             />
           </label>
           <label className="flex items-center gap-2">
-            <span className="w-10 shrink-0 text-xs text-neutral-500">
+            <span className="w-10 shrink-0 text-xs text-dpe-ink-500">
               {t("detailPage.chart.decimals")}
             </span>
             <NumberField
@@ -375,14 +375,14 @@ export const ChartInspector = observer(function ChartInspector({
 
         <div className="mt-2 grid grid-cols-2 gap-2">
           <label className="flex items-center gap-2">
-            <span className="w-10 shrink-0 text-xs text-neutral-500">
+            <span className="w-10 shrink-0 text-xs text-dpe-ink-500">
               {t("detailPage.chart.max")}
             </span>
             {spec.options.max === "auto" ? (
               <button
                 type="button"
                 onClick={() => setOptions({ max: Math.round(resolved.max) })}
-                className="h-8 min-w-0 flex-1 rounded-md border border-neutral-200 bg-white text-xs text-neutral-500 hover:bg-neutral-50"
+                className="h-8 min-w-0 flex-1 rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface text-xs text-dpe-ink-500 hover:bg-dpe-ink-50"
               >
                 {t("detailPage.chart.maxAuto")}
               </button>
@@ -398,7 +398,7 @@ export const ChartInspector = observer(function ChartInspector({
             <button
               type="button"
               onClick={() => setOptions({ max: "auto" })}
-              className="h-8 rounded-md border border-neutral-200 bg-white text-xs text-neutral-500 hover:bg-neutral-50"
+              className="h-8 rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface text-xs text-dpe-ink-500 hover:bg-dpe-ink-50"
             >
               {t("detailPage.chart.maxToAuto")}
             </button>
@@ -406,7 +406,7 @@ export const ChartInspector = observer(function ChartInspector({
         </div>
 
         <label className="mt-2 flex items-center gap-2">
-          <span className="w-10 shrink-0 text-xs text-neutral-500">
+          <span className="w-10 shrink-0 text-xs text-dpe-ink-500">
             {t("detailPage.chart.highlight")}
           </span>
           <select
@@ -418,7 +418,7 @@ export const ChartInspector = observer(function ChartInspector({
                   event.target.value === "" ? null : Number(event.target.value),
               })
             }
-            className="h-8 min-w-0 flex-1 rounded-md border border-neutral-200 bg-white px-2 text-xs text-neutral-700 outline-none focus:border-neutral-400"
+            className="h-8 min-w-0 flex-1 rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface px-2 text-xs text-dpe-ink-700 outline-none focus:border-dpe-ink-400"
           >
             <option value="">{t("detailPage.chart.highlightNone")}</option>
             {spec.data.labels.map((label, index) => (
@@ -437,7 +437,7 @@ export const ChartInspector = observer(function ChartInspector({
         <div className="flex flex-col gap-2">
           {slots.map((slot) => (
             <label key={slot.index} className="flex items-center gap-2">
-              <span className="w-16 shrink-0 truncate text-xs text-neutral-500">
+              <span className="w-16 shrink-0 truncate text-xs text-dpe-ink-500">
                 {scope === "highlight"
                   ? t("detailPage.chart.color.accent")
                   : slot.name ||
@@ -457,7 +457,7 @@ export const ChartInspector = observer(function ChartInspector({
             </label>
           ))}
           {scope !== "highlight" && slotsTruncated ? (
-            <p className="text-[11px] leading-relaxed text-neutral-400">
+            <p className="text-[11px] leading-relaxed text-dpe-ink-400">
               {t("detailPage.chart.color.moreSlots", { count: MAX_PALETTE_SLOTS })}
             </p>
           ) : null}
@@ -471,7 +471,7 @@ export const ChartInspector = observer(function ChartInspector({
             ] as const
           ).map(([key, value]) => (
             <label key={key} className="flex items-center gap-2">
-              <span className="w-16 shrink-0 text-xs text-neutral-500">
+              <span className="w-16 shrink-0 text-xs text-dpe-ink-500">
                 {t(`detailPage.chart.color.${key}`)}
               </span>
               <ColorInput
@@ -491,7 +491,7 @@ export const ChartInspector = observer(function ChartInspector({
       <Section title={t("detailPage.chart.shape")}>
         <div className="grid grid-cols-2 gap-2">
           <label className="flex items-center gap-2">
-            <span className="w-10 shrink-0 text-xs text-neutral-500">
+            <span className="w-10 shrink-0 text-xs text-dpe-ink-500">
               {t("detailPage.chart.barSize")}
             </span>
             <NumberField
@@ -501,7 +501,7 @@ export const ChartInspector = observer(function ChartInspector({
             />
           </label>
           <label className="flex items-center gap-2">
-            <span className="w-10 shrink-0 text-xs text-neutral-500">
+            <span className="w-10 shrink-0 text-xs text-dpe-ink-500">
               {t("detailPage.chart.gap")}
             </span>
             <NumberField
@@ -517,12 +517,12 @@ export const ChartInspector = observer(function ChartInspector({
         <button
           type="button"
           onClick={() => detachChart(el)}
-          className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-md border border-neutral-200 bg-white text-sm font-semibold text-neutral-700 hover:bg-neutral-50"
+          className="inline-flex h-9 w-full items-center justify-center gap-2 rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface text-sm font-dpe-semibold text-dpe-ink-700 hover:bg-dpe-ink-50"
         >
           <Unlink aria-hidden="true" size={15} />
           {t("detailPage.chart.detach")}
         </button>
-        <p className="mt-1.5 text-[11px] text-neutral-400">
+        <p className="mt-1.5 text-[11px] text-dpe-ink-400">
           {t("detailPage.chart.detachHint")}
         </p>
       </Section>

package/components/detail-page/design-reference-picker.tsx

@@ -198,10 +198,10 @@ export function DesignReferencePicker({
   }, [api, busy, credits, instruction, items, onBriefChange]);
 
   return (
-    <div className="space-y-3 rounded-lg bg-neutral-50 p-3">
+    <div className="space-y-3 rounded-dpe-lg bg-dpe-ink-50 p-3">
       <div>
-        <p className="text-xs font-medium text-neutral-700">디자인 레퍼런스</p>
-        <p className="mt-1 text-[11px] text-neutral-500">
+        <p className="text-xs font-dpe-medium text-dpe-ink-700">디자인 레퍼런스</p>
+        <p className="mt-1 text-[11px] text-dpe-ink-500">
           &ldquo;이런 디자인으로&rdquo; 참고할 그림이에요. 상품 사진과 달리 페이지에
           들어가지 않고, 구조와 색을 고르는 근거로만 써요. 최대{" "}
           {MAX_DESIGN_REFERENCES}장.
@@ -212,13 +212,13 @@ export function DesignReferencePicker({
         {items.map((item, index) => (
           <div
             key={item.id}
-            className="flex items-start gap-2 rounded-lg border border-neutral-200 bg-white p-1.5"
+            className="flex items-start gap-2 rounded-dpe-lg border border-dpe-ink-200 bg-dpe-surface p-1.5"
           >
-            <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-md bg-neutral-100">
+            <div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-dpe-md bg-dpe-ink-100">
               {/* 붙인 사진은 data URI라 next/image 로 최적화할 것이 없다. */}
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src={item.uri} alt="디자인 레퍼런스" className="h-full w-full object-cover" />
-              <span className="absolute left-0.5 top-0.5 rounded bg-neutral-900/75 px-1 text-[10px] font-semibold leading-4 text-white">
+              <span className="absolute left-0.5 top-0.5 rounded bg-dpe-ink-900/75 px-1 text-[10px] font-dpe-semibold leading-4 text-dpe-on-accent">
                 {referenceOrdinal(index)}
               </span>
               <button
@@ -226,7 +226,7 @@ export function DesignReferencePicker({
                 disabled={disabled || busy}
                 onClick={() => remove(item.id)}
                 aria-label={`${referenceOrdinal(index)} 레퍼런스 빼기`}
-                className="absolute right-0.5 top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-neutral-900/70 text-white disabled:opacity-40"
+                className="absolute right-0.5 top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-dpe-ink-900/70 text-dpe-on-accent disabled:opacity-40"
               >
                 <X size={10} />
               </button>
@@ -245,8 +245,8 @@ export function DesignReferencePicker({
                     onClick={() => toggleAspect(item.id, aspect.key)}
                     className={`rounded-full border px-2 py-0.5 text-[11px] transition-colors disabled:opacity-40 ${
                       on
-                        ? "border-neutral-900 bg-neutral-900 text-white"
-                        : "border-neutral-200 text-neutral-500 hover:border-neutral-400 hover:text-neutral-700"
+                        ? "border-dpe-ink-900 bg-dpe-ink-900 text-dpe-on-accent"
+                        : "border-dpe-ink-200 text-dpe-ink-500 hover:border-dpe-ink-400 hover:text-dpe-ink-700"
                     }`}
                   >
                     {aspect.label}
@@ -261,7 +261,7 @@ export function DesignReferencePicker({
             type="button"
             disabled={disabled || busy}
             onClick={() => fileRef.current?.click()}
-            className="flex h-[4.75rem] items-center gap-1.5 rounded-lg border border-dashed border-neutral-300 bg-white px-3 text-xs text-neutral-500 transition-colors hover:border-neutral-400 hover:text-neutral-700 disabled:opacity-40"
+            className="flex h-[4.75rem] items-center gap-1.5 rounded-dpe-lg border border-dashed border-dpe-ink-300 bg-dpe-surface px-3 text-xs text-dpe-ink-500 transition-colors hover:border-dpe-ink-400 hover:text-dpe-ink-700 disabled:opacity-40"
           >
             <ImagePlus size={14} />
             레퍼런스 추가
@@ -285,13 +285,13 @@ export function DesignReferencePicker({
             rows={2}
             disabled={disabled || busy}
             placeholder="1번 이미지의 색감과 폰트, 2번 이미지의 레이아웃을 참고해 주세요"
-            className="w-full resize-none rounded-lg border border-neutral-200 bg-white px-3 py-2 text-xs text-neutral-900 outline-none placeholder:text-neutral-400 focus:border-neutral-400 disabled:bg-neutral-100"
+            className="w-full resize-none rounded-dpe-lg border border-dpe-ink-200 bg-dpe-surface px-3 py-2 text-xs text-dpe-ink-900 outline-none placeholder:text-dpe-ink-400 focus:border-dpe-ink-400 disabled:bg-dpe-ink-100"
           />
           <button
             type="button"
             disabled={disabled || busy}
             onClick={() => void analyze()}
-            className="inline-flex items-center gap-1.5 rounded-lg border border-neutral-900 px-3 py-1.5 text-xs font-medium text-neutral-900 transition-colors hover:bg-neutral-900 hover:text-white disabled:opacity-40"
+            className="inline-flex items-center gap-1.5 rounded-dpe-lg border border-dpe-ink-900 px-3 py-1.5 text-xs font-dpe-medium text-dpe-ink-900 transition-colors hover:bg-dpe-ink-900 hover:text-dpe-on-accent disabled:opacity-40"
           >
             {busy ? <Loader2 size={13} className="animate-spin" /> : null}
             {busy ? "읽는 중…" : brief ? "다시 읽기" : "레퍼런스 읽기"}
@@ -299,7 +299,7 @@ export function DesignReferencePicker({
           {/* 누르기 전에 값을 알려 준다 — 누른 뒤 402 로 알게 되면 이미 축 고르고
               지시까지 다 적은 뒤다. 장수가 아니라 그림 크기에 붙는 값이라, 큰 그림을
               작은 것으로 바꾸면 줄어든다. */}
-          <p className="text-[11px] text-neutral-500">
+          <p className="text-[11px] text-dpe-ink-500">
             읽을 때마다 {credits}크레딧이 들어요 (레퍼런스 {items.length}장 · 그림이 크고
             길수록 올라가요).
           </p>
@@ -307,7 +307,7 @@ export function DesignReferencePicker({
       ) : null}
 
       {brief ? <BriefSummary brief={brief} /> : null}
-      {error ? <p className="text-[11px] text-red-600">{error}</p> : null}
+      {error ? <p className="text-[11px] text-dpe-danger-600">{error}</p> : null}
     </div>
   );
 }
@@ -339,22 +339,22 @@ function BriefSummary({ brief }: { brief: DetailPageDesignBrief }) {
 
   if (nothingRead) {
     return (
-      <p className="text-[11px] text-neutral-500">
+      <p className="text-[11px] text-dpe-ink-500">
         레퍼런스에서 읽어낸 것이 없어요. 판면이 잘 보이는 그림으로 바꿔 보세요.
       </p>
     );
   }
 
   return (
-    <div className="space-y-1.5 rounded-lg border border-neutral-200 bg-white p-2.5">
+    <div className="space-y-1.5 rounded-dpe-lg border border-dpe-ink-200 bg-dpe-surface p-2.5">
       <div className="flex flex-wrap items-center gap-1.5">
         {brief.tone ? (
-          <span className="rounded-full bg-neutral-900 px-2 py-0.5 text-[11px] text-white">
+          <span className="rounded-full bg-dpe-ink-900 px-2 py-0.5 text-[11px] text-dpe-on-accent">
             {TONE_LABELS[brief.tone] ?? brief.tone}
           </span>
         ) : null}
         {brief.density ? (
-          <span className="rounded-full border border-neutral-300 px-2 py-0.5 text-[11px] text-neutral-600">
+          <span className="rounded-full border border-dpe-ink-300 px-2 py-0.5 text-[11px] text-dpe-ink-600">
             {DENSITY_LABELS[brief.density] ?? brief.density}
           </span>
         ) : null}
@@ -363,19 +363,19 @@ function BriefSummary({ brief }: { brief: DetailPageDesignBrief }) {
             key={color}
             title={color}
             style={{ backgroundColor: color }}
-            className="h-4 w-4 rounded-full border border-neutral-300"
+            className="h-4 w-4 rounded-full border border-dpe-ink-300"
           />
         ))}
       </div>
       {brief.summary ? (
-        <p className="text-[11px] text-neutral-600">{brief.summary}</p>
+        <p className="text-[11px] text-dpe-ink-600">{brief.summary}</p>
       ) : null}
       {brief.typography || brief.layout || brief.content ? (
-        <p className="text-[11px] text-neutral-500">
+        <p className="text-[11px] text-dpe-ink-500">
           {[brief.typography, brief.layout, brief.content].filter(Boolean).join(" · ")}
         </p>
       ) : null}
-      <p className="text-[11px] text-neutral-400">
+      <p className="text-[11px] text-dpe-ink-400">
         읽은 결과는 제안이에요. 위 디자인 톤을 직접 바꾸면 그 선택이 우선해요.
       </p>
     </div>

package/components/detail-page/detail-page-basic-shapes.tsx

@@ -65,7 +65,7 @@ const FIGURE_PATCH: Record<string, Record<string, unknown>> = {
 };
 
 const CELL =
-  "flex aspect-square items-center justify-center rounded-lg border border-neutral-200 p-2 hover:border-neutral-400";
+  "flex aspect-square items-center justify-center rounded-dpe-lg border border-dpe-ink-200 p-2 hover:border-dpe-ink-400";
 
 function FigureCell({ id, store }: { id: string; store: unknown }) {
   const { t } = useTranslation("branding");
@@ -79,7 +79,7 @@ function FigureCell({ id, store }: { id: string; store: unknown }) {
     >
       <span
         aria-hidden="true"
-        className="block h-7 w-7 bg-neutral-300"
+        className="block h-7 w-7 bg-dpe-ink-300"
         style={{
           borderRadius: id === "circle" ? "9999px" : id === "rounded" ? 8 : 0,
         }}
@@ -135,7 +135,7 @@ export function DetailPageBasicShapes({ store }: { store: unknown }) {
       <div className="min-h-0 flex-1 overflow-y-auto p-3">
         {found ? (
           found.figures.length + found.shapes.length === 0 ? (
-            <div className="flex flex-col items-center gap-2 py-6 text-center text-neutral-400">
+            <div className="flex flex-col items-center gap-2 py-6 text-center text-dpe-ink-400">
               <ImageOff aria-hidden="true" size={20} />
               <p className="text-xs">{t("detailPage.shapes.searchEmpty")}</p>
             </div>
@@ -157,7 +157,7 @@ export function DetailPageBasicShapes({ store }: { store: unknown }) {
             if (!shapes.length) return null;
             return (
               <div key={category} className="mb-4 last:mb-0">
-                <p className="mb-2 text-xs font-medium text-neutral-500">
+                <p className="mb-2 text-xs font-dpe-medium text-dpe-ink-500">
                   {t(`detailPage.shapes.categories.${category}`)}
                 </p>
                 <div className="grid grid-cols-4 gap-2">

package/components/detail-page/detail-page-brand-gifs-panel.tsx

@@ -147,7 +147,7 @@ export function DetailPageBrandGifsPanel({ store }: { store: unknown }) {
     <div className="flex h-full flex-col p-4">
       <BrandPanelHeader onRefresh={() => void gifsQuery.refetch()} />
 
-      <label className="mb-3 flex h-16 cursor-pointer flex-col items-center justify-center gap-1 rounded-md border border-dashed border-neutral-300 text-neutral-400 hover:border-neutral-400 hover:text-neutral-600">
+      <label className="mb-3 flex h-16 cursor-pointer flex-col items-center justify-center gap-1 rounded-dpe-md border border-dashed border-dpe-ink-300 text-dpe-ink-400 hover:border-dpe-ink-400 hover:text-dpe-ink-600">
         {uploadMutation.isPending ? (
           <Loader2 aria-hidden="true" className="animate-spin" size={18} />
         ) : (
@@ -166,19 +166,19 @@ export function DetailPageBrandGifsPanel({ store }: { store: unknown }) {
       </label>
 
       {brandsLoading || gifsQuery.isLoading ? (
-        <div className="flex flex-1 items-center justify-center text-neutral-400">
+        <div className="flex flex-1 items-center justify-center text-dpe-ink-400">
           <Loader2 aria-hidden="true" className="animate-spin" size={22} />
         </div>
       ) : error || gifsQuery.error ? (
-        <p className="text-xs font-medium text-red-600">
+        <p className="text-xs font-dpe-medium text-dpe-danger-600">
           {error ?? t("detailPage.brandAssets.loadFailed")}
         </p>
       ) : !activeBrand ? (
-        <p className="text-xs text-neutral-400">
+        <p className="text-xs text-dpe-ink-400">
           {t("detailPage.brandAssets.noBrand")}
         </p>
       ) : sections.length === 0 ? (
-        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-neutral-400">
+        <div className="flex flex-1 flex-col items-center justify-center gap-2 text-center text-dpe-ink-400">
           <Film aria-hidden="true" size={22} />
           <p className="text-xs">
             {t("detailPage.brandGifs.empty", {
@@ -191,7 +191,7 @@ export function DetailPageBrandGifsPanel({ store }: { store: unknown }) {
         <div className="flex flex-col gap-4 overflow-y-auto">
           {sections.map((section) => (
             <section key={section.kind}>
-              <h3 className="mb-1.5 text-[11px] font-semibold text-neutral-500">
+              <h3 className="mb-1.5 text-[11px] font-dpe-semibold text-dpe-ink-500">
                 {section.kind === "other"
                   ? t("detailPage.brandGifs.sectionOther", {
                       defaultValue: "기타",
@@ -205,7 +205,7 @@ export function DetailPageBrandGifsPanel({ store }: { store: unknown }) {
                         )!.fallback,
                       },
                     )}
-                <span className="ml-1 font-normal text-neutral-300">
+                <span className="ml-1 font-dpe-normal text-dpe-ink-300">
                   {section.items.length}
                 </span>
               </h3>
@@ -213,7 +213,7 @@ export function DetailPageBrandGifsPanel({ store }: { store: unknown }) {
                 {section.items.map((asset) => (
                   <div
                     key={asset.id}
-                    className="group relative overflow-hidden rounded-md border border-neutral-200 hover:border-neutral-500"
+                    className="group relative overflow-hidden rounded-dpe-md border border-dpe-ink-200 hover:border-dpe-ink-500"
                   >
                     <button
                       type="button"
@@ -237,14 +237,14 @@ export function DetailPageBrandGifsPanel({ store }: { store: unknown }) {
                         className="h-24 w-full object-cover transition group-hover:opacity-90"
                       />
                     </button>
-                    <span className="pointer-events-none absolute bottom-1.5 left-1.5 max-w-[calc(100%-12px)] truncate rounded-sm bg-black/70 px-1.5 py-0.5 text-[10px] text-white">
+                    <span className="pointer-events-none absolute bottom-1.5 left-1.5 max-w-[calc(100%-12px)] truncate rounded-dpe-sm bg-dpe-scrim/70 px-1.5 py-0.5 text-[10px] text-dpe-on-accent">
                       {String(asset.metadata?.effect ?? "") ||
                         (asset.display_name ?? asset.filename)}
                     </span>
                     <button
                       type="button"
                       onClick={() => deleteMutation.mutate(asset)}
-                      className="absolute right-1 top-1 hidden h-6 w-6 items-center justify-center rounded-md bg-white/95 text-neutral-400 shadow-sm hover:text-red-600 group-hover:flex"
+                      className="absolute right-1 top-1 hidden h-6 w-6 items-center justify-center rounded-dpe-md bg-dpe-surface/95 text-dpe-ink-400 shadow-sm hover:text-dpe-danger-600 group-hover:flex"
                       aria-label={t("detailPage.brandAssets.delete")}
                     >
                       <Trash2 aria-hidden="true" size={13} />

package/components/detail-page/detail-page-brand-kit-panel.tsx

@@ -33,7 +33,7 @@ export function DetailPageBrandKitPanel({ store }: { store: unknown }) {
 
   if (brandsLoading || assetsQuery.isLoading || moodboardQuery.isLoading) {
     return (
-      <div className="flex h-full items-center justify-center text-neutral-400">
+      <div className="flex h-full items-center justify-center text-dpe-ink-400">
         <Loader2 className="animate-spin" size={20} />
       </div>
     );
@@ -42,7 +42,7 @@ export function DetailPageBrandKitPanel({ store }: { store: unknown }) {
   const KitPanel = slots?.BrandKitPanel;
   if (!activeBrand || !moodboardQuery.data || !KitPanel) {
     return (
-      <div className="flex h-full flex-col items-center justify-center gap-2 p-5 text-center text-neutral-400">
+      <div className="flex h-full flex-col items-center justify-center gap-2 p-5 text-center text-dpe-ink-400">
         <Palette size={22} />
         <p className="text-xs">{t("detailPage.brandAssets.kitEmpty")}</p>
       </div>
@@ -51,13 +51,13 @@ export function DetailPageBrandKitPanel({ store }: { store: unknown }) {
 
   return (
     <div className="flex h-full flex-col overflow-y-auto">
-      <div className="border-b border-neutral-200 p-3">
-        <label className="grid gap-1 text-[11px] font-medium text-neutral-500">
+      <div className="border-b border-dpe-ink-200 p-3">
+        <label className="grid gap-1 text-[11px] font-dpe-medium text-dpe-ink-500">
           {t("detailPage.brandAssets.activeBrand")}
           <select
             value={activeBrand.id}
             onChange={(event) => setActiveBrandId(event.target.value)}
-            className="h-8 rounded-md border border-neutral-200 bg-white px-2 text-xs text-neutral-800"
+            className="h-8 rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface px-2 text-xs text-dpe-ink-800"
           >
             {brands.map((brand) => (
               <option key={brand.id} value={brand.id}>

package/components/detail-page/detail-page-brand-panel-header.tsx

@@ -16,13 +16,16 @@ export function BrandPanelHeader({ onRefresh }: { onRefresh: () => void }) {
   const { brands, activeBrandId, setActiveBrandId } = brand.useBrandWorkspace();
 
   return (
-    <div className="mb-3 flex items-center justify-between gap-2">
-      <label className="grid min-w-0 flex-1 gap-1 text-[11px] font-medium text-neutral-500">
+    <div
+      data-dpe-part="panel-header"
+      className="mb-3 flex items-center justify-between gap-2"
+    >
+      <label className="grid min-w-0 flex-1 gap-1 text-[11px] font-dpe-medium text-dpe-ink-500">
         {t("detailPage.brandAssets.activeBrand")}
         <select
           value={activeBrandId ?? ""}
           onChange={(event) => setActiveBrandId(event.target.value)}
-          className="h-8 min-w-0 rounded-md border border-neutral-200 bg-white px-2 text-xs text-neutral-800"
+          className="h-8 min-w-0 rounded-dpe-md border border-dpe-ink-200 bg-dpe-surface px-2 text-xs text-dpe-ink-800"
         >
           {brands.map((brand) => (
             <option key={brand.id} value={brand.id}>
@@ -34,7 +37,7 @@ export function BrandPanelHeader({ onRefresh }: { onRefresh: () => void }) {
       <button
         type="button"
         onClick={onRefresh}
-        className="mt-4 flex h-7 w-7 items-center justify-center rounded-md text-neutral-400 hover:bg-neutral-100 hover:text-neutral-600"
+        className="mt-4 flex h-7 w-7 items-center justify-center rounded-dpe-md text-dpe-ink-400 hover:bg-dpe-ink-100 hover:text-dpe-ink-600"
         aria-label={t("detailPage.brandAssets.refresh")}
       >
         <RefreshCw aria-hidden="true" size={14} />

package/components/detail-page/detail-page-charts-panel.tsx

@@ -74,7 +74,7 @@ export function DetailPageChartsPanel({ store }: { store: unknown }) {
 
   return (
     <div className="flex h-full flex-col overflow-y-auto p-3">
-      <p className="mb-2 text-xs font-medium text-neutral-500">
+      <p className="mb-2 text-xs font-dpe-medium text-dpe-ink-500">
         {t("detailPage.chart.panelTitle")}
       </p>
       <div className="grid grid-cols-2 gap-2">
@@ -84,7 +84,7 @@ export function DetailPageChartsPanel({ store }: { store: unknown }) {
             type="button"
             onClick={() => insert(preset)}
             title={t("detailPage.chart.insertHint")}
-            className="flex flex-col items-center gap-1.5 rounded-lg border border-neutral-200 p-2 hover:border-neutral-400"
+            className="flex flex-col items-center gap-1.5 rounded-dpe-lg border border-dpe-ink-200 p-2 hover:border-dpe-ink-400"
           >
             {/* eslint-disable-next-line @next/next/no-img-element */}
             <img
@@ -92,11 +92,11 @@ export function DetailPageChartsPanel({ store }: { store: unknown }) {
               alt={t(preset.labelKey)}
               className="h-20 w-full object-contain"
             />
-            <span className="text-[11px] text-neutral-500">{t(preset.labelKey)}</span>
+            <span className="text-[11px] text-dpe-ink-500">{t(preset.labelKey)}</span>
           </button>
         ))}
       </div>
-      <p className="mt-3 text-[11px] leading-relaxed text-neutral-400">
+      <p className="mt-3 text-[11px] leading-relaxed text-dpe-ink-400">
         {t("detailPage.chart.panelHint")}
       </p>
     </div>

package/components/detail-page/detail-page-decorations-panel.tsx

@@ -72,14 +72,14 @@ export function DetailPageDecorationsPanel({ store }: { store: unknown }) {
   if (isError) {
     return (
       <div className="p-3">
-        <p className="text-xs text-red-600">{t("detailPage.shapes.decorationsFailed")}</p>
+        <p className="text-xs text-dpe-danger-600">{t("detailPage.shapes.decorationsFailed")}</p>
       </div>
     );
   }
 
   if (isPending) {
     return (
-      <div className="flex h-full items-center justify-center text-neutral-400">
+      <div className="flex h-full items-center justify-center text-dpe-ink-400">
         <Loader2 aria-hidden="true" className="animate-spin" size={18} />
       </div>
     );
@@ -88,7 +88,7 @@ export function DetailPageDecorationsPanel({ store }: { store: unknown }) {
   if (!groups.length) {
     return (
       <div className="p-3">
-        <p className="text-xs text-neutral-400">{t("detailPage.shapes.decorationsEmpty")}</p>
+        <p className="text-xs text-dpe-ink-400">{t("detailPage.shapes.decorationsEmpty")}</p>
       </div>
     );
   }
@@ -97,7 +97,7 @@ export function DetailPageDecorationsPanel({ store }: { store: unknown }) {
     <div className="flex h-full flex-col overflow-y-auto p-3">
       {groups.map(({ category, cells }) => (
         <div key={category} className="mb-4 last:mb-0">
-          <p className="mb-2 text-xs font-medium text-neutral-500">
+          <p className="mb-2 text-xs font-dpe-medium text-dpe-ink-500">
             {t(`detailPage.shapes.decorations.${category}`)}
           </p>
           <div className="grid grid-cols-4 gap-2">
@@ -106,7 +106,7 @@ export function DetailPageDecorationsPanel({ store }: { store: unknown }) {
                 key={item.id}
                 type="button"
                 onClick={() => insert(item)}
-                className="flex aspect-square items-center justify-center rounded-lg border border-neutral-200 p-2 hover:border-neutral-400"
+                className="flex aspect-square items-center justify-center rounded-dpe-lg border border-dpe-ink-200 p-2 hover:border-dpe-ink-400"
                 title={t("detailPage.shapes.insertHint")}
               >
                 {/* eslint-disable-next-line @next/next/no-img-element */}