feat(brand): Graphite 아이덴티티 적용

app/api/og/route.tsx

@@ -40,7 +40,7 @@ export async function GET(req: NextRequest) {
         flexDirection: 'column',
         alignItems: 'flex-start',
         justifyContent: 'center',
-        backgroundImage: 'linear-gradient(to bottom right, #EAEBEA, #E0E1E3)',
+        backgroundImage: 'linear-gradient(to bottom right, #ECEEEF, #E1E4E7)',
         padding: '80px',
       }}
     >
@@ -86,8 +86,8 @@ export async function GET(req: NextRequest) {
                 key={tag}
                 style={{
                   display: 'flex',
-                  backgroundColor: '#E0E1E3',
-                  color: '#3F3F46',
+                  backgroundColor: '#E1E4E7',
+                  color: '#A6294D',
                   padding: '8px 24px',
                   borderRadius: '50px',
                   fontSize: '24px',
@@ -114,7 +114,7 @@ export async function GET(req: NextRequest) {
           style={{
             fontSize: '32px',
             fontWeight: 700,
-            color: '#3F3F46',
+            color: '#A6294D',
             fontFamily: 'Pretendard',
           }}
         >

app/layout.tsx

@@ -56,7 +56,7 @@ export const metadata: Metadata = {
 };
 
 export const viewport: Viewport = {
-  themeColor: '#EAEBEA',
+  themeColor: '#ECEEEF',
   width: 'device-width',
   initialScale: 1,
 };

app/not-found.tsx

@@ -17,7 +17,7 @@ export default function NotFound() {
         </p>
         <Link
           href="/"
-          className="mt-8 inline-flex min-h-11 items-center justify-center rounded-[var(--radius-action)] bg-[var(--color-accent)] px-5 text-sm font-semibold text-[var(--color-accent-foreground)] transition-colors hover:bg-[var(--color-accent-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]"
+          className="mt-8 inline-flex min-h-11 items-center justify-center rounded-[var(--radius-action)] bg-[var(--color-accent-fill)] px-5 text-sm font-semibold text-[var(--color-accent-foreground)] transition-colors hover:bg-[var(--color-accent-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent-fill)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]"
         >
           홈으로 돌아가기
         </Link>

blog/ui/components/ReadingProgress/ReadingProgress.test.tsx

@@ -26,7 +26,7 @@ vi.mock('framer-motion', () => ({
     }) => {
       const className = props.className as string;
       const testId =
-        className.includes('bg-[var(--color-accent)]') &&
+        className.includes('bg-[var(--color-accent-fill)]') &&
         className.includes('h-full')
           ? 'reading-progress-bar'
           : 'reading-progress-root';

blog/ui/components/ReadingProgress/ReadingProgress.tsx

@@ -39,7 +39,7 @@ export default function ReadingProgress() {
     >
       <motion.div
         data-reading-progress-bar
-        className="h-full bg-[var(--color-accent)] origin-left"
+        className="h-full bg-[var(--color-accent-fill)] origin-left"
         style={{ scaleX }}
       />
     </motion.div>

blog/ui/pages/EngineeringPageClient.tsx

@@ -114,7 +114,7 @@ export default function EngineeringPageClient({
                 className={clsx(
                   'rounded border px-3 py-1.5 transition-colors',
                   page === currentPage
-                    ? 'border-[var(--color-accent)] bg-[var(--color-accent)] text-[var(--color-accent-foreground)]'
+                    ? 'border-[var(--color-accent-fill)] bg-[var(--color-accent-fill)] text-[var(--color-accent-foreground)]'
                     : 'border-[var(--color-grey-200)] bg-[var(--color-bg-primary)] text-[var(--color-grey-700)] hover:bg-[var(--color-grey-50)]'
                 )}
               >

docs/README.md

@@ -1,6 +1,6 @@
 # 문서 인덱스
 
-Last updated: 2026-07-28
+Last updated: 2026-07-31
 
 이 인덱스는 현재 코드베이스와 함께 유지해야 하는 문서만 추적한다. 계속
 업데이트할 문서가 아니라면 삭제하거나, 오래 남겨야 하는 결정만 ADR로 옮긴다.
@@ -51,6 +51,7 @@ Last updated: 2026-07-28
 - `docs/adr/0050-retire-series-navigation-and-enforce-listed-post-policy.md`
 - `docs/adr/0052-use-repo-local-public-writing-review-workflow.md`
 - `docs/adr/0053-use-inline-table-of-contents-for-article-reading.md`
+- `docs/adr/0054-adopt-cool-paper-and-plum-accent-palette.md`
 - `docs/blog-quality-guide.md`
 - `docs/content-publication-candidates.md`
 - `docs/database/db-schema.md`

docs/adr/0054-adopt-cool-paper-and-plum-accent-palette.md

@@ -0,0 +1,39 @@
+# 0054. 차가운 종이와 매화색 포인트 팔레트를 채택한다
+
+Date: 2026-07-31
+Status: Accepted
+
+## 배경
+
+Ark의 기존 무채색 Graphite Ink 지면은 차분하지만 행동 요소와 링크가 본문
+잉크에 묻혔다. 배경은 노란 기를 더하지 않은 종이색으로 유지하고, 매화에서
+가져온 홍자주를 단일 포인트로 사용한다.
+
+## 결정
+
+- 기본 지면과 surface는 `#ECEEEF`로 둔다.
+- 본문과 링크 텍스트에는 `#A6294D`를 사용한다. `#ECEEEF` 위 대비는 5.92:1이다.
+- 버튼, 진행 표시, 선택된 페이지에는 `#D02D60`을 사용하고, 글자는 흰색으로
+  둔다. 흰색 위 대비는 4.97:1이다.
+- hover와 고대비 모드에서는 더 어두운 `#8F2044`를 사용한다.
+- 기존 Graphite Ink의 무채색 보조 텍스트와 구조선은 유지한다.
+
+## 결과
+
+- 긴 읽기 지면은 쿨그레이 톤을 유지한다.
+- 행동, 링크, 포커스가 한 가지 매화색 계열로 연결된다.
+- 같은 색을 텍스트와 버튼 배경에 무리하게 재사용하지 않아 접근성 대비를
+  유지한다.
+
+## 검토한 대안
+
+- `#D02D60` 단일 토큰: 버튼에는 적합하지만 `#ECEEEF` 위 본문 링크 대비가
+  4.27:1로 부족하다.
+- `#DC2A61`: 매화 인상은 강하지만 버튼 배경과 흰색 글자 대비가 4.62:1로
+  경계선에 가깝다.
+- 기존 무채색 포인트: 안전하지만 새 테마의 매화색 정체성이 드러나지 않는다.
+
+## Related History
+
+- [ADR 0034](0034-adopt-the-graphite-ink-palette.md): 기존 무채색 Graphite Ink
+  팔레트

docs/adr/README.md

@@ -1,6 +1,6 @@
 # Architecture Decision Records
 
-Last updated: 2026-07-24
+Last updated: 2026-07-31
 
 이 디렉터리는 커밋 히스토리에서 복원한 아키텍처 의사결정을 기록한다.
 ADR은 AI 협업 가이드와 별개의 문서다. 사람이 결정했든 AI가 초안을
@@ -71,6 +71,7 @@ ADR은 AI 협업 가이드와 별개의 문서다. 사람이 결정했든 AI가
 | [0051](0051-use-viewport-specific-reading-layout-and-type-scale.md)                 | Accepted   | viewport별 읽기 레이아웃과 타이포그래피 스케일을 사용한다     |
 | [0052](0052-use-repo-local-public-writing-review-workflow.md)                       | Accepted   | 공개 글 검토에 repo-local writing review workflow를 사용한다   |
 | [0053](0053-use-inline-table-of-contents-for-article-reading.md)                   | Accepted   | 글 읽기 흐름에 인라인 목차를 사용한다                         |
+| [0054](0054-adopt-cool-paper-and-plum-accent-palette.md)                            | Accepted   | 차가운 종이와 매화색 포인트 팔레트를 채택한다                 |
 
 ## 작성 조건
 

site/shell/AppShell/AppShell.test.tsx

@@ -27,6 +27,10 @@ describe('AppShell', () => {
       primaryNavigation.queryByRole('link', { name: 'Tech' })
     ).not.toBeInTheDocument();
     expect(screen.getAllByLabelText('Ark 외부 링크')).toHaveLength(1);
+    expect(screen.getByRole('link', { name: 'ark 홈으로 이동' })).toHaveTextContent(
+      'ark'
+    );
+    expect(screen.queryByAltText('')).not.toBeInTheDocument();
     expect(container.querySelector('footer')).toContainElement(
       screen.getByLabelText('Ark 외부 링크')
     );
@@ -47,5 +51,9 @@ describe('AppShell', () => {
       'aria-current',
       'page'
     );
+    expect(screen.getByAltText('')).toHaveAttribute(
+      'src',
+      '/brand/graphite-blossom-mark.svg'
+    );
   });
 });

site/shell/AppShell/AppShell.tsx

@@ -81,7 +81,15 @@
               aria-label="ark 홈으로 이동"
               className="ark-site-brand-link transition-colors hover:text-[var(--color-text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-bg-primary)]"
             >
-              ark
+              {pathname !== '/' ? (
+                <img
+                  src="/brand/graphite-blossom-mark.svg"
+                  alt=""
+                  aria-hidden="true"
+                  className="ark-site-brand-mark"
+                />
+              ) : null}
+              <span>ark</span>
             </Link>
           </header>
         </aside>

styles/globals.css

@@ -45,6 +45,7 @@
 .ark-site-brand-link {
   display: flex;
   align-items: center;
+  gap: var(--space-2);
   min-height: 3rem;
   color: var(--color-text-primary);
   font-size: var(--text-base);
@@ -54,6 +55,12 @@
   pointer-events: auto;
 }
 
+.ark-site-brand-mark {
+  width: 1.75rem;
+  height: 1.75rem;
+  flex: none;
+}
+
 .ark-site-content {
   grid-column: 2;
   grid-row: 1;
@@ -893,7 +900,7 @@
 
 .prose .workflow-scroll-fill {
   height: 100%;
-  background: var(--color-accent);
+  background: var(--color-accent-fill);
   transition: width 180ms ease;
 }
 

styles/globals.test.ts

@@ -92,7 +92,7 @@ describe('globals styles', () => {
   it('keeps inline code lighter than fenced code blocks', () => {
     expect(tokensContent).toContain('--color-code-inline-bg: #d8d8dc;');
     expect(tokensContent).toContain('--color-code-inline-fg: #52525b;');
-    expect(tokensContent).toContain('--color-code-bg: #3f3f46;');
+    expect(tokensContent).toContain('--color-code-bg: #252525;');
     expect(globalsContent).toContain(
       '.prose :not(pre) > code {\n  background-color: var(--color-code-inline-bg);'
     );

styles/tokens.css

@@ -6,9 +6,10 @@
   /* === Colors === */
 
   /* Accent */
-  --color-accent: #3f3f46;
-  --color-accent-hover: #252525;
-  --color-accent-foreground: #eaebea;
+  --color-accent: #a6294d;
+  --color-accent-fill: #d02d60;
+  --color-accent-hover: #8f2044;
+  --color-accent-foreground: #ffffff;
 
   /* Grey Scale */
   --color-grey-900: #252525;
@@ -28,10 +29,10 @@
   --color-text-tertiary: #62626a;
   --color-text-disabled: #94949a;
 
-  --color-bg-primary: #eaebea;
-  --color-bg-secondary: #e2e2e5;
-  --color-bg-tertiary: #d8d8dc;
-  --color-surface: #eaebea;
+  --color-bg-primary: #eceeef;
+  --color-bg-secondary: #e2e4e7;
+  --color-bg-tertiary: #d8dade;
+  --color-surface: #eceeef;
 
   --color-border: #c8c8cc;
   --color-border-hover: #94949a;
@@ -46,22 +47,22 @@
   --mobile-nav-shadow: 0 8px 24px rgba(37, 37, 37, 0.12);
   --mobile-nav-text: var(--color-text-secondary);
   --mobile-nav-active-text: var(--color-text-primary);
-  --mobile-nav-active-bg: #e0e1e3;
+  --mobile-nav-active-bg: #e1e4e7;
   --mobile-nav-active-border: var(--color-border);
   --mobile-nav-hover-bg: var(--color-bg-secondary);
-  --mobile-nav-focus-ring: var(--color-accent);
+  --mobile-nav-focus-ring: var(--color-accent-fill);
   --mobile-nav-focus-offset: var(--mobile-nav-bg);
 
   /* Code Block Colors */
-  --color-code-bg: #3f3f46;
-  --color-code-fg: #e2e2e5;
+  --color-code-bg: #252525;
+  --color-code-fg: #eceeef;
   --color-code-inline-bg: #d8d8dc;
   --color-code-inline-fg: #52525b;
-  --color-code-title-bg: #52525b;
-  --color-code-title-fg: #eaebea;
-  --color-code-highlight: rgba(234, 235, 234, 0.12);
-  --color-code-divider: rgba(234, 235, 234, 0.16);
-  --shiki-dark: #eaebea;
+  --color-code-title-bg: #3f3f46;
+  --color-code-title-fg: #eceeef;
+  --color-code-highlight: rgba(236, 238, 239, 0.12);
+  --color-code-divider: rgba(236, 238, 239, 0.16);
+  --shiki-dark: #eceeef;
 
   /* Feedback Colors */
   --color-success: #3f3f46;
@@ -254,7 +255,8 @@
     --color-border: #62626a;
     --color-border-hover: #3f3f46;
     --color-divider: #94949a;
-    --color-accent: #252525;
-    --color-accent-hover: #252525;
+    --color-accent: #8f2044;
+    --color-accent-fill: #a6294d;
+    --color-accent-hover: #8f2044;
   }
 }

styles/tokens.test.ts

@@ -31,17 +31,18 @@ describe('Ark paper token definitions', () => {
     expect(tokensContent).toContain('--mobile-nav-focus-offset');
   });
 
-  it('uses the Graphite Ink palette instead of dark-mode overrides', () => {
-    expect(tokensContent).toContain('--color-bg-primary: #eaebea;');
+  it('uses the cool-paper and plum palette instead of dark-mode overrides', () => {
+    expect(tokensContent).toContain('--color-bg-primary: #eceeef;');
     expect(tokensContent).toContain('--color-text-primary: #252525;');
-    expect(tokensContent).toContain('--color-accent: #3f3f46;');
-    expect(tokensContent).toContain('--color-surface: #eaebea;');
+    expect(tokensContent).toContain('--color-accent: #a6294d;');
+    expect(tokensContent).toContain('--color-accent-fill: #d02d60;');
+    expect(tokensContent).toContain('--color-surface: #eceeef;');
     expect(tokensContent).not.toContain('.dark {');
   });
 
   it('reuses the accent token for mobile navigation focus', () => {
     expect(tokensContent).toContain(
-      '--mobile-nav-focus-ring: var(--color-accent);'
+      '--mobile-nav-focus-ring: var(--color-accent-fill);'
     );
   });
 });

tooling/ark-graphite-intellij-theme/.gitignore

@@ -0,0 +1,3 @@
+/build/
+/dist/
+.DS_Store