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

차가운 종이와 매화색 팔레트, 로고와 favicon을 Ark에 적용했습니다.

IntelliJ Graphite Theme 소스와 Marketplace 자산을 함께 추가했습니다.

Author: dev-wooyeon

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/icon.png

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

app/icon.svg

@@ -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>

app/layout.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';

app/not-found.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/components/ReadingProgress/ReadingProgress.test.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)]'
                 )}
               >

blog/ui/components/ReadingProgress/ReadingProgress.tsx

@@ -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`

blog/ui/pages/EngineeringPageClient.tsx

@@ -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
+  팔레트