diff --git a/app/admin/members/page.tsx b/app/admin/members/page.tsx
index 028d3f3..98751f9 100644
--- a/app/admin/members/page.tsx
+++ b/app/admin/members/page.tsx
@@ -1,5 +1,12 @@
 import { requireAdmin } from "@/lib/guard";
 import { db } from "@/lib/db";
+import {
+  PageHeader,
+  PageShell,
+  SectionLabel,
+  SubNav,
+  UtilityCard,
+} from "@/components/layout/AppChrome";
 
 import { PendingMemberActions } from "./_components/PendingMemberActions";
 
@@ -28,74 +35,78 @@ export default async function AdminMembersPage() {
   });
 
   return (
-    <main className="container mx-auto max-w-2xl p-6">
-      <header className="mb-6 flex flex-col gap-1">
-        <h1 className="text-2xl font-bold tracking-tight">회원 관리</h1>
-        <p className="text-xs text-muted-foreground">
-          관리자: {admin.email}
-        </p>
-      </header>
+    <>
+      <SubNav title="회원 관리" />
+      <PageShell width="content" surface="parchment">
+        <PageHeader
+          eyebrow="Admin"
+          title="회원 관리"
+          description={`관리자: ${admin.email}`}
+        />
 
-      <section className="mb-10">
-        <h2 className="mb-3 text-sm font-semibold uppercase text-muted-foreground">
-          승인 대기 ({pending.length})
-        </h2>
-        {pending.length === 0 ? (
-          <p className="text-sm text-muted-foreground">대기 중인 가입 요청이 없습니다.</p>
-        ) : (
-          <ul className="flex flex-col gap-2">
-            {pending.map((u) => (
-              <li
-                key={u.id}
-                className="flex flex-col gap-2 rounded-md border p-3 sm:flex-row sm:items-center sm:justify-between"
-              >
-                <div className="flex flex-col">
-                  <span className="font-medium">{u.name}</span>
-                  <span className="font-mono text-xs text-muted-foreground">
-                    {u.email}
-                  </span>
-                  <span className="text-xs text-muted-foreground">
-                    가입 요청 {formatDate(u.joinedAt)}
-                  </span>
-                </div>
-                <PendingMemberActions userId={u.id} />
-              </li>
-            ))}
-          </ul>
-        )}
-      </section>
+        <div className="grid gap-8 lg:grid-cols-[1fr_1fr]">
+          <UtilityCard>
+            <SectionLabel>승인 대기 ({pending.length})</SectionLabel>
+            {pending.length === 0 ? (
+              <p className="font-text text-sm leading-[1.43] tracking-[-0.224px] text-apple-muted-48">
+                대기 중인 가입 요청이 없습니다.
+              </p>
+            ) : (
+              <ul className="flex flex-col gap-3">
+                {pending.map((u) => (
+                  <li
+                    key={u.id}
+                    className="flex flex-col gap-4 rounded-[18px] border border-apple-hairline bg-apple-parchment p-4"
+                  >
+                    <div className="flex flex-col gap-1">
+                      <span className="font-text text-[17px] font-semibold leading-[1.24] tracking-[-0.374px]">
+                        {u.name}
+                      </span>
+                      <span className="font-mono text-xs text-apple-muted-48">
+                        {u.email}
+                      </span>
+                      <span className="font-text text-xs leading-none tracking-[-0.12px] text-apple-muted-48">
+                        가입 요청 {formatDate(u.joinedAt)}
+                      </span>
+                    </div>
+                    <PendingMemberActions userId={u.id} />
+                  </li>
+                ))}
+              </ul>
+            )}
+          </UtilityCard>
 
-      <section>
-        <h2 className="mb-3 text-sm font-semibold uppercase text-muted-foreground">
-          활동 회원 ({active.length})
-        </h2>
-        <ul className="flex flex-col gap-2">
-          {active.map((u) => (
-            <li
-              key={u.id}
-              className="flex flex-col gap-1 rounded-md border p-3 sm:flex-row sm:items-center sm:justify-between"
-            >
-              <div className="flex flex-col">
-                <span className="font-medium">
-                  {u.name}
-                  {u.role === "ADMIN" && (
-                    <span className="ml-2 rounded bg-secondary px-1.5 py-0.5 text-xs">
-                      ADMIN
+          <UtilityCard>
+            <SectionLabel>활동 회원 ({active.length})</SectionLabel>
+            <ul className="flex flex-col gap-3">
+              {active.map((u) => (
+                <li
+                  key={u.id}
+                  className="flex flex-col gap-3 rounded-[18px] border border-apple-hairline bg-apple-parchment p-4 sm:flex-row sm:items-center sm:justify-between"
+                >
+                  <div className="flex flex-col gap-1">
+                    <span className="font-text text-[17px] font-semibold leading-[1.24] tracking-[-0.374px]">
+                      {u.name}
+                      {u.role === "ADMIN" && (
+                        <span className="ml-2 rounded-full bg-apple-canvas px-2 py-1 font-text text-xs font-normal leading-none tracking-[-0.12px] text-apple-primary">
+                          ADMIN
+                        </span>
+                      )}
                     </span>
-                  )}
-                </span>
-                <span className="font-mono text-xs text-muted-foreground">
-                  {u.email}
-                </span>
-              </div>
-              <span className="text-xs text-muted-foreground">
-                승인 {u.approvedAt ? formatDate(u.approvedAt) : "—"}
-              </span>
-            </li>
-          ))}
-        </ul>
-      </section>
-    </main>
+                    <span className="font-mono text-xs text-apple-muted-48">
+                      {u.email}
+                    </span>
+                  </div>
+                  <span className="font-text text-xs leading-none tracking-[-0.12px] text-apple-muted-48">
+                    승인 {u.approvedAt ? formatDate(u.approvedAt) : "—"}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </UtilityCard>
+        </div>
+      </PageShell>
+    </>
   );
 }
 
diff --git a/app/globals.css b/app/globals.css
index 6c329d1..1e42228 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -5,23 +5,23 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --foreground: 240 3% 12%;
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
-    --radius: 0.5rem;
+    --card-foreground: 240 3% 12%;
+    --primary: 210 100% 40%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 240 11% 96%;
+    --secondary-foreground: 240 3% 12%;
+    --muted: 240 11% 96%;
+    --muted-foreground: 0 0% 48%;
+    --accent: 210 100% 40%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 72% 51%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 88%;
+    --input: 0 0% 88%;
+    --ring: 209 100% 45%;
+    --radius: 18px;
   }
 }
 
@@ -30,7 +30,11 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply bg-apple-canvas font-text text-[17px] font-normal leading-[1.47] tracking-[-0.374px] text-apple-ink antialiased;
     font-feature-settings: "rlig" 1, "calt" 1;
   }
+
+  ::selection {
+    @apply bg-apple-primary text-white;
+  }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index ed34b41..ab88c02 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata, Viewport } from "next";
 import "./globals.css";
+import { GlobalNav } from "@/components/layout/AppChrome";
+import { auth } from "@/lib/auth";
 
 // NEXT_PUBLIC_APP_URL 이 비어 있으면 Next 기본(요청 host)을 쓴다.
 // local/prod 의 .env 에 외부 URL 을 넣어두면 OG 이미지/링크가 그 URL 기준이 됨.
@@ -30,17 +32,25 @@ export const metadata: Metadata = {
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
-  themeColor: "#ffffff",
+  themeColor: "#0066cc",
 };
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const session = await auth();
+
   return (
     <html lang="ko">
-      <body className="min-h-screen antialiased">{children}</body>
+      <body>
+        <GlobalNav
+          approved={Boolean(session?.user.approved)}
+          isAdmin={session?.user.role === "ADMIN"}
+        />
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/app/login/page.tsx b/app/login/page.tsx
index 3fbf7e3..ed86e86 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -2,6 +2,11 @@ import { redirect } from "next/navigation";
 
 import { auth, signIn } from "@/lib/auth";
 import { Button } from "@/components/ui/button";
+import {
+  PageHeader,
+  PageShell,
+  UtilityCard,
+} from "@/components/layout/AppChrome";
 
 type LoginPageProps = {
   searchParams: Promise<{ callbackUrl?: string; error?: string }>;
@@ -39,34 +44,39 @@ export default async function LoginPage({ searchParams }: LoginPageProps) {
   }
 
   return (
-    <main className="container mx-auto flex min-h-screen max-w-md flex-col items-center justify-center gap-8 p-6">
-      <div className="flex flex-col items-center gap-3 text-center">
-        <h1 className="text-3xl font-bold tracking-tight">뮤런</h1>
-        <p className="text-sm text-muted-foreground">
-          애니뮤 러닝 소모임 내부 아카이브.
-          <br />
-          SNU 구글 계정(<span className="font-mono">@snu.ac.kr</span>)으로 로그인하세요.
-        </p>
-      </div>
+    <PageShell width="narrow" surface="parchment">
+      <PageHeader
+        align="center"
+        eyebrow="SNU Google only"
+        title="뮤런"
+        description={
+          <>
+            애니뮤 러닝 소모임 내부 아카이브.
+            <br />SNU 구글 계정으로 로그인하세요.
+          </>
+        }
+      />
 
-      {errorMessage ? (
-        <div
-          role="alert"
-          className="w-full rounded-md border border-destructive/40 bg-destructive/10 px-4 py-3 text-sm text-destructive"
-        >
-          {errorMessage}
-        </div>
-      ) : null}
+      <UtilityCard className="flex flex-col gap-5">
+        {errorMessage ? (
+          <div
+            role="alert"
+            className="rounded-[18px] border border-destructive/40 bg-white px-5 py-4 font-text text-sm leading-[1.43] tracking-[-0.224px] text-destructive"
+          >
+            {errorMessage}
+          </div>
+        ) : null}
 
-      <form action={signInWithGoogle} className="w-full">
-        <Button type="submit" className="w-full" size="lg">
-          SNU 구글로 계속하기
-        </Button>
-      </form>
+        <form action={signInWithGoogle}>
+          <Button type="submit" className="w-full" size="lg">
+            SNU 구글로 계속하기
+          </Button>
+        </form>
+      </UtilityCard>
 
-      <p className="text-center text-xs text-muted-foreground">
+      <p className="mt-6 text-center font-text text-xs leading-none tracking-[-0.12px] text-apple-muted-48">
         첫 로그인 후 관리자 승인이 필요합니다.
       </p>
-    </main>
+    </PageShell>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
index 57d1c4e..c69c5b5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,6 +3,11 @@ import { redirect } from "next/navigation";
 
 import { auth, signOut } from "@/lib/auth";
 import { Button } from "@/components/ui/button";
+import {
+  PageHeader,
+  PageShell,
+  UtilityCard,
+} from "@/components/layout/AppChrome";
 
 export const dynamic = "force-dynamic";
 
@@ -17,38 +22,29 @@ export default async function HomePage() {
   }
 
   return (
-    <main className="container mx-auto flex min-h-screen max-w-md flex-col items-center justify-center gap-8 p-6">
-      <header className="flex flex-col items-center gap-2 text-center">
-        <h1 className="text-3xl font-bold tracking-tight">뮤런</h1>
-        <p className="text-sm text-muted-foreground">
-          안녕하세요, {session.user.name}.
-        </p>
-      </header>
+    <PageShell width="narrow" surface="parchment">
+      <PageHeader
+        align="center"
+        eyebrow="Animu Running Archive"
+        title="뮤런"
+        description={<>안녕하세요, {session.user.name}. 오늘의 러닝 기록을 남겨요.</>}
+      />
 
-      <div className="flex w-full flex-col gap-3">
-        <Link href="/sessions/new" className="w-full">
-          <Button className="w-full" size="lg">
-            새 세션 만들기
-          </Button>
-        </Link>
-        <Link href="/sessions" className="w-full">
-          <Button className="w-full" variant="outline" size="lg">
-            전체 아카이브
-          </Button>
-        </Link>
-        <Link href="/me" className="w-full">
-          <Button className="w-full" variant="outline" size="lg">
-            내 기록
-          </Button>
-        </Link>
-      </div>
+      <UtilityCard className="flex flex-col gap-3">
+        <Button asChild size="lg" className="w-full">
+          <Link href="/sessions/new">새 세션 만들기</Link>
+        </Button>
+        <Button asChild variant="outline" size="lg" className="w-full">
+          <Link href="/sessions">전체 아카이브</Link>
+        </Button>
+        <Button asChild variant="secondary" size="lg" className="w-full">
+          <Link href="/me">내 기록</Link>
+        </Button>
+      </UtilityCard>
 
-      <div className="flex items-center gap-4">
+      <div className="mt-8 flex items-center justify-center gap-5 font-text text-sm leading-[1.29] tracking-[-0.224px]">
         {session.user.role === "ADMIN" && (
-          <Link
-            href="/admin/members"
-            className="text-sm font-medium underline underline-offset-4"
-          >
+          <Link href="/admin/members" className="text-apple-primary underline-offset-4 hover:underline">
             회원 관리
           </Link>
         )}
@@ -58,6 +54,6 @@ export default async function HomePage() {
           </Button>
         </form>
       </div>
-    </main>
+    </PageShell>
   );
 }
diff --git a/app/pending/page.tsx b/app/pending/page.tsx
index e72ce08..6ee9d83 100644
--- a/app/pending/page.tsx
+++ b/app/pending/page.tsx
@@ -3,6 +3,11 @@ import { redirect } from "next/navigation";
 import { requireUser } from "@/lib/guard";
 import { signOut } from "@/lib/auth";
 import { Button } from "@/components/ui/button";
+import {
+  PageHeader,
+  PageShell,
+  UtilityCard,
+} from "@/components/layout/AppChrome";
 
 export default async function PendingPage() {
   const user = await requireUser();
@@ -14,24 +19,29 @@ export default async function PendingPage() {
   }
 
   return (
-    <main className="container mx-auto flex min-h-screen max-w-md flex-col items-center justify-center gap-6 p-6">
-      <div className="flex flex-col items-center gap-3 text-center">
-        <h1 className="text-2xl font-bold tracking-tight">승인 대기 중</h1>
-        <p className="text-sm text-muted-foreground">
-          <span className="font-mono">{user.email}</span> 으로 가입 요청을 보냈습니다.
-          <br />
-          애니뮤 운영진의 승인 후 이용할 수 있어요.
-        </p>
-        <p className="text-xs text-muted-foreground">
+    <PageShell width="narrow" surface="parchment">
+      <PageHeader
+        align="center"
+        eyebrow="Approval required"
+        title="승인 대기 중"
+        description={
+          <>
+            <span className="font-mono text-[0.9em]">{user.email}</span> 으로 가입 요청을 보냈습니다.
+            <br />운영진 승인 후 이용할 수 있어요.
+          </>
+        }
+      />
+
+      <UtilityCard className="flex flex-col gap-5 text-center">
+        <p className="font-text text-sm leading-[1.43] tracking-[-0.224px] text-apple-muted-48">
           단톡방에 운영진에게 가입 요청을 보냈다고 알려주세요.
         </p>
-      </div>
-
-      <form action={logout} className="w-full">
-        <Button type="submit" variant="outline" className="w-full">
-          로그아웃
-        </Button>
-      </form>
-    </main>
+        <form action={logout}>
+          <Button type="submit" variant="outline" className="w-full">
+            로그아웃
+          </Button>
+        </form>
+      </UtilityCard>
+    </PageShell>
   );
 }
diff --git a/app/runners/_components/MemberView.tsx b/app/runners/_components/MemberView.tsx
index cdf6f26..aef4e06 100644
--- a/app/runners/_components/MemberView.tsx
+++ b/app/runners/_components/MemberView.tsx
@@ -6,6 +6,14 @@ import {
   formatPace,
 } from "@/lib/pace";
 import type { MemberStats } from "@/lib/members";
+import {
+  BackLink,
+  PageHeader,
+  PageShell,
+  SectionLabel,
+  SubNav,
+  UtilityCard,
+} from "@/components/layout/AppChrome";
 
 import { PaceChart } from "./PaceChart";
 
@@ -17,113 +25,95 @@ type Props = {
 
 export function MemberView({ stats, isSelf }: Props) {
   return (
-    <main className="container mx-auto max-w-2xl p-6">
-      <nav className="mb-4 text-xs text-muted-foreground">
-        <Link href="/" className="underline-offset-4 hover:underline">
-          ← 홈
-        </Link>
-        <span className="mx-2">·</span>
-        <Link
-          href="/sessions"
-          className="underline-offset-4 hover:underline"
-        >
-          아카이브
-        </Link>
-      </nav>
-
-      <header className="mb-6 flex flex-col gap-1">
-        <h1 className="text-2xl font-bold tracking-tight">
-          {stats.name}
-          {stats.role === "ADMIN" && (
-            <span className="ml-2 rounded bg-secondary px-1.5 py-0.5 text-xs">
-              ADMIN
-            </span>
-          )}
-        </h1>
-        <p className="text-xs text-muted-foreground">
-          {isSelf ? "내 기록" : "러너 기록"} · 가입{" "}
-          {new Intl.DateTimeFormat("ko-KR", {
-            year: "numeric",
-            month: "2-digit",
-            day: "2-digit",
-          }).format(stats.joinedAt)}
-        </p>
-      </header>
-
-      <section className="mb-8 grid grid-cols-3 gap-3">
-        <Kpi
-          label="누적 거리"
-          value={
-            stats.totalDistanceKm > 0
-              ? `${stats.totalDistanceKm.toFixed(1)} km`
-              : "—"
+    <>
+      <SubNav title={isSelf ? "내 기록" : "러너 기록"}>
+        <BackLink href="/sessions">아카이브</BackLink>
+      </SubNav>
+      <PageShell width="content" surface="parchment">
+        <PageHeader
+          eyebrow={
+            <>
+              {isSelf ? "My running" : "Runner"} · 가입 {formatDate(stats.joinedAt)}
+            </>
           }
+          title={
+            <>
+              {stats.name}
+              {stats.role === "ADMIN" && (
+                <span className="ml-3 align-middle rounded-full bg-apple-canvas px-3 py-1 font-text text-xs font-normal leading-none tracking-[-0.12px] text-apple-primary">
+                  ADMIN
+                </span>
+              )}
+            </>
+          }
+          description="거리, 페이스, 최근 참여 기록을 한 화면에서 확인합니다."
         />
-        <Kpi label="참여 횟수" value={`${stats.participationCount} 회`} />
-        <Kpi
-          label="평균 페이스"
-          value={formatPace(stats.avgPaceSecPerKm)}
-          mono
-        />
-      </section>
 
-      <section className="mb-8 flex flex-col gap-3 rounded-md border p-4">
-        <header className="flex items-baseline justify-between">
-          <h2 className="text-sm font-semibold uppercase text-muted-foreground">
-            최근 페이스 추이
-          </h2>
-          {stats.paceHistory.length > 0 && (
-            <span className="text-xs text-muted-foreground">
-              최근 {stats.paceHistory.length} 개
-            </span>
-          )}
-        </header>
-        <PaceChart points={stats.paceHistory} />
-      </section>
+        <section className="mb-8 grid gap-4 sm:grid-cols-3">
+          <Kpi
+            label="누적 거리"
+            value={
+              stats.totalDistanceKm > 0
+                ? `${stats.totalDistanceKm.toFixed(1)} km`
+                : "—"
+            }
+          />
+          <Kpi label="참여 횟수" value={`${stats.participationCount} 회`} />
+          <Kpi
+            label="평균 페이스"
+            value={formatPace(stats.avgPaceSecPerKm)}
+            mono
+          />
+        </section>
+
+        <UtilityCard className="mb-8">
+          <div className="mb-4 flex items-baseline justify-between">
+            <SectionLabel>최근 페이스 추이</SectionLabel>
+            {stats.paceHistory.length > 0 && (
+              <span className="font-text text-xs leading-none tracking-[-0.12px] text-apple-muted-48">
+                최근 {stats.paceHistory.length} 개
+              </span>
+            )}
+          </div>
+          <PaceChart points={stats.paceHistory} />
+        </UtilityCard>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-sm font-semibold uppercase text-muted-foreground">
-          최근 참여 ({stats.recent.length})
-        </h2>
-        {stats.recent.length === 0 ? (
-          <p className="rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground">
-            아직 참여한 세션이 없어요.
-          </p>
-        ) : (
-          <ul className="flex flex-col divide-y rounded-md border">
-            {stats.recent.map((r) => (
-              <li
-                key={`${r.sessionId}-${r.date.toISOString()}`}
-                className="flex flex-col gap-1 p-3 sm:flex-row sm:items-center sm:justify-between"
-              >
-                <Link
-                  href={`/sessions/${r.sessionId}`}
-                  className="flex flex-col gap-0.5"
+        <UtilityCard>
+          <SectionLabel>최근 참여 ({stats.recent.length})</SectionLabel>
+          {stats.recent.length === 0 ? (
+            <p className="rounded-[18px] border border-dashed border-apple-hairline bg-apple-parchment p-8 text-center font-text text-sm leading-[1.43] tracking-[-0.224px] text-apple-muted-48">
+              아직 참여한 세션이 없어요.
+            </p>
+          ) : (
+            <ul className="flex flex-col gap-3">
+              {stats.recent.map((r) => (
+                <li
+                  key={`${r.sessionId}-${r.date.toISOString()}`}
+                  className="flex flex-col gap-3 rounded-[18px] border border-apple-hairline bg-apple-parchment p-4 sm:flex-row sm:items-center sm:justify-between"
                 >
-                  <span className="text-sm font-medium">
-                    {new Intl.DateTimeFormat("ko-KR", {
-                      year: "numeric",
-                      month: "2-digit",
-                      day: "2-digit",
-                    }).format(r.date)}
-                  </span>
-                  <span className="text-xs text-muted-foreground">
-                    {r.location}
-                  </span>
-                </Link>
-                <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1 text-xs text-muted-foreground">
-                  <span>{formatDistanceKm(r.distanceKm)}</span>
-                  <span>{formatDurationSec(r.durationSec)}</span>
-                  <span className="font-mono">
-                    {formatPace(r.paceSecPerKm)}
-                  </span>
-                </div>
-              </li>
-            ))}
-          </ul>
-        )}
-      </section>
-    </main>
+                  <Link
+                    href={`/sessions/${r.sessionId}`}
+                    className="flex flex-col gap-1"
+                  >
+                    <span className="font-text text-[17px] font-semibold leading-[1.24] tracking-[-0.374px] text-apple-primary underline-offset-4 hover:underline">
+                      {formatDate(r.date)}
+                    </span>
+                    <span className="font-text text-sm leading-[1.43] tracking-[-0.224px] text-apple-muted-48">
+                      {r.location}
+                    </span>
+                  </Link>
+                  <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1 font-text text-sm leading-[1.43] tracking-[-0.224px] text-apple-muted-48">
+                    <span>{formatDistanceKm(r.distanceKm)}</span>
+                    <span>{formatDurationSec(r.durationSec)}</span>
+                    <span className="font-mono">{formatPace(r.paceSecPerKm)}</span>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          )}
+        </UtilityCard>
+      </PageShell>
+    </>
   );
 }
 
@@ -137,11 +127,23 @@ function Kpi({
   mono?: boolean;
 }) {
   return (
-    <div className="flex flex-col gap-1 rounded-md border p-3">
-      <span className="text-xs uppercase text-muted-foreground">{label}</span>
-      <span className={`text-lg font-semibold ${mono ? "font-mono" : ""}`}>
+    <UtilityCard className="flex flex-col gap-2">
+      <span className="font-text text-xs uppercase leading-none tracking-[-0.12px] text-apple-muted-48">
+        {label}
+      </span>
+      <span
+        className={`font-display text-[28px] font-semibold leading-[1.14] tracking-[0.196px] ${mono ? "font-mono" : ""}`}
+      >
         {value}
       </span>
-    </div>
+    </UtilityCard>
   );
 }
+
+function formatDate(d: Date): string {
+  return new Intl.DateTimeFormat("ko-KR", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).format(d);
+}
diff --git a/app/runners/_components/PaceChart.tsx b/app/runners/_components/PaceChart.tsx
index 584ba67..1c95c27 100644
--- a/app/runners/_components/PaceChart.tsx
+++ b/app/runners/_components/PaceChart.tsx
@@ -21,7 +21,7 @@ const PAD_LEFT = 64;
 export function PaceChart({ points }: Props) {
   if (points.length === 0) {
     return (
-      <div className="flex aspect-[5/2] w-full items-center justify-center rounded-md border border-dashed text-xs text-muted-foreground">
+      <div className="flex aspect-[5/2] w-full items-center justify-center rounded-[18px] border border-dashed border-apple-hairline bg-apple-parchment font-text text-xs leading-none tracking-[-0.12px] text-apple-muted-48">
         페이스 데이터가 아직 없어요.
       </div>
     );
@@ -61,7 +61,7 @@ export function PaceChart({ points }: Props) {
       viewBox={`0 0 ${VB_WIDTH} ${VB_HEIGHT}`}
       role="img"
       aria-label="최근 페이스 추이"
-      className="w-full text-foreground"
+      className="w-full text-apple-primary"
     >
       <g transform={`translate(${PAD_LEFT} ${PAD_TOP})`}>
         {/* grid */}
diff --git a/app/sessions/[id]/_components/MyParticipationForm.tsx b/app/sessions/[id]/_components/MyParticipationForm.tsx
index dd5a1c4..5061838 100644
--- a/app/sessions/[id]/_components/MyParticipationForm.tsx
+++ b/app/sessions/[id]/_components/MyParticipationForm.tsx
@@ -4,6 +4,7 @@ import { useActionState } from "react";
 
 import { ErrorAlert } from "@/components/form/ErrorAlert";
 import { SubmitButton } from "@/components/form/SubmitButton";
+import { UtilityCard } from "@/components/layout/AppChrome";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -39,15 +40,19 @@ export function MyParticipationForm({ sessionId, existing }: Props) {
     upsertState && !upsertState.ok ? upsertState.error : null;
 
   return (
-    <section className="flex flex-col gap-4 rounded-md border p-4">
-      <header className="flex items-baseline justify-between">
-        <h3 className="text-sm font-semibold">내 기록</h3>
+    <UtilityCard className="flex flex-col gap-5 self-start lg:sticky lg:top-32">
+      <header className="flex items-baseline justify-between gap-3">
+        <h3 className="font-display text-[21px] font-semibold leading-[1.19] tracking-[0.231px]">
+          내 기록
+        </h3>
         {has && (
-          <span className="text-xs text-muted-foreground">현재 입력됨</span>
+          <span className="rounded-full bg-apple-parchment px-3 py-1 font-text text-xs leading-none tracking-[-0.12px] text-apple-muted-48">
+            현재 입력됨
+          </span>
         )}
       </header>
 
-      <form action={upsertAction} className="flex flex-col gap-4">
+      <form action={upsertAction} className="flex flex-col gap-5">
         <input type="hidden" name="sessionId" value={sessionId} />
 
         <ErrorAlert message={upsertError} />
@@ -69,7 +74,7 @@ export function MyParticipationForm({ sessionId, existing }: Props) {
 
         <div className="flex flex-col gap-2">
           <Label>기록</Label>
-          <div className="flex items-center gap-2">
+          <div className="grid grid-cols-[1fr_auto_1fr_auto] items-center gap-2">
             <Input
               name="durationMin"
               type="number"
@@ -78,10 +83,9 @@ export function MyParticipationForm({ sessionId, existing }: Props) {
               max="1440"
               placeholder="분"
               defaultValue={minutes}
-              className="w-24"
               aria-label="기록 (분)"
             />
-            <span className="text-muted-foreground">분</span>
+            <span className="text-apple-muted-48">분</span>
             <Input
               name="durationSec"
               type="number"
@@ -90,10 +94,9 @@ export function MyParticipationForm({ sessionId, existing }: Props) {
               max="59"
               placeholder="초"
               defaultValue={seconds}
-              className="w-24"
               aria-label="기록 (초)"
             />
-            <span className="text-muted-foreground">초</span>
+            <span className="text-apple-muted-48">초</span>
           </div>
         </div>
 
@@ -127,6 +130,6 @@ export function MyParticipationForm({ sessionId, existing }: Props) {
           />
         </form>
       )}
-    </section>
+    </UtilityCard>
   );
 }
diff --git a/app/sessions/[id]/_components/PhotoReplaceButton.tsx b/app/sessions/[id]/_components/PhotoReplaceButton.tsx
index 081bc71..eac9e17 100644
--- a/app/sessions/[id]/_components/PhotoReplaceButton.tsx
+++ b/app/sessions/[id]/_components/PhotoReplaceButton.tsx
@@ -37,7 +37,7 @@ export function PhotoReplaceButton({
   return (
     <form ref={formRef} action={formAction} className="inline-flex">
       <input type="hidden" name="sessionId" value={sessionId} />
-      <label className="cursor-pointer text-muted-foreground underline underline-offset-4 hover:text-foreground">
+      <label className="cursor-pointer font-text text-sm leading-[1.29] tracking-[-0.224px] text-apple-primary underline underline-offset-4 hover:text-apple-ink">
         교체
         <input
           type="file"
diff --git a/app/sessions/[id]/_components/PhotoSection.tsx b/app/sessions/[id]/_components/PhotoSection.tsx
index e804d5e..e5cf8d9 100644
--- a/app/sessions/[id]/_components/PhotoSection.tsx
+++ b/app/sessions/[id]/_components/PhotoSection.tsx
@@ -80,8 +80,8 @@ export function PhotoSection({
   if (groupPhotoPath) {
     const src = `/api/uploads/${encodeUploadPath(groupPhotoPath)}`;
     return (
-      <section className="mb-6">
-        <div className="relative aspect-video w-full overflow-hidden rounded-md border bg-muted">
+      <section className="mb-10">
+        <div className="relative aspect-video w-full overflow-hidden rounded-[18px] border border-apple-hairline bg-apple-parchment">
           <Image
             src={src}
             alt={altText}
@@ -92,9 +92,9 @@ export function PhotoSection({
           />
         </div>
         {canEdit && (
-          <div className="mt-2 flex flex-col gap-2">
+          <div className="mt-3 flex flex-col gap-3">
             <ErrorAlert message={error} />
-            <div className="flex gap-3 text-xs">
+            <div className="flex gap-4 font-text text-sm leading-[1.29] tracking-[-0.224px]">
               <PhotoReplaceButton
                 sessionId={sessionId}
                 formAction={uploadAction}
@@ -105,7 +105,7 @@ export function PhotoSection({
                 <SubmitButton
                   variant="ghost"
                   size="sm"
-                  className="h-auto p-0 text-xs text-muted-foreground underline underline-offset-4 hover:text-destructive"
+                  className="h-auto rounded-none p-0 text-sm text-apple-primary underline underline-offset-4 hover:text-destructive"
                   idleLabel="삭제"
                   pendingLabel="삭제 중..."
                 />
@@ -119,13 +119,13 @@ export function PhotoSection({
 
   if (canEdit) {
     return (
-      <section className="mb-6 flex flex-col gap-3 rounded-md border border-dashed p-4">
-        <p className="text-xs text-muted-foreground">단체사진 (선택)</p>
+      <section className="mb-10 flex flex-col gap-4 rounded-[18px] border border-dashed border-apple-hairline bg-apple-canvas p-6">
+        <p className="font-text text-sm font-semibold leading-[1.29] tracking-[-0.224px] text-apple-ink">단체사진 (선택)</p>
         <ErrorAlert message={error} />
         <form
           action={uploadAction}
           onSubmit={handleUploadSubmit}
-          className="flex flex-col gap-2 sm:flex-row sm:items-center"
+          className="flex flex-col gap-3 sm:flex-row sm:items-center"
         >
           <input type="hidden" name="sessionId" value={sessionId} />
           <input
@@ -134,7 +134,7 @@ export function PhotoSection({
             accept={ALLOWED_ACCEPT_ATTR}
             required
             onChange={handleFileChange}
-            className="block w-full text-sm file:mr-3 file:rounded-md file:border file:border-input file:bg-background file:px-3 file:py-1.5 file:text-sm file:font-medium hover:file:bg-accent"
+            className="block w-full font-text text-sm leading-[1.43] tracking-[-0.224px] text-apple-muted-48 file:mr-3 file:rounded-full file:border file:border-apple-primary file:bg-apple-canvas file:px-4 file:py-2 file:text-sm file:font-normal file:text-apple-primary"
           />
           <SubmitButton
             size="sm"
@@ -142,7 +142,7 @@ export function PhotoSection({
             pendingLabel="올리는 중..."
           />
         </form>
-        <p className="text-xs text-muted-foreground">
+        <p className="font-text text-xs leading-none tracking-[-0.12px] text-apple-muted-48">
           jpg / png / webp / heic, 최대 {MAX_UPLOAD_MB}MB.
         </p>
       </section>
@@ -150,8 +150,8 @@ export function PhotoSection({
   }
 
   return (
-    <section className="mb-6 aspect-video w-full rounded-md border border-dashed bg-muted/40 flex items-center justify-center">
-      <span className="text-xs text-muted-foreground">사진 없음</span>
+    <section className="mb-10 flex aspect-video w-full items-center justify-center rounded-[18px] border border-dashed border-apple-hairline bg-apple-canvas">
+      <span className="font-text text-xs leading-none tracking-[-0.12px] text-apple-muted-48">사진 없음</span>
     </section>
   );
 }
diff --git a/app/sessions/[id]/edit/_components/EditSessionForm.tsx b/app/sessions/[id]/edit/_components/EditSessionForm.tsx
index ad993d5..181c58c 100644
--- a/app/sessions/[id]/edit/_components/EditSessionForm.tsx
+++ b/app/sessions/[id]/edit/_components/EditSessionForm.tsx
@@ -4,6 +4,7 @@ import { useActionState } from "react";
 
 import { ErrorAlert } from "@/components/form/ErrorAlert";
 import { SubmitButton } from "@/components/form/SubmitButton";
+import { UtilityCard } from "@/components/layout/AppChrome";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
@@ -29,90 +30,104 @@ export function EditSessionForm({ session }: Props) {
 
   return (
     <div className="flex flex-col gap-8">
-      <form action={updateAction} className="flex flex-col gap-5 rounded-md border p-4">
-        <input type="hidden" name="sessionId" value={session.id} />
-        <ErrorAlert message={updateError} />
+      <UtilityCard>
+        <form action={updateAction} className="flex flex-col gap-5">
+          <input type="hidden" name="sessionId" value={session.id} />
+          <ErrorAlert message={updateError} />
 
-        <div className="flex flex-col gap-2">
-          <Label htmlFor="date">날짜</Label>
-          <Input id="date" name="date" type="date" defaultValue={session.date} required />
-        </div>
+          <div className="grid gap-5 sm:grid-cols-2">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="date">날짜</Label>
+              <Input
+                id="date"
+                name="date"
+                type="date"
+                defaultValue={session.date}
+                required
+              />
+            </div>
 
-        <div className="flex flex-col gap-2">
-          <Label htmlFor="startTime">시작 시간 (선택)</Label>
-          <Input
-            id="startTime"
-            name="startTime"
-            type="time"
-            defaultValue={session.startTime}
-            placeholder="예: 19:30"
-          />
-        </div>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="startTime">시작 시간 (선택)</Label>
+              <Input
+                id="startTime"
+                name="startTime"
+                type="time"
+                defaultValue={session.startTime}
+                placeholder="예: 19:30"
+              />
+            </div>
+          </div>
 
-        <div className="flex flex-col gap-2">
-          <Label htmlFor="location">장소</Label>
-          <Input
-            id="location"
-            name="location"
-            type="text"
-            required
-            maxLength={120}
-            defaultValue={session.location}
-            placeholder="예: 서울숲 입구"
-          />
-        </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="location">장소</Label>
+            <Input
+              id="location"
+              name="location"
+              type="text"
+              required
+              maxLength={120}
+              defaultValue={session.location}
+              placeholder="예: 서울숲 입구"
+            />
+          </div>
 
-        <div className="flex flex-col gap-2">
-          <Label htmlFor="weather">날씨 (선택)</Label>
-          <Input
-            id="weather"
-            name="weather"
-            type="text"
-            maxLength={120}
-            defaultValue={session.weather}
-            placeholder="예: 맑음 / 22°C"
-          />
-        </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="weather">날씨 (선택)</Label>
+            <Input
+              id="weather"
+              name="weather"
+              type="text"
+              maxLength={120}
+              defaultValue={session.weather}
+              placeholder="예: 맑음 / 22°C"
+            />
+          </div>
 
-        <div className="flex flex-col gap-2">
-          <Label htmlFor="notes">코스 메모 (선택)</Label>
-          <Textarea
-            id="notes"
-            name="notes"
-            maxLength={2000}
-            defaultValue={session.notes}
-            placeholder="코스, 페이스 권장, 모임 후 식당 등"
-            rows={5}
-          />
-        </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="notes">코스 메모 (선택)</Label>
+            <Textarea
+              id="notes"
+              name="notes"
+              maxLength={2000}
+              defaultValue={session.notes}
+              placeholder="코스, 페이스 권장, 모임 후 식당 등"
+              rows={5}
+            />
+          </div>
 
-        <SubmitButton idleLabel="세션 수정" pendingLabel="저장 중..." />
-      </form>
+          <SubmitButton idleLabel="세션 수정" pendingLabel="저장 중..." />
+        </form>
+      </UtilityCard>
 
-      <form action={deleteAction} className="flex flex-col gap-4 rounded-md border border-destructive/40 bg-destructive/5 p-4">
-        <input type="hidden" name="sessionId" value={session.id} />
-        <div className="flex flex-col gap-1">
-          <h2 className="text-sm font-semibold text-destructive">세션 삭제</h2>
-          <p className="text-sm text-muted-foreground">
-            세션, 참여 기록, 단체사진 파일을 삭제합니다. 삭제 후에는 되돌릴 수 없습니다.
-          </p>
-        </div>
-        <ErrorAlert message={deleteError} />
-        <label className="flex items-center gap-2 text-sm">
-          <input
-            type="checkbox"
-            name="confirmDelete"
-            value="yes"
-            className="size-4"
+      <UtilityCard className="border-destructive/40 bg-white">
+        <form action={deleteAction} className="flex flex-col gap-4">
+          <input type="hidden" name="sessionId" value={session.id} />
+          <div className="flex flex-col gap-2">
+            <h2 className="font-text text-[17px] font-semibold leading-[1.24] tracking-[-0.374px] text-destructive">
+              세션 삭제
+            </h2>
+            <p className="font-text text-sm leading-[1.43] tracking-[-0.224px] text-apple-muted-48">
+              세션, 참여 기록, 단체사진 파일을 삭제합니다. 삭제 후에는 되돌릴 수 없습니다.
+            </p>
+          </div>
+          <ErrorAlert message={deleteError} />
+          <label className="flex items-center gap-3 font-text text-sm leading-[1.43] tracking-[-0.224px] text-apple-ink">
+            <input
+              type="checkbox"
+              name="confirmDelete"
+              value="yes"
+              className="size-4 accent-apple-primary"
+            />
+            이 세션을 삭제한다는 것을 확인했습니다.
+          </label>
+          <SubmitButton
+            variant="destructive"
+            idleLabel="세션 삭제"
+            pendingLabel="삭제 중..."
           />
-          이 세션을 삭제한다는 것을 확인했습니다.
-        </label>
-        <SubmitButton
-          variant="destructive"
-          idleLabel="세션 삭제"
-          pendingLabel="삭제 중..."
-        />
-      </form>
+        </form>
+      </UtilityCard>
     </div>
   );
 }
diff --git a/app/sessions/[id]/edit/page.tsx b/app/sessions/[id]/edit/page.tsx
index 3fb2af9..0c936fd 100644
--- a/app/sessions/[id]/edit/page.tsx
+++ b/app/sessions/[id]/edit/page.tsx
@@ -1,10 +1,15 @@
 import type { Metadata } from "next";
-import Link from "next/link";
 import { notFound } from "next/navigation";
 
 import { db } from "@/lib/db";
 import { requireHostOrAdmin } from "@/lib/guard";
 import { dateInputValue } from "@/lib/session-form";
+import {
+  BackLink,
+  PageHeader,
+  PageShell,
+  SubNav,
+} from "@/components/layout/AppChrome";
 
 import { EditSessionForm } from "./_components/EditSessionForm";
 
@@ -47,34 +52,28 @@ export default async function EditSessionPage({ params }: PageProps) {
   if (!session) notFound();
 
   return (
-    <main className="container mx-auto max-w-2xl p-6">
-      <nav className="mb-4 text-xs text-muted-foreground">
-        <Link
-          href={`/sessions/${session.id}`}
-          className="underline-offset-4 hover:underline"
-        >
-          ← 세션으로 돌아가기
-        </Link>
-      </nav>
-
-      <header className="mb-6 flex flex-col gap-1">
-        <h1 className="text-2xl font-bold tracking-tight">세션 수정</h1>
-        <p className="text-sm text-muted-foreground">
-          날짜·장소·시간·날씨·메모를 수정하거나 세션을 삭제합니다.
-        </p>
-      </header>
-
-      <EditSessionForm
-        session={{
-          id: session.id,
-          date: dateInputValue(session.date),
-          startTime: session.startTime ?? "",
-          location: session.location,
-          weather: session.weather ?? "",
-          notes: session.notes ?? "",
-        }}
-      />
-    </main>
+    <>
+      <SubNav title="세션 수정">
+        <BackLink href={`/sessions/${session.id}`}>세션으로 돌아가기</BackLink>
+      </SubNav>
+      <PageShell width="content" surface="parchment">
+        <PageHeader
+          eyebrow="Edit"
+          title="세션 수정"
+          description="날짜·장소·시간·날씨·메모를 정리하거나 세션을 삭제합니다."
+        />
+        <EditSessionForm
+          session={{
+            id: session.id,
+            date: dateInputValue(session.date),
+            startTime: session.startTime ?? "",
+            location: session.location,
+            weather: session.weather ?? "",
+            notes: session.notes ?? "",
+          }}
+        />
+      </PageShell>
+    </>
   );
 }
 
diff --git a/app/sessions/[id]/page.tsx b/app/sessions/[id]/page.tsx
index 0432a5d..297b3f8 100644
--- a/app/sessions/[id]/page.tsx
+++ b/app/sessions/[id]/page.tsx
@@ -5,6 +5,14 @@ import { notFound } from "next/navigation";
 import { db } from "@/lib/db";
 import { Button } from "@/components/ui/button";
 import { requireApproved } from "@/lib/guard";
+import {
+  BackLink,
+  PageHeader,
+  PageShell,
+  SectionLabel,
+  SubNav,
+  UtilityCard,
+} from "@/components/layout/AppChrome";
 import {
   calcPaceSecPerKm,
   formatDistanceKm,
@@ -78,125 +86,122 @@ export default async function SessionDetailPage({ params }: PageProps) {
     0,
   );
 
+  const metaLine = [
+    sessionRow.startTime ? `시작 ${sessionRow.startTime}` : null,
+    sessionRow.weather,
+    `호스트 ${sessionRow.host.name}`,
+  ]
+    .filter(Boolean)
+    .join(" · ");
+
   return (
-    <main className="container mx-auto max-w-2xl p-6">
-      <nav className="mb-4 text-xs text-muted-foreground">
-        <Link href="/" className="underline-offset-4 hover:underline">
-          ← 홈
-        </Link>
-      </nav>
-
-      <header className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-        <div className="flex flex-col gap-1">
-          <h1 className="text-2xl font-bold tracking-tight">
-            {formatDateHeader(sessionRow.date)} · {sessionRow.location}
-          </h1>
-          <p className="text-sm text-muted-foreground">
-            {sessionRow.startTime && (
-              <span>시작 {sessionRow.startTime} · </span>
-            )}
-            {sessionRow.weather && <span>{sessionRow.weather} · </span>}
-            호스트:{" "}
-            <Link
-              href={
-                sessionRow.host.id === user.id
-                  ? "/me"
-                  : `/runners/${sessionRow.host.id}`
-              }
-              className="underline-offset-4 hover:underline"
-            >
-              {sessionRow.host.name}
-            </Link>
-          </p>
-        </div>
+    <>
+      <SubNav title="세션">
+        <BackLink href="/sessions">아카이브</BackLink>
         {isHostOrAdmin && (
           <Button asChild variant="outline" size="sm">
             <Link href={`/sessions/${sessionRow.id}/edit`}>세션 수정</Link>
           </Button>
         )}
-      </header>
-
-      <PhotoSection
-        sessionId={sessionRow.id}
-        groupPhotoPath={sessionRow.groupPhotoPath}
-        canEdit={isHostOrAdmin}
-        altText={`${formatDateHeader(sessionRow.date)} ${sessionRow.location} 단체사진`}
-      />
-
-      <section className="mb-8">
-        <h2 className="mb-3 text-sm font-semibold uppercase text-muted-foreground">
-          참여자 ({sessionRow.participations.length})
-          {totalDistance > 0 && (
-            <span className="ml-2 normal-case text-foreground/80">
-              · 총 {totalDistance.toFixed(1)} km
-            </span>
-          )}
-        </h2>
-
-        {sessionRow.participations.length === 0 ? (
-          <p className="text-sm text-muted-foreground">
-            아직 참여자가 없습니다. 아래에서 본인 기록을 추가하세요.
-          </p>
-        ) : (
-          <ul className="flex flex-col divide-y rounded-md border">
-            {sessionRow.participations.map((p) => {
-              const pace = calcPaceSecPerKm(p.distanceKm, p.durationSec);
-              const isMine = p.userId === user.id;
-              return (
-                <li
-                  key={p.id}
-                  className="flex flex-col gap-1 p-3 sm:flex-row sm:items-center sm:justify-between"
-                >
-                  <div className="flex items-baseline gap-2">
-                    <Link
-                      href={isMine ? "/me" : `/runners/${p.userId}`}
-                      className="font-medium underline-offset-4 hover:underline"
-                    >
-                      {p.user.name}
-                    </Link>
-                    {isMine && (
-                      <span className="text-xs text-muted-foreground">(나)</span>
-                    )}
-                  </div>
-                  <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1 text-sm text-muted-foreground">
-                    <span>{formatDistanceKm(p.distanceKm)}</span>
-                    <span>{formatDurationSec(p.durationSec)}</span>
-                    <span className="font-mono">{formatPace(pace)}</span>
-                  </div>
-                  {p.note && (
-                    <p className="text-xs text-muted-foreground sm:hidden">
-                      {p.note}
-                    </p>
-                  )}
-                </li>
-              );
-            })}
-          </ul>
-        )}
-      </section>
-
-      <MyParticipationForm
-        sessionId={sessionRow.id}
-        existing={
-          myRow
-            ? {
-                distanceKm: myRow.distanceKm,
-                durationSec: myRow.durationSec,
-                note: myRow.note,
-              }
-            : null
-        }
-      />
-
-      {sessionRow.notes && (
-        <section className="mt-6">
-          <h2 className="mb-2 text-sm font-semibold uppercase text-muted-foreground">
-            코스 메모
-          </h2>
-          <p className="whitespace-pre-wrap text-sm">{sessionRow.notes}</p>
-        </section>
-      )}
-    </main>
+      </SubNav>
+
+      <PageShell width="content" surface="parchment">
+        <PageHeader
+          eyebrow={formatDateHeader(sessionRow.date)}
+          title={sessionRow.location}
+          description={metaLine}
+        />
+
+        <PhotoSection
+          sessionId={sessionRow.id}
+          groupPhotoPath={sessionRow.groupPhotoPath}
+          canEdit={isHostOrAdmin}
+          altText={`${formatDateHeader(sessionRow.date)} ${sessionRow.location} 단체사진`}
+        />
+
+        <div className="grid gap-8 lg:grid-cols-[1fr_360px]">
+          <div className="flex flex-col gap-8">
+            <UtilityCard>
+              <SectionLabel>
+                참여자 ({sessionRow.participations.length})
+                {totalDistance > 0 && (
+                  <span className="ml-2 normal-case text-apple-muted-80">
+                    · 총 {totalDistance.toFixed(1)} km
+                  </span>
+                )}
+              </SectionLabel>
+
+              {sessionRow.participations.length === 0 ? (
+                <p className="font-text text-sm leading-[1.43] tracking-[-0.224px] text-apple-muted-48">
+                  아직 참여자가 없습니다. 아래에서 본인 기록을 추가하세요.
+                </p>
+              ) : (
+                <ul className="flex flex-col gap-3">
+                  {sessionRow.participations.map((p) => {
+                    const pace = calcPaceSecPerKm(p.distanceKm, p.durationSec);
+                    const isMine = p.userId === user.id;
+                    return (
+                      <li
+                        key={p.id}
+                        className="rounded-[18px] border border-apple-hairline bg-apple-parchment p-4"
+                      >
+                        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+                          <div className="flex items-baseline gap-2">
+                            <Link
+                              href={isMine ? "/me" : `/runners/${p.userId}`}
+                              className="font-text text-[17px] font-semibold leading-[1.24] tracking-[-0.374px] text-apple-primary underline-offset-4 hover:underline"
+                            >
+                              {p.user.name}
+                            </Link>
+                            {isMine && (
+                              <span className="font-text text-xs leading-none tracking-[-0.12px] text-apple-muted-48">
+                                (나)
+                              </span>
+                            )}
+                          </div>
+                          <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1 font-text text-sm leading-[1.43] tracking-[-0.224px] text-apple-muted-48">
+                            <span>{formatDistanceKm(p.distanceKm)}</span>
+                            <span>{formatDurationSec(p.durationSec)}</span>
+                            <span className="font-mono">{formatPace(pace)}</span>
+                          </div>
+                        </div>
+                        {p.note && (
+                          <p className="mt-2 font-text text-sm leading-[1.43] tracking-[-0.224px] text-apple-muted-48">
+                            {p.note}
+                          </p>
+                        )}
+                      </li>
+                    );
+                  })}
+                </ul>
+              )}
+            </UtilityCard>
+
+            {sessionRow.notes && (
+              <UtilityCard>
+                <SectionLabel>코스 메모</SectionLabel>
+                <p className="whitespace-pre-wrap font-text text-[17px] leading-[1.47] tracking-[-0.374px] text-apple-ink">
+                  {sessionRow.notes}
+                </p>
+              </UtilityCard>
+            )}
+          </div>
+
+          <MyParticipationForm
+            sessionId={sessionRow.id}
+            existing={
+              myRow
+                ? {
+                    distanceKm: myRow.distanceKm,
+                    durationSec: myRow.durationSec,
+                    note: myRow.note,
+                  }
+                : null
+            }
+          />
+        </div>
+      </PageShell>
+    </>
   );
 }
 
diff --git a/app/sessions/_components/EmptyState.tsx b/app/sessions/_components/EmptyState.tsx
index 057772e..55c6df6 100644
--- a/app/sessions/_components/EmptyState.tsx
+++ b/app/sessions/_components/EmptyState.tsx
@@ -1,17 +1,18 @@
 import Link from "next/link";
 
 import { Button } from "@/components/ui/button";
+import { UtilityCard } from "@/components/layout/AppChrome";
 
 export function EmptyState() {
   return (
-    <section className="flex flex-col items-center gap-4 rounded-md border border-dashed p-10 text-center">
-      <p className="text-sm text-muted-foreground">
+    <UtilityCard className="flex flex-col items-center gap-5 border-dashed text-center">
+      <p className="font-display text-[24px] font-light leading-[1.5] tracking-normal text-apple-muted-80">
         아직 활동 기록이 없어요.
         <br />첫 세션을 만들어 시즌을 시작하세요.
       </p>
-      <Link href="/sessions/new">
-        <Button>새 세션 만들기</Button>
-      </Link>
-    </section>
+      <Button asChild>
+        <Link href="/sessions/new">새 세션 만들기</Link>
+      </Button>
+    </UtilityCard>
   );
 }
diff --git a/app/sessions/_components/FilterBar.tsx b/app/sessions/_components/FilterBar.tsx
index 2be662a..882ac32 100644
--- a/app/sessions/_components/FilterBar.tsx
+++ b/app/sessions/_components/FilterBar.tsx
@@ -36,13 +36,11 @@ export function FilterBar({
   return (
     <form
       method="get"
-      className="mb-6 flex flex-col gap-3 rounded-md border bg-muted/30 p-4"
+      className="mb-10 rounded-[18px] border border-apple-hairline bg-apple-canvas p-6"
     >
-      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
-        <div className="flex flex-col gap-1">
-          <Label htmlFor="f-q" className="text-xs">
-            장소
-          </Label>
+      <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="f-q">장소</Label>
           <Input
             id="f-q"
             name="q"
@@ -53,8 +51,18 @@ export function FilterBar({
           />
         </div>
 
-        <fieldset className="flex flex-col gap-2 sm:col-span-2">
-          <legend className="text-xs font-medium text-[#1d1d1f]">
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="f-month">월</Label>
+          <Input
+            id="f-month"
+            name="month"
+            type="month"
+            defaultValue={month}
+          />
+        </div>
+
+        <fieldset className="flex flex-col gap-3 sm:col-span-2">
+          <legend className="font-text text-sm font-semibold leading-[1.29] tracking-[-0.224px] text-apple-ink">
             참여 멤버
           </legend>
           {members.length > 0 ? (
@@ -73,7 +81,7 @@ export function FilterBar({
                     />
                     <Label
                       htmlFor={inputId}
-                      className="inline-flex min-h-9 cursor-pointer items-center rounded-full border border-[#e0e0e0] bg-white px-4 py-2 text-sm text-[#1d1d1f] transition-colors peer-checked:border-[#0066cc] peer-checked:text-[#0066cc] peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[#0071e3]"
+                      className="inline-flex min-h-11 cursor-pointer items-center rounded-full border border-apple-hairline bg-apple-canvas px-4 py-2 font-text text-sm font-normal leading-[1.43] tracking-[-0.224px] text-apple-ink transition-transform active:scale-95 peer-checked:border-apple-focus peer-checked:text-apple-primary peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-apple-focus"
                     >
                       {m.name}
                     </Label>
@@ -82,27 +90,17 @@ export function FilterBar({
               })}
             </div>
           ) : (
-            <p className="text-xs text-[#7a7a7a]">승인된 멤버가 없어요.</p>
+            <p className="font-text text-xs leading-none tracking-[-0.12px] text-apple-muted-48">
+              승인된 멤버가 없어요.
+            </p>
           )}
-          <p className="text-xs text-[#7a7a7a]">
+          <p className="font-text text-xs leading-none tracking-[-0.12px] text-apple-muted-48">
             여러 명을 선택하면 모두 참여한 세션만 보여줘요.
           </p>
         </fieldset>
 
-        <div className="flex flex-col gap-1">
-          <Label htmlFor="f-month" className="text-xs">
-            월
-          </Label>
-          <Input
-            id="f-month"
-            name="month"
-            type="month"
-            defaultValue={month}
-          />
-        </div>
-
-        <div className="flex flex-col gap-1">
-          <Label className="text-xs">참여 인원</Label>
+        <div className="flex flex-col gap-2">
+          <Label className="text-sm">참여 인원</Label>
           <div className="flex items-center gap-2">
             <Input
               name="pmin"
@@ -114,7 +112,7 @@ export function FilterBar({
               className="w-full"
               aria-label="참여 인원 최소"
             />
-            <span className="text-muted-foreground">~</span>
+            <span className="text-apple-muted-48">~</span>
             <Input
               name="pmax"
               type="number"
@@ -129,11 +127,11 @@ export function FilterBar({
         </div>
       </div>
 
-      <div className="flex items-center justify-end gap-2">
+      <div className="mt-6 flex items-center justify-end gap-3">
         {hasActiveFilters && (
           <Link
             href="/sessions"
-            className="text-xs text-muted-foreground underline underline-offset-4 hover:text-foreground"
+            className="font-text text-sm leading-[1.29] tracking-[-0.224px] text-apple-primary underline-offset-4 hover:underline"
           >
             필터 초기화
           </Link>
diff --git a/app/sessions/_components/SessionCard.tsx b/app/sessions/_components/SessionCard.tsx
index 45155e0..5f71ac3 100644
--- a/app/sessions/_components/SessionCard.tsx
+++ b/app/sessions/_components/SessionCard.tsx
@@ -22,9 +22,9 @@ export function SessionCard(props: Props) {
   return (
     <Link
       href={`/sessions/${props.id}`}
-      className="block overflow-hidden rounded-md border bg-card transition-colors hover:bg-accent/30"
+      className="group block overflow-hidden rounded-[18px] border border-apple-hairline bg-apple-canvas p-3 text-apple-ink transition-transform active:scale-[0.99]"
     >
-      <div className="relative aspect-video w-full bg-muted">
+      <div className="relative aspect-video w-full overflow-hidden rounded-lg bg-apple-parchment">
         {photoSrc ? (
           <Image
             src={photoSrc}
@@ -35,20 +35,24 @@ export function SessionCard(props: Props) {
             sizes="(max-width: 768px) 100vw, 480px"
           />
         ) : (
-          <div className="flex h-full items-center justify-center text-xs text-muted-foreground">
+          <div className="flex h-full items-center justify-center font-text text-xs leading-none tracking-[-0.12px] text-apple-muted-48">
             사진 없음
           </div>
         )}
       </div>
-      <div className="flex flex-col gap-1 p-3">
-        <div className="flex items-baseline justify-between gap-2">
-          <span className="font-semibold">{formatDate(props.date)}</span>
-          <span className="text-xs text-muted-foreground">
+      <div className="flex flex-col gap-2 px-1 pt-4">
+        <div className="flex items-start justify-between gap-3">
+          <span className="font-text text-[17px] font-semibold leading-[1.24] tracking-[-0.374px]">
+            {formatDate(props.date)}
+          </span>
+          <span className="rounded-full bg-apple-parchment px-3 py-1 font-text text-xs leading-none tracking-[-0.12px] text-apple-muted-48">
             참여 {props.participantCount}명
           </span>
         </div>
-        <p className="text-sm">{props.location}</p>
-        <p className="text-xs text-muted-foreground">
+        <p className="font-display text-[21px] font-semibold leading-[1.19] tracking-[0.231px]">
+          {props.location}
+        </p>
+        <p className="font-text text-sm leading-[1.43] tracking-[-0.224px] text-apple-muted-48">
           {props.startTime && <span>시작 {props.startTime} · </span>}
           {props.weather && <span>{props.weather} · </span>}
           호스트 {props.hostName}
@@ -66,4 +70,3 @@ function formatDate(d: Date): string {
     weekday: "short",
   }).format(d);
 }
-
diff --git a/app/sessions/new/_components/NewSessionForm.tsx b/app/sessions/new/_components/NewSessionForm.tsx
index 0f2e485..4e347c0 100644
--- a/app/sessions/new/_components/NewSessionForm.tsx
+++ b/app/sessions/new/_components/NewSessionForm.tsx
@@ -67,7 +67,7 @@ export function NewSessionForm({ today }: { today: string }) {
         />
       </div>
 
-      <p className="text-xs text-muted-foreground">
+      <p className="font-text text-xs leading-none tracking-[-0.12px] text-apple-muted-48">
         단체사진은 세션 생성 후 상세 페이지에서 올릴 수 있습니다.
       </p>
 
diff --git a/app/sessions/new/page.tsx b/app/sessions/new/page.tsx
index 7f94409..8ea7f68 100644
--- a/app/sessions/new/page.tsx
+++ b/app/sessions/new/page.tsx
@@ -1,6 +1,11 @@
-import Link from "next/link";
-
 import { requireApproved } from "@/lib/guard";
+import {
+  BackLink,
+  PageHeader,
+  PageShell,
+  SubNav,
+  UtilityCard,
+} from "@/components/layout/AppChrome";
 
 import { NewSessionForm } from "./_components/NewSessionForm";
 
@@ -12,18 +17,20 @@ export default async function NewSessionPage() {
   const today = new Date().toISOString().slice(0, 10);
 
   return (
-    <main className="container mx-auto max-w-md p-6">
-      <header className="mb-6 flex items-center justify-between">
-        <h1 className="text-2xl font-bold tracking-tight">세션 만들기</h1>
-        <Link
-          href="/"
-          className="text-sm text-muted-foreground underline-offset-4 hover:underline"
-        >
-          취소
-        </Link>
-      </header>
-
-      <NewSessionForm today={today} />
-    </main>
+    <>
+      <SubNav title="새 세션">
+        <BackLink href="/">취소</BackLink>
+      </SubNav>
+      <PageShell width="narrow" surface="parchment">
+        <PageHeader
+          eyebrow="Create"
+          title="세션 만들기"
+          description="러닝 일정을 만들고 참여 기록을 쌓을 준비를 해요."
+        />
+        <UtilityCard>
+          <NewSessionForm today={today} />
+        </UtilityCard>
+      </PageShell>
+    </>
   );
 }
diff --git a/app/sessions/page.tsx b/app/sessions/page.tsx
index bb63268..4fdf9f6 100644
--- a/app/sessions/page.tsx
+++ b/app/sessions/page.tsx
@@ -8,6 +8,12 @@ import {
   parseSessionArchiveParams,
   type SessionArchiveSearchParams,
 } from "@/lib/session-filters";
+import {
+  PageHeader,
+  PageShell,
+  SubNav,
+  UtilityCard,
+} from "@/components/layout/AppChrome";
 
 import { EmptyState } from "./_components/EmptyState";
 import { FilterBar } from "./_components/FilterBar";
@@ -21,7 +27,6 @@ type PageProps = {
   searchParams: Promise<SearchParams>;
 };
 
-
 export default async function SessionsArchivePage({ searchParams }: PageProps) {
   await requireApproved();
 
@@ -39,72 +44,72 @@ export default async function SessionsArchivePage({ searchParams }: PageProps) {
       : null;
 
   return (
-    <main className="container mx-auto max-w-2xl p-6">
-      <nav className="mb-4 text-xs text-muted-foreground">
-        <Link href="/" className="underline-offset-4 hover:underline">
-          ← 홈
-        </Link>
-      </nav>
-
-      <header className="mb-6 flex items-center justify-between">
-        <h1 className="text-2xl font-bold tracking-tight">아카이브</h1>
-        <Link href="/sessions/new">
-          <Button size="sm">새 세션</Button>
-        </Link>
-      </header>
-
-      <FilterBar
-        q={filters.q ?? ""}
-        memberIds={filters.memberIds ?? []}
-        month={filters.month ?? ""}
-        pmin={filters.pmin != null ? String(filters.pmin) : ""}
-        pmax={filters.pmax != null ? String(filters.pmax) : ""}
-        members={members}
-        hasActiveFilters={hasActiveFilters}
-      />
-
-      {page.items.length === 0 ? (
-        hasActiveFilters ? (
-          <EmptyFilterResult />
+    <>
+      <SubNav title="아카이브">
+        <Button asChild size="sm">
+          <Link href="/sessions/new">새 세션</Link>
+        </Button>
+      </SubNav>
+
+      <PageShell width="content" surface="parchment">
+        <PageHeader
+          eyebrow="Sessions"
+          title="러닝 아카이브"
+          description="날짜, 장소, 참여 멤버로 애니뮤 러닝 세션을 찾아보세요."
+        />
+
+        <FilterBar
+          q={filters.q ?? ""}
+          memberIds={filters.memberIds ?? []}
+          month={filters.month ?? ""}
+          pmin={filters.pmin != null ? String(filters.pmin) : ""}
+          pmax={filters.pmax != null ? String(filters.pmax) : ""}
+          members={members}
+          hasActiveFilters={hasActiveFilters}
+        />
+
+        {page.items.length === 0 ? (
+          hasActiveFilters ? (
+            <EmptyFilterResult />
+          ) : (
+            <EmptyState />
+          )
         ) : (
-          <EmptyState />
-        )
-      ) : (
-        <>
-          <ul className="flex flex-col gap-4">
-            {page.items.map((s) => (
-              <li key={s.id}>
-                <SessionCard {...s} />
-              </li>
-            ))}
-          </ul>
-
-          {nextHref && (
-            <div className="mt-6 flex justify-center">
-              <Link href={nextHref}>
-                <Button variant="outline">더 보기</Button>
-              </Link>
-            </div>
-          )}
-        </>
-      )}
-    </main>
+          <>
+            <ul className="grid gap-6 md:grid-cols-2">
+              {page.items.map((s) => (
+                <li key={s.id}>
+                  <SessionCard {...s} />
+                </li>
+              ))}
+            </ul>
+
+            {nextHref && (
+              <div className="mt-10 flex justify-center">
+                <Button asChild variant="outline">
+                  <Link href={nextHref}>더 보기</Link>
+                </Button>
+              </div>
+            )}
+          </>
+        )}
+      </PageShell>
+    </>
   );
 }
 
 function EmptyFilterResult() {
   return (
-    <section className="flex flex-col items-center gap-3 rounded-md border border-dashed p-10 text-center">
-      <p className="text-sm text-muted-foreground">
+    <UtilityCard className="flex flex-col items-center gap-4 border-dashed text-center">
+      <p className="font-display text-[24px] font-light leading-[1.5] tracking-normal text-apple-muted-80">
         조건에 맞는 세션이 없어요.
       </p>
       <Link
         href="/sessions"
-        className="text-xs underline underline-offset-4"
+        className="font-text text-sm leading-[1.29] tracking-[-0.224px] text-apple-primary underline-offset-4 hover:underline"
       >
         필터 초기화
       </Link>
-    </section>
+    </UtilityCard>
   );
 }
-
diff --git a/components/form/ErrorAlert.tsx b/components/form/ErrorAlert.tsx
index 48f2df4..c343e0b 100644
--- a/components/form/ErrorAlert.tsx
+++ b/components/form/ErrorAlert.tsx
@@ -17,7 +17,7 @@ export function ErrorAlert({ message, className }: Props) {
       role="alert"
       aria-live="polite"
       className={cn(
-        "rounded-md border border-destructive/50 bg-destructive/10 px-3 py-2 text-sm text-destructive",
+        "rounded-[18px] border border-destructive/40 bg-white px-5 py-4 font-text text-sm leading-[1.43] tracking-[-0.224px] text-destructive",
         className,
       )}
     >
diff --git a/components/layout/AppChrome.tsx b/components/layout/AppChrome.tsx
new file mode 100644
index 0000000..1762a41
--- /dev/null
+++ b/components/layout/AppChrome.tsx
@@ -0,0 +1,191 @@
+import Link from "next/link";
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+export function GlobalNav({
+  approved = false,
+  isAdmin = false,
+}: {
+  approved?: boolean;
+  isAdmin?: boolean;
+}) {
+  return (
+    <header className="sticky top-0 z-50 bg-apple-black text-white">
+      <nav className="mx-auto flex h-11 max-w-[980px] items-center justify-between px-4 font-text text-[12px] leading-none tracking-[-0.12px]">
+        <Link href="/" className="font-semibold tracking-[-0.18px]">
+          뮤런
+        </Link>
+        {approved ? (
+          <div className="hidden items-center gap-5 sm:flex">
+            <Link href="/sessions" className="text-white/80 hover:text-white">
+              아카이브
+            </Link>
+            <Link href="/sessions/new" className="text-white/80 hover:text-white">
+              새 세션
+            </Link>
+            <Link href="/me" className="text-white/80 hover:text-white">
+              내 기록
+            </Link>
+            {isAdmin ? (
+              <Link
+                href="/admin/members"
+                className="text-white/80 hover:text-white"
+              >
+                회원 관리
+              </Link>
+            ) : null}
+          </div>
+        ) : null}
+        <Link
+          href={approved ? "/sessions/new" : "/login"}
+          className="text-white/80 hover:text-white"
+        >
+          {approved ? "새 세션" : "로그인"}
+        </Link>
+      </nav>
+    </header>
+  );
+}
+
+export function PageShell({
+  children,
+  className,
+  width = "content",
+  surface = "canvas",
+}: {
+  children: ReactNode;
+  className?: string;
+  width?: "narrow" | "content" | "wide";
+  surface?: "canvas" | "parchment" | "dark";
+}) {
+  const widthClass = {
+    narrow: "max-w-md",
+    content: "max-w-[980px]",
+    wide: "max-w-[1440px]",
+  }[width];
+  const surfaceClass = {
+    canvas: "bg-apple-canvas text-apple-ink",
+    parchment: "bg-apple-parchment text-apple-ink",
+    dark: "bg-apple-tile-1 text-white",
+  }[surface];
+
+  return (
+    <main className={cn("min-h-[calc(100vh-44px)]", surfaceClass, className)}>
+      <div className={cn("mx-auto px-5 py-16 sm:px-6 lg:py-20", widthClass)}>
+        {children}
+      </div>
+    </main>
+  );
+}
+
+export function SubNav({
+  title,
+  children,
+  className,
+}: {
+  title: string;
+  children?: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className="sticky top-11 z-40 border-b border-apple-hairline/80 bg-apple-parchment/80 backdrop-blur-xl backdrop-saturate-150">
+      <div
+        className={cn(
+          "mx-auto flex h-[52px] max-w-[980px] items-center justify-between gap-4 px-5 sm:px-6",
+          className,
+        )}
+      >
+        <span className="font-display text-[21px] font-semibold leading-[1.19] tracking-[0.231px] text-apple-ink">
+          {title}
+        </span>
+        {children ? (
+          <div className="flex items-center gap-3 font-text text-sm tracking-[-0.224px]">
+            {children}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+export function BackLink({ href, children }: { href: string; children: ReactNode }) {
+  return (
+    <Link
+      href={href}
+      className="font-text text-sm leading-[1.29] tracking-[-0.224px] text-apple-primary underline-offset-4 hover:underline"
+    >
+      {children}
+    </Link>
+  );
+}
+
+export function PageHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+  align = "left",
+  className,
+}: {
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  align?: "left" | "center";
+  className?: string;
+}) {
+  return (
+    <header
+      className={cn(
+        "mb-10 flex flex-col gap-5",
+        align === "center" && "items-center text-center",
+        className,
+      )}
+    >
+      <div className={cn("flex flex-col gap-3", align === "center" && "items-center")}>
+        {eyebrow ? (
+          <p className="font-text text-sm font-semibold leading-[1.29] tracking-[-0.224px] text-apple-muted-48">
+            {eyebrow}
+          </p>
+        ) : null}
+        <h1 className="font-display text-[40px] font-semibold leading-[1.1] tracking-[-0.28px] text-apple-ink sm:text-[56px] sm:leading-[1.07]">
+          {title}
+        </h1>
+        {description ? (
+          <p className="max-w-2xl font-display text-[24px] font-light leading-[1.5] tracking-normal text-apple-muted-80 sm:text-[28px] sm:leading-[1.14] sm:tracking-[0.196px]">
+            {description}
+          </p>
+        ) : null}
+      </div>
+      {actions ? <div className="flex flex-wrap items-center gap-3">{actions}</div> : null}
+    </header>
+  );
+}
+
+export function UtilityCard({
+  children,
+  className,
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <section
+      className={cn(
+        "rounded-[18px] border border-apple-hairline bg-apple-canvas p-6 text-apple-ink",
+        className,
+      )}
+    >
+      {children}
+    </section>
+  );
+}
+
+export function SectionLabel({ children }: { children: ReactNode }) {
+  return (
+    <h2 className="mb-3 font-text text-sm font-semibold uppercase leading-[1.29] tracking-[-0.224px] text-apple-muted-48">
+      {children}
+    </h2>
+  );
+}
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index f28fb1f..ede3d4f 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,26 +5,23 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full font-text font-normal tracking-[-0.374px] transition-transform active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-apple-focus disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default:
-          "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        default: "bg-apple-primary text-white",
+        destructive: "bg-destructive text-destructive-foreground",
+        outline: "border border-apple-primary bg-apple-canvas text-apple-primary",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+          "border-[3px] border-apple-divider bg-apple-pearl text-apple-muted-80",
+        ghost: "bg-transparent text-apple-primary",
+        link: "h-auto rounded-none p-0 text-apple-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-11 px-4 py-2",
-        sm: "h-10 rounded-md px-3",
-        lg: "h-12 rounded-md px-8",
-        icon: "h-11 w-11",
+        default: "h-11 px-[22px] py-[11px] text-[17px] leading-none",
+        sm: "h-9 px-[15px] py-2 text-sm leading-[1.29] tracking-[-0.224px]",
+        lg: "h-12 px-7 py-3.5 text-[18px] font-light leading-none tracking-normal",
+        icon: "h-11 w-11 rounded-full p-0",
       },
     },
     defaultVariants: {
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
index 5cb6890..85d8727 100644
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-11 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-11 w-full rounded-full border border-apple-hairline bg-apple-canvas px-5 py-3 font-text text-[17px] leading-[1.47] tracking-[-0.374px] text-apple-ink placeholder:text-apple-muted-48 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-apple-focus disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
diff --git a/components/ui/label.tsx b/components/ui/label.tsx
index 84f8b0c..3d1bf9a 100644
--- a/components/ui/label.tsx
+++ b/components/ui/label.tsx
@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  "font-text text-sm font-semibold leading-[1.29] tracking-[-0.224px] text-apple-ink peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
 const Label = React.forwardRef<
diff --git a/components/ui/textarea.tsx b/components/ui/textarea.tsx
index 55ede4a..ee734f2 100644
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex min-h-[112px] w-full rounded-[18px] border border-apple-hairline bg-apple-canvas px-5 py-4 font-text text-[17px] leading-[1.47] tracking-[-0.374px] text-apple-ink placeholder:text-apple-muted-48 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-apple-focus disabled:cursor-not-allowed disabled:opacity-50",
         className,
       )}
       ref={ref}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 0a68d9d..475ae4e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -17,7 +17,42 @@ const config: Config = {
       },
     },
     extend: {
+      fontFamily: {
+        display: [
+          "SF Pro Display",
+          "system-ui",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "sans-serif",
+        ],
+        text: [
+          "SF Pro Text",
+          "system-ui",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "sans-serif",
+        ],
+      },
       colors: {
+        apple: {
+          primary: "#0066cc",
+          focus: "#0071e3",
+          "primary-on-dark": "#2997ff",
+          ink: "#1d1d1f",
+          "muted-80": "#333333",
+          "muted-48": "#7a7a7a",
+          "body-muted": "#cccccc",
+          divider: "#f0f0f0",
+          hairline: "#e0e0e0",
+          canvas: "#ffffff",
+          parchment: "#f5f5f7",
+          pearl: "#fafafc",
+          "tile-1": "#272729",
+          "tile-2": "#2a2a2c",
+          "tile-3": "#252527",
+          black: "#000000",
+          chip: "#d2d2d7",
+        },
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
@@ -53,6 +88,9 @@ const config: Config = {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      boxShadow: {
+        product: "rgba(0, 0, 0, 0.22) 3px 5px 30px 0",
+      },
     },
   },
   plugins: [animate],