diff --git a/.gitignore b/.gitignore
index 3116106..f14aaa3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -47,3 +47,6 @@ pip-delete-this-directory.txt
 
 # macOS
 .DS_Store
+
+# Saved design reference pages (contain third-party account PII; never commit)
+reference/
diff --git a/app/activate/page.tsx b/app/activate/page.tsx
index 98a3fee..dd0b707 100644
--- a/app/activate/page.tsx
+++ b/app/activate/page.tsx
@@ -4,7 +4,6 @@ import { AuthShell } from "@/components/AuthShell";
 import { Button } from "@/components/Button";
 import { Alert } from "@/components/Alert";
 import { Tag } from "@/components/Tag";
-import { Glyph } from "@/components/Glyph";
 import { getCurrentSession } from "@/lib/server/session";
 import { mintActivationCsrf } from "@/lib/server/activationCsrf";
 import { getActivationForUser } from "@/lib/server/services/activation";
@@ -49,16 +48,16 @@ export default async function ActivatePage({
       <AuthShell tag="auth/authorized" account={{ username: current.user.username }}>
         <div className="flex items-start gap-4 mb-7">
           <div
-            className="h-12 w-12 border border-accent flex items-center justify-center text-accent text-meta uppercase tracking-wider shrink-0"
+            className="h-12 w-12 border border-accent rounded-md flex items-center justify-center text-accent-strong text-[13px] font-medium shrink-0"
             aria-hidden
           >
             {activation.app.name.slice(0, 2)}
           </div>
           <div className="min-w-0 flex-1">
-            <div className="text-meta uppercase tracking-wider text-muted mb-1">
-              authorized
+            <div className="text-[12px] text-muted mb-1">
+              Authorized
             </div>
-            <h1 className="text-[26px] tracking-tightest text-fg truncate leading-none">
+            <h1 className="text-[26px] text-fg truncate leading-none">
               {activation.app.name}
             </h1>
           </div>
@@ -71,7 +70,7 @@ export default async function ActivatePage({
         </div>
         <Link href="/">
           <Button variant="secondary" type="button">
-            return to dashboard
+            Return to dashboard
           </Button>
         </Link>
       </AuthShell>
@@ -104,24 +103,24 @@ export default async function ActivatePage({
     <AuthShell tag="auth/authorize" account={{ username: current.user.username }}>
       <div className="flex items-start gap-4 mb-7">
         <div
-          className="h-12 w-12 border border-accent flex items-center justify-center text-accent text-meta uppercase tracking-wider shrink-0"
+          className="h-12 w-12 border border-accent rounded-md flex items-center justify-center text-accent-strong text-[13px] font-medium shrink-0"
           aria-hidden
         >
           {activation.app.name.slice(0, 2)}
         </div>
         <div className="min-w-0 flex-1">
-          <div className="text-meta uppercase tracking-wider text-muted mb-1">
-            authorize app
+          <div className="text-[12px] text-muted mb-1">
+            Authorize app
           </div>
-          <h1 className="text-[26px] tracking-tightest text-fg truncate leading-none">
+          <h1 className="text-[26px] text-fg truncate leading-none">
             {activation.app.name}
           </h1>
           <div className="mt-2 flex items-center gap-2">
             {expired ? (
-              <Tag tone="danger">expired</Tag>
+              <Tag tone="danger">Expired</Tag>
             ) : (
-              <span className="text-meta text-muted">
-                expires {activation.expiresAt.slice(0, 16).replace("T", " ")}
+              <span className="text-[12px] text-muted">
+                Expires {activation.expiresAt.slice(0, 16).replace("T", " ")}
               </span>
             )}
           </div>
@@ -129,19 +128,19 @@ export default async function ActivatePage({
       </div>
 
       <div className="border-t border-rule mb-5">
-        <DetailRow label="signed in" value={current.user.username} />
-        <DetailRow label="email" value={current.user.email} />
+        <DetailRow label="Signed in" value={current.user.username} />
+        <DetailRow label="Email" value={current.user.email} />
         <DetailRow
-          label="origin"
+          label="Origin"
           value={`${activation.userAgent || "unknown device"} · ${activation.ip || "unknown ip"}`}
         />
         {requiredProduct && (
           <DetailRow
-            label="requires"
+            label="Requires"
             value={requiredProduct}
             right={
               <Tag tone={blocked ? "warning" : "success"}>
-                {blocked ? "missing" : "active"}
+                {blocked ? "Missing" : "Active"}
               </Tag>
             }
           />
@@ -150,8 +149,8 @@ export default async function ActivatePage({
       </div>
 
       <div className="mb-5">
-        <div className="text-meta uppercase tracking-wider text-muted mb-2">
-          will share
+        <div className="text-[12px] text-muted mb-2">
+          Will share
         </div>
         <div className="border-t border-rule">
           {standardScopes.map((scope) => {
@@ -161,8 +160,8 @@ export default async function ActivatePage({
                 key={scope}
                 className="flex items-baseline gap-3 py-2.5 border-b border-rule"
               >
-                <Glyph kind="ok" />
-                <span className="text-meta text-fg flex-1">{item.label}</span>
+                <span className="w-2 h-2 rounded-full bg-accent shrink-0 translate-y-0.5" aria-hidden />
+                <span className="text-[13px] text-fg flex-1">{item.label}</span>
                 <input
                   type="hidden"
                   name="scopes"
@@ -185,13 +184,13 @@ export default async function ActivatePage({
                   value={scope}
                   defaultChecked
                   form="approve-form"
-                  className="appearance-none w-4 h-4 border border-rule bg-transparent checked:bg-accent checked:border-accent transition-colors shrink-0 translate-y-0.5"
+                  className="appearance-none w-4 h-4 border border-rule rounded bg-transparent checked:bg-accent checked:border-accent transition-colors shrink-0 translate-y-0.5"
                 />
-                <span className="text-meta text-fg flex-1 group-hover:text-accent transition-colors">
+                <span className="text-[13px] text-fg flex-1 group-hover:text-accent-strong transition-colors">
                   {item.label}
                 </span>
-                <span className="text-micro uppercase tracking-wider text-accent">
-                  optional
+                <span className="text-[12px] text-accent-strong">
+                  Optional
                 </span>
               </label>
             );
@@ -202,7 +201,7 @@ export default async function ActivatePage({
       {blocked && !expired && requiredProduct && (
         <div className="mb-5">
           <Alert tone="warning">
-            active {requiredProduct} subscription required to approve
+            Active {requiredProduct} subscription required to approve
           </Alert>
         </div>
       )}
@@ -210,7 +209,7 @@ export default async function ActivatePage({
       {error === "csrf" && (
         <div className="mb-5">
           <Alert tone="warning">
-            your confirmation expired. review and approve again.
+            Your confirmation expired. Review and approve again.
           </Alert>
         </div>
       )}
@@ -223,7 +222,7 @@ export default async function ActivatePage({
           <input type="hidden" name="csrf_token" value={csrfToken} />
           <input type="hidden" name="token" value={token} />
           <Button variant="ghost" type="submit" disabled={expired}>
-            deny
+            Deny
           </Button>
         </form>
         <form
@@ -234,7 +233,7 @@ export default async function ActivatePage({
           <input type="hidden" name="csrf_token" value={csrfToken} />
           <input type="hidden" name="token" value={token} />
           <Button type="submit" disabled={expired || blocked}>
-            approve
+            Approve
           </Button>
         </form>
       </div>
@@ -253,10 +252,10 @@ function DetailRow({
 }) {
   return (
     <div className="flex items-baseline justify-between gap-4 py-2 border-b border-rule last:border-b-0">
-      <span className="text-meta uppercase tracking-wider text-muted shrink-0">
+      <span className="text-[12px] text-muted shrink-0">
         {label}
       </span>
-      <span className="text-meta text-right truncate flex-1 flex items-center justify-end gap-2">
+      <span className="text-[13px] text-right truncate flex-1 flex items-center justify-end gap-2">
         <span className="truncate text-fg">{value}</span>
         {right}
       </span>
diff --git a/app/admin/activation-requests/page.tsx b/app/admin/activation-requests/page.tsx
index aca276d..8e3edf4 100644
--- a/app/admin/activation-requests/page.tsx
+++ b/app/admin/activation-requests/page.tsx
@@ -1,6 +1,5 @@
 import { Section, Empty, Row, RowLabel, RowValue } from "@/components/Section";
 import { Tag } from "@/components/Tag";
-import { Glyph } from "@/components/Glyph";
 import { query } from "@/lib/server/db";
 import { getCurrentSession } from "@/lib/server/session";
 import { redirect } from "next/navigation";
@@ -51,35 +50,31 @@ export default async function AdminActivationRequestsPage() {
       data-mount-stagger
     >
       <header className="mb-10" data-mount-row>
-        <div className="flex items-baseline gap-2 mb-2 text-meta">
-          <span className="text-danger">$</span>
-          <span className="uppercase tracking-wider text-muted">
-            admin.activations
-          </span>
-          <span className="text-faint">·</span>
-          <span className="text-meta text-faint tabular-nums">
-            {String(requests.length).padStart(2, "0")}
+        <div className="flex items-baseline gap-2 mb-2">
+          <span className="text-[13px] text-muted">admin.activations</span>
+          <span className="text-[13px] text-faint tabular-nums">
+            {requests.length}
           </span>
         </div>
-        <h1 className="text-[32px] tracking-tightest text-fg leading-none">
-          activation requests
+        <h1 className="text-[32px] text-fg leading-none">
+          Activation requests
         </h1>
       </header>
 
       <div data-mount-row>
         <Section
           index="1.0"
-          title="recent activations"
+          title="Recent activations"
           hint={`last ${requests.length}`}
         >
           {requests.length === 0 ? (
-            <Empty>no activation requests</Empty>
+            <Empty>No activation requests</Empty>
           ) : (
             requests.map(req => (
               <Row key={req.public_id}>
                 <RowLabel>
                   <span className="flex items-baseline gap-2">
-                    <span className="text-fg normal-case tracking-normal truncate">
+                    <span className="text-fg truncate">
                       {req.app_name}
                     </span>
                     <Tag tone={statusTone[req.status] ?? "neutral"}>
@@ -90,11 +85,10 @@ export default async function AdminActivationRequestsPage() {
                 <RowValue>
                   {req.approved_username && (
                     <>
-                      <Glyph kind="ok" />
                       <span className="text-muted truncate">
                         @{req.approved_username}
                       </span>
-                      <Glyph kind="dot" />
+                      <span className="text-faint">·</span>
                     </>
                   )}
                   {req.requested_subject && (
@@ -102,12 +96,12 @@ export default async function AdminActivationRequestsPage() {
                       <span className="text-faint truncate">
                         sub:{req.requested_subject}
                       </span>
-                      <Glyph kind="dot" />
+                      <span className="text-faint">·</span>
                     </>
                   )}
                   <span className="text-faint truncate">{req.public_id}</span>
                 </RowValue>
-                <span className="text-meta text-faint tabular-nums">
+                <span className="text-[13px] text-faint tabular-nums">
                   {req.created_at?.slice(0, 10)}
                 </span>
               </Row>
diff --git a/app/admin/bans/page.tsx b/app/admin/bans/page.tsx
index 81f32cd..2ffdd5e 100644
--- a/app/admin/bans/page.tsx
+++ b/app/admin/bans/page.tsx
@@ -1,6 +1,5 @@
 import { Section, Empty } from "@/components/Section";
 import { Tag } from "@/components/Tag";
-import { Glyph } from "@/components/Glyph";
 import { query } from "@/lib/server/db";
 import { getCurrentSession } from "@/lib/server/session";
 import { redirect } from "next/navigation";
@@ -41,25 +40,20 @@ export default async function AdminBansPage() {
       data-mount-stagger
     >
       <header className="mb-10" data-mount-row>
-        <div className="flex items-baseline gap-2 mb-2 text-meta">
-          <span className="text-danger">$</span>
-          <span className="uppercase tracking-wider text-muted">
-            admin.bans
-          </span>
-          <span className="text-faint">·</span>
-          <span className="text-meta text-faint tabular-nums">
-            {String(active.length).padStart(2, "0")} active
+        <div className="flex items-baseline gap-2 mb-2">
+          <span className="text-[13px] text-muted tabular-nums">
+            {active.length} active
           </span>
         </div>
-        <h1 className="text-[32px] tracking-tightest text-fg leading-none">
-          bans
+        <h1 className="text-[32px] tracking-tight text-fg leading-none">
+          Bans
         </h1>
       </header>
 
       <div data-mount-row>
-        <Section index="1.0" title="active bans" hint="enforced now">
+        <Section index="1.0" title="Active bans" hint="Enforced now">
           {active.length === 0 ? (
-            <Empty>no active bans</Empty>
+            <Empty>No active bans</Empty>
           ) : (
             active.map(ban => (
               <div
@@ -76,13 +70,11 @@ export default async function AdminBansPage() {
                   {ban.reason && (
                     <div className="text-muted mt-1">{ban.reason}</div>
                   )}
-                  <div className="text-faint mt-1 flex items-baseline gap-2">
-                    <span className="tabular-nums">
-                      {ban.created_at?.slice(0, 10)}
-                    </span>
+                  <div className="text-faint mt-1 flex items-baseline gap-2 tabular-nums">
+                    <span>{ban.created_at?.slice(0, 10)}</span>
                     {ban.expires_at && (
                       <>
-                        <Glyph kind="dot" />
+                        <span aria-hidden>·</span>
                         <span>expires {ban.expires_at.slice(0, 10)}</span>
                       </>
                     )}
@@ -92,9 +84,9 @@ export default async function AdminBansPage() {
                   <input type="hidden" name="banId" value={ban.id} />
                   <button
                     type="submit"
-                    className="text-meta uppercase tracking-wider text-secondary hover:text-accent transition-colors"
+                    className="text-[13px] text-secondary hover:text-accent-strong transition-colors"
                   >
-                    revoke
+                    Revoke
                   </button>
                 </form>
               </div>
@@ -105,7 +97,7 @@ export default async function AdminBansPage() {
 
       {revoked.length > 0 && (
         <div data-mount-row>
-          <Section index="2.0" title="revoked bans" hint="historical">
+          <Section index="2.0" title="Revoked bans" hint="Historical">
             {revoked.map(ban => (
               <div
                 key={ban.id}
@@ -123,7 +115,7 @@ export default async function AdminBansPage() {
                   )}
                   <div className="text-faint mt-1 flex items-baseline gap-2 tabular-nums">
                     <span>{ban.created_at?.slice(0, 10)}</span>
-                    <Glyph kind="dot" />
+                    <span aria-hidden>·</span>
                     <span>revoked {ban.revoked_at?.slice(0, 10)}</span>
                   </div>
                 </div>
diff --git a/app/admin/keys/page.tsx b/app/admin/keys/page.tsx
index 69a6774..e10d578 100644
--- a/app/admin/keys/page.tsx
+++ b/app/admin/keys/page.tsx
@@ -1,7 +1,6 @@
 import { createHash, createPrivateKey, createPublicKey } from "crypto";
 import { Section, Row, RowLabel, RowValue } from "@/components/Section";
 import { Tag } from "@/components/Tag";
-import { Glyph } from "@/components/Glyph";
 import { oauthProfileVersions, oidcSigningKeys } from "@/lib/server/config";
 
 export const dynamic = "force-dynamic";
@@ -33,27 +32,23 @@ export default function AdminKeysPage() {
       data-mount-stagger
     >
       <header className="mb-10" data-mount-row>
-        <div className="flex items-baseline gap-2 mb-2 text-meta">
-          <span className="text-danger">$</span>
-          <span className="uppercase tracking-wider text-muted">
-            admin.keys
-          </span>
-          <span className="text-faint">·</span>
-          <span className="text-meta text-faint tabular-nums">
+        <div className="flex items-baseline gap-2 mb-2">
+          <span className="text-[13px] text-muted">admin.keys</span>
+          <span className="text-[13px] text-faint tabular-nums">
             {String(keys.length).padStart(2, "0")}
           </span>
         </div>
-        <h1 className="text-[32px] tracking-tightest text-fg leading-none mb-3">
-          signing keys
+        <h1 className="text-[32px] tracking-tight text-fg leading-none mb-3">
+          Signing keys
         </h1>
-        <p className="text-meta text-muted max-w-prose">
-          oidc keys are environment-backed. active keys sign new tokens, retired
-          keys stay in jwks, and revoked keys are removed from jwks.
+        <p className="text-[14px] text-muted max-w-prose">
+          OIDC keys are environment-backed. Active keys sign new tokens, retired
+          keys stay in JWKS, and revoked keys are removed from JWKS.
         </p>
       </header>
 
       <div data-mount-row>
-        <Section index="1.0" title="keys" hint="oidc signing keys">
+        <Section index="1.0" title="Keys" hint="OIDC signing keys">
           {keys.map(key => (
             <Row key={key.kid}>
               <RowLabel>
@@ -63,7 +58,6 @@ export default function AdminKeysPage() {
               </RowLabel>
               <RowValue>
                 <span className="text-muted truncate">{key.fingerprint}</span>
-                <Glyph kind="dot" />
                 <Tag tone={tone(key.status)}>{key.status}</Tag>
               </RowValue>
               <span />
@@ -73,23 +67,23 @@ export default function AdminKeysPage() {
       </div>
 
       <div data-mount-row>
-        <Section index="2.0" title="rotation path" hint="env driven">
+        <Section index="2.0" title="Rotation path" hint="Env driven">
           <Row>
-            <RowLabel>add</RowLabel>
+            <RowLabel>Add</RowLabel>
             <RowValue>
-              append a new active entry to OIDC_SIGNING_KEYS_JSON
+              Append a new active entry to OIDC_SIGNING_KEYS_JSON
             </RowValue>
             <span />
           </Row>
           <Row>
-            <RowLabel>retire</RowLabel>
-            <RowValue>mark the previous key retired after deploy</RowValue>
+            <RowLabel>Retire</RowLabel>
+            <RowValue>Mark the previous key retired after deploy</RowValue>
             <span />
           </Row>
           <Row>
-            <RowLabel>revoke</RowLabel>
+            <RowLabel>Revoke</RowLabel>
             <RowValue>
-              mark compromised keys revoked and redeploy immediately
+              Mark compromised keys revoked and redeploy immediately
             </RowValue>
             <span />
           </Row>
@@ -97,7 +91,7 @@ export default function AdminKeysPage() {
       </div>
 
       <div data-mount-row>
-        <Section index="3.0" title="oauth profiles" hint="compatibility">
+        <Section index="3.0" title="OAuth profiles" hint="Compatibility">
           {oauthProfileVersions.map(profile => (
             <Row key={profile.version}>
               <RowLabel>
diff --git a/app/admin/oauth-clients/page.tsx b/app/admin/oauth-clients/page.tsx
index 25a2569..3445710 100644
--- a/app/admin/oauth-clients/page.tsx
+++ b/app/admin/oauth-clients/page.tsx
@@ -1,6 +1,5 @@
 import { Empty, Section } from "@/components/Section";
 import { Tag } from "@/components/Tag";
-import { Glyph } from "@/components/Glyph";
 import { listPendingOAuthClientRegistrationRequests } from "@/lib/server/repositories/oauthClientRegistrations";
 import {
   approveOAuthClientRegistrationAction,
@@ -18,29 +17,28 @@ export default async function AdminOAuthClientsPage() {
       data-mount-stagger
     >
       <header className="mb-10" data-mount-row>
-        <div className="flex items-baseline gap-2 mb-2 text-meta">
-          <span className="text-danger">$</span>
-          <span className="uppercase tracking-wider text-muted">
-            admin.oauth.clients
-          </span>
+        <div className="flex items-baseline gap-2 mb-2 text-[13px]">
+          <span className="text-muted">Admin</span>
+          <span className="text-faint">·</span>
+          <span className="text-muted">OAuth clients</span>
           <span className="text-faint">·</span>
-          <span className="text-meta text-faint tabular-nums">
+          <span className="text-faint tabular-nums">
             {String(requests.length).padStart(2, "0")} pending
           </span>
         </div>
-        <h1 className="text-[32px] tracking-tightest text-fg leading-none">
-          oauth client reviews
+        <h1 className="text-[32px] text-fg leading-none">
+          OAuth client reviews
         </h1>
       </header>
 
       <div data-mount-row>
         <Section
           index="1.0"
-          title="pending registrations"
-          hint="awaiting approval"
+          title="Pending registrations"
+          hint="Awaiting approval"
         >
           {requests.length === 0 ? (
-            <Empty>no pending clients</Empty>
+            <Empty>No pending clients</Empty>
           ) : (
             requests.map(request => (
               <div
@@ -76,21 +74,21 @@ export default async function AdminOAuthClientsPage() {
                 </div>
 
                 <dl className="mt-3 grid grid-cols-[100px_1fr] gap-x-3 gap-y-1 text-meta">
-                  <dt className="text-muted uppercase tracking-wider">
+                  <dt className="text-[12px] text-muted">
                     redirects
                   </dt>
                   <dd className="text-fg break-all">
                     {request.redirectUris.join(", ")}
                   </dd>
-                  <dt className="text-muted uppercase tracking-wider">
+                  <dt className="text-[12px] text-muted">
                     grants
                   </dt>
                   <dd className="text-fg">{request.grantTypes.join(", ")}</dd>
-                  <dt className="text-muted uppercase tracking-wider">
+                  <dt className="text-[12px] text-muted">
                     scopes
                   </dt>
                   <dd className="text-fg">{request.scopes.join(", ")}</dd>
-                  <dt className="text-muted uppercase tracking-wider">
+                  <dt className="text-[12px] text-muted">
                     requester
                   </dt>
                   <dd className="text-fg">
@@ -98,25 +96,23 @@ export default async function AdminOAuthClientsPage() {
                   </dd>
                 </dl>
 
-                <div className="mt-4 flex items-baseline gap-5 text-meta uppercase tracking-wider">
+                <div className="mt-4 flex items-baseline gap-5 text-[13px]">
                   <form action={approveOAuthClientRegistrationAction}>
                     <input type="hidden" name="request_id" value={request.id} />
                     <button
                       type="submit"
-                      className="text-ok hover:text-fg transition-colors flex items-baseline gap-1.5"
+                      className="text-accent-strong hover:text-fg transition-colors"
                     >
-                      <Glyph kind="ok" />
-                      <span>approve</span>
+                      Approve
                     </button>
                   </form>
                   <form action={denyOAuthClientRegistrationAction}>
                     <input type="hidden" name="request_id" value={request.id} />
                     <button
                       type="submit"
-                      className="text-secondary hover:text-danger transition-colors flex items-baseline gap-1.5"
+                      className="text-secondary hover:text-danger transition-colors"
                     >
-                      <Glyph kind="error" />
-                      <span>deny</span>
+                      Deny
                     </button>
                   </form>
                 </div>
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index 5d8b8b7..445604b 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -1,6 +1,5 @@
 import { Section, Empty } from "@/components/Section";
 import { Tag } from "@/components/Tag";
-import { Glyph } from "@/components/Glyph";
 import { query, queryOne } from "@/lib/server/db";
 import { decideBearerAction } from "./actions";
 
@@ -59,38 +58,33 @@ export default async function AdminPage() {
       data-mount-stagger
     >
       <header className="mb-10" data-mount-row>
-        <div className="flex items-baseline gap-2 mb-2 text-meta">
-          <span className="text-danger">$</span>
-          <span className="uppercase tracking-wider text-muted">
-            admin.overview
-          </span>
-          <span className="text-faint">·</span>
-          <span className="text-meta text-faint">root</span>
+        <div className="flex items-baseline gap-2 mb-2">
+          <span className="text-[12px] text-muted">Admin</span>
+          <span className="text-[12px] text-faint">/</span>
+          <span className="text-[12px] text-muted">Overview</span>
         </div>
-        <h1 className="text-[32px] tracking-tightest text-fg leading-none mb-3">
-          overview
+        <h1 className="text-[32px] tracking-tight text-fg leading-none mb-3">
+          Overview
         </h1>
-        <p className="text-meta text-muted">system state at a glance</p>
+        <p className="text-[14px] text-muted">System state at a glance</p>
       </header>
 
       <div
-        className="grid grid-cols-2 sm:grid-cols-4 border-t border-b border-rule mb-12"
+        className="grid grid-cols-2 sm:grid-cols-4 bg-card border border-rule rounded-lg mb-12"
         data-mount-row
       >
         {[
-          { label: "active users", value: data.stats.activeUsers },
-          { label: "sessions", value: data.stats.activeSessions },
-          { label: "pending bearers", value: data.stats.pendingBearers },
-          { label: "pending activations", value: data.stats.pendingActivations },
+          { label: "Active users", value: data.stats.activeUsers },
+          { label: "Sessions", value: data.stats.activeSessions },
+          { label: "Pending bearers", value: data.stats.pendingBearers },
+          { label: "Pending activations", value: data.stats.pendingActivations },
         ].map((stat, i) => (
           <div
             key={stat.label}
-            className={`px-1 py-4 ${i > 0 ? "border-l border-rule" : ""}`}
+            className={`px-4 py-5 ${i > 0 ? "border-l border-rule" : ""}`}
           >
-            <div className="text-meta uppercase tracking-wider text-muted mb-1">
-              {stat.label}
-            </div>
-            <div className="text-[34px] text-danger tabular-nums tracking-tightest leading-none">
+            <div className="text-[12px] text-muted mb-1">{stat.label}</div>
+            <div className="text-[34px] text-fg tabular-nums leading-none">
               {String(stat.value).padStart(2, "0")}
             </div>
           </div>
@@ -100,11 +94,11 @@ export default async function AdminPage() {
       <div data-mount-row>
         <Section
           index="1.0"
-          title="pending bearer requests"
-          hint="awaiting review"
+          title="Pending bearer requests"
+          hint="Awaiting review"
         >
           {data.pendingRequests.length === 0 ? (
-            <Empty>no pending requests</Empty>
+            <Empty>No pending requests</Empty>
           ) : (
             data.pendingRequests.map(req => (
               <div
@@ -119,12 +113,12 @@ export default async function AdminPage() {
                       <span className="text-faint">· id {req.user_id}</span>
                     </div>
                   </div>
-                  <Tag tone="warning">pending</Tag>
+                  <Tag tone="warning">Pending</Tag>
                 </div>
                 <div className="text-meta text-secondary mb-4 border-l border-rule pl-3 py-1 leading-relaxed whitespace-pre-wrap">
                   {req.reason}
                 </div>
-                <div className="flex items-baseline gap-5 text-meta uppercase tracking-wider">
+                <div className="flex items-baseline gap-5">
                   <form action={decideBearerAction}>
                     <input
                       type="hidden"
@@ -134,10 +128,9 @@ export default async function AdminPage() {
                     <input type="hidden" name="decision" value="approve" />
                     <button
                       type="submit"
-                      className="text-ok hover:text-fg transition-colors flex items-baseline gap-1.5"
+                      className="text-[13px] text-ok hover:text-fg transition-colors"
                     >
-                      <Glyph kind="ok" />
-                      <span>approve</span>
+                      Approve
                     </button>
                   </form>
                   <form action={decideBearerAction}>
@@ -149,10 +142,9 @@ export default async function AdminPage() {
                     <input type="hidden" name="decision" value="reject" />
                     <button
                       type="submit"
-                      className="text-secondary hover:text-danger transition-colors flex items-baseline gap-1.5"
+                      className="text-[13px] text-secondary hover:text-danger transition-colors"
                     >
-                      <Glyph kind="error" />
-                      <span>reject</span>
+                      Deny
                     </button>
                   </form>
                 </div>
diff --git a/app/admin/security/page.tsx b/app/admin/security/page.tsx
index 357e512..61f991f 100644
--- a/app/admin/security/page.tsx
+++ b/app/admin/security/page.tsx
@@ -1,6 +1,5 @@
 import { Section, Empty } from "@/components/Section";
 import { Tag } from "@/components/Tag";
-import { Glyph } from "@/components/Glyph";
 import { Button } from "@/components/Button";
 import { searchSecurityEvents } from "@/lib/server/repositories/securityEvents";
 import { getCurrentSession } from "@/lib/server/session";
@@ -56,26 +55,21 @@ export default async function AdminSecurityPage({
         data-mount-row
       >
         <div>
-          <div className="flex items-baseline gap-2 mb-2 text-meta">
-            <span className="text-danger">$</span>
-            <span className="uppercase tracking-wider text-muted">
-              admin.audit
+          <p className="text-[13px] text-muted mb-2">
+            Admin / Audit
+            <span className="ml-2 tabular-nums text-faint">
+              {events.length}
             </span>
-            <span className="text-faint">·</span>
-            <span className="text-meta text-faint tabular-nums">
-              {String(events.length).padStart(2, "0")}
-            </span>
-          </div>
-          <h1 className="text-[32px] tracking-tightest text-fg leading-none">
-            audit console
+          </p>
+          <h1 className="text-[32px] tracking-tight text-fg leading-none">
+            Audit console
           </h1>
         </div>
         <a
           href={`/admin/security/export?${exportParams.toString()}`}
-          className="text-meta uppercase tracking-wider text-secondary hover:text-accent transition-colors flex items-baseline gap-1.5"
+          className="text-[13px] text-accent-strong hover:underline transition-colors"
         >
-          <Glyph kind="prompt" />
-          <span>export csv</span>
+          Export CSV
         </a>
       </header>
 
@@ -84,16 +78,14 @@ export default async function AdminSecurityPage({
         data-mount-row
       >
         {[
-          ["event", "event type"],
-          ["result", "result"],
-          ["user", "username"],
-          ["ip", "ip"],
-          ["limit", "limit"],
+          ["event", "Event type"],
+          ["result", "Result"],
+          ["user", "Username"],
+          ["ip", "IP"],
+          ["limit", "Limit"],
         ].map(([name, label]) => (
           <label key={name} className="block">
-            <span className="block text-meta uppercase tracking-wider text-muted mb-1">
-              {label}
-            </span>
+            <span className="block text-[12px] text-muted mb-1">{label}</span>
             <input
               name={name}
               defaultValue={String(
@@ -101,24 +93,24 @@ export default async function AdminSecurityPage({
                   name === "event" ? "eventType" : (name as keyof typeof filters)
                 ] || "",
               )}
-              className="w-full bg-transparent border-0 border-b border-rule px-1 h-8 text-[13px] text-fg placeholder:text-faint focus:outline-hidden focus:border-accent transition-colors"
+              className="w-full bg-card border border-rule rounded-md px-2 h-8 text-[13px] text-fg placeholder:text-faint focus:outline-hidden focus:border-accent transition-colors"
             />
           </label>
         ))}
         <Button type="submit" className="self-end h-8! px-3!">
-          filter
+          Filter
         </Button>
       </form>
 
       <div data-mount-row>
-        <Section index="1.0" title="events" hint={`last ${events.length}`}>
+        <Section index="1.0" title="Events" hint={`last ${events.length}`}>
           {events.length === 0 ? (
-            <Empty>no events</Empty>
+            <Empty>No events</Empty>
           ) : (
             events.map((ev, i) => (
               <div
                 key={i}
-                className="grid grid-cols-[180px_90px_1fr_140px] gap-4 items-baseline border-t border-rule first:border-t-0 py-2.5 px-1 text-meta"
+                className="grid grid-cols-[180px_90px_1fr_140px] gap-4 items-baseline border-t border-rule first:border-t-0 py-2.5 px-1 text-[13px]"
               >
                 <div className="text-fg truncate">{ev.event_type}</div>
                 <Tag tone={resultTone[ev.result] ?? "neutral"}>{ev.result}</Tag>
@@ -126,11 +118,11 @@ export default async function AdminSecurityPage({
                   {ev.username && (
                     <span className="text-secondary">@{ev.username}</span>
                   )}
-                  {ev.username && ev.ip && <Glyph kind="dot" />}
+                  {ev.username && ev.ip && <span className="text-faint">·</span>}
                   {ev.ip && <span>{ev.ip}</span>}
                   {Object.keys(ev.metadata || {}).length > 0 && (
                     <>
-                      <Glyph kind="dot" />
+                      <span className="text-faint">·</span>
                       <code className="text-faint truncate">
                         {JSON.stringify(ev.metadata)}
                       </code>
diff --git a/app/admin/users/page.tsx b/app/admin/users/page.tsx
index 5d21446..765bf7b 100644
--- a/app/admin/users/page.tsx
+++ b/app/admin/users/page.tsx
@@ -1,6 +1,5 @@
 import { Section, Empty, Row, RowLabel, RowValue } from "@/components/Section";
 import { Tag } from "@/components/Tag";
-import { Glyph } from "@/components/Glyph";
 import { query } from "@/lib/server/db";
 import { getCurrentSession } from "@/lib/server/session";
 import { redirect } from "next/navigation";
@@ -71,26 +70,18 @@ export default async function AdminUsersPage({
       data-mount-stagger
     >
       <header className="mb-10" data-mount-row>
-        <div className="flex items-baseline gap-2 mb-2 text-meta">
-          <span className="text-danger">$</span>
-          <span className="uppercase tracking-wider text-muted">
-            admin.users
-          </span>
-          <span className="text-faint">·</span>
-          <span className="text-meta text-faint tabular-nums">
-            {String(users.length).padStart(2, "0")}
-          </span>
-        </div>
-        <h1 className="text-[32px] tracking-tightest text-fg leading-none mb-5">
-          users
+        <p className="text-[12px] text-muted mb-2 tabular-nums">
+          Admin / Users &middot; {users.length} records
+        </p>
+        <h1 className="text-[32px] tracking-tight text-fg leading-none mb-5">
+          Users
         </h1>
-        <form method="GET" className="flex items-baseline gap-2 max-w-[420px]">
-          <span className="text-danger">$</span>
+        <form method="GET" className="max-w-[420px]">
           <input
             name="q"
             defaultValue={search}
-            placeholder="grep username|email"
-            className="flex-1 bg-transparent border-0 border-b border-rule px-1 h-8 text-[13px] text-fg placeholder:text-faint focus:outline-hidden focus:border-accent transition-colors"
+            placeholder="Search username or email"
+            className="w-full bg-card border border-rule rounded-md px-3 h-9 text-[13px] text-fg placeholder:text-faint focus:outline-hidden focus:border-accent transition-colors"
           />
         </form>
       </header>
@@ -98,7 +89,7 @@ export default async function AdminUsersPage({
       <div data-mount-row>
         <Section
           index="1.0"
-          title="users"
+          title="Users"
           hint={
             search
               ? `${users.length} matching "${search}"`
@@ -106,28 +97,26 @@ export default async function AdminUsersPage({
           }
         >
           {users.length === 0 ? (
-            <Empty>no users found</Empty>
+            <Empty>No users found</Empty>
           ) : (
             users.map(u => (
               <Row key={u.id}>
                 <RowLabel>
                   <span className="flex items-baseline gap-2">
-                    <span className="text-fg normal-case tracking-normal">
+                    <span className="text-fg">
                       @{u.username}
                     </span>
-                    {u.role === "admin" && <Tag tone="danger">admin</Tag>}
+                    {u.role === "admin" && <Tag tone="danger">Admin</Tag>}
                   </span>
                 </RowLabel>
                 <RowValue>
                   <Tag tone={statusTone[u.status] ?? "neutral"}>{u.status}</Tag>
-                  <Glyph kind="dot" />
                   <span className="text-muted truncate">{u.email}</span>
-                  <Glyph kind="dot" />
                   <span className="text-faint tabular-nums">
                     {u.created_at?.slice(0, 10)}
                   </span>
                 </RowValue>
-                <div className="text-meta uppercase tracking-wider">
+                <div className="text-[12px]">
                   {u.status !== "banned" ? (
                     <form action={banUserAction}>
                       <input type="hidden" name="userId" value={u.id} />
@@ -135,7 +124,7 @@ export default async function AdminUsersPage({
                         type="submit"
                         className="text-secondary hover:text-danger transition-colors"
                       >
-                        ban
+                        Ban
                       </button>
                     </form>
                   ) : (
@@ -143,9 +132,9 @@ export default async function AdminUsersPage({
                       <input type="hidden" name="userId" value={u.id} />
                       <button
                         type="submit"
-                        className="text-secondary hover:text-accent transition-colors"
+                        className="text-secondary hover:text-accent-strong transition-colors"
                       >
-                        unban
+                        Unban
                       </button>
                     </form>
                   )}
diff --git a/app/admin/verify/TelegramStepUpWidget.tsx b/app/admin/verify/TelegramStepUpWidget.tsx
index 32e696d..be5904f 100644
--- a/app/admin/verify/TelegramStepUpWidget.tsx
+++ b/app/admin/verify/TelegramStepUpWidget.tsx
@@ -57,8 +57,8 @@ export function TelegramStepUpWidget({
 
   return (
     <div className="flex flex-col gap-5">
-      <p className="text-meta text-secondary">
-        a one-time code will be sent to your linked telegram account.
+      <p className="text-[13px] text-secondary">
+        A one-time code will be sent to your linked Telegram account.
       </p>
 
       {error && (
@@ -69,12 +69,12 @@ export function TelegramStepUpWidget({
 
       {step === "send" ? (
         <Button onClick={sendCode} loading={loading}>
-          send code via telegram
+          Send code via Telegram
         </Button>
       ) : (
         <form onSubmit={submitCode} className="flex flex-col gap-4">
           <Field
-            label="verification code"
+            label="Verification code"
             name="code"
             type="text"
             autoComplete="one-time-code"
@@ -86,7 +86,7 @@ export function TelegramStepUpWidget({
             required
           />
           <Button type="submit" loading={loading}>
-            verify
+            Verify
           </Button>
           <button
             type="button"
@@ -95,9 +95,9 @@ export function TelegramStepUpWidget({
               setCode("");
               setError("");
             }}
-            className="text-meta uppercase tracking-wider text-secondary hover:text-accent transition-colors"
+            className="text-[13px] text-secondary hover:text-accent-strong transition-colors"
           >
-            resend code
+            Resend code
           </button>
         </form>
       )}
diff --git a/app/admin/verify/page.tsx b/app/admin/verify/page.tsx
index a2f4278..e6d0426 100644
--- a/app/admin/verify/page.tsx
+++ b/app/admin/verify/page.tsx
@@ -6,7 +6,6 @@ import {
   adminStepUpTtlSeconds,
 } from "@/lib/server/config";
 import { Alert } from "@/components/Alert";
-import { Glyph } from "@/components/Glyph";
 import { TelegramStepUpWidget } from "./TelegramStepUpWidget";
 
 export const dynamic = "force-dynamic";
@@ -27,27 +26,22 @@ export default async function AdminVerifyPage({
   const callbackUrl = `${authBaseUrl()}/api/admin/telegram-step-up`;
 
   const errorMessages: Record<string, string> = {
-    invalid_payload: "telegram verification failed — try again",
+    invalid_payload: "Telegram verification failed — try again",
     identity_mismatch:
-      "the telegram account does not match your linked identity",
+      "The Telegram account does not match your linked identity",
   };
 
   return (
     <div className="min-h-screen bg-bg flex items-center justify-center px-4">
       <div className="w-full max-w-[440px]">
         <header className="mb-8">
-          <div className="flex items-baseline gap-2 mb-2 text-meta">
-            <span className="text-danger">$</span>
-            <span className="uppercase tracking-wider text-muted">
-              admin.verify
-            </span>
-          </div>
-          <h1 className="text-[28px] tracking-tightest text-fg leading-none mb-2">
-            verify identity
+          <p className="text-[12px] text-muted mb-2">admin / verify</p>
+          <h1 className="text-[28px] tracking-tight text-fg leading-none mb-2">
+            Verify identity
           </h1>
-          <p className="text-meta text-secondary">
-            admin access requires telegram verification every{" "}
-            <span className="text-danger tabular-nums">
+          <p className="text-[14px] text-secondary">
+            Admin access requires Telegram verification every{" "}
+            <span className="text-fg tabular-nums font-medium">
               {adminStepUpTtlSeconds / 60}
             </span>{" "}
             minutes.
@@ -57,26 +51,20 @@ export default async function AdminVerifyPage({
         {error && (
           <div className="mb-5">
             <Alert tone="danger">
-              {errorMessages[error] ?? "verification failed — try again"}
+              {errorMessages[error] ?? "Verification failed — try again"}
             </Alert>
           </div>
         )}
 
-        <div className="border-t border-b border-rule py-6">
+        <div className="bg-card border border-rule rounded-lg p-6">
           {!current.user.telegramId ? (
-            <div className="flex items-baseline gap-3 text-meta">
-              <Glyph kind="warn" />
-              <span className="text-accent">
-                no telegram account is linked — link one from the dashboard first
-              </span>
-            </div>
+            <Alert tone="warning">
+              No Telegram account is linked — link one from the dashboard first
+            </Alert>
           ) : !botUsername ? (
-            <div className="flex items-baseline gap-3 text-meta">
-              <Glyph kind="error" />
-              <span className="text-danger">
-                TELEGRAM_BOT_USERNAME is not configured
-              </span>
-            </div>
+            <Alert tone="danger">
+              TELEGRAM_BOT_USERNAME is not configured
+            </Alert>
           ) : (
             <TelegramStepUpWidget
               botUsername={botUsername}
diff --git a/app/admin/webhooks/page.tsx b/app/admin/webhooks/page.tsx
index 46647d6..f45c76f 100644
--- a/app/admin/webhooks/page.tsx
+++ b/app/admin/webhooks/page.tsx
@@ -1,6 +1,5 @@
 import { Section, Empty } from "@/components/Section";
 import { Tag } from "@/components/Tag";
-import { Glyph } from "@/components/Glyph";
 import { getCurrentSession } from "@/lib/server/session";
 import {
   listRecentWebhookDeliveries,
@@ -23,10 +22,10 @@ const statusTone: Record<
 };
 
 const FILTERS: { label: string; value: WebhookDeliveryStatus | "all" }[] = [
-  { label: "all", value: "all" },
-  { label: "pending", value: "pending" },
-  { label: "delivered", value: "delivered" },
-  { label: "failed", value: "failed" },
+  { label: "All", value: "all" },
+  { label: "Pending", value: "pending" },
+  { label: "Delivered", value: "delivered" },
+  { label: "Failed", value: "failed" },
 ];
 
 export default async function AdminWebhooksPage({
@@ -57,21 +56,17 @@ export default async function AdminWebhooksPage({
         data-mount-row
       >
         <div>
-          <div className="flex items-baseline gap-2 mb-2 text-meta">
-            <span className="text-danger">$</span>
-            <span className="uppercase tracking-wider text-muted">
-              admin.webhooks
+          <p className="text-[13px] text-muted mb-2">
+            admin / webhooks
+            <span className="ml-2 tabular-nums text-faint">
+              {deliveries.length}
             </span>
-            <span className="text-faint">·</span>
-            <span className="text-meta text-faint tabular-nums">
-              {String(deliveries.length).padStart(2, "0")}
-            </span>
-          </div>
-          <h1 className="text-[32px] tracking-tightest text-fg leading-none">
-            webhook deliveries
+          </p>
+          <h1 className="text-[32px] tracking-tight text-fg leading-none">
+            Webhook deliveries
           </h1>
         </div>
-        <nav className="flex items-baseline gap-1 text-meta uppercase tracking-wider">
+        <nav className="flex items-baseline gap-1 text-[13px]">
           {FILTERS.map(f => (
             <Link
               key={f.value}
@@ -80,13 +75,12 @@ export default async function AdminWebhooksPage({
                   ? "/admin/webhooks"
                   : `/admin/webhooks?status=${f.value}`
               }
-              className={`px-2 h-7 leading-7 transition-colors flex items-baseline gap-1.5 ${
+              className={`px-2.5 h-7 leading-7 rounded-md transition-colors flex items-center gap-1.5 ${
                 filter === f.value
-                  ? "text-accent"
+                  ? "bg-hover text-fg font-medium"
                   : "text-secondary hover:text-fg"
               }`}
             >
-              {filter === f.value && <span className="text-accent">■</span>}
               <span>{f.label}</span>
             </Link>
           ))}
@@ -96,11 +90,11 @@ export default async function AdminWebhooksPage({
       <div data-mount-row>
         <Section
           index="1.0"
-          title="deliveries"
+          title="Deliveries"
           hint={filter === "all" ? "most recent" : `filtered: ${filter}`}
         >
           {deliveries.length === 0 ? (
-            <Empty>no deliveries</Empty>
+            <Empty>No deliveries</Empty>
           ) : (
             deliveries.map(d => (
               <div
@@ -118,17 +112,17 @@ export default async function AdminWebhooksPage({
                   </div>
                   <div className="text-muted mt-0.5 truncate">
                     <span className="text-faint">{d.eventType}</span>
-                    <Glyph kind="dot" className="mx-2" />
-                    attempt {d.attemptCount}
+                    <span className="mx-2 text-faint">·</span>
+                    Attempt {d.attemptCount}
                     {d.responseStatus !== null && (
                       <>
-                        <Glyph kind="dot" className="mx-2" />
-                        http {d.responseStatus}
+                        <span className="mx-2 text-faint">·</span>
+                        HTTP {d.responseStatus}
                       </>
                     )}
                     {d.lastError && (
                       <>
-                        <Glyph kind="dot" className="mx-2" />
+                        <span className="mx-2 text-faint">·</span>
                         <span className="text-danger">
                           {d.lastError.slice(0, 80)}
                         </span>
@@ -149,9 +143,9 @@ export default async function AdminWebhooksPage({
                       />
                       <button
                         type="submit"
-                        className="text-meta uppercase tracking-wider text-secondary hover:text-accent transition-colors"
+                        className="text-[13px] text-secondary hover:text-accent-strong transition-colors"
                       >
-                        retry
+                        Retry
                       </button>
                     </form>
                   )}
diff --git a/app/developers/apps/[slug]/AppSettingsForm.tsx b/app/developers/apps/[slug]/AppSettingsForm.tsx
index 947d3dc..a5b38d7 100644
--- a/app/developers/apps/[slug]/AppSettingsForm.tsx
+++ b/app/developers/apps/[slug]/AppSettingsForm.tsx
@@ -3,7 +3,6 @@
 import { useState } from "react";
 import { Alert } from "@/components/Alert";
 import { Button } from "@/components/Button";
-import { Glyph } from "@/components/Glyph";
 import { Section } from "@/components/Section";
 import { updateAppAction } from "./actions";
 
@@ -53,38 +52,35 @@ export function AppSettingsForm({
       {error && <Alert tone="danger">{error}</Alert>}
       {secret && (
         <Alert tone="warning">
-          <div className="flex items-baseline gap-2 mb-1.5">
-            <Glyph kind="warn" />
-            <span className="uppercase tracking-wider">new client secret</span>
-          </div>
-          <code className="block font-mono select-all text-accent break-all">
+          <div className="mb-1.5 text-[13px] font-medium">New client secret</div>
+          <code className="block font-mono select-all text-accent-strong break-all">
             {secret}
           </code>
         </Alert>
       )}
 
-      <Section index="2.0" title="configuration" hint="oauth client details">
+      <Section index="2.0" title="Configuration" hint="OAuth client details">
         <form action={save} className="space-y-5 py-3 px-1">
           <input type="hidden" name="app_id" value={appId} />
 
           <div>
-            <label className="block text-meta uppercase tracking-wider text-muted mb-1">
-              allowed redirect uris
+            <label className="block text-[13px] text-muted mb-1">
+              Allowed redirect URIs
             </label>
             <textarea
               name="redirect_uris"
               rows={4}
               defaultValue={redirectUris.join("\n")}
-              className="w-full bg-transparent border-0 border-b border-rule px-1 py-2 text-[13px] text-fg placeholder:text-faint focus:outline-hidden focus:border-accent transition-colors resize-y leading-relaxed"
+              className="w-full bg-card border border-rule rounded-md px-3 py-2 text-[13px] text-fg placeholder:text-faint focus:outline-hidden focus:border-accent transition-colors resize-y leading-relaxed"
             />
-            <p className="text-meta text-muted mt-2">
-              one per line. strict https required (except localhost).
+            <p className="text-[12px] text-muted mt-2">
+              One per line. Strict HTTPS required (except localhost).
             </p>
           </div>
 
           <div>
             <Button type="submit" loading={busy === "save"}>
-              save changes
+              Save changes
             </Button>
           </div>
         </form>
@@ -92,63 +88,61 @@ export function AppSettingsForm({
 
       <Section
         index="2.1"
-        title="oauth version"
-        hint="compatibility profile"
+        title="OAuth version"
+        hint="Compatibility profile"
       >
         <form action={save} className="space-y-5 py-3 px-1">
           <input type="hidden" name="app_id" value={appId} />
           <input type="hidden" name="action" value="update_oauth_version" />
           <div>
-            <label className="block text-meta uppercase tracking-wider text-muted mb-1">
-              compatibility profile
+            <label className="block text-[13px] text-muted mb-1">
+              Compatibility profile
             </label>
-            <div className="border-b border-rule">
-              <select
-                name="oauth_profile_version"
-                defaultValue={oauthProfileVersion}
-                className="w-full bg-transparent border-0 px-1 py-2 text-[14px] text-fg focus:outline-hidden focus:text-accent transition-colors appearance-none cursor-pointer"
-                style={{
-                  backgroundImage:
-                    "linear-gradient(45deg, transparent 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, transparent 50%)",
-                  backgroundPosition:
-                    "calc(100% - 12px) calc(50% - 3px), calc(100% - 8px) calc(50% - 3px)",
-                  backgroundSize: "4px 4px",
-                  backgroundRepeat: "no-repeat",
-                }}
-              >
-                <option value="bn-oauth-2026-05">bottleneck oauth 2026.05</option>
-                <option value="bn-oauth-2026-01">bottleneck oauth 2026.01</option>
-              </select>
-            </div>
-            <p className="text-meta text-muted mt-2">
-              both versions behave identically today — new apps should stay on 2026.05.
+            <select
+              name="oauth_profile_version"
+              defaultValue={oauthProfileVersion}
+              className="w-full bg-card border border-rule rounded-md px-3 py-2 text-[14px] text-fg focus:outline-hidden focus:border-accent transition-colors appearance-none cursor-pointer"
+              style={{
+                backgroundImage:
+                  "linear-gradient(45deg, transparent 50%, var(--fg) 50%), linear-gradient(135deg, var(--fg) 50%, transparent 50%)",
+                backgroundPosition:
+                  "calc(100% - 12px) calc(50% - 3px), calc(100% - 8px) calc(50% - 3px)",
+                backgroundSize: "4px 4px",
+                backgroundRepeat: "no-repeat",
+              }}
+            >
+              <option value="bn-oauth-2026-05">bottleneck OAuth 2026.05</option>
+              <option value="bn-oauth-2026-01">bottleneck OAuth 2026.01</option>
+            </select>
+            <p className="text-[12px] text-muted mt-2">
+              Both versions behave identically today — new apps should stay on 2026.05.
             </p>
           </div>
 
           <Button type="submit" loading={busy === "save"}>
-            save oauth version
+            Save OAuth version
           </Button>
         </form>
       </Section>
 
-      <Section index="2.2" title="danger zone" hint="destructive operations">
-        <div className="flex items-baseline justify-between py-3 px-1 gap-4">
+      <Section index="2.2" title="Danger zone" hint="Destructive operations">
+        <div className="flex items-center justify-between py-3 px-1 gap-4">
           <div className="min-w-0">
-            <div className="text-[14px] text-fg mb-1">rotate client secret</div>
-            <div className="text-meta text-muted">
-              the previous secret remains valid for 7 days.
+            <div className="text-[14px] text-fg mb-1">Rotate client secret</div>
+            <div className="text-[13px] text-muted">
+              The previous secret remains valid for 7 days.
             </div>
           </div>
           <form action={rotate}>
             <input type="hidden" name="app_id" value={appId} />
             <input type="hidden" name="action" value="rotate_secret" />
-            <button
+            <Button
               type="submit"
-              disabled={busy === "rotate"}
-              className="text-meta uppercase tracking-wider text-secondary hover:text-danger transition-colors disabled:text-faint disabled:cursor-not-allowed"
+              variant="danger"
+              loading={busy === "rotate"}
             >
-              {busy === "rotate" ? "rotating" : "rotate"}
-            </button>
+              {busy === "rotate" ? "Rotating…" : "Rotate"}
+            </Button>
           </form>
         </div>
       </Section>
diff --git a/app/developers/apps/[slug]/CopyValue.tsx b/app/developers/apps/[slug]/CopyValue.tsx
index 073ab0f..7a8f45e 100644
--- a/app/developers/apps/[slug]/CopyValue.tsx
+++ b/app/developers/apps/[slug]/CopyValue.tsx
@@ -18,14 +18,14 @@ export function CopyValue({ value, label }: { value: string; label?: string }) {
 
   return (
     <span className="inline-flex items-baseline gap-2">
-      <span className="text-accent">{value}</span>
+      <span className="text-accent-strong">{value}</span>
       <button
         type="button"
         onClick={copy}
-        className="text-meta uppercase tracking-wider text-secondary hover:text-accent transition-colors"
+        className="text-[12px] text-secondary hover:text-accent-strong transition-colors"
         aria-label={`copy ${label || "value"}`}
       >
-        {copied ? "copied" : "copy"}
+        {copied ? "Copied" : "Copy"}
       </button>
     </span>
   );
diff --git a/app/developers/apps/[slug]/WebhookEndpointsSection.tsx b/app/developers/apps/[slug]/WebhookEndpointsSection.tsx
index 4d7f324..20350cf 100644
--- a/app/developers/apps/[slug]/WebhookEndpointsSection.tsx
+++ b/app/developers/apps/[slug]/WebhookEndpointsSection.tsx
@@ -5,7 +5,6 @@ import { Alert } from "@/components/Alert";
 import { Button } from "@/components/Button";
 import { Field } from "@/components/Field";
 import { Tag } from "@/components/Tag";
-import { Glyph } from "@/components/Glyph";
 import { Section, Row, RowLabel, RowValue, Empty } from "@/components/Section";
 import {
   createWebhookEndpointAction,
@@ -23,10 +22,10 @@ type Endpoint = {
 };
 
 const EVENT_OPTIONS = [
-  { value: "activation.approved", label: "activation approved" },
-  { value: "activation.denied", label: "activation denied" },
-  { value: "activation.cancelled", label: "activation cancelled" },
-  { value: "activation.expired", label: "activation expired" },
+  { value: "activation.approved", label: "Activation approved" },
+  { value: "activation.denied", label: "Activation denied" },
+  { value: "activation.cancelled", label: "Activation cancelled" },
+  { value: "activation.expired", label: "Activation expired" },
 ];
 
 export function WebhookEndpointsSection({
@@ -77,12 +76,11 @@ export function WebhookEndpointsSection({
       {revealedSecret && (
         <Alert tone="warning">
           <div className="flex items-baseline gap-2 mb-1.5">
-            <Glyph kind="warn" />
-            <span className="uppercase tracking-wider">
-              signing secret — shown once
+            <span className="text-[13px] font-medium text-muted">
+              Signing secret — shown once
             </span>
           </div>
-          <code className="block font-mono select-all text-accent break-all">
+          <code className="block font-mono select-all text-accent-strong break-all">
             {revealedSecret}
           </code>
         </Alert>
@@ -90,11 +88,11 @@ export function WebhookEndpointsSection({
 
       <Section
         index="3.0"
-        title="webhook endpoints"
-        hint="event delivery targets"
+        title="Webhook endpoints"
+        hint="Event delivery targets"
       >
         {endpoints.length === 0 ? (
-          <Empty>no webhook endpoints</Empty>
+          <Empty>No webhook endpoints</Empty>
         ) : (
           endpoints.map((ep) => (
             <Row key={ep.publicId}>
@@ -105,23 +103,22 @@ export function WebhookEndpointsSection({
               </RowLabel>
               <RowValue>
                 <Tag tone={ep.status === "active" ? "success" : "neutral"}>
-                  {ep.status}
+                  {ep.status === "active" ? "Active" : "Disabled"}
                 </Tag>
-                <Glyph kind="dot" />
-                <span className="text-muted text-meta truncate">
-                  {ep.eventTypes.join(", ") || "no events"}
+                <span className="text-muted text-[13px] truncate">
+                  {ep.eventTypes.join(", ") || "No events"}
                 </span>
               </RowValue>
-              <div className="flex items-baseline gap-3 text-meta uppercase tracking-wider">
+              <div className="flex items-baseline gap-3 text-[13px]">
                 {ep.status === "active" && (
                   <form action={rotate}>
                     <input type="hidden" name="app_id" value={appId} />
                     <input type="hidden" name="endpoint_id" value={ep.publicId} />
                     <button
                       type="submit"
-                      className="text-secondary hover:text-accent transition-colors"
+                      className="text-secondary hover:text-accent-strong transition-colors"
                     >
-                      rotate secret
+                      Rotate secret
                     </button>
                   </form>
                 )}
@@ -131,9 +128,9 @@ export function WebhookEndpointsSection({
                     <input type="hidden" name="endpoint_id" value={ep.publicId} />
                     <button
                       type="submit"
-                      className="text-secondary hover:text-accent transition-colors"
+                      className="text-secondary hover:text-accent-strong transition-colors"
                     >
-                      disable
+                      Disable
                     </button>
                   </form>
                 )}
@@ -144,7 +141,7 @@ export function WebhookEndpointsSection({
                     type="submit"
                     className="text-secondary hover:text-danger transition-colors"
                   >
-                    delete
+                    Delete
                   </button>
                 </form>
               </div>
@@ -153,11 +150,11 @@ export function WebhookEndpointsSection({
         )}
       </Section>
 
-      <Section index="3.1" title="add endpoint" hint="register new target">
+      <Section index="3.1" title="Add endpoint" hint="Register new target">
         <form action={create} className="space-y-5 py-3 px-1">
           <input type="hidden" name="app_id" value={appId} />
           <Field
-            label="endpoint url"
+            label="Endpoint URL"
             name="url"
             type="url"
             required
@@ -165,8 +162,8 @@ export function WebhookEndpointsSection({
             hint="https required (or http://localhost in development)"
           />
           <div>
-            <label className="block text-meta uppercase tracking-wider text-muted mb-2">
-              events
+            <label className="block text-[13px] text-muted mb-2">
+              Events
             </label>
             <div className="border-t border-rule">
               {EVENT_OPTIONS.map((opt) => (
@@ -179,9 +176,9 @@ export function WebhookEndpointsSection({
                     name="event_types"
                     value={opt.value}
                     defaultChecked
-                    className="appearance-none w-4 h-4 border border-rule bg-transparent checked:bg-accent checked:border-accent transition-colors shrink-0 translate-y-0.5"
+                    className="appearance-none w-4 h-4 rounded border border-rule bg-transparent checked:bg-accent checked:border-accent transition-colors shrink-0 translate-y-0.5"
                   />
-                  <span className="text-meta text-fg group-hover:text-accent transition-colors">
+                  <span className="text-[13px] text-fg group-hover:text-accent-strong transition-colors">
                     {opt.label}
                   </span>
                 </label>
@@ -189,7 +186,7 @@ export function WebhookEndpointsSection({
             </div>
           </div>
           <Button type="submit" loading={busy}>
-            add endpoint
+            Add endpoint
           </Button>
         </form>
       </Section>
diff --git a/app/developers/apps/[slug]/page.tsx b/app/developers/apps/[slug]/page.tsx
index 617513b..9fe44f0 100644
--- a/app/developers/apps/[slug]/page.tsx
+++ b/app/developers/apps/[slug]/page.tsx
@@ -68,29 +68,23 @@ export default async function AppSettingsPage({
             data-mount-row
           >
             <div
-              className="h-16 w-16 border border-accent flex items-center justify-center text-accent text-[20px] tracking-wider shrink-0"
+              className="h-16 w-16 rounded-lg border border-rule bg-bg-soft flex items-center justify-center text-accent-strong text-[20px] font-semibold shrink-0"
               aria-hidden
             >
               {initials}
             </div>
             <div className="min-w-0 flex-1">
-              <div className="flex items-baseline gap-2 mb-2 text-meta">
-                <span className="text-accent">$</span>
-                <span className="uppercase tracking-wider text-muted">
-                  app.settings
-                </span>
+              <div className="flex items-center gap-2 mb-2">
+                <span className="text-[12px] text-muted">App settings</span>
                 {app.status === "disabled" && (
-                  <>
-                    <span className="text-faint">·</span>
-                    <Tag tone="danger">disabled</Tag>
-                  </>
+                  <Tag tone="danger">Disabled</Tag>
                 )}
               </div>
-              <h1 className="text-[32px] tracking-tightest text-fg leading-none mb-2 truncate">
+              <h1 className="text-[32px] tracking-tight text-fg leading-none mb-2 truncate">
                 {app.name}
               </h1>
-              <p className="text-meta text-muted">
-                client id: <CopyValue value={app.public_id} label="client id" />
+              <p className="text-[13px] text-muted">
+                Client ID: <CopyValue value={app.public_id} label="client id" />
               </p>
             </div>
           </header>
@@ -98,25 +92,25 @@ export default async function AppSettingsPage({
           <div data-mount-row>
             <Section
               index="1.0"
-              title="identifiers"
-              hint="immutable oauth credentials"
+              title="Identifiers"
+              hint="Immutable OAuth credentials"
             >
               <Row>
-                <RowLabel>client id</RowLabel>
+                <RowLabel>Client ID</RowLabel>
                 <RowValue>
                   <CopyValue value={app.public_id} label="client id" />
                 </RowValue>
                 <span />
               </Row>
               <Row>
-                <RowLabel>slug</RowLabel>
+                <RowLabel>Slug</RowLabel>
                 <RowValue>
                   <span className="text-fg">{slug}</span>
                 </RowValue>
                 <span />
               </Row>
               <Row>
-                <RowLabel>created</RowLabel>
+                <RowLabel>Created</RowLabel>
                 <RowValue>
                   <span className="text-muted tabular-nums">
                     {app.created_at.slice(0, 16).replace("T", " ")}
diff --git a/app/developers/apps/new/ClientForm.tsx b/app/developers/apps/new/ClientForm.tsx
index d4762d1..7d73007 100644
--- a/app/developers/apps/new/ClientForm.tsx
+++ b/app/developers/apps/new/ClientForm.tsx
@@ -5,7 +5,6 @@ import Link from "next/link";
 import { Button } from "@/components/Button";
 import { Alert } from "@/components/Alert";
 import { Field } from "@/components/Field";
-import { Glyph } from "@/components/Glyph";
 import { createAppAction } from "./actions";
 
 export function ClientForm() {
@@ -39,43 +38,42 @@ export function ClientForm() {
     return (
       <div>
         <div className="flex items-baseline gap-3 mb-1">
-          <Glyph kind="ok" />
-          <span className="text-meta uppercase tracking-wider text-ok">
-            application created
+          <span className="inline-block w-2 h-2 rounded-full bg-ok" />
+          <span className="text-[12px] text-ok">
+            Application created
           </span>
         </div>
-        <h2 className="text-[24px] tracking-tightest text-fg mb-2 leading-none">
-          credentials issued
+        <h2 className="text-[24px] text-fg mb-2 leading-none">
+          Credentials issued
         </h2>
-        <p className="text-meta text-muted mb-7">
-          copy your client secret now — it will never be shown again
+        <p className="text-[13px] text-muted mb-7">
+          Copy your client secret now — it will never be shown again
         </p>
 
-        <div className="space-y-5 mb-8">
-          <div>
-            <label className="block text-meta uppercase tracking-wider text-muted mb-1">
-              client id
+        <div className="bg-card border border-rule rounded-lg divide-y divide-rule mb-8">
+          <div className="px-4 py-3">
+            <label className="block text-[12px] text-muted mb-1">
+              Client ID
             </label>
-            <code className="block px-1 py-2 border-b border-rule text-[13.5px] text-accent select-all break-all">
+            <code className="block text-[13.5px] text-accent-strong select-all break-all">
               {created.clientId}
             </code>
           </div>
-          <div>
-            <label className="block text-meta uppercase tracking-wider text-muted mb-1">
-              client secret
+          <div className="px-4 py-3">
+            <label className="block text-[12px] text-muted mb-1">
+              Client secret
             </label>
-            <code className="block px-1 py-2 border-b border-rule text-[13.5px] text-accent select-all break-all">
+            <code className="block text-[13.5px] text-accent-strong select-all break-all">
               {created.clientSecret}
             </code>
-            <p className="mt-2 text-meta text-accent flex items-baseline gap-1.5">
-              <Glyph kind="warn" />
-              <span>shown once — store immediately</span>
+            <p className="mt-2 text-[12px] text-accent-strong flex items-baseline gap-1.5">
+              <span>Shown once — store immediately</span>
             </p>
           </div>
         </div>
 
         <Link href={`/developers/apps/${created.slug}`}>
-          <Button>go to app settings</Button>
+          <Button>Go to app settings</Button>
         </Link>
       </div>
     );
@@ -86,32 +84,32 @@ export function ClientForm() {
       {error && <Alert tone="danger">{error}</Alert>}
 
       <Field
-        label="application name"
+        label="Application name"
         name="name"
-        placeholder="my cool app"
+        placeholder="My cool app"
         required
         maxLength={50}
-        hint="displayed to users on the authorization consent screen"
+        hint="Displayed to users on the authorization consent screen"
       />
 
       <Field
-        label="redirect uri"
+        label="Redirect URI"
         name="redirect_uri"
         type="url"
         placeholder="https://yourapp.com/oauth/callback"
         required
-        hint="where users are sent after authorizing — https required (except localhost)"
+        hint="Where users are sent after authorizing — https required (except localhost)"
       />
 
       <div className="pt-4 border-t border-rule flex items-center justify-end gap-4">
         <Link
           href="/developers/apps"
-          className="text-meta uppercase tracking-wider text-secondary hover:text-accent transition-colors"
+          className="text-[13px] text-secondary hover:text-accent-strong transition-colors"
         >
-          cancel
+          Cancel
         </Link>
         <Button type="submit" loading={loading}>
-          create app
+          Create app
         </Button>
       </div>
     </form>
diff --git a/app/developers/apps/new/page.tsx b/app/developers/apps/new/page.tsx
index 1920c6a..72fc922 100644
--- a/app/developers/apps/new/page.tsx
+++ b/app/developers/apps/new/page.tsx
@@ -27,17 +27,11 @@ export default async function NewAppPage() {
           data-mount-stagger
         >
           <header className="mb-10" data-mount-row>
-            <div className="flex items-baseline gap-2 mb-2 text-meta">
-              <span className="text-accent">$</span>
-              <span className="uppercase tracking-wider text-muted">
-                app.create
-              </span>
-            </div>
-            <h1 className="text-[32px] tracking-tightest text-fg leading-none mb-3">
-              new application
+            <h1 className="text-[32px] text-fg leading-none mb-3">
+              New application
             </h1>
-            <p className="text-meta text-muted max-w-prose">
-              register a new oauth client to authenticate users and access apis.
+            <p className="text-[15px] text-muted max-w-prose">
+              Register a new OAuth client to authenticate users and access APIs.
             </p>
           </header>
 
diff --git a/app/developers/apps/page.tsx b/app/developers/apps/page.tsx
index d00edf3..a89de53 100644
--- a/app/developers/apps/page.tsx
+++ b/app/developers/apps/page.tsx
@@ -4,7 +4,6 @@ import { Sidebar } from "@/components/Sidebar";
 import { TopNav } from "@/components/TopNav";
 import { Button } from "@/components/Button";
 import { Tag } from "@/components/Tag";
-import { Glyph } from "@/components/Glyph";
 import { Section, Empty } from "@/components/Section";
 import { getCurrentSession } from "@/lib/server/session";
 import { query } from "@/lib/server/db";
@@ -53,59 +52,50 @@ export default async function DeveloperAppsPage() {
             data-mount-row
           >
             <div>
-              <div className="flex items-baseline gap-2 mb-2 text-meta">
-                <span className="text-accent">$</span>
-                <span className="uppercase tracking-wider text-muted">
-                  developer.apps
-                </span>
-                <span className="text-faint">·</span>
-                <span className="text-meta text-faint tabular-nums">
-                  {String(apps.length).padStart(2, "0")} app
-                  {apps.length === 1 ? "" : "s"}
+              <div className="flex items-baseline gap-2 mb-2">
+                <span className="text-[13px] text-muted">Developer / apps</span>
+                <span className="text-[13px] text-faint tabular-nums">
+                  {apps.length} app{apps.length === 1 ? "" : "s"}
                 </span>
               </div>
-              <h1 className="text-[32px] tracking-tightest text-fg leading-none">
-                oauth apps
+              <h1 className="text-[32px] tracking-tight text-fg leading-none">
+                OAuth apps
               </h1>
             </div>
             <Link href="/developers/apps/new">
-              <Button>+ new app</Button>
+              <Button>+ New app</Button>
             </Link>
           </header>
 
           <div data-mount-row>
             <Section
               index="1.0"
-              title="registered apps"
-              hint="oauth clients you own"
+              title="Registered apps"
+              hint="OAuth clients you own"
             >
               {apps.length === 0 ? (
-                <Empty>no apps registered yet</Empty>
+                <Empty>No apps registered yet</Empty>
               ) : (
                 apps.map(app => (
                   <Link
                     key={app.slug}
                     href={`/developers/apps/${app.slug}`}
-                    className="grid grid-cols-[1fr_220px_140px_auto] gap-4 px-1 py-3.5 border-t border-rule first:border-t-0 items-center text-[13px] group hover:text-accent transition-colors"
+                    className="grid grid-cols-[1fr_220px_140px] gap-4 px-1 py-3.5 border-t border-rule first:border-t-0 items-center text-[13px] group hover:text-accent-strong transition-colors"
                   >
                     <div className="flex items-baseline gap-2 min-w-0">
-                      <span className="text-fg group-hover:text-accent transition-colors truncate">
+                      <span className="text-fg group-hover:text-accent-strong transition-colors truncate">
                         {app.name}
                       </span>
                       {app.status === "disabled" && (
-                        <Tag tone="danger">disabled</Tag>
+                        <Tag tone="danger">Disabled</Tag>
                       )}
                     </div>
-                    <span className="text-meta text-muted truncate">
+                    <span className="text-[13px] text-muted truncate">
                       {app.public_id}
                     </span>
-                    <span className="text-meta text-faint tabular-nums">
+                    <span className="text-[13px] text-faint tabular-nums">
                       {app.created_at.slice(0, 10)}
                     </span>
-                    <Glyph
-                      kind="prompt"
-                      className="text-faint group-hover:text-accent transition-colors"
-                    />
                   </Link>
                 ))
               )}
diff --git a/app/developers/oauth/CodeTabs.tsx b/app/developers/oauth/CodeTabs.tsx
index 0c5710c..9a41102 100644
--- a/app/developers/oauth/CodeTabs.tsx
+++ b/app/developers/oauth/CodeTabs.tsx
@@ -37,13 +37,12 @@ export function CodeTabs({ tabs }: { tabs: { label: string; code: string }[] })
           <button
             key={tab.label}
             onClick={() => setActive(idx)}
-            className={`px-3 h-8 text-meta uppercase tracking-wider transition-colors whitespace-nowrap focus:outline-hidden ${
+            className={`px-3 h-8 text-[13px] transition-colors whitespace-nowrap focus:outline-hidden ${
               active === idx
-                ? "text-accent"
+                ? "text-accent-strong border-b-2 border-accent"
                 : "text-secondary hover:text-fg"
             }`}
           >
-            {active === idx && <span className="text-accent mr-1.5">▸</span>}
             {tab.label}
           </button>
         ))}
diff --git a/app/developers/oauth/page.tsx b/app/developers/oauth/page.tsx
index b08a590..da38a4c 100644
--- a/app/developers/oauth/page.tsx
+++ b/app/developers/oauth/page.tsx
@@ -24,24 +24,20 @@ export default async function OAuthDocsPage() {
         }}
       />
       <div className="flex-1 min-w-0">
-        <TopNav trail="developers / oauth docs" />
+        <TopNav trail="Developers / OAuth docs" />
         <main className="max-w-[1080px] mx-auto px-6 py-10">
           <header className="mb-10">
-            <div className="flex items-baseline gap-2 mb-2 text-meta">
-              <span className="text-accent">$</span>
-              <span className="uppercase tracking-wider text-muted">
-                docs.oauth
-              </span>
-              <span className="text-faint">·</span>
-              <Tag tone="success">oauth 2.1</Tag>
-              <Tag tone="info">oidc</Tag>
+            <div className="flex items-baseline gap-2 mb-2">
+              <span className="text-[13px] text-muted">docs / oauth</span>
+              <Tag tone="success">OAuth 2.1</Tag>
+              <Tag tone="info">OIDC</Tag>
             </div>
-            <h1 className="text-[36px] leading-none tracking-tightest text-fg mb-3">
-              bottleneck oauth
+            <h1 className="text-[36px] leading-none tracking-tight text-fg mb-3">
+              Bottleneck OAuth
             </h1>
-            <p className="text-meta text-muted leading-6 max-w-[680px]">
-              bottleneck acts as an authorization server for your applications.
-              it supports oauth 2.1 with pkce, openid connect, pushed
+            <p className="text-[14px] text-muted leading-6 max-w-[680px]">
+              Bottleneck acts as an authorization server for your applications.
+              It supports OAuth 2.1 with PKCE, OpenID Connect, pushed
               authorization requests, device authorization grant, restricted
               dynamic client registration, and a proprietary bearer key system
               for server-to-server access.
@@ -50,10 +46,10 @@ export default async function OAuthDocsPage() {
 
           <div className="grid lg:grid-cols-[1fr_220px] gap-10 items-start">
             <article>
-              <DocSection id="discovery" index="1.0" title="discovery">
+              <DocSection id="discovery" index="1.0" title="Discovery">
                 <p>
-                  the server publishes a standard oidc discovery document. point
-                  any oidc-compatible library here and all endpoint urls,
+                  The server publishes a standard OIDC discovery document. Point
+                  any OIDC-compatible library here and all endpoint URLs,
                   signing key locations, and supported features are resolved
                   automatically.
                 </p>
@@ -84,16 +80,16 @@ config = requests.get(
                   ]}
                 />
                 <p>
-                  the oauth 2.0 authorization server metadata is also available
+                  The OAuth 2.0 authorization server metadata is also available
                   at <code>{base}/.well-known/oauth-authorization-server</code>.
                 </p>
               </DocSection>
 
-              <DocSection id="dcr" index="2.0" title="dynamic client registration (rfc 7591)">
+              <DocSection id="dcr" index="2.0" title="Dynamic client registration (RFC 7591)">
                 <p>
-                  register a client programmatically with a registration bearer
-                  token. new clients enter admin review first. poll the returned
-                  registration uri with the registration access token; approved
+                  Register a client programmatically with a registration bearer
+                  token. New clients enter admin review first. Poll the returned
+                  registration URI with the registration access token; approved
                   confidential clients reveal <code>client_secret</code> once.
                 </p>
                 <CodeTabs
@@ -152,14 +148,14 @@ client_secret = approved.json().get('client_secret')`,
                 />
               </DocSection>
 
-              <DocSection id="pkce" index="3.0" title="pkce requirement">
+              <DocSection id="pkce" index="3.0" title="PKCE requirement">
                 <p>
-                  <strong className="text-accent">
-                    pkce s256 is mandatory on every authorization request.
+                  <strong className="text-accent-strong">
+                    PKCE S256 is mandatory on every authorization request.
                   </strong>{" "}
-                  the server rejects any code exchange that omits{" "}
+                  The server rejects any code exchange that omits{" "}
                   <code>code_verifier</code> or uses the <code>plain</code>{" "}
-                  method. generate a cryptographically random verifier and
+                  method. Generate a cryptographically random verifier and
                   derive the challenge before sending the user to the
                   authorization endpoint.
                 </p>
@@ -192,12 +188,12 @@ challenge = base64.urlsafe_b64encode(digest).rstrip(b'=').decode()
                 />
               </DocSection>
 
-              <DocSection id="authorize" index="4.0" title="standard authorization">
+              <DocSection id="authorize" index="4.0" title="Standard authorization">
                 <p>
-                  redirect the user&apos;s browser to the authorization
-                  endpoint. include <code>code_challenge</code> and{" "}
-                  <code>code_challenge_method=S256</code> (required). use{" "}
-                  <code>state</code> to prevent csrf in your callback handler.
+                  Redirect the user&apos;s browser to the authorization
+                  endpoint. Include <code>code_challenge</code> and{" "}
+                  <code>code_challenge_method=S256</code> (required). Use{" "}
+                  <code>state</code> to prevent CSRF in your callback handler.
                 </p>
                 <CodeTabs
                   tabs={[
@@ -216,10 +212,10 @@ challenge = base64.urlsafe_b64encode(digest).rstrip(b'=').decode()
                 />
               </DocSection>
 
-              <DocSection id="par" index="5.0" title="pushed authorization requests (rfc 9126)">
+              <DocSection id="par" index="5.0" title="Pushed authorization requests (RFC 9126)">
                 <p>
-                  par lets confidential clients push the full authorization
-                  payload directly to the server before the redirect. the
+                  PAR lets confidential clients push the full authorization
+                  payload directly to the server before the redirect. The
                   response is a short-lived <code>request_uri</code> you use in
                   place of inline query parameters.
                 </p>
@@ -286,11 +282,11 @@ url = f"${base}/oauth/authorize?client_id=app_xxx&request_uri={quote(par['reques
                 />
               </DocSection>
 
-              <DocSection id="device" index="6.0" title="device authorization grant (rfc 8628)">
+              <DocSection id="device" index="6.0" title="Device authorization grant (RFC 8628)">
                 <p>
-                  for headless devices (clis, smart tvs, embedded systems) that
-                  cannot open a browser. the device displays a short user code;
-                  the user approves it on a separate device. poll the token
+                  For headless devices (CLIs, smart TVs, embedded systems) that
+                  cannot open a browser. The device displays a short user code;
+                  the user approves it on a separate device. Poll the token
                   endpoint using the returned <code>interval</code>.
                 </p>
                 <CodeTabs
@@ -352,12 +348,12 @@ const tokens = await new Promise((resolve, reject) => {
                 />
               </DocSection>
 
-              <DocSection id="client-credentials" index="7.0" title="client credentials grant">
+              <DocSection id="client-credentials" index="7.0" title="Client credentials grant">
                 <p>
-                  for machine-to-machine flows where no user is involved. the
-                  client authenticates directly with its credentials. the
+                  For machine-to-machine flows where no user is involved. The
+                  client authenticates directly with its credentials. The
                   resulting access token carries no user context:{" "}
-                  <code>sub</code> is the app&apos;s public id.
+                  <code>sub</code> is the app&apos;s public ID.
                 </p>
                 <CodeTabs
                   tabs={[
@@ -394,9 +390,9 @@ tokens = requests.post('${base}/api/oauth/token', data={
                 />
               </DocSection>
 
-              <DocSection id="token" index="8.0" title="token exchange">
+              <DocSection id="token" index="8.0" title="Token exchange">
                 <p>
-                  exchange the authorization code for tokens. include the{" "}
+                  Exchange the authorization code for tokens. Include the{" "}
                   <code>code_verifier</code> that matches the{" "}
                   <code>code_challenge</code> from the authorization request.
                 </p>
@@ -447,14 +443,14 @@ tokens = res.json()`,
                 />
               </DocSection>
 
-              <DocSection id="refresh" index="9.0" title="refresh tokens">
+              <DocSection id="refresh" index="9.0" title="Refresh tokens">
                 <p>
-                  refresh tokens rotate on every use: the server returns a new
+                  Refresh tokens rotate on every use: the server returns a new
                   refresh token with each response.{" "}
-                  <strong className="text-accent">
-                    always replace your stored refresh token with the new one.
+                  <strong className="text-accent-strong">
+                    Always replace your stored refresh token with the new one.
                   </strong>{" "}
-                  replaying a consumed refresh token is treated as a compromise
+                  Replaying a consumed refresh token is treated as a compromise
                   signal: the server immediately revokes all access and refresh
                   tokens for that client/user pair.
                 </p>
@@ -504,10 +500,10 @@ tokens = res.json()
                 />
               </DocSection>
 
-              <DocSection id="userinfo" index="10.0" title="userinfo">
+              <DocSection id="userinfo" index="10.0" title="Userinfo">
                 <p>
-                  returns claims about the authenticated user. pass the access
-                  token as a bearer header. claims included depend on the
+                  Returns claims about the authenticated user. Pass the access
+                  token as a bearer header. Claims included depend on the
                   scopes that were granted.
                 </p>
                 <CodeTabs
@@ -564,10 +560,10 @@ profile = requests.get(
                 />
               </DocSection>
 
-              <DocSection id="introspect" index="11.0" title="token introspection (rfc 7662)">
+              <DocSection id="introspect" index="11.0" title="Token introspection (RFC 7662)">
                 <p>
-                  check whether a token is currently active. only confidential
-                  clients can call this endpoint. revoked, expired, or unknown
+                  Check whether a token is currently active. Only confidential
+                  clients can call this endpoint. Revoked, expired, or unknown
                   tokens return <code>{`{ "active": false }`}</code>.
                 </p>
                 <CodeTabs
@@ -626,9 +622,9 @@ if intro['active']:
                 />
               </DocSection>
 
-              <DocSection id="revoke" index="12.0" title="token revocation (rfc 7009)">
+              <DocSection id="revoke" index="12.0" title="Token revocation (RFC 7009)">
                 <p>
-                  revoke an access or refresh token immediately. revoking a
+                  Revoke an access or refresh token immediately. Revoking a
                   refresh token also invalidates all access tokens issued from
                   it.
                 </p>
@@ -667,10 +663,10 @@ requests.post('${base}/api/oauth/revoke', data={
                 />
               </DocSection>
 
-              <DocSection id="jwks" index="13.0" title="jwks and id token verification">
+              <DocSection id="jwks" index="13.0" title="JWKS and ID token verification">
                 <p>
-                  access tokens and id tokens are rs256-signed jwts. the public
-                  signing keys are available at the jwks endpoint.
+                  Access tokens and ID tokens are RS256-signed JWTs. The public
+                  signing keys are available at the JWKS endpoint.
                 </p>
                 <CodeTabs
                   tabs={[
@@ -707,31 +703,31 @@ claims = jwt.decode(
                 />
               </DocSection>
 
-              <DocSection id="bearer" index="14.0" title="bearer key system">
+              <DocSection id="bearer" index="14.0" title="Bearer key system">
                 <p>
-                  the bearer key system provides server-to-server api access
-                  without a user session. a bearer key is a long-lived secret
+                  The bearer key system provides server-to-server API access
+                  without a user session. A bearer key is a long-lived secret
                   tied to an external app registered in the system.
                 </p>
 
-                <h3 className="text-meta uppercase tracking-wider text-accent mt-6 mb-2">
-                  &gt; requesting a key
+                <h3 className="text-[13px] font-medium text-fg mt-6 mb-2">
+                  Requesting a key
                 </h3>
                 <p>
-                  visit{" "}
+                  Visit{" "}
                   <a
                     href="/request-bearer"
-                    className="text-accent hover:text-fg transition-colors"
+                    className="text-accent-strong hover:text-fg transition-colors"
                   >
                     /request-bearer
                   </a>{" "}
-                  and describe your application. an admin reviews and approves
-                  the request via telegram. once approved, the plaintext key is
+                  and describe your application. An admin reviews and approves
+                  the request via Telegram. Once approved, the plaintext key is
                   available once from your dashboard.
                 </p>
 
-                <h3 className="text-meta uppercase tracking-wider text-accent mt-6 mb-2">
-                  &gt; using the key
+                <h3 className="text-[13px] font-medium text-fg mt-6 mb-2">
+                  Using the key
                 </h3>
                 <CodeTabs
                   tabs={[
@@ -762,16 +758,16 @@ const { id, activationUrl } = await res.json();
                 />
               </DocSection>
 
-              <DocSection id="activation" index="15.0" title="activation flow">
+              <DocSection id="activation" index="15.0" title="Activation flow">
                 <p>
-                  activations are the mechanism by which an external app links
-                  a bottleneck user to its own system. the flow is user-driven:
+                  Activations are the mechanism by which an external app links
+                  a Bottleneck user to its own system. The flow is user-driven:
                   your server creates an activation request, the user approves
-                  it on bottleneck, and your server polls for the result.
+                  it on Bottleneck, and your server polls for the result.
                 </p>
 
-                <h3 className="text-meta uppercase tracking-wider text-accent mt-6 mb-2">
-                  &gt; step 1 — create request
+                <h3 className="text-[13px] font-medium text-fg mt-6 mb-2">
+                  Step 1: create request
                 </h3>
                 <CodeTabs
                   tabs={[
@@ -834,16 +830,16 @@ res = requests.post('${base}/api/activation-requests',
                   ]}
                 />
 
-                <h3 className="text-meta uppercase tracking-wider text-accent mt-6 mb-2">
-                  &gt; step 2 — redirect your user
+                <h3 className="text-[13px] font-medium text-fg mt-6 mb-2">
+                  Step 2: redirect your user
                 </h3>
                 <p>
-                  send your user to the <code>activationUrl</code>. they see a
+                  Send your user to the <code>activationUrl</code>. They see a
                   consent screen listing the requested scopes.
                 </p>
 
-                <h3 className="text-meta uppercase tracking-wider text-accent mt-6 mb-2">
-                  &gt; step 3 — poll for result
+                <h3 className="text-[13px] font-medium text-fg mt-6 mb-2">
+                  Step 3: poll for result
                 </h3>
                 <CodeTabs
                   tabs={[
@@ -883,15 +879,15 @@ if result['status'] == 'approved':
                 />
 
                 <p>
-                  possible statuses: <code>pending</code>, <code>approved</code>
+                  Possible statuses: <code>pending</code>, <code>approved</code>
                   , <code>denied</code>, <code>expired</code>,{" "}
                   <code>cancelled</code>.
                 </p>
               </DocSection>
 
-              <DocSection id="errors" index="16.0" title="error responses">
+              <DocSection id="errors" index="16.0" title="Error responses">
                 <p>
-                  all api errors follow the oauth 2.0 error format. http status
+                  All API errors follow the OAuth 2.0 error format. HTTP status
                   codes: 400 for client errors, 401 for authentication
                   failures, 403 for forbidden, 429 for rate limiting.
                 </p>
@@ -918,7 +914,7 @@ if result['status'] == 'approved':
                 />
               </DocSection>
 
-              <DocSection id="lifetimes" index="17.0" title="token lifetimes">
+              <DocSection id="lifetimes" index="17.0" title="Token lifetimes">
                 <DataGrid
                   cols="200px 120px 1fr"
                   headers={["type", "ttl", "note"]}
@@ -934,9 +930,9 @@ if result['status'] == 'approved':
                 />
               </DocSection>
 
-              <DocSection id="scopes" index="18.0" title="scopes">
+              <DocSection id="scopes" index="18.0" title="Scopes">
                 <p>
-                  legacy aliases are accepted for backwards compatibility but
+                  Legacy aliases are accepted for backwards compatibility but
                   the canonical names below are preferred.
                 </p>
                 <DataGrid
@@ -952,7 +948,7 @@ if result['status'] == 'approved':
                 />
               </DocSection>
 
-              <DocSection id="endpoints" index="19.0" title="endpoints">
+              <DocSection id="endpoints" index="19.0" title="Endpoints">
                 <DataGrid
                   cols="56px 290px 1fr"
                   headers={["method", "path", "description"]}
@@ -978,9 +974,8 @@ if result['status'] == 'approved':
             </article>
 
             <aside className="sticky top-16">
-              <div className="text-meta uppercase tracking-wider text-faint mb-3 flex items-baseline gap-2">
-                <span className="text-accent">$</span>
-                <span>contents</span>
+              <div className="text-[12px] text-muted mb-3">
+                Contents
               </div>
               <nav className="space-y-0 border-t border-rule">
                 {[
@@ -1007,7 +1002,7 @@ if result['status'] == 'approved':
                   <a
                     key={href}
                     href={href}
-                    className="grid grid-cols-[32px_1fr] gap-2 h-7 leading-7 text-meta border-b border-rule text-secondary hover:text-accent transition-colors"
+                    className="grid grid-cols-[32px_1fr] gap-2 h-7 leading-7 text-[13px] border-b border-rule text-secondary hover:text-accent-strong transition-colors"
                   >
                     <span className="text-faint tabular-nums">{index}</span>
                     <span>{label}</span>
@@ -1036,14 +1031,14 @@ function DocSection({
   return (
     <section id={id} className="mb-12 scroll-mt-16">
       <header className="flex items-baseline gap-3 mb-4 pb-2 border-b border-rule">
-        <span className="text-meta text-faint tabular-nums shrink-0">
+        <span className="text-[13px] text-faint tabular-nums shrink-0">
           {index}
         </span>
-        <h2 className="text-[16px] uppercase tracking-wider text-fg">
+        <h2 className="text-[16px] text-fg font-medium">
           {title}
         </h2>
       </header>
-      <div className="space-y-4 text-meta leading-6 text-secondary">
+      <div className="space-y-4 text-[14px] leading-6 text-secondary">
         {children}
       </div>
     </section>
@@ -1066,7 +1061,7 @@ function DataGrid({
   return (
     <div className="border-t border-rule">
       <div
-        className="grid gap-3 px-1 py-2 text-meta uppercase tracking-wider text-faint border-b border-rule"
+        className="grid gap-3 px-1 py-2 text-[12px] text-faint border-b border-rule"
         style={{ gridTemplateColumns: cols }}
       >
         {headers.map(h => (
@@ -1076,7 +1071,7 @@ function DataGrid({
       {rows.map((row, i) => (
         <div
           key={i}
-          className="grid gap-3 px-1 py-2.5 text-meta items-baseline border-b border-rule"
+          className="grid gap-3 px-1 py-2.5 text-[13px] items-baseline border-b border-rule"
           style={{ gridTemplateColumns: cols }}
         >
           {row.map((cell, j) => {
@@ -1084,8 +1079,8 @@ function DataGrid({
             const isMiddle = j === 1;
             let toneClass = "text-fg";
             if (j === row.length - 1) toneClass = "text-muted";
-            if (isFirst && firstTone === "accent") toneClass = "text-accent";
-            if (isMiddle && middleTone === "accent") toneClass = "text-accent tabular-nums";
+            if (isFirst && firstTone === "accent") toneClass = "text-accent-strong";
+            if (isMiddle && middleTone === "accent") toneClass = "text-accent-strong tabular-nums";
             if (isMiddle && !middleTone) toneClass = "text-faint";
             return (
               <span key={j} className={`${toneClass} break-all`}>
diff --git a/app/developers/test-lab/page.tsx b/app/developers/test-lab/page.tsx
index b350f82..fd8aa2e 100644
--- a/app/developers/test-lab/page.tsx
+++ b/app/developers/test-lab/page.tsx
@@ -22,22 +22,18 @@ export default async function TestLabPage() {
         }}
       />
       <div className="flex-1 min-w-0">
-        <TopNav trail="developers / test field lab" />
+        <TopNav trail="Developers / Test field lab" />
         <main className="max-w-[1120px] mx-auto px-6 py-10">
           <header className="mb-10">
-            <div className="flex items-baseline gap-2 mb-2 text-meta">
-              <span className="text-accent">$</span>
-              <span className="uppercase tracking-wider text-muted">
-                oauth.lab
-              </span>
-              <span className="text-faint">·</span>
-              <Tag tone="info">api lab</Tag>
+            <div className="flex items-baseline gap-2 mb-2">
+              <span className="text-[13px] text-muted">OAuth lab</span>
+              <Tag tone="info">API lab</Tag>
             </div>
-            <h1 className="text-[36px] leading-none tracking-tightest text-fg mb-3">
-              test field lab
+            <h1 className="text-[36px] leading-none tracking-tight text-fg mb-3">
+              Test field lab
             </h1>
-            <p className="text-meta text-muted leading-6 max-w-[680px]">
-              build an authorization url, generate pkce values, inspect
+            <p className="text-[14px] text-muted leading-6 max-w-[680px]">
+              Build an authorization URL, generate PKCE values, inspect
               discovery metadata, and test token endpoints against this auth
               server.
             </p>
diff --git a/app/developers/test-lab/test-lab.tsx b/app/developers/test-lab/test-lab.tsx
index 4ea98de..1224a6e 100644
--- a/app/developers/test-lab/test-lab.tsx
+++ b/app/developers/test-lab/test-lab.tsx
@@ -180,63 +180,61 @@ export function TestLab() {
   return (
     <div className="grid xl:grid-cols-[1fr_360px] gap-10 items-start">
       <div>
-        <Section index="1.0" title="client" hint="oauth client config">
+        <Section index="1.0" title="Client" hint="OAuth client config">
           <div className="grid sm:grid-cols-[120px_1fr] gap-3 py-3 px-1 border-b border-rule">
-            <span className="text-meta uppercase tracking-wider text-muted">
-              server
-            </span>
-            <span className="text-meta text-fg truncate">
+            <span className="text-[12px] text-muted">Server</span>
+            <span className="text-[13px] text-fg truncate">
               {cleanBase || "current origin"}
             </span>
           </div>
           <div className="grid md:grid-cols-2 gap-x-6 gap-y-4 py-4 px-1">
-            <LabField label="client id" value={clientId} onChange={setClientId} />
+            <LabField label="Client ID" value={clientId} onChange={setClientId} />
             <LabField
-              label="client secret"
+              label="Client secret"
               value={clientSecret}
               onChange={setClientSecret}
               type="password"
             />
             <LabField
-              label="redirect uri"
+              label="Redirect URI"
               value={redirectUri}
               onChange={setRedirectUri}
             />
-            <LabField label="scopes" value={scopes} onChange={setScopes} />
-            <LabField label="state" value={state} onChange={setState} />
-            <LabField label="nonce" value={nonce} onChange={setNonce} />
+            <LabField label="Scopes" value={scopes} onChange={setScopes} />
+            <LabField label="State" value={state} onChange={setState} />
+            <LabField label="Nonce" value={nonce} onChange={setNonce} />
           </div>
         </Section>
 
-        <Section index="2.0" title="pkce" hint="proof key for code exchange">
+        <Section index="2.0" title="PKCE" hint="Proof key for code exchange">
           <div className="grid md:grid-cols-[1fr_auto] gap-3 items-end py-4 px-1">
             <LabField
-              label="code verifier"
+              label="Code verifier"
               value={verifier}
               onChange={setVerifier}
             />
             <div className="grid grid-cols-2 gap-2">
               <Button variant="secondary" type="button" onClick={refreshChallenge}>
-                derive
+                Derive
               </Button>
               <Button variant="ghost" type="button" onClick={generatePkce}>
-                reset
+                Reset
               </Button>
             </div>
           </div>
           <div className="py-4 px-1 border-t border-rule">
             <LabText
-              label="code challenge"
+              label="Code challenge"
               value={challenge}
               onChange={setChallenge}
             />
           </div>
         </Section>
 
-        <Section index="3.0" title="authorize url" hint="full request">
+        <Section index="3.0" title="Authorize URL" hint="Full request">
           <div className="py-4 px-1">
             <LabText
-              label="url"
+              label="URL"
               value={authorizeUrl}
               onChange={() => undefined}
             />
@@ -246,39 +244,39 @@ export function TestLab() {
                 type="button"
                 onClick={() => copy(authorizeUrl)}
               >
-                copy url
+                Copy URL
               </Button>
               <a href={authorizeUrl} target="_blank" rel="noreferrer">
                 <Button variant="secondary" type="button" className="w-full">
-                  open authorize ↗
+                  Open authorize ↗
                 </Button>
               </a>
             </div>
           </div>
         </Section>
 
-        <Section index="4.0" title="token operations" hint="exchange / refresh / introspect / revoke">
+        <Section index="4.0" title="Token operations" hint="Exchange / refresh / introspect / revoke">
           <div className="grid md:grid-cols-2 gap-x-6 gap-y-4 py-4 px-1">
-            <LabField label="authorization code" value={code} onChange={setCode} />
+            <LabField label="Authorization code" value={code} onChange={setCode} />
             <LabField
-              label="refresh token"
+              label="Refresh token"
               value={refreshToken}
               onChange={setRefreshToken}
               type="password"
             />
             <LabField
-              label="access token"
+              label="Access token"
               value={accessToken}
               onChange={setAccessToken}
               type="password"
             />
             <LabSelect
-              label="revoke target"
+              label="Revoke target"
               value={tokenHint}
               onChange={setTokenHint}
               options={[
-                { value: "refresh_token", label: "refresh token" },
-                { value: "access_token", label: "access token" },
+                { value: "refresh_token", label: "Refresh token" },
+                { value: "access_token", label: "Access token" },
               ]}
             />
           </div>
@@ -289,7 +287,7 @@ export function TestLab() {
               loading={busy === "exchange"}
               onClick={exchangeCode}
             >
-              exchange
+              Exchange
             </Button>
             <Button
               variant="secondary"
@@ -297,7 +295,7 @@ export function TestLab() {
               loading={busy === "refresh"}
               onClick={refreshAccess}
             >
-              refresh
+              Refresh
             </Button>
             <Button
               variant="ghost"
@@ -305,7 +303,7 @@ export function TestLab() {
               loading={busy === "introspect"}
               onClick={introspect}
             >
-              introspect
+              Introspect
             </Button>
             <Button
               variant="danger"
@@ -313,22 +311,14 @@ export function TestLab() {
               loading={busy === "revoke"}
               onClick={revoke}
             >
-              revoke
+              Revoke
             </Button>
           </div>
         </Section>
       </div>
 
       <aside className="space-y-6 xl:sticky xl:top-16">
-        <div className="flex items-baseline gap-2 text-meta uppercase tracking-wider text-faint mb-3">
-          <span className="text-faint">[</span>
-          <span className="text-accent">aux</span>
-          <span className="text-faint">·</span>
-          <span className="text-muted">side panels</span>
-          <span className="text-faint">]</span>
-        </div>
-
-        <Section title="metadata" hint="discovery">
+        <Section title="Metadata" hint="Discovery">
           <div className="grid gap-2 py-4 px-1">
             <Button
               variant="secondary"
@@ -338,7 +328,7 @@ export function TestLab() {
                 request("discovery", "/.well-known/openid-configuration")
               }
             >
-              openid config
+              OpenID config
             </Button>
             <Button
               variant="secondary"
@@ -346,7 +336,7 @@ export function TestLab() {
               loading={busy === "jwks"}
               onClick={() => request("jwks", "/oauth/jwks")}
             >
-              jwks
+              JWKS
             </Button>
             <Button
               variant="secondary"
@@ -356,23 +346,17 @@ export function TestLab() {
                 bearerRequest("userinfo", "/api/oauth/userinfo", "GET")
               }
             >
-              userinfo
+              Userinfo
             </Button>
           </div>
         </Section>
 
         <div>
           <div className="flex items-baseline gap-3 mb-3">
-            <h2 className="text-[15px] uppercase tracking-wider text-fg">
-              response
-            </h2>
-            <span className="text-meta text-muted">
-              <span className="text-faint">// </span>
-              last request
-            </span>
+            <h2 className="text-[15px] font-medium text-fg">Response</h2>
+            <span className="text-[12px] text-muted">last request</span>
           </div>
-          <pre className="min-h-[320px] max-h-[560px] overflow-auto border-t border-b border-rule bg-bg-soft px-3 py-3 text-[12px] leading-5 text-fg whitespace-pre-wrap">
-            <span className="text-faint">{"$ "}</span>
+          <pre className="min-h-[320px] max-h-[560px] overflow-auto border border-rule rounded-lg bg-bg-soft px-3 py-3 text-[12px] leading-5 text-fg whitespace-pre-wrap">
             {response || "(no response yet)"}
           </pre>
         </div>
@@ -394,14 +378,12 @@ function LabField({
 }) {
   return (
     <label className="block">
-      <span className="block text-meta uppercase tracking-wider text-muted mb-1.5">
-        {label}
-      </span>
+      <span className="block text-[12px] text-muted mb-1.5">{label}</span>
       <input
         type={type}
         value={value}
         onChange={event => onChange(event.target.value)}
-        className="w-full bg-bg-soft border-0 border-b border-rule px-3 h-9 text-[13px] text-fg placeholder:text-faint focus:outline-hidden focus:border-accent transition-colors"
+        className="w-full bg-bg-soft border border-rule rounded-md px-3 h-9 text-[13px] text-fg placeholder:text-faint focus:outline-hidden focus:border-accent transition-colors"
       />
     </label>
   );
@@ -418,14 +400,12 @@ function LabText({
 }) {
   return (
     <label className="block">
-      <span className="block text-meta uppercase tracking-wider text-muted mb-1.5">
-        {label}
-      </span>
+      <span className="block text-[12px] text-muted mb-1.5">{label}</span>
       <textarea
         value={value}
         onChange={event => onChange(event.target.value)}
         rows={4}
-        className="w-full resize-y bg-bg-soft border-0 border-b border-rule px-3 py-2 text-[12px] leading-5 text-fg placeholder:text-faint focus:outline-hidden focus:border-accent transition-colors"
+        className="w-full resize-y bg-bg-soft border border-rule rounded-md px-3 py-2 text-[12px] leading-5 text-fg placeholder:text-faint focus:outline-hidden focus:border-accent transition-colors"
       />
     </label>
   );
@@ -444,13 +424,11 @@ function LabSelect({
 }) {
   return (
     <label className="block">
-      <span className="block text-meta uppercase tracking-wider text-muted mb-1.5">
-        {label}
-      </span>
+      <span className="block text-[12px] text-muted mb-1.5">{label}</span>
       <select
         value={value}
         onChange={event => onChange(event.target.value)}
-        className="w-full bg-bg-soft border-0 border-b border-rule px-3 h-9 text-[13px] text-fg focus:outline-hidden focus:border-accent transition-colors appearance-none cursor-pointer"
+        className="w-full bg-bg-soft border border-rule rounded-md px-3 h-9 text-[13px] text-fg focus:outline-hidden focus:border-accent transition-colors appearance-none cursor-pointer"
       >
         {options.map(o => (
           <option key={o.value} value={o.value}>
diff --git a/app/device/page.tsx b/app/device/page.tsx
index 0e26e65..07fa7da 100644
--- a/app/device/page.tsx
+++ b/app/device/page.tsx
@@ -3,7 +3,6 @@ import Link from "next/link";
 import { AuthShell } from "@/components/AuthShell";
 import { Button } from "@/components/Button";
 import { Alert } from "@/components/Alert";
-import { Glyph } from "@/components/Glyph";
 import { getCurrentSession } from "@/lib/server/session";
 import {
   findDeviceCodeByUserCode,
@@ -57,16 +56,13 @@ export default async function DevicePage({
     return (
       <AuthShell tag="auth/device / linked">
         <div className="flex items-baseline gap-3 mb-1">
-          <Glyph kind="ok" />
-          <span className="text-meta uppercase tracking-wider text-ok">
-            connected
-          </span>
+          <span className="text-[13px] text-ok">Connected</span>
         </div>
-        <h1 className="text-[28px] tracking-tightest text-fg mb-2 leading-none">
-          device connected
+        <h1 className="text-[28px] text-fg mb-2 leading-none">
+          Device connected
         </h1>
-        <p className="text-meta text-muted">
-          you can close this window and return to your device.
+        <p className="text-[14px] text-muted">
+          You can close this window and return to your device.
         </p>
       </AuthShell>
     );
@@ -77,10 +73,10 @@ export default async function DevicePage({
     if (!deviceCode || deviceCode.status !== "pending") {
       return (
         <AuthShell tag="auth/device / invalid">
-          <Alert tone="danger">invalid or expired code</Alert>
+          <Alert tone="danger">Invalid or expired code</Alert>
           <Link href="/device" className="block mt-5">
             <Button variant="ghost" type="button">
-              try again
+              Try again
             </Button>
           </Link>
         </AuthShell>
@@ -90,43 +86,36 @@ export default async function DevicePage({
     return (
       <AuthShell tag="auth/device / consent">
         <div className="flex items-baseline gap-3 mb-1">
-          <span className="text-meta uppercase tracking-wider text-accent">
-            connect device
+          <span className="text-[13px] text-accent-strong">
+            Connect device
           </span>
         </div>
-        <h1 className="text-[28px] tracking-tightest text-fg mb-2 leading-none">
+        <h1 className="text-[28px] text-fg mb-2 leading-none">
           {deviceCode.appName}
         </h1>
-        <p className="text-meta text-secondary mb-5">
-          this device is requesting access with the following scopes:
+        <p className="text-[14px] text-secondary mb-5">
+          This device is requesting access with the following scopes:
         </p>
 
-        <div className="border-t border-rule mb-6">
-          {deviceCode.scopes.map((scope, i) => (
-            <div
-              key={scope}
-              className={`flex items-baseline gap-3 py-2.5 ${
-                i > 0 ? "border-t border-rule" : ""
-              }`}
-            >
-              <Glyph kind="ok" />
-              <span className="text-meta text-fg">{scope}</span>
+        <div className="bg-card border border-rule rounded-lg mb-6 divide-y divide-rule">
+          {deviceCode.scopes.map((scope) => (
+            <div key={scope} className="flex items-center gap-3 px-4 py-3">
+              <span className="text-[13px] text-fg">{scope}</span>
             </div>
           ))}
-          <div className="border-t border-rule" />
         </div>
 
         <div className="grid grid-cols-2 gap-3">
           <form action={denyCode}>
             <input type="hidden" name="user_code" value={user_code} />
             <Button variant="ghost" type="submit" className="w-full">
-              deny
+              Deny
             </Button>
           </form>
           <form action={approveCode}>
             <input type="hidden" name="user_code" value={user_code} />
             <Button type="submit" className="w-full">
-              approve
+              Approve
             </Button>
           </form>
         </div>
@@ -136,25 +125,25 @@ export default async function DevicePage({
 
   return (
     <AuthShell tag="auth/device / enter code">
-      <h1 className="text-[28px] tracking-tightest text-fg mb-1 leading-none">
-        enter code
+      <h1 className="text-[28px] text-fg mb-1 leading-none">
+        Enter code
       </h1>
-      <p className="text-meta text-muted mb-7">
-        the code is displayed on your device screen
+      <p className="text-[14px] text-muted mb-7">
+        The code is displayed on your device screen
       </p>
 
       <form action={submitCode} className="space-y-5">
-        <div className="border-b border-rule">
+        <div className="border border-rule rounded-md bg-card">
           <input
             name="user_code"
             placeholder="ABCD-EFGH"
             required
             autoFocus
-            className="w-full bg-transparent border-0 px-1 py-2 text-fg focus:outline-hidden text-center uppercase tracking-[0.3em] text-[24px] tabular-nums placeholder:text-faint"
+            className="w-full bg-transparent border-0 px-3 py-3 text-fg focus:outline-hidden text-center uppercase tracking-[0.3em] text-[24px] tabular-nums placeholder:text-faint"
           />
         </div>
         <Button type="submit" className="w-full">
-          continue
+          Continue
         </Button>
       </form>
     </AuthShell>
diff --git a/app/expired/page.tsx b/app/expired/page.tsx
index da8c250..88c3637 100644
--- a/app/expired/page.tsx
+++ b/app/expired/page.tsx
@@ -6,23 +6,23 @@ type Reason = "invalid" | "expired" | "denied" | "unavailable";
 
 const copy: Record<Reason, { title: string; body: string; tag: string }> = {
   invalid: {
-    title: "invalid activation",
-    body: "this link is malformed or has already been used.",
+    title: "Invalid activation",
+    body: "This link is malformed or has already been used.",
     tag: "auth/error / invalid",
   },
   expired: {
-    title: "activation expired",
-    body: "this request is no longer valid.",
+    title: "Activation expired",
+    body: "This request is no longer valid.",
     tag: "auth/error / expired",
   },
   denied: {
-    title: "activation denied",
-    body: "you denied this request. the app was not authorized.",
+    title: "Activation denied",
+    body: "You denied this request. The app was not authorized.",
     tag: "auth/error / denied",
   },
   unavailable: {
-    title: "app unavailable",
-    body: "this app is not currently available.",
+    title: "App unavailable",
+    body: "This app is not currently available.",
     tag: "auth/error / unavailable",
   },
 };
@@ -43,11 +43,11 @@ export default async function ExpiredPage({
 
   return (
     <AuthShell tag={tag}>
-      <h1 className="text-[24px] tracking-tightest text-fg mb-2">{title}</h1>
+      <h1 className="text-[24px] text-fg mb-2">{title}</h1>
       <p className="text-[13px] text-secondary mb-6">{body}</p>
       <Link href="/">
         <Button variant="secondary" type="button">
-          return to dashboard
+          Return to dashboard
         </Button>
       </Link>
     </AuthShell>
diff --git a/app/forgot/page.tsx b/app/forgot/page.tsx
index b000119..2722a48 100644
--- a/app/forgot/page.tsx
+++ b/app/forgot/page.tsx
@@ -19,11 +19,11 @@ export default function ForgotPasswordPage() {
 
   return (
     <AuthShell tag="auth/recovery">
-      <h1 className="text-[24px] tracking-tightest text-fg mb-1">
-        recover access
+      <h1 className="text-[24px] text-fg mb-1">
+        Recover access
       </h1>
-      <p className="text-meta text-muted mb-5">
-        enter your username or email and we will send a reset link to your linked Telegram account.
+      <p className="text-[13px] text-muted mb-5">
+        Enter your username or email and we will send a reset link to your linked Telegram account.
       </p>
 
       {state?.error && (
@@ -39,7 +39,7 @@ export default function ForgotPasswordPage() {
           </Alert>
           <Link href="/login" className="block mt-4">
             <Button variant="ghost" type="button">
-              return to sign in
+              Return to sign in
             </Button>
           </Link>
         </div>
@@ -47,7 +47,7 @@ export default function ForgotPasswordPage() {
         <form action={formAction}>
           <div className="mb-5">
             <Field
-              label="Username or Email"
+              label="Username or email"
               name="identifier"
               type="text"
               required
@@ -57,12 +57,12 @@ export default function ForgotPasswordPage() {
           </div>
 
           <Button type="submit" disabled={pending}>
-            {pending ? "sending..." : "send reset link"}
+            {pending ? "Sending..." : "Send reset link"}
           </Button>
 
           <Link href="/login" className="block mt-3">
             <Button variant="ghost" type="button">
-              return to sign in
+              Return to sign in
             </Button>
           </Link>
         </form>
diff --git a/app/forgot/reset/page.tsx b/app/forgot/reset/page.tsx
index dea6fe1..26f694b 100644
--- a/app/forgot/reset/page.tsx
+++ b/app/forgot/reset/page.tsx
@@ -25,7 +25,7 @@ function ResetPasswordForm() {
       <AuthShell tag="auth/reset">
         <Alert tone="danger">Missing reset token.</Alert>
         <Link href="/forgot" className="block mt-4">
-          <Button variant="ghost">request new link</Button>
+          <Button variant="ghost">Request new link</Button>
         </Link>
       </AuthShell>
     );
@@ -33,11 +33,11 @@ function ResetPasswordForm() {
 
   return (
     <AuthShell tag="auth/reset">
-      <h1 className="text-[24px] tracking-tightest text-fg mb-1">
-        set new password
+      <h1 className="text-[24px] text-fg mb-1">
+        Set new password
       </h1>
-      <p className="text-meta text-muted mb-5">
-        enter your new password below.
+      <p className="text-[13px] text-muted mb-5">
+        Enter your new password below.
       </p>
 
       {state?.error && (
@@ -52,7 +52,7 @@ function ResetPasswordForm() {
             Password has been successfully reset!
           </Alert>
           <Link href="/login" className="block mt-4">
-            <Button>sign in now</Button>
+            <Button>Sign in now</Button>
           </Link>
         </div>
       ) : (
@@ -70,7 +70,7 @@ function ResetPasswordForm() {
           </div>
 
           <Button type="submit" disabled={pending}>
-            {pending ? "saving..." : "reset password"}
+            {pending ? "Saving..." : "Reset password"}
           </Button>
         </form>
       )}
diff --git a/app/globals.css b/app/globals.css
index ed58c47..30657d2 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,6 +3,9 @@
 @theme {
   --color-bg: var(--bg);
   --color-bg-soft: var(--bg-soft);
+  --color-canvas: var(--bg);
+  --color-card: var(--bg-soft);
+  --color-hover: var(--hover);
   --color-rule: var(--rule);
   --color-rule-strong: var(--rule-strong);
   --color-fg: var(--fg);
@@ -11,41 +14,48 @@
   --color-faint: var(--faint);
   --color-accent: var(--accent);
   --color-accent-dim: var(--accent-dim);
+  --color-accent-strong: var(--accent-strong);
   --color-danger: var(--danger);
   --color-ok: var(--ok);
+  --color-info: var(--info);
+
+  /* Aliases kept so existing utility usage keeps resolving. */
   --color-surface: var(--bg-soft);
   --color-elevated: var(--bg-soft);
-  --color-hover: var(--bg-soft);
   --color-border: var(--rule);
   --color-border-strong: var(--rule-strong);
   --color-success: var(--ok);
   --color-warning: var(--accent);
-  --color-info: var(--secondary);
 
-  --font-mono:
-    JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --font-sans:
+    var(--font-inter), ui-sans-serif, system-ui, -apple-system,
+    BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 
   --text-meta: 12px;
   --text-meta--line-height: 16px;
-  --text-meta--letter-spacing: 0.01em;
+  --text-meta--letter-spacing: 0em;
   --text-micro: 11px;
   --text-micro--line-height: 14px;
-  --text-micro--letter-spacing: 0.06em;
+  --text-micro--letter-spacing: 0.01em;
 
   --tracking-tightest: -0.02em;
-  --tracking-wider: 0.08em;
+  --tracking-tight: -0.01em;
+  --tracking-wider: 0.04em;
+
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
 
-  --radius-none: 0;
-  --radius-sm: 0;
+  --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
+  --shadow-elevated: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08);
 }
 
 /*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
-
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
+  The default border color is `currentcolor` in Tailwind CSS v4. Pin it to
+  the hairline token so elements that rely on the default border color get
+  the quiet rule rather than inheriting text color.
 */
 @layer base {
   *,
@@ -53,35 +63,36 @@
   ::before,
   ::backdrop,
   ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
+    border-color: var(--rule);
   }
 }
 
-/* OPERATOR CONSOLE
- *
- * One typeface (JetBrains Mono), one accent (phosphor amber), rule
- * lines instead of bordered boxes, square corners, no shadows. The
- * design treats the auth service as a serious systems tool, not a
- * SaaS site. Everything below is the typographic and chromatic
- * substrate every component sits on.
- */
+/* Light surface system: a near-white canvas, white cards lifted by a single
+ * soft shadow and a hairline border, one warm accent, generous radius. The
+ * type is a humanist sans at a 14px base. Color does the structural work that
+ * heavy borders used to. */
 
 :root {
-  color-scheme: dark;
+  color-scheme: light;
 
-  --bg: #0a0a0a;
-  --bg-soft: #111111;
-  --rule: #262626;
-  --rule-strong: #3a3a3a;
-  --fg: #f0f0f0;
-  --secondary: #9a9a9a;
-  --muted: #5e5e5e;
-  --faint: #2f2f2f;
+  --bg: #fafafa;
+  --bg-soft: #ffffff;
+  --hover: #f4f4f5;
+  --rule: #e6e6e6;
+  --rule-strong: #d4d4d4;
+  --fg: #1a1a1a;
+  --secondary: #5c5c5c;
+  --muted: #8a8a8a;
+  --faint: #b4b4b4;
 
   --accent: #ffb000;
-  --accent-dim: #6e4d00;
-  --danger: #ff5c5c;
-  --ok: #6dca5f;
+  --accent-dim: #c98a00;
+  /* Readable amber for text/links on a white ground, where the bright accent
+     would fail contrast. */
+  --accent-strong: #9a6300;
+  --danger: #e5484d;
+  --ok: #2f9e44;
+  --info: #056dff;
 }
 
 html,
@@ -90,45 +101,43 @@ body {
   color: var(--fg);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
-    monospace;
-  /* JetBrains Mono designed alternates: slashed zero, alt 'g', curly
-     braces with serifs. The face has personality the default glyphs
-     hide. */
-  font-feature-settings: "ss01", "cv01", "cv02", "zero", "calt";
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.5;
 }
 
 ::selection {
-  background: var(--accent);
-  color: var(--bg);
+  background: #ffe2a8;
+  color: var(--fg);
 }
 
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus {
   -webkit-text-fill-color: var(--fg);
-  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset;
+  -webkit-box-shadow: 0 0 0 1000px var(--bg-soft) inset;
   caret-color: var(--accent);
   transition: background-color 9999s ease-in-out 0s;
 }
 
 *:focus-visible {
-  outline: 1px solid var(--accent);
+  outline: 2px solid var(--accent);
   outline-offset: 2px;
 }
 
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
 }
 ::-webkit-scrollbar-track {
   background: transparent;
 }
 ::-webkit-scrollbar-thumb {
-  background: var(--rule);
+  background: var(--rule-strong);
+  border-radius: 999px;
 }
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--rule-strong);
+  background: var(--muted);
 }
 
 input[type="number"]::-webkit-outer-spin-button,
@@ -137,9 +146,6 @@ input[type="number"]::-webkit-inner-spin-button {
   margin: 0;
 }
 
-/* Cursor blink — step-end keyframes so it's an actual on/off blink,
-   not Tailwind's smooth pulse. Used by the loading button and the
-   typewriter empty-state. */
 @keyframes blink-step {
   0%,
   49% {
@@ -155,9 +161,8 @@ input[type="number"]::-webkit-inner-spin-button {
   animation: blink-step 1s step-end infinite;
 }
 
-/* Mount stagger — one bold page-load reveal. Apply
-   `data-mount-stagger` on a container and `data-mount-row` on each
-   child; CSS handles the rest. */
+/* Mount stagger — a single quiet page-load reveal. Apply `data-mount-stagger`
+   on a container and `data-mount-row` on each child. */
 [data-mount-stagger] > [data-mount-row] {
   opacity: 0;
   transform: translateY(4px);
@@ -195,9 +200,6 @@ input[type="number"]::-webkit-inner-spin-button {
   }
 }
 
-/* Search palette mount — overlay fades in, dialog rises one notch.
-   Short enough to feel like a keystroke, long enough to read as
-   intentional. */
 @keyframes overlay-in {
   from {
     opacity: 0;
@@ -241,32 +243,7 @@ input[type="number"]::-webkit-inner-spin-button {
   }
 }
 
-/* CRT scanlines — opt-in via `.scanlines` on a container. Applied
-   only on the AuthShell so the dashboard stays clean. 2px stripe at
-   4% opacity reads as texture, not noise. */
-.scanlines {
-  position: relative;
-  isolation: isolate;
-}
-.scanlines::before {
-  content: "";
-  position: absolute;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  background-image: repeating-linear-gradient(
-    to bottom,
-    rgba(255, 255, 255, 0.03) 0,
-    rgba(255, 255, 255, 0.03) 1px,
-    transparent 1px,
-    transparent 3px
-  );
-  mix-blend-mode: overlay;
-}
-
-/* Rule line vocabulary used across the design system. The horizontal
-   variant is the load-bearing structural element — it replaces the
-   bordered-card pattern everywhere. */
+/* Hairline helpers retained for dense table/section dividers. */
 .rule-x {
   border-top: 1px solid var(--rule);
 }
@@ -274,14 +251,11 @@ input[type="number"]::-webkit-inner-spin-button {
   border-left: 1px solid var(--rule);
 }
 
-/* OAuth docs code blocks: sit transparent on the page bg so the
-   horizontal-rule pattern carries the structure, not a darker fill
-   that fights the rest of the page. */
 .oauth-code-block {
   margin: 0;
-  border-radius: 0;
+  border-radius: var(--radius-md);
   text-shadow: none;
-  background: transparent;
+  background: var(--hover);
 }
 
 .oauth-code {
diff --git a/app/layout.tsx b/app/layout.tsx
index e9f0e7f..1160b19 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,8 +1,15 @@
 import type { Metadata } from "next";
 import { headers } from "next/headers";
+import { Inter } from "next/font/google";
 import { ThemeEasterEgg } from "@/components/ThemeEasterEgg";
 import "./globals.css";
 
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+});
+
 export const metadata: Metadata = {
   title: "bottleneck / auth",
   description: "Sign in to Bottleneck.",
@@ -11,9 +18,9 @@ export const metadata: Metadata = {
   },
 };
 
-// Apply the persisted easter-egg accent before paint. Without this,
-// a reload would briefly flash amber before useEffect runs.
-const themeBootstrap = `(function(){try{if(localStorage.getItem("bn-theme")==="blood"){var s=document.documentElement.style;s.setProperty("--accent","#ff003c");s.setProperty("--accent-dim","#5c0017");}}catch(e){}})();`;
+// Apply the persisted easter-egg accent before paint. Without this, a reload
+// would briefly flash the default accent before useEffect runs.
+const themeBootstrap = `(function(){try{if(localStorage.getItem("bn-theme")==="blood"){var s=document.documentElement.style;s.setProperty("--accent","#ff003c");s.setProperty("--accent-strong","#b3002a");}}catch(e){}})();`;
 
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   // Reading x-nonce here causes Next.js to apply the nonce to its own
@@ -22,27 +29,14 @@ export default async function RootLayout({ children }: { children: React.ReactNo
   const nonce = (await headers()).get("x-nonce") ?? undefined;
 
   return (
-    <html lang="en" nonce={nonce}>
+    <html lang="en" nonce={nonce} className={inter.variable}>
       <head>
-        <link
-          rel="preconnect"
-          href="https://fonts.googleapis.com"
-        />
-        <link
-          rel="preconnect"
-          href="https://fonts.gstatic.com"
-          crossOrigin="anonymous"
-        />
-        <link
-          rel="stylesheet"
-          href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap"
-        />
         <script
           nonce={nonce}
           dangerouslySetInnerHTML={{ __html: themeBootstrap }}
         />
       </head>
-      <body className="font-mono">
+      <body className="font-sans">
         <ThemeEasterEgg />
         {children}
       </body>
diff --git a/app/login/page.tsx b/app/login/page.tsx
index c69bc79..8bbee17 100644
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -102,11 +102,11 @@ export default function LoginPage() {
 
   return (
     <AuthShell tag="auth/sign-in">
-      <h1 className="text-[28px] tracking-tightest text-fg mb-1 leading-none">
-        sign in
+      <h1 className="text-[28px] text-fg mb-1 leading-none">
+        Sign in
       </h1>
-      <p className="text-meta text-muted mb-7">
-        access your bottleneck account
+      <p className="text-[13px] text-muted mb-7">
+        Access your bottleneck account
       </p>
 
       {error && (
@@ -117,7 +117,7 @@ export default function LoginPage() {
 
       <form className="space-y-5" onSubmit={onSubmit} noValidate>
         <Field
-          label="email or username"
+          label="Email or username"
           name="identifier"
           type="text"
           autoComplete="username"
@@ -125,7 +125,7 @@ export default function LoginPage() {
           required
         />
         <Field
-          label="password"
+          label="Password"
           name="password"
           type="password"
           autoComplete="current-password"
@@ -137,30 +137,30 @@ export default function LoginPage() {
             type="checkbox"
             name="remember"
             defaultChecked
-            className="appearance-none w-4 h-4 border border-rule bg-transparent checked:bg-accent checked:border-accent transition-colors shrink-0 translate-y-0.5"
+            className="appearance-none w-4 h-4 border border-rule bg-transparent checked:bg-accent checked:border-accent transition-colors shrink-0 translate-y-0.5 rounded-md"
           />
-          <span className="text-meta uppercase tracking-wider text-muted group-hover:text-fg transition-colors">
-            remember this device
+          <span className="text-[13px] text-muted group-hover:text-fg transition-colors">
+            Remember this device
           </span>
         </label>
         <TurnstileField />
         <Button type="submit" loading={loading}>
-          continue
+          Continue
         </Button>
       </form>
 
-      <div className="flex justify-between mt-5 text-meta uppercase tracking-wider">
+      <div className="flex justify-between mt-5 text-[13px]">
         <Link
           href="/register"
-          className="text-secondary hover:text-accent transition-colors"
+          className="text-secondary hover:text-accent-strong transition-colors"
         >
-          create account
+          Create account
         </Link>
         <Link
           href="/forgot"
-          className="text-secondary hover:text-accent transition-colors"
+          className="text-secondary hover:text-accent-strong transition-colors"
         >
-          forgot password
+          Forgot password
         </Link>
       </div>
 
@@ -175,10 +175,10 @@ export default function LoginPage() {
           onClick={onPasskeyLogin}
           loading={loading}
         >
-          continue with passkey
+          Continue with passkey
         </Button>
         <Button variant="secondary" type="button">
-          continue with telegram
+          Continue with Telegram
         </Button>
       </div>
     </AuthShell>
diff --git a/app/login/telegram/page.tsx b/app/login/telegram/page.tsx
index c306c28..6bf78ce 100644
--- a/app/login/telegram/page.tsx
+++ b/app/login/telegram/page.tsx
@@ -4,7 +4,6 @@ import { useEffect, useState } from "react";
 import { AuthShell } from "@/components/AuthShell";
 import { Button } from "@/components/Button";
 import { Alert } from "@/components/Alert";
-import { Cursor } from "@/components/Glyph";
 
 type Status = "waiting" | "completed" | "failed";
 
@@ -64,7 +63,7 @@ export default function TelegramLoginPage() {
     }
 
     if (data.status === "expired") {
-      setError("verification expired. sign in again.");
+      setError("Verification expired. Sign in again.");
       setStatus("failed");
     }
   }
@@ -79,32 +78,27 @@ export default function TelegramLoginPage() {
 
   return (
     <AuthShell tag="auth/2fa">
-      <h1 className="text-[28px] tracking-tightest text-fg mb-1 leading-none">
-        verify login
+      <h1 className="text-[28px] text-fg mb-1 leading-none">
+        Verify login
       </h1>
       <p className="text-meta text-muted mb-7">
-        open telegram from the same account linked to bottleneck
+        Open Telegram from the same account linked to bottleneck
       </p>
 
-      <div className="border-t border-rule">
-        <div className="flex items-baseline justify-between py-2.5">
-          <span className="text-meta uppercase tracking-wider text-muted">
-            channel
-          </span>
-          <span className="text-meta text-fg">telegram 2fa</span>
+      <div className="bg-card border border-rule rounded-lg mb-4">
+        <div className="flex items-baseline justify-between px-4 py-2.5">
+          <span className="text-[13px] text-muted">Channel</span>
+          <span className="text-[13px] text-fg">Telegram 2FA</span>
         </div>
-        <div className="flex items-baseline justify-between py-2.5 border-t border-rule">
-          <span className="text-meta uppercase tracking-wider text-muted">
-            status
-          </span>
-          <span className="text-meta text-accent">required</span>
+        <div className="flex items-baseline justify-between px-4 py-2.5 border-t border-rule">
+          <span className="text-[13px] text-muted">Status</span>
+          <span className="text-[13px] text-accent-strong">Required</span>
         </div>
-        <div className="border-t border-rule" />
       </div>
 
-      <p className="text-meta text-secondary mt-3 mb-5">
-        the bot receives a one-time login token and confirms it belongs to your
-        linked telegram account.
+      <p className="text-meta text-secondary mb-5">
+        The bot receives a one-time login token and confirms it belongs to your
+        linked Telegram account.
       </p>
 
       <a
@@ -114,26 +108,23 @@ export default function TelegramLoginPage() {
         className="block mb-3"
       >
         <Button type="button" disabled={!botUrl}>
-          open telegram bot
+          Open Telegram bot
         </Button>
       </a>
 
       {!botUrl && (
         <div className="mb-4">
-          <Alert tone="warning">verification link missing — sign in again</Alert>
+          <Alert tone="warning">Verification link missing — sign in again</Alert>
         </div>
       )}
 
       {status === "waiting" && (
-        <div className="flex items-baseline gap-2 text-meta uppercase tracking-wider text-muted my-5">
-          <Cursor />
-          <span>waiting for telegram</span>
-        </div>
+        <p className="text-[13px] text-muted my-5">Waiting for Telegram…</p>
       )}
 
       {error && <Alert tone="danger">{error}</Alert>}
       {status === "completed" && (
-        <Alert tone="success">verified — redirecting</Alert>
+        <Alert tone="success">Verified — redirecting</Alert>
       )}
 
       <div className="mt-6 grid grid-cols-2 gap-3">
@@ -142,10 +133,10 @@ export default function TelegramLoginPage() {
           type="button"
           onClick={() => window.location.assign("/login")}
         >
-          start over
+          Start over
         </Button>
         <Button variant="ghost" type="button" onClick={checkStatus}>
-          check status
+          Check status
         </Button>
       </div>
     </AuthShell>
diff --git a/app/oauth/authorize/page.tsx b/app/oauth/authorize/page.tsx
index bda28dc..fe024b5 100644
--- a/app/oauth/authorize/page.tsx
+++ b/app/oauth/authorize/page.tsx
@@ -3,7 +3,6 @@ import { Alert } from "@/components/Alert";
 import { AuthShell } from "@/components/AuthShell";
 import { Button } from "@/components/Button";
 import { Tag } from "@/components/Tag";
-import { Glyph } from "@/components/Glyph";
 import { getCurrentSession } from "@/lib/server/session";
 import { mintAuthorizeCsrf } from "@/lib/server/oauthCsrf";
 import {
@@ -53,19 +52,16 @@ export default async function OAuthAuthorizePage({
     }
     return (
       <AuthShell tag="oauth/error">
-        <div className="flex items-baseline gap-3 mb-1">
-          <Glyph kind="error" />
-          <span className="text-meta uppercase tracking-wider text-danger">
-            oauth error
-          </span>
+        <div className="flex items-baseline gap-2 mb-1">
+          <span className="text-[13px] text-danger font-medium">OAuth error</span>
         </div>
-        <h1 className="text-[28px] tracking-tightest text-fg mb-5 leading-none">
-          authorization failed
+        <h1 className="text-[28px] text-fg mb-5 leading-none">
+          Authorization failed
         </h1>
         <Alert tone="danger">
           {err instanceof OAuthError
             ? err.message
-            : "invalid authorization request"}
+            : "Invalid authorization request"}
         </Alert>
       </AuthShell>
     );
@@ -92,16 +88,16 @@ export default async function OAuthAuthorizePage({
     <AuthShell tag="oauth/authorize">
       <div className="flex items-start gap-4 mb-7">
         <div
-          className="h-12 w-12 border border-accent flex items-center justify-center text-accent text-meta uppercase tracking-wider shrink-0"
+          className="h-12 w-12 border border-accent rounded-md flex items-center justify-center text-accent-strong text-[13px] font-medium shrink-0"
           aria-hidden
         >
           {view.app.name.slice(0, 2)}
         </div>
         <div className="min-w-0 flex-1">
-          <div className="text-meta uppercase tracking-wider text-muted mb-1">
-            authorize app
+          <div className="text-[12px] text-muted mb-1">
+            Authorize app
           </div>
-          <h1 className="text-[26px] tracking-tightest text-fg truncate leading-none">
+          <h1 className="text-[26px] text-fg truncate leading-none">
             {view.app.name}
           </h1>
           <div className="mt-2 flex items-center gap-2">
@@ -140,8 +136,8 @@ export default async function OAuthAuthorizePage({
       </div>
 
       <div className="mb-5">
-        <div className="text-meta uppercase tracking-wider text-muted mb-2">
-          will share
+        <div className="text-[12px] text-muted mb-2">
+          Will share
         </div>
         <div className="border-t border-rule">
           {standardScopes.map((scope) => {
@@ -149,10 +145,10 @@ export default async function OAuthAuthorizePage({
             return (
               <div
                 key={scope}
-                className="flex items-baseline gap-3 py-2.5 border-b border-rule"
+                className="flex items-center gap-3 py-2.5 border-b border-rule"
               >
-                <Glyph kind="ok" />
-                <span className="text-meta text-fg flex-1">{item.label}</span>
+                <span className="w-1.5 h-1.5 rounded-full bg-accent shrink-0" aria-hidden />
+                <span className="text-[13px] text-fg flex-1">{item.label}</span>
                 <input
                   type="hidden"
                   name="scopes"
@@ -167,7 +163,7 @@ export default async function OAuthAuthorizePage({
             return (
               <label
                 key={scope}
-                className="flex items-baseline gap-3 py-2.5 border-b border-rule cursor-pointer group"
+                className="flex items-center gap-3 py-2.5 border-b border-rule cursor-pointer group"
               >
                 <input
                   type="checkbox"
@@ -175,13 +171,13 @@ export default async function OAuthAuthorizePage({
                   value={scope}
                   defaultChecked
                   form="oauth-approve-form"
-                  className="appearance-none w-4 h-4 border border-rule bg-transparent checked:bg-accent checked:border-accent transition-colors shrink-0 translate-y-0.5"
+                  className="appearance-none w-4 h-4 border border-rule rounded bg-transparent checked:bg-accent checked:border-accent transition-colors shrink-0"
                 />
-                <span className="text-meta text-fg flex-1 group-hover:text-accent transition-colors">
+                <span className="text-[13px] text-fg flex-1 group-hover:text-accent-strong transition-colors">
                   {item.label}
                 </span>
-                <span className="text-micro uppercase tracking-wider text-accent">
-                  optional
+                <span className="text-[11px] text-accent-strong">
+                  Optional
                 </span>
               </label>
             );
@@ -192,7 +188,7 @@ export default async function OAuthAuthorizePage({
       {!view.subscriptionOk && view.requiredProduct && (
         <div className="mb-5">
           <Alert tone="warning">
-            active {view.requiredProduct} subscription required to approve
+            Active {view.requiredProduct} subscription required to approve
           </Alert>
         </div>
       )}
@@ -201,7 +197,7 @@ export default async function OAuthAuthorizePage({
         <form action="/api/oauth/authorize/deny" method="post">
           <HiddenOAuthFields view={view} csrfToken={csrfToken} />
           <Button variant="ghost" type="submit">
-            deny
+            Deny
           </Button>
         </form>
         <form
@@ -211,7 +207,7 @@ export default async function OAuthAuthorizePage({
         >
           <HiddenOAuthFields view={view} csrfToken={csrfToken} />
           <Button type="submit" disabled={!view.subscriptionOk}>
-            approve
+            Approve
           </Button>
         </form>
       </div>
@@ -254,10 +250,10 @@ function DetailRow({
 }) {
   return (
     <div className="flex items-baseline justify-between gap-4 py-2 border-b border-rule last:border-b-0">
-      <span className="text-meta uppercase tracking-wider text-muted shrink-0">
+      <span className="text-[12px] text-muted shrink-0">
         {label}
       </span>
-      <span className="text-meta text-right truncate flex-1 flex items-center justify-end gap-2">
+      <span className="text-[13px] text-right truncate flex-1 flex items-center justify-end gap-2">
         <span className={`truncate ${mono ? "text-fg" : "text-fg"}`}>
           {value}
         </span>
diff --git a/app/page.tsx b/app/page.tsx
index a782ddf..6695796 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,7 +4,6 @@ import { Sidebar } from "@/components/Sidebar";
 import { TopNav } from "@/components/TopNav";
 import { Section, Row, RowLabel, RowValue, Empty } from "@/components/Section";
 import { Tag } from "@/components/Tag";
-import { Glyph } from "@/components/Glyph";
 import { getCurrentSession } from "@/lib/server/session";
 import { getDashboard } from "@/lib/server/services/dashboard";
 import {
@@ -58,51 +57,41 @@ export default async function DashboardPage() {
           className="max-w-[960px] mx-auto px-6 py-10"
           data-mount-stagger
         >
-          {/* HEADER */}
           <header data-mount-row className="mb-10">
-            <div className="flex items-baseline gap-2 mb-2 text-meta text-muted">
-              <span className="text-accent">$</span>
-              <span className="tracking-wider">bottleneck/console</span>
-              <span className="text-faint">/ {account.username}</span>
-            </div>
             <div className="flex items-baseline gap-3 flex-wrap mb-3">
-              <h1 className="text-[32px] tracking-tightest text-fg leading-none">
+              <h1 className="text-[32px] tracking-tight text-fg leading-none">
                 {account.firstName}
               </h1>
               <span className="text-faint text-[24px] leading-none">/</span>
-              <span className="text-[24px] text-secondary tracking-tightest leading-none">
+              <span className="text-[24px] text-secondary leading-none">
                 @{account.username}
               </span>
             </div>
             <div className="flex items-center gap-3 flex-wrap">
               <Tag tone={statusTone(account.status)}>{account.status}</Tag>
               <Tag tone={account.telegramVerifiedAt ? "success" : "warning"}>
-                {account.telegramVerifiedAt ? "tg verified" : "tg unverified"}
+                {account.telegramVerifiedAt ? "Telegram verified" : "Telegram unverified"}
               </Tag>
-              <span className="text-meta text-faint">
-                · console session {current.session.id}
-              </span>
             </div>
           </header>
 
-          {/* STATS — rule-divided columns, no bordered boxes */}
           <div
             data-mount-row
-            className="rule-x border-y border-rule grid grid-cols-2 md:grid-cols-4 mb-12"
+            className="bg-card border border-rule rounded-lg grid grid-cols-2 md:grid-cols-4 mb-12 shadow-card"
           >
             {stats.map((stat, i) => (
               <div
                 key={stat.label}
                 className={`px-5 py-5 ${i > 0 ? "md:border-l border-rule" : ""}`}
               >
-                <div className="text-micro uppercase tracking-wider text-muted mb-1">
-                  {stat.label}
+                <div className="text-[12px] text-muted mb-1">
+                  {stat.label.charAt(0).toUpperCase() + stat.label.slice(1)}
                 </div>
                 <div className="flex items-baseline gap-2">
-                  <span className="text-[34px] text-accent tabular-nums tracking-tightest leading-none">
+                  <span className="text-[34px] text-accent tabular-nums leading-none">
                     {String(stat.value).padStart(2, "0")}
                   </span>
-                  <span className="text-meta text-faint">{stat.hint}</span>
+                  <span className="text-[13px] text-faint">{stat.hint}</span>
                 </div>
               </div>
             ))}
@@ -110,46 +99,46 @@ export default async function DashboardPage() {
 
           <div id="profile" />
           <div data-mount-row>
-            <Section title="profile" hint="account fields" index="1.0">
+            <Section title="Profile" hint="Account fields" index="1.0">
               <Row>
-                <RowLabel>first name</RowLabel>
+                <RowLabel>First name</RowLabel>
                 <RowValue>{account.firstName}</RowValue>
                 <span />
               </Row>
               <Row>
-                <RowLabel>username</RowLabel>
+                <RowLabel>Username</RowLabel>
                 <RowValue>@{account.username}</RowValue>
                 <span />
               </Row>
               <Row>
-                <RowLabel>bio</RowLabel>
-                <RowValue>{account.bio || "not set"}</RowValue>
-                <span className="text-micro uppercase tracking-wider text-ok">
-                  public
+                <RowLabel>Bio</RowLabel>
+                <RowValue>{account.bio || "Not set"}</RowValue>
+                <span className="text-[12px] text-ok">
+                  Public
                 </span>
               </Row>
               <Row>
-                <RowLabel>email</RowLabel>
+                <RowLabel>Email</RowLabel>
                 <RowValue privateField>{account.email}</RowValue>
                 <span />
               </Row>
               <Row>
-                <RowLabel>date of birth</RowLabel>
-                <RowValue privateField>{account.dob || "not set"}</RowValue>
+                <RowLabel>Date of birth</RowLabel>
+                <RowValue privateField>{account.dob || "Not set"}</RowValue>
                 <span />
               </Row>
               <Row>
-                <RowLabel>telegram</RowLabel>
+                <RowLabel>Telegram</RowLabel>
                 <RowValue>
                   {account.telegramUsername
                     ? `@${account.telegramUsername}`
-                    : account.telegramId || "not linked"}
+                    : account.telegramId || "Not linked"}
                 </RowValue>
                 <a
                   href="/relink"
-                  className="text-meta uppercase tracking-wider text-secondary hover:text-accent transition-colors"
+                  className="text-[13px] text-secondary hover:text-accent-strong transition-colors"
                 >
-                  relink
+                  Relink
                 </a>
               </Row>
             </Section>
@@ -158,12 +147,12 @@ export default async function DashboardPage() {
           <div id="subscriptions" />
           <div data-mount-row>
             <Section
-              title="subscriptions"
-              hint="products you pay for"
+              title="Subscriptions"
+              hint="Products you pay for"
               index="2.0"
             >
               {dashboard.subscriptions.length === 0 ? (
-                <Empty>no active subscriptions</Empty>
+                <Empty>No active subscriptions</Empty>
               ) : (
                 dashboard.subscriptions.map(subscription => (
                   <Row
@@ -178,9 +167,9 @@ export default async function DashboardPage() {
                       >
                         {subscription.status}
                       </Tag>
-                      <Glyph kind="dot" />
+                      <span className="text-muted">·</span>
                       <span className="text-secondary">
-                        expires {shortDate(subscription.expiresAt)}
+                        Expires {shortDate(subscription.expiresAt)}
                       </span>
                     </RowValue>
                     <form action={cancelSubscriptionAction}>
@@ -191,9 +180,9 @@ export default async function DashboardPage() {
                       />
                       <button
                         type="submit"
-                        className="text-meta uppercase tracking-wider text-secondary hover:text-danger transition-colors"
+                        className="text-[13px] text-secondary hover:text-danger transition-colors"
                       >
-                        cancel
+                        Cancel
                       </button>
                     </form>
                   </Row>
@@ -205,12 +194,12 @@ export default async function DashboardPage() {
           <div id="apps" />
           <div data-mount-row>
             <Section
-              title="connected apps"
-              hint="external apps with access"
+              title="Connected apps"
+              hint="External apps with access"
               index="3.0"
             >
               {dashboard.apps.length === 0 ? (
-                <Empty>no connected apps</Empty>
+                <Empty>No connected apps</Empty>
               ) : (
                 dashboard.apps.map(app => (
                   <Row key={app.appSlug}>
@@ -219,9 +208,9 @@ export default async function DashboardPage() {
                       <span className="text-secondary truncate">
                         {app.scopes.join(", ")}
                       </span>
-                      <Glyph kind="dot" />
+                      <span className="text-muted">·</span>
                       <span className="text-muted">
-                        since {shortDate(app.createdAt)}
+                        Since {shortDate(app.createdAt)}
                       </span>
                     </RowValue>
                     <form action={revokeAppAction}>
@@ -232,9 +221,9 @@ export default async function DashboardPage() {
                       />
                       <button
                         type="submit"
-                        className="text-meta uppercase tracking-wider text-secondary hover:text-danger transition-colors"
+                        className="text-[13px] text-secondary hover:text-danger transition-colors"
                       >
-                        revoke
+                        Revoke
                       </button>
                     </form>
                   </Row>
@@ -251,23 +240,23 @@ export default async function DashboardPage() {
           <div id="sessions" />
           <div data-mount-row>
             <Section
-              title="sessions"
-              hint="devices currently signed in"
+              title="Sessions"
+              hint="Devices currently signed in"
               index="4.0"
             >
               {dashboard.sessions.map(session => (
                 <Row key={session.id}>
-                  <RowLabel>{session.userAgent || "unknown browser"}</RowLabel>
+                  <RowLabel>{session.userAgent || "Unknown browser"}</RowLabel>
                   <RowValue>
                     <span className="text-secondary truncate">
-                      {session.ip || "unknown ip"}
+                      {session.ip || "Unknown IP"}
                     </span>
-                    <Glyph kind="dot" />
+                    <span className="text-muted">·</span>
                     <span className="text-muted">
                       {shortDate(session.lastSeenAt)}
                     </span>
                     {session.id === current.session.id && (
-                      <Tag tone="success">this device</Tag>
+                      <Tag tone="success">This device</Tag>
                     )}
                   </RowValue>
                   <form action={revokeSessionAction}>
@@ -278,10 +267,10 @@ export default async function DashboardPage() {
                     />
                     <button
                       type="submit"
-                      className="text-meta uppercase tracking-wider text-secondary hover:text-danger transition-colors disabled:text-faint disabled:hover:text-faint disabled:cursor-not-allowed"
+                      className="text-[13px] text-secondary hover:text-danger transition-colors disabled:text-faint disabled:hover:text-faint disabled:cursor-not-allowed"
                       disabled={session.id === current.session.id}
                     >
-                      revoke
+                      Revoke
                     </button>
                   </form>
                 </Row>
@@ -291,26 +280,26 @@ export default async function DashboardPage() {
 
           <div id="security" />
           <div data-mount-row>
-            <Section title="security" hint="authentication" index="5.0">
+            <Section title="Security" hint="Authentication" index="5.0">
               <Row>
-                <RowLabel>password</RowLabel>
-                <RowValue>enabled</RowValue>
-                <button className="text-meta uppercase tracking-wider text-secondary hover:text-accent transition-colors">
-                  change
+                <RowLabel>Password</RowLabel>
+                <RowValue>Enabled</RowValue>
+                <button className="text-[13px] text-secondary hover:text-accent-strong transition-colors">
+                  Change
                 </button>
               </Row>
               <Row>
-                <RowLabel>telegram 2fa</RowLabel>
+                <RowLabel>Telegram 2FA</RowLabel>
                 <RowValue>
                   {account.telegramVerifiedAt
-                    ? `enabled ${shortDate(account.telegramVerifiedAt)}`
-                    : "not linked"}
+                    ? `Enabled ${shortDate(account.telegramVerifiedAt)}`
+                    : "Not linked"}
                 </RowValue>
                 <a
                   href="/relink"
-                  className="text-meta uppercase tracking-wider text-secondary hover:text-accent transition-colors"
+                  className="text-[13px] text-secondary hover:text-accent-strong transition-colors"
                 >
-                  relink
+                  Relink
                 </a>
               </Row>
             </Section>
@@ -319,8 +308,8 @@ export default async function DashboardPage() {
           <div id="passkeys" />
           <div data-mount-row>
             <Section
-              title="passkeys"
-              hint="passwordless sign in"
+              title="Passkeys"
+              hint="Passwordless sign in"
               index="5.1"
             >
               <PasskeyManager
@@ -336,12 +325,12 @@ export default async function DashboardPage() {
           <div id="events" />
           <div data-mount-row>
             <Section
-              title="recent events"
-              hint="last security activity"
+              title="Recent events"
+              hint="Last security activity"
               index="6.0"
             >
               {dashboard.events.length === 0 ? (
-                <Empty>no recent events</Empty>
+                <Empty>No recent events</Empty>
               ) : (
                 <ul className="text-[12.5px]">
                   {dashboard.events.map((event, index) => (
@@ -353,7 +342,7 @@ export default async function DashboardPage() {
                         {event.created_at.slice(0, 16).replace("T", " ")}
                       </span>
                       <span className="text-fg">{event.event_type}</span>
-                      <span className="text-meta text-muted truncate max-w-[280px]">
+                      <span className="text-[12px] text-muted truncate max-w-[280px]">
                         {event.ip || event.result}
                       </span>
                     </li>
@@ -363,9 +352,9 @@ export default async function DashboardPage() {
             </Section>
           </div>
 
-          <footer className="mt-12 pt-5 border-t border-rule text-meta text-faint flex items-center justify-between">
-            <span>bnck-auth · console</span>
-            <span className="tabular-nums">eof.</span>
+          <footer className="mt-12 pt-5 border-t border-rule text-[13px] text-faint flex items-center justify-between">
+            <span>bottleneck</span>
+            <span className="tabular-nums">auth.bneck.com</span>
           </footer>
         </main>
       </div>
diff --git a/app/register/page.tsx b/app/register/page.tsx
index e1299b4..8f8b57b 100644
--- a/app/register/page.tsx
+++ b/app/register/page.tsx
@@ -66,11 +66,11 @@ export default function RegisterPage() {
 
   return (
     <AuthShell tag="auth/register">
-      <h1 className="text-[28px] tracking-tightest text-fg mb-1 leading-none">
-        create account
+      <h1 className="text-[28px] tracking-tight text-fg mb-1 leading-none">
+        Create account
       </h1>
-      <p className="text-meta text-muted mb-7">
-        telegram verification is required to complete sign-up
+      <p className="text-[13px] text-muted mb-7">
+        Telegram verification is required to complete sign-up
       </p>
 
       {errors.form && (
@@ -81,22 +81,22 @@ export default function RegisterPage() {
 
       <form className="space-y-5" onSubmit={onSubmit} noValidate>
         <Field
-          label="first name"
+          label="First name"
           name="first_name"
           autoComplete="given-name"
           error={errors.firstName}
           required
         />
         <Field
-          label="username"
+          label="Username"
           name="username"
           autoComplete="username"
           error={errors.username}
           required
         />
-        <Field label="bio" name="bio" hint="shown publicly" optional />
+        <Field label="Bio" name="bio" hint="Shown publicly" optional />
         <Field
-          label="email"
+          label="Email"
           name="email"
           type="email"
           autoComplete="email"
@@ -104,15 +104,15 @@ export default function RegisterPage() {
           required
         />
         <Field
-          label="date of birth"
+          label="Date of birth"
           name="dob"
           type="date"
-          hint="may be shared with apps when you approve them"
+          hint="May be shared with apps when you approve them"
           error={errors.dob}
           optional
         />
         <Field
-          label="password"
+          label="Password"
           name="password"
           type="password"
           autoComplete="new-password"
@@ -121,17 +121,17 @@ export default function RegisterPage() {
         />
         <TurnstileField />
         <Button type="submit" loading={loading}>
-          verify with telegram
+          Verify with Telegram
         </Button>
       </form>
 
-      <p className="text-meta uppercase tracking-wider text-muted mt-5">
-        already have an account?{" "}
+      <p className="text-[13px] text-muted mt-5">
+        Already have an account?{" "}
         <Link
           href="/login"
-          className="text-accent hover:text-fg transition-colors"
+          className="text-accent-strong hover:text-fg transition-colors"
         >
-          sign in
+          Sign in
         </Link>
       </p>
     </AuthShell>
diff --git a/app/relink/page.tsx b/app/relink/page.tsx
index fda426f..0d39f54 100644
--- a/app/relink/page.tsx
+++ b/app/relink/page.tsx
@@ -5,7 +5,6 @@ import { AuthShell } from "@/components/AuthShell";
 import { Button } from "@/components/Button";
 import { Alert } from "@/components/Alert";
 import { Field } from "@/components/Field";
-import { Cursor } from "@/components/Glyph";
 
 type Step = "send" | "enter_code" | "bot_link" | "success" | "error";
 
@@ -102,15 +101,15 @@ export default function RelinkPage() {
 
   return (
     <AuthShell tag="account/relink">
-      <h1 className="text-[28px] tracking-tightest text-fg mb-1 leading-none">
-        relink telegram
+      <h1 className="text-[28px] tracking-tight text-fg mb-1 leading-none">
+        Relink Telegram
       </h1>
-      <p className="text-meta text-muted mb-7">
-        {step === "send" && "confirm ownership of your linked account before relinking"}
-        {step === "enter_code" && "enter the code sent to your linked telegram"}
-        {step === "bot_link" && "open the bot to complete the relink"}
-        {step === "success" && "telegram account relinked — redirecting"}
-        {step === "error" && "something went wrong"}
+      <p className="text-[13px] text-muted mb-7">
+        {step === "send" && "Confirm ownership of your linked account before relinking"}
+        {step === "enter_code" && "Enter the code sent to your linked Telegram"}
+        {step === "bot_link" && "Open the bot to complete the relink"}
+        {step === "success" && "Telegram account relinked — redirecting"}
+        {step === "error" && "Something went wrong"}
       </p>
 
       {error && (
@@ -119,26 +118,21 @@ export default function RelinkPage() {
         </div>
       )}
 
-      {step === "success" && <Alert tone="success">relinked successfully</Alert>}
+      {step === "success" && <Alert tone="success">Relinked successfully</Alert>}
 
       {step === "send" && (
         <Button onClick={sendCode} loading={sending}>
-          send code to telegram
+          Send code to Telegram
         </Button>
       )}
 
       {step === "enter_code" && (
         <form onSubmit={verifyCode} className="space-y-5">
-          <div className="border-t border-rule">
-            <div className="flex items-baseline justify-between py-2.5">
-              <span className="text-meta uppercase tracking-wider text-muted">
-                one-time code
-              </span>
-              <span className="text-meta text-accent tabular-nums">
-                expires {mins}:{secs}
-              </span>
-            </div>
-            <div className="border-t border-rule" />
+          <div className="bg-card border border-rule rounded-md px-3 py-2.5 flex items-baseline justify-between mb-1">
+            <span className="text-[12px] text-muted">One-time code</span>
+            <span className="text-[12px] text-accent-strong tabular-nums">
+              Expires {mins}:{secs}
+            </span>
           </div>
           <Field
             label="10-character code"
@@ -150,7 +144,7 @@ export default function RelinkPage() {
             required
           />
           <Button type="submit" loading={verifying}>
-            verify code
+            Verify code
           </Button>
           <Button
             variant="ghost"
@@ -160,32 +154,24 @@ export default function RelinkPage() {
               sendCode();
             }}
           >
-            resend code
+            Resend code
           </Button>
         </form>
       )}
 
       {step === "bot_link" && (
         <>
-          <div className="border-t border-rule mb-3">
-            <div className="flex items-baseline justify-between py-2.5">
-              <span className="text-meta uppercase tracking-wider text-muted">
-                channel
-              </span>
-              <span className="text-meta text-fg">telegram</span>
-            </div>
-            <div className="border-t border-rule" />
+          <div className="bg-card border border-rule rounded-md px-3 py-2.5 flex items-baseline justify-between mb-4">
+            <span className="text-[12px] text-muted">Channel</span>
+            <span className="text-[12px] text-fg">Telegram</span>
           </div>
-          <p className="text-meta text-secondary mb-5">
-            open the bot link from the telegram account you want to link.
+          <p className="text-[13px] text-secondary mb-5">
+            Open the bot link from the Telegram account you want to link.
           </p>
           <a href={botUrl} target="_blank" rel="noreferrer" className="block mb-3">
-            <Button type="button">open telegram bot</Button>
+            <Button type="button">Open Telegram bot</Button>
           </a>
-          <div className="flex items-baseline gap-2 text-meta uppercase tracking-wider text-muted my-5">
-            <Cursor />
-            <span>waiting for telegram</span>
-          </div>
+          <p className="text-[12px] text-muted my-5">Waiting for Telegram…</p>
         </>
       )}
 
@@ -196,7 +182,7 @@ export default function RelinkPage() {
             setStep("send");
           }}
         >
-          start over
+          Start over
         </Button>
       )}
 
@@ -207,7 +193,7 @@ export default function RelinkPage() {
             type="button"
             onClick={() => window.location.assign("/")}
           >
-            cancel
+            Cancel
           </Button>
         </div>
       )}
diff --git a/app/request-bearer/page.tsx b/app/request-bearer/page.tsx
index 308d9fb..1aa5345 100644
--- a/app/request-bearer/page.tsx
+++ b/app/request-bearer/page.tsx
@@ -5,7 +5,6 @@ import { useState } from "react";
 import { Alert } from "@/components/Alert";
 import { Button } from "@/components/Button";
 import { Field } from "@/components/Field";
-import { Glyph } from "@/components/Glyph";
 import { Sidebar } from "@/components/Sidebar";
 import { TopNav } from "@/components/TopNav";
 
@@ -51,17 +50,12 @@ export default function RequestBearerPage() {
         <TopNav trail="account / request bearer" />
         <main className="max-w-[720px] mx-auto px-6 py-10">
           <header className="mb-9">
-            <div className="flex items-baseline gap-2 mb-2 text-meta">
-              <span className="text-accent">$</span>
-              <span className="uppercase tracking-wider text-muted">
-                bearer.request
-              </span>
-            </div>
-            <h1 className="text-[32px] tracking-tightest text-fg leading-none mb-3">
-              request bearer key
+            <p className="text-[12px] text-muted mb-2">Bearer request</p>
+            <h1 className="text-[32px] tracking-tight text-fg leading-none mb-3">
+              Request bearer key
             </h1>
-            <p className="text-meta text-muted max-w-prose">
-              describe your app and why it needs an api bearer. an admin
+            <p className="text-[14px] text-muted max-w-prose">
+              Describe your app and why it needs an API bearer. An admin
               reviews each request manually — you'll see the result on
               your dashboard.
             </p>
@@ -69,26 +63,21 @@ export default function RequestBearerPage() {
 
           {status === "submitted" ? (
             <>
-              <div className="border-t border-b border-rule py-5 mb-5">
-                <div className="flex items-baseline gap-3 mb-2">
-                  <Glyph kind="ok" />
-                  <span className="text-meta uppercase tracking-wider text-ok">
-                    request queued
-                  </span>
-                </div>
-                <p className="text-meta text-secondary">
-                  your request is waiting for admin review. once approved
+              <Alert tone="success" className="mb-5">
+                <p className="font-medium mb-1">Request queued</p>
+                <p>
+                  Your request is waiting for admin review. Once approved
                   the bearer will appear on your dashboard.
                 </p>
-              </div>
+              </Alert>
               <Link href="/">
-                <Button variant="secondary">back to dashboard</Button>
+                <Button variant="secondary">Back to dashboard</Button>
               </Link>
             </>
           ) : (
             <form onSubmit={onSubmit} className="space-y-6">
               <Field
-                label="app name"
+                label="App name"
                 name="appName"
                 value={appName}
                 onChange={e => setAppName(e.target.value)}
@@ -101,11 +90,11 @@ export default function RequestBearerPage() {
                 <div className="flex items-baseline justify-between">
                   <label
                     htmlFor="reason"
-                    className="text-meta uppercase tracking-wider text-muted"
+                    className="text-[13px] text-muted"
                   >
-                    reason
+                    Reason
                   </label>
-                  <span className="text-meta text-faint tabular-nums">
+                  <span className="text-[12px] text-faint tabular-nums">
                     {reason.length}/600
                   </span>
                 </div>
@@ -114,11 +103,11 @@ export default function RequestBearerPage() {
                   name="reason"
                   value={reason}
                   onChange={e => setReason(e.target.value)}
-                  placeholder="what does this app do, who uses it, why does it need an api bearer?"
+                  placeholder="What does this app do, who uses it, why does it need an API bearer?"
                   maxLength={600}
                   required
                   rows={8}
-                  className="w-full bg-transparent border-0 border-b border-rule px-1 py-2 text-[13.5px] text-fg placeholder:text-faint focus:outline-hidden focus:border-accent transition-colors resize-y leading-relaxed"
+                  className="w-full bg-card border border-rule rounded-md px-3 py-2 text-[13.5px] text-fg placeholder:text-faint focus:outline-hidden focus:border-accent transition-colors resize-y leading-relaxed"
                 />
               </div>
 
@@ -126,11 +115,11 @@ export default function RequestBearerPage() {
 
               <div className="flex gap-3 pt-2">
                 <Button type="submit" loading={status === "submitting"}>
-                  send request
+                  Send request
                 </Button>
                 <Link href="/" className="flex-1">
                   <Button type="button" variant="ghost">
-                    cancel
+                    Cancel
                   </Button>
                 </Link>
               </div>
diff --git a/app/security/page.tsx b/app/security/page.tsx
index 4ac7ae2..28e48ed 100644
--- a/app/security/page.tsx
+++ b/app/security/page.tsx
@@ -6,7 +6,6 @@ import { Section, Row, RowLabel, RowValue, Empty } from "@/components/Section";
 import { Sidebar } from "@/components/Sidebar";
 import { Tag } from "@/components/Tag";
 import { TopNav } from "@/components/TopNav";
-import { Glyph } from "@/components/Glyph";
 import { findWebauthnCredentialsByUser } from "@/lib/server/repositories/webauthn";
 import { getCurrentSession } from "@/lib/server/session";
 import { getDashboard } from "@/lib/server/services/dashboard";
@@ -44,51 +43,46 @@ export default async function SecurityCenterPage() {
         }}
       />
       <div className="flex-1 min-w-0">
-        <TopNav trail="security center" />
+        <TopNav trail="Security center" />
         <main
           className="max-w-[960px] mx-auto px-6 py-10"
           data-mount-stagger
         >
           <header className="mb-10" data-mount-row>
-            <div className="flex items-baseline gap-2 mb-2 text-meta">
-              <span className="text-accent">$</span>
-              <span className="uppercase tracking-wider text-muted">
-                security.center
-              </span>
-              <span className="text-faint">·</span>
+            <div className="flex items-baseline gap-2 mb-2">
               <Tag tone={hasTelegram ? "success" : "warning"}>
-                {hasTelegram ? "2fa enabled" : "2fa missing"}
+                {hasTelegram ? "2FA enabled" : "2FA missing"}
               </Tag>
             </div>
-            <h1 className="text-[32px] tracking-tightest text-fg leading-none mb-3">
-              security center
+            <h1 className="text-[32px] tracking-tight text-fg leading-none mb-3">
+              Security center
             </h1>
-            <p className="text-meta text-muted max-w-prose">
-              sessions, oauth grants, passkeys, telegram 2fa, and recent
+            <p className="text-[14px] text-muted max-w-prose">
+              Sessions, OAuth grants, passkeys, Telegram 2FA, and recent
               security activity.
             </p>
           </header>
 
           <div
-            className="grid grid-cols-2 md:grid-cols-4 border-t border-b border-rule mb-12"
+            className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-12 bg-card border border-rule rounded-lg"
             data-mount-row
           >
             {[
-              { label: "sessions", value: dashboard.sessions.length },
-              { label: "oauth grants", value: dashboard.apps.length },
-              { label: "passkeys", value: passkeys.length },
-              { label: "events", value: dashboard.events.length },
+              { label: "Sessions", value: dashboard.sessions.length },
+              { label: "OAuth grants", value: dashboard.apps.length },
+              { label: "Passkeys", value: passkeys.length },
+              { label: "Events", value: dashboard.events.length },
             ].map((item, i) => (
               <div
                 key={item.label}
-                className={`px-1 py-4 ${
+                className={`px-4 py-4 ${
                   i > 0 ? "border-l border-rule" : ""
                 }`}
               >
-                <div className="text-meta uppercase tracking-wider text-muted mb-1">
+                <div className="text-[12px] text-muted mb-1">
                   {item.label}
                 </div>
-                <div className="text-[34px] text-accent tabular-nums tracking-tightest leading-none">
+                <div className="text-[34px] text-accent-strong tabular-nums leading-none">
                   {String(item.value).padStart(2, "0")}
                 </div>
               </div>
@@ -98,29 +92,29 @@ export default async function SecurityCenterPage() {
           <div data-mount-row>
             <Section
               index="1.0"
-              title="sessions"
-              hint="signed-in browsers"
+              title="Sessions"
+              hint="Signed-in browsers"
               action={
                 <form action={revokeOtherSessionsAction}>
-                  <button className="text-meta uppercase tracking-wider text-secondary hover:text-danger transition-colors">
-                    revoke others
+                  <button className="text-[13px] text-secondary hover:text-danger transition-colors">
+                    Revoke others
                   </button>
                 </form>
               }
             >
               {dashboard.sessions.map(session => (
                 <Row key={session.id}>
-                  <RowLabel>{session.userAgent || "unknown browser"}</RowLabel>
+                  <RowLabel>{session.userAgent || "Unknown browser"}</RowLabel>
                   <RowValue>
                     <span className="text-secondary">
-                      {session.ip || "unknown ip"}
+                      {session.ip || "Unknown IP"}
                     </span>
-                    <Glyph kind="dot" />
+                    <span className="text-faint">·</span>
                     <span className="text-muted">
                       {shortDate(session.lastSeenAt)}
                     </span>
                     {session.id === current.session.id && (
-                      <Tag tone="success">this device</Tag>
+                      <Tag tone="success">This device</Tag>
                     )}
                   </RowValue>
                   <span />
@@ -132,24 +126,24 @@ export default async function SecurityCenterPage() {
           <div data-mount-row>
             <Section
               index="2.0"
-              title="oauth grants"
-              hint="apps with account access"
+              title="OAuth grants"
+              hint="Apps with account access"
               action={
                 <form action={revokeAllOAuthGrantsAction}>
-                  <button className="text-meta uppercase tracking-wider text-secondary hover:text-danger transition-colors">
-                    revoke all
+                  <button className="text-[13px] text-secondary hover:text-danger transition-colors">
+                    Revoke all
                   </button>
                 </form>
               }
             >
               {dashboard.apps.length === 0 ? (
-                <Empty>no connected apps</Empty>
+                <Empty>No connected apps</Empty>
               ) : (
                 dashboard.apps.map(app => (
                   <Row key={app.appSlug}>
                     <RowLabel>{app.appName}</RowLabel>
                     <RowValue>{app.scopes.join(", ")}</RowValue>
-                    <span className="text-meta text-muted">
+                    <span className="text-[13px] text-muted">
                       {shortDate(app.createdAt)}
                     </span>
                   </Row>
@@ -161,31 +155,31 @@ export default async function SecurityCenterPage() {
           <div data-mount-row>
             <Section
               index="3.0"
-              title="telegram 2fa"
-              hint="linked recovery channel"
+              title="Telegram 2FA"
+              hint="Linked recovery channel"
             >
               <Row>
-                <RowLabel>status</RowLabel>
+                <RowLabel>Status</RowLabel>
                 <RowValue>
                   {hasTelegram ? (
                     <span className="flex items-baseline gap-2">
-                      <Glyph kind="ok" />
+                      <span className="inline-block w-2 h-2 rounded-full bg-success" />
                       <span>
-                        enabled {shortDate(current.user.telegramVerifiedAt)}
+                        Enabled {shortDate(current.user.telegramVerifiedAt)}
                       </span>
                     </span>
                   ) : (
                     <span className="flex items-baseline gap-2">
-                      <Glyph kind="warn" />
-                      <span className="text-accent">not linked</span>
+                      <span className="inline-block w-2 h-2 rounded-full bg-warning" />
+                      <span className="text-accent-strong">Not linked</span>
                     </span>
                   )}
                 </RowValue>
                 <Link
                   href="/relink"
-                  className="text-meta uppercase tracking-wider text-secondary hover:text-accent transition-colors"
+                  className="text-[13px] text-secondary hover:text-accent-strong transition-colors"
                 >
-                  relink
+                  Relink
                 </Link>
               </Row>
             </Section>
@@ -194,8 +188,8 @@ export default async function SecurityCenterPage() {
           <div data-mount-row>
             <Section
               index="4.0"
-              title="passkeys"
-              hint="passwordless credentials"
+              title="Passkeys"
+              hint="Passwordless credentials"
             >
               <PasskeyManager
                 passkeys={passkeys.map(item => ({
@@ -210,8 +204,8 @@ export default async function SecurityCenterPage() {
           <div data-mount-row>
             <Section
               index="5.0"
-              title="password"
-              hint="rotate your account password"
+              title="Password"
+              hint="Rotate your account password"
             >
               <ChangePasswordForm action={changePasswordAction} />
             </Section>
@@ -220,21 +214,21 @@ export default async function SecurityCenterPage() {
           <div data-mount-row>
             <Section
               index="6.0"
-              title="recent activity"
-              hint="security events"
+              title="Recent activity"
+              hint="Security events"
             >
               {dashboard.events.length === 0 ? (
-                <Empty>no recent events</Empty>
+                <Empty>No recent events</Empty>
               ) : (
                 dashboard.events.map((event, index) => (
                   <Row key={`${event.created_at}-${index}`}>
                     <RowLabel>
-                      <span className="tabular-nums normal-case tracking-normal text-faint">
+                      <span className="tabular-nums text-faint">
                         {shortDate(event.created_at)}
                       </span>
                     </RowLabel>
                     <RowValue>{event.event_type}</RowValue>
-                    <span className="text-meta uppercase tracking-wider text-muted">
+                    <span className="text-[13px] text-muted">
                       {event.result}
                     </span>
                   </Row>
diff --git a/app/user/[username]/page.tsx b/app/user/[username]/page.tsx
index ee879dc..fb26aa3 100644
--- a/app/user/[username]/page.tsx
+++ b/app/user/[username]/page.tsx
@@ -3,7 +3,6 @@ import { findUserByIdentifier } from "@/lib/server/repositories/users";
 import { TopNav } from "@/components/TopNav";
 import { Tag } from "@/components/Tag";
 import { Section, Row, RowLabel, RowValue } from "@/components/Section";
-import { Glyph } from "@/components/Glyph";
 
 export const dynamic = "force-dynamic";
 
@@ -34,18 +33,9 @@ export default async function UserProfilePage(props: {
         data-mount-stagger
       >
         <header className="mb-12" data-mount-row>
-          <div className="flex items-baseline gap-2 mb-2 text-meta">
-            <span className="text-accent">$</span>
-            <span className="uppercase tracking-wider text-muted">
-              user.profile
-            </span>
-            {user.role === "admin" && (
-              <>
-                <span className="text-faint">·</span>
-                <Tag tone="danger">admin</Tag>
-              </>
-            )}
-            <span className="text-faint">·</span>
+          <div className="flex items-center gap-2 mb-2">
+            <span className="text-[12px] text-muted">User profile</span>
+            {user.role === "admin" && <Tag tone="danger">Admin</Tag>}
             <Tag tone={user.status === "active" ? "success" : "warning"}>
               {user.status}
             </Tag>
@@ -53,13 +43,13 @@ export default async function UserProfilePage(props: {
 
           <div className="flex items-start gap-5">
             <div
-              className="h-16 w-16 border border-accent flex items-center justify-center text-accent text-[20px] tracking-wider shrink-0"
+              className="h-16 w-16 rounded-lg border border-accent bg-card flex items-center justify-center text-accent-strong text-[20px] shrink-0"
               aria-hidden
             >
               {initials}
             </div>
             <div className="min-w-0 flex-1">
-              <h1 className="text-[36px] tracking-tightest text-fg leading-none mb-2">
+              <h1 className="text-[36px] tracking-tight text-fg leading-none mb-2">
                 {user.firstName}
               </h1>
               <p className="text-[16px] text-secondary">@{user.username}</p>
@@ -68,33 +58,33 @@ export default async function UserProfilePage(props: {
         </header>
 
         <div data-mount-row>
-          <Section index="1.0" title="about" hint="public info">
+          <Section index="1.0" title="About" hint="Public info">
             <Row>
-              <RowLabel>bio</RowLabel>
+              <RowLabel>Bio</RowLabel>
               <RowValue>
                 {user.bio || (
-                  <span className="text-muted italic">no bio provided</span>
+                  <span className="text-muted italic">No bio provided</span>
                 )}
               </RowValue>
               <span />
             </Row>
             <Row>
-              <RowLabel>joined</RowLabel>
+              <RowLabel>Joined</RowLabel>
               <RowValue>{joinedAt}</RowValue>
               <span />
             </Row>
             {user.telegramUsername && (
               <Row>
-                <RowLabel>telegram</RowLabel>
+                <RowLabel>Telegram</RowLabel>
                 <RowValue>
                   <a
                     href={`https://t.me/${user.telegramUsername}`}
                     target="_blank"
                     rel="noreferrer"
-                    className="text-accent hover:text-fg transition-colors flex items-baseline gap-1.5"
+                    className="text-accent-strong hover:text-fg transition-colors flex items-baseline gap-1.5"
                   >
                     <span>@{user.telegramUsername}</span>
-                    <span className="text-meta text-faint">↗</span>
+                    <span className="text-[12px] text-faint">↗</span>
                   </a>
                 </RowValue>
                 <span />
@@ -104,10 +94,7 @@ export default async function UserProfilePage(props: {
         </div>
 
         <div data-mount-row>
-          <div className="text-meta text-faint flex items-baseline gap-2">
-            <Glyph kind="prompt" muted />
-            <span>end of profile</span>
-          </div>
+          <p className="text-[12px] text-faint">End of profile</p>
         </div>
       </main>
     </div>
diff --git a/app/verify/page.tsx b/app/verify/page.tsx
index 3239ad6..3a53c71 100644
--- a/app/verify/page.tsx
+++ b/app/verify/page.tsx
@@ -4,7 +4,6 @@ import { useEffect, useState } from "react";
 import { AuthShell } from "@/components/AuthShell";
 import { Button } from "@/components/Button";
 import { Alert } from "@/components/Alert";
-import { Cursor } from "@/components/Glyph";
 
 type Status = "waiting" | "completed" | "failed";
 
@@ -77,25 +76,25 @@ export default function VerifyPage() {
 
   return (
     <AuthShell tag="auth/verify">
-      <h1 className="text-[28px] tracking-tightest text-fg mb-1 leading-none">
-        verify with telegram
+      <h1 className="text-[28px] text-fg mb-1 leading-none">
+        Verify with Telegram
       </h1>
       <p className="text-meta text-muted mb-7">
-        open the bot to finish signing up
+        Open the bot to finish signing up
       </p>
 
       <div className="border-t border-rule">
         <div className="flex items-baseline justify-between py-2.5">
-          <span className="text-meta uppercase tracking-wider text-muted">
-            channel
+          <span className="text-[13px] text-muted">
+            Channel
           </span>
-          <span className="text-meta text-fg">telegram</span>
+          <span className="text-meta text-fg">Telegram</span>
         </div>
         <div className="flex items-baseline justify-between py-2.5 border-t border-rule">
-          <span className="text-meta uppercase tracking-wider text-muted">
-            expires in
+          <span className="text-[13px] text-muted">
+            Expires in
           </span>
-          <span className="text-meta text-accent tabular-nums">
+          <span className="text-meta text-accent-strong tabular-nums">
             {Math.floor(secondsLeft / 60)}:
             {(secondsLeft % 60).toString().padStart(2, "0")}
           </span>
@@ -104,7 +103,7 @@ export default function VerifyPage() {
       </div>
 
       <p className="text-meta text-secondary mt-3 mb-5">
-        the button opens telegram with a one-time start token attached.
+        The button opens Telegram with a one-time start token attached.
       </p>
 
       <a
@@ -114,28 +113,27 @@ export default function VerifyPage() {
         className="block mb-3"
       >
         <Button type="button" disabled={!botUrl}>
-          open telegram bot
+          Open Telegram bot
         </Button>
       </a>
 
       {!botUrl && (
         <div className="mb-4">
           <Alert tone="warning">
-            verification link missing — start registration again
+            Verification link missing — start registration again
           </Alert>
         </div>
       )}
 
       {status === "waiting" && (
-        <div className="flex items-baseline gap-2 text-meta uppercase tracking-wider text-muted my-5">
-          <Cursor />
-          <span>waiting for verification</span>
+        <div className="flex items-baseline gap-2 text-[13px] text-muted my-5">
+          <span>Waiting for verification…</span>
         </div>
       )}
 
       {error && <Alert tone="danger">{error}</Alert>}
       {status === "completed" && (
-        <Alert tone="success">verified — redirecting</Alert>
+        <Alert tone="success">Verified — redirecting</Alert>
       )}
 
       <div className="mt-6 grid grid-cols-2 gap-3">
@@ -144,10 +142,10 @@ export default function VerifyPage() {
           type="button"
           onClick={() => window.location.assign("/register")}
         >
-          start over
+          Start over
         </Button>
         <Button variant="ghost" type="button" onClick={checkStatus}>
-          check status
+          Check status
         </Button>
       </div>
     </AuthShell>
diff --git a/components/AdminSidebar.tsx b/components/AdminSidebar.tsx
index 3aaaa99..f36e327 100644
--- a/components/AdminSidebar.tsx
+++ b/components/AdminSidebar.tsx
@@ -4,21 +4,21 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 
 const navItems = [
-  { href: "/admin", label: "overview" },
-  { href: "/admin/users", label: "users" },
-  { href: "/admin/oauth-clients", label: "oauth clients" },
-  { href: "/admin/keys", label: "signing keys" },
-  { href: "/admin/activation-requests", label: "activation requests" },
-  { href: "/admin/webhooks", label: "webhook deliveries" },
-  { href: "/admin/bans", label: "bans" },
-  { href: "/admin/security", label: "security events" },
+  { href: "/admin", label: "Overview" },
+  { href: "/admin/users", label: "Users" },
+  { href: "/admin/oauth-clients", label: "OAuth clients" },
+  { href: "/admin/keys", label: "Signing keys" },
+  { href: "/admin/activation-requests", label: "Activation requests" },
+  { href: "/admin/webhooks", label: "Webhook deliveries" },
+  { href: "/admin/bans", label: "Bans" },
+  { href: "/admin/security", label: "Security events" },
 ];
 
 function Monogram() {
   return (
     <svg
-      width="16"
-      height="16"
+      width="18"
+      height="18"
       viewBox="0 0 20 20"
       fill="none"
       aria-hidden="true"
@@ -35,28 +35,27 @@ export function AdminSidebar({ username }: { username: string }) {
   const pathname = usePathname();
 
   return (
-    <aside className="hidden md:flex w-[220px] shrink-0 flex-col border-r border-rule bg-bg min-h-screen sticky top-0">
+    <aside className="hidden md:flex w-[220px] shrink-0 flex-col border-r border-rule bg-card min-h-screen sticky top-0">
       <div className="px-5 py-5 border-b border-rule">
         <Link href="/admin" className="flex items-center gap-2.5 select-none group">
           <Monogram />
           <div>
-            <div className="text-[14px] tracking-tightest text-fg group-hover:text-danger transition-colors">
+            <div className="text-[15px] font-semibold tracking-tight text-fg group-hover:text-danger transition-colors">
               bottleneck
             </div>
-            <div className="text-micro uppercase tracking-wider text-danger">
-              admin · root
+            <div className="text-[11px] font-medium uppercase tracking-wider text-danger">
+              Admin
             </div>
           </div>
         </Link>
       </div>
 
-      <nav className="flex-1 px-3 py-5 overflow-y-auto">
-        <div className="px-2 mb-2 text-micro uppercase tracking-wider text-faint flex items-baseline gap-2">
-          <span className="tabular-nums">00</span>
-          <span>controls</span>
+      <nav className="flex-1 px-3 py-4 overflow-y-auto">
+        <div className="px-2.5 mb-1.5 text-[11px] font-medium uppercase tracking-wider text-faint">
+          Controls
         </div>
-        <ul>
-          {navItems.map((item, i) => {
+        <ul className="space-y-0.5">
+          {navItems.map(item => {
             const active =
               item.href === "/admin"
                 ? pathname === "/admin"
@@ -65,22 +64,13 @@ export function AdminSidebar({ username }: { username: string }) {
               <li key={item.href}>
                 <Link
                   href={item.href}
-                  className={`group flex items-baseline gap-2 px-2 h-7 leading-7 text-[13px] transition-colors ${
-                    active ? "text-danger" : "text-secondary hover:text-fg"
+                  className={`flex items-center px-2.5 h-8 rounded-md text-[13px] transition-colors ${
+                    active
+                      ? "bg-[#fdecec] text-danger font-medium"
+                      : "text-secondary hover:bg-hover hover:text-fg"
                   }`}
                 >
-                  <span
-                    aria-hidden
-                    className={`w-2 text-[10px] ${
-                      active ? "text-danger" : "text-faint"
-                    }`}
-                  >
-                    {active ? "■" : "·"}
-                  </span>
-                  <span className="text-faint text-micro tabular-nums w-6 shrink-0">
-                    {String(i).padStart(2, "0")}
-                  </span>
-                  <span>{item.label}</span>
+                  {item.label}
                 </Link>
               </li>
             );
@@ -89,13 +79,10 @@ export function AdminSidebar({ username }: { username: string }) {
       </nav>
 
       <div className="px-3 py-3 border-t border-rule">
-        <div className="flex items-baseline gap-2 px-2 py-2 text-meta">
-          <span className="text-danger" aria-hidden>
-            ▌
-          </span>
+        <div className="flex items-center gap-2 px-2 py-2 text-[13px]">
           <span className="text-fg truncate">@{username}</span>
-          <span className="ml-auto text-micro uppercase tracking-wider text-danger">
-            root
+          <span className="ml-auto inline-flex items-center rounded bg-[#fdecec] px-1.5 py-0.5 text-[11px] font-medium text-danger">
+            Root
           </span>
         </div>
       </div>
diff --git a/components/Alert.tsx b/components/Alert.tsx
index 2fe94b9..d60f62b 100644
--- a/components/Alert.tsx
+++ b/components/Alert.tsx
@@ -1,40 +1,34 @@
-import { Glyph } from "./Glyph";
-
 type Tone = "danger" | "warning" | "info" | "success";
 
-const toneGlyph: Record<Tone, Parameters<typeof Glyph>[0]["kind"]> = {
-  danger: "error",
-  warning: "warn",
-  info: "prompt",
-  success: "ok",
-};
-
-const toneText: Record<Tone, string> = {
-  danger: "text-danger",
-  warning: "text-accent",
-  info: "text-secondary",
-  success: "text-ok",
+// A soft tinted banner: tone-matched background, hairline border, and text,
+// with rounded corners so it reads as a contained message rather than a rule
+// across the page.
+const toneStyles: Record<Tone, string> = {
+  danger: "bg-[#fdecec] border-[#f3c2c2] text-[#9f1c25]",
+  warning: "bg-[#fff6e0] border-[#f1d28a] text-[#7a5200]",
+  info: "bg-[#eaf2ff] border-[#bcd4ff] text-[#0b4ea8]",
+  success: "bg-[#e9f7ec] border-[#bfe6c7] text-[#1c6b2b]",
 };
 
-// No bordered box. The alert is a horizontal strip framed top and
-// bottom by hairline rules; the glyph carries the tone and lives
-// in the same column as the body text. Lets the alert sit inline
-// with surrounding content instead of breaking the rhythm with a
-// pill shape.
 export function Alert({
   tone = "info",
+  className = "",
   children,
 }: {
   tone?: Tone;
+  className?: string;
   children: React.ReactNode;
 }) {
   return (
     <div
       role="alert"
-      className="rule-x border-b border-rule py-2.5 px-1 text-[13px] flex items-baseline gap-3"
+      className={[
+        "rounded-md border px-3 py-2.5 text-[13px] leading-snug",
+        toneStyles[tone],
+        className,
+      ].join(" ")}
     >
-      <Glyph kind={toneGlyph[tone]} className={toneText[tone]} />
-      <div className="flex-1 leading-snug text-fg">{children}</div>
+      {children}
     </div>
   );
 }
diff --git a/components/AuthShell.tsx b/components/AuthShell.tsx
index 609e612..3c6b9b3 100644
--- a/components/AuthShell.tsx
+++ b/components/AuthShell.tsx
@@ -1,18 +1,16 @@
 import Link from "next/link";
 
-// Auth pages drop the bordered-card panel. The form sits on the bare
-// page surrounded by rule lines and the scanline texture, framed by
-// the monogram up top and the navigation strip at the bottom — the
-// shape of a single page in a hardcover technical manual.
+// Auth pages center a single white card on the light canvas: brand mark above,
+// the form inside the card lifted by a soft shadow, a quiet footer below. One
+// focused object on the page, nothing competing with it.
 
 function Monogram() {
-  // Custom mark: two narrow bars converging into one wider bar — a
-  // bottleneck silhouette in monospaced glyph form. Drawn inline so
-  // there's no extra HTTP request and the colors stay accent-driven.
+  // Two narrow bars converging into one wider bar — a bottleneck silhouette.
+  // Drawn inline so there's no extra request and the color stays accent-driven.
   return (
     <svg
-      width="20"
-      height="20"
+      width="22"
+      height="22"
       viewBox="0 0 20 20"
       fill="none"
       aria-hidden="true"
@@ -27,61 +25,42 @@ function Monogram() {
 
 export function AuthShell({
   children,
-  tag,
   account,
 }: {
   children: React.ReactNode;
+  // Pages may still pass a `tag` breadcrumb; it is intentionally not rendered
+  // in the light layout. Kept off the type via rest props so call sites compile.
   tag?: string;
   // When the page already has a signed-in user (e.g. the authorize screen),
-  // pass it so the header reflects that instead of offering sign in / register.
+  // pass it so the header reflects that.
   account?: { username: string } | null;
 }) {
   return (
-    <main className="scanlines min-h-screen flex flex-col">
-      <header className="w-full max-w-[880px] mx-auto px-5 pt-6 pb-5 flex items-center justify-between">
-        <Link
-          href="/"
-          className="flex items-center gap-2.5 text-fg select-none group"
-        >
-          <Monogram />
-          <span className="text-[14px] tracking-tightest group-hover:text-accent transition-colors">
-            bottleneck
-          </span>
-          <span className="text-meta text-muted">/ auth</span>
-        </Link>
-        <nav className="flex items-center gap-5 text-meta text-secondary">
-          {account ? (
-            <Link href="/" className="hover:text-accent transition-colors">
-              {account.username}
-            </Link>
-          ) : (
-            <>
-              <Link href="/login" className="hover:text-accent transition-colors">
-                sign in
-              </Link>
-              <Link href="/register" className="hover:text-accent transition-colors">
-                register
-              </Link>
-            </>
+    <main className="min-h-screen flex flex-col items-center justify-center bg-canvas px-4 py-12">
+      <div className="w-full max-w-[400px]">
+        <div className="flex flex-col items-center gap-2 mb-6">
+          <Link
+            href="/"
+            className="flex items-center gap-2 select-none group"
+          >
+            <Monogram />
+            <span className="text-[16px] font-semibold tracking-tight text-fg">
+              bottleneck
+            </span>
+          </Link>
+          {account && (
+            <span className="text-[13px] text-muted">
+              Signed in as {account.username}
+            </span>
           )}
-        </nav>
-      </header>
+        </div>
 
-      <div className="rule-x border-b border-rule" />
+        <div className="bg-card border border-rule rounded-lg shadow-card p-7">
+          {children}
+        </div>
 
-      <div className="flex-1 flex items-start justify-center px-5 pt-12 pb-16">
-        <div className="w-full max-w-[440px]">
-          {tag && (
-            <div className="mb-5 text-meta text-muted flex items-baseline gap-2">
-              <span className="text-accent">$</span>
-              <span className="tracking-wider">{tag}</span>
-            </div>
-          )}
-          <div className="rule-x border-b border-rule py-7">{children}</div>
-          <div className="mt-5 text-meta text-faint flex items-center justify-between">
-            <span>bnck-auth · {new Date().getFullYear()}</span>
-            <span>tls / cf-tunnel</span>
-          </div>
+        <div className="mt-6 text-center text-[12px] text-faint">
+          bottleneck · {new Date().getFullYear()}
         </div>
       </div>
     </main>
diff --git a/components/BearerSection.tsx b/components/BearerSection.tsx
index 878332f..0eb66a9 100644
--- a/components/BearerSection.tsx
+++ b/components/BearerSection.tsx
@@ -4,7 +4,6 @@ import Link from "next/link";
 import { useState } from "react";
 import { Empty, Row, RowLabel, RowValue, Section } from "@/components/Section";
 import { Tag } from "@/components/Tag";
-import { Glyph } from "@/components/Glyph";
 import type { BearerRequest } from "@/lib/server/types";
 
 type Tone = "neutral" | "success" | "danger" | "warning";
@@ -18,9 +17,9 @@ function statusTone(status: BearerRequest["status"]): Tone {
 
 function statusLabel(b: BearerRequest) {
   if (b.status === "approved" && !b.hasPlaintext) {
-    return "issued";
+    return "Issued";
   }
-  return b.status;
+  return b.status.charAt(0).toUpperCase() + b.status.slice(1);
 }
 
 function shortDate(value: string | null) {
@@ -31,21 +30,20 @@ function shortDate(value: string | null) {
 export function BearerSection({ bearers }: { bearers: BearerRequest[] }) {
   return (
     <Section
-      title="api bearers"
-      hint="keys for external apps"
+      title="API bearers"
+      hint="Keys for external apps"
       index="3.1"
       action={
         <Link
           href="/request-bearer"
-          className="text-meta uppercase tracking-wider text-secondary hover:text-accent transition-colors flex items-baseline gap-1.5"
+          className="text-[13px] text-secondary hover:text-accent-strong transition-colors"
         >
-          <Glyph kind="ok" />
-          <span>request bearer</span>
+          Request bearer
         </Link>
       }
     >
       {bearers.length === 0 ? (
-        <Empty>no bearer requests</Empty>
+        <Empty>No bearer requests</Empty>
       ) : (
         bearers.map(bearer => <BearerRow key={bearer.publicId} bearer={bearer} />)
       )}
@@ -70,7 +68,7 @@ function BearerRow({ bearer }: { bearer: BearerRequest }) {
       );
       const data = (await response.json()) as { key?: string; error?: string };
       if (!response.ok || !data.key) {
-        setError(data.error || "could not reveal key");
+        setError(data.error || "Could not reveal key");
         return;
       }
       setRevealed(data.key);
@@ -87,12 +85,12 @@ function BearerRow({ bearer }: { bearer: BearerRequest }) {
       setCopied(true);
       setTimeout(() => setCopied(false), 1500);
     } catch {
-      setError("clipboard unavailable");
+      setError("Clipboard unavailable");
     }
   }
 
   async function abandon() {
-    if (!confirm("clear the saved key? you won't be able to view it again.")) {
+    if (!confirm("Clear the saved key? You won't be able to view it again.")) {
       return;
     }
     setBusy(true);
@@ -103,7 +101,7 @@ function BearerRow({ bearer }: { bearer: BearerRequest }) {
       });
       const data = (await response.json()) as { error?: string };
       if (!response.ok) {
-        setError(data.error || "could not clear key");
+        setError(data.error || "Could not clear key");
         return;
       }
       setHasPlaintext(false);
@@ -120,10 +118,10 @@ function BearerRow({ bearer }: { bearer: BearerRequest }) {
   return (
     <>
       {hasKey && (
-        <div className="border-t border-rule first:border-t-0 px-1 py-2.5 flex items-baseline gap-2 text-meta">
-          <Glyph kind="warn" />
-          <span className="text-accent">
-            this is the only time the key will be shown. copy it now.
+        <div className="border-t border-rule first:border-t-0 px-1 py-2.5 flex items-center gap-2 text-[13px]">
+          <span className="inline-block w-1.5 h-1.5 rounded-full bg-amber-400 shrink-0" />
+          <span className="text-accent-strong">
+            This is the only time the key will be shown. Copy it now.
           </span>
         </div>
       )}
@@ -134,10 +132,10 @@ function BearerRow({ bearer }: { bearer: BearerRequest }) {
             <span className="flex items-center gap-2 min-w-0 flex-1">
               <code
                 className={[
-                  "text-[12px] truncate flex-1 px-2 py-1 border border-rule bg-bg-soft",
-                  revealed ? "text-accent" : "text-faint blur-[3px] select-none",
+                  "text-[12px] truncate flex-1 px-2 py-1 border border-rule bg-bg-soft rounded-md",
+                  revealed ? "text-accent-strong" : "text-faint blur-[3px] select-none",
                 ].join(" ")}
-                title={revealed ? "your bearer key" : "click show to reveal"}
+                title={revealed ? "Your bearer key" : "Click show to reveal"}
               >
                 {masked}
               </code>
@@ -149,24 +147,23 @@ function BearerRow({ bearer }: { bearer: BearerRequest }) {
                 {bearer.reason}
               </span>
               <Tag tone={statusTone(bearer.status)}>{statusLabel(bearer)}</Tag>
-              <Glyph kind="dot" />
-              <span className="text-muted text-meta">
+              <span className="text-[13px] text-muted">
                 {shortDate(bearer.createdAt)}
               </span>
             </span>
           )}
         </RowValue>
-        <span className="flex items-center gap-3 text-meta uppercase tracking-wider">
-          {error && <span className="text-danger normal-case">{error}</span>}
+        <span className="flex items-center gap-3 text-[13px]">
+          {error && <span className="text-danger">{error}</span>}
           {canReveal && !hasKey && (
             <>
               <button
                 type="button"
                 onClick={reveal}
                 disabled={busy}
-                className="text-secondary hover:text-accent transition-colors disabled:text-faint"
+                className="text-secondary hover:text-accent-strong transition-colors disabled:text-faint"
               >
-                show
+                Show
               </button>
               <button
                 type="button"
@@ -174,7 +171,7 @@ function BearerRow({ bearer }: { bearer: BearerRequest }) {
                 disabled={busy}
                 className="text-faint hover:text-danger transition-colors disabled:text-faint"
               >
-                discard
+                Discard
               </button>
             </>
           )}
@@ -183,16 +180,16 @@ function BearerRow({ bearer }: { bearer: BearerRequest }) {
               <button
                 type="button"
                 onClick={copy}
-                className="text-secondary hover:text-accent transition-colors"
+                className="text-secondary hover:text-accent-strong transition-colors"
               >
-                {copied ? "copied" : "copy"}
+                {copied ? "Copied" : "Copy"}
               </button>
               <button
                 type="button"
                 onClick={() => setRevealed(null)}
                 className="text-secondary hover:text-fg transition-colors"
               >
-                done
+                Done
               </button>
             </>
           )}
diff --git a/components/Button.tsx b/components/Button.tsx
index 7786387..44cea92 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -5,29 +5,43 @@ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   loading?: boolean;
 };
 
-// Square, single hairline, one accent. Primary is amber bg + black
-// fg — the only place the accent is filled rather than outlined.
-// Secondary / ghost are rule-bordered. Danger is text-only with a
-// muted rule until hover.
+// Primary is the one filled control: the accent on a dark label. Secondary is
+// a bordered white surface, ghost is borderless until hover, danger reads in
+// red and only commits its border on intent.
 const styles: Record<Variant, string> = {
   primary:
-    "bg-accent text-bg border border-accent " +
-    "hover:bg-fg hover:border-fg " +
-    "disabled:bg-faint disabled:border-faint disabled:text-muted",
+    "bg-accent text-fg hover:brightness-95 " +
+    "disabled:bg-faint disabled:text-muted disabled:brightness-100",
   secondary:
-    "bg-transparent text-fg border border-rule " +
-    "hover:border-rule-strong hover:text-accent " +
-    "disabled:text-muted disabled:border-rule",
+    "bg-card text-fg border border-rule " +
+    "hover:bg-hover hover:border-rule-strong " +
+    "disabled:text-muted disabled:bg-card",
   ghost:
-    "bg-transparent text-secondary border border-transparent " +
-    "hover:text-fg hover:border-rule " +
+    "bg-transparent text-secondary " +
+    "hover:bg-hover hover:text-fg " +
     "disabled:text-muted",
   danger:
     "bg-transparent text-danger border border-rule " +
-    "hover:border-danger " +
+    "hover:border-danger hover:bg-danger/5 " +
     "disabled:text-muted",
 };
 
+function Spinner() {
+  return (
+    <svg
+      className="animate-spin"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="12" r="9" stroke="currentColor" strokeWidth="2.5" opacity="0.25" />
+      <path d="M21 12a9 9 0 0 0-9-9" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
+    </svg>
+  );
+}
+
 export function Button({
   variant = "primary",
   loading,
@@ -39,8 +53,8 @@ export function Button({
   return (
     <button
       className={[
-        "w-full h-10 px-4 text-[13px] uppercase tracking-wider",
-        "transition-colors disabled:cursor-not-allowed",
+        "w-full h-10 px-4 text-[14px] font-medium rounded-md",
+        "transition disabled:cursor-not-allowed",
         "inline-flex items-center justify-center gap-2",
         styles[variant],
         className,
@@ -48,14 +62,8 @@ export function Button({
       disabled={disabled || loading}
       {...props}
     >
-      {loading ? (
-        <span className="inline-flex items-center gap-2">
-          <span className="cursor-blink">▌</span>
-          <span>running</span>
-        </span>
-      ) : (
-        children
-      )}
+      {loading && <Spinner />}
+      {children}
     </button>
   );
 }
diff --git a/components/ChangePasswordForm.tsx b/components/ChangePasswordForm.tsx
index 160b82d..7dd0e7a 100644
--- a/components/ChangePasswordForm.tsx
+++ b/components/ChangePasswordForm.tsx
@@ -22,14 +22,14 @@ export function ChangePasswordForm({
         </Alert>
       )}
       <Field
-        label="current password"
+        label="Current password"
         name="currentPassword"
         type="password"
         autoComplete="current-password"
         required
       />
       <Field
-        label="new password"
+        label="New password"
         name="newPassword"
         type="password"
         autoComplete="new-password"
@@ -40,7 +40,7 @@ export function ChangePasswordForm({
       />
       <div>
         <Button type="submit" loading={pending}>
-          change password
+          Change password
         </Button>
       </div>
     </form>
diff --git a/components/Divider.tsx b/components/Divider.tsx
index 69796fa..51fe7ae 100644
--- a/components/Divider.tsx
+++ b/components/Divider.tsx
@@ -1,7 +1,7 @@
 export function Divider({ label }: { label?: string }) {
   if (!label) return <hr className="border-rule" />;
   return (
-    <div className="flex items-center gap-3 text-micro uppercase tracking-wider text-faint">
+    <div className="flex items-center gap-3 text-[12px] text-muted">
       <hr className="flex-1 border-rule" />
       <span>{label}</span>
       <hr className="flex-1 border-rule" />
diff --git a/components/Field.tsx b/components/Field.tsx
index fbe2072..a2aff78 100644
--- a/components/Field.tsx
+++ b/components/Field.tsx
@@ -1,5 +1,4 @@
 import { forwardRef } from "react";
-import { Glyph } from "./Glyph";
 
 type FieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
   label: string;
@@ -8,11 +7,9 @@ type FieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
   optional?: boolean;
 };
 
-// Form fields drop the box. The input is a baseline-aligned strip
-// with a single 1px rule beneath it; the rule glows amber on focus.
-// Label sits in uppercase above; hint and error sit below in meta
-// type. Compare to the previous `bg-bg border px-3 h-10` shape — far
-// more bordered-form-on-the-web than tool-in-a-terminal.
+// A bordered, rounded input with the label sitting above it. The border picks
+// up the accent on focus with a soft ring; the error state swaps to danger and
+// wires the message to the input for screen readers.
 export const Field = forwardRef<HTMLInputElement, FieldProps>(function Field(
   { label, hint, error, optional, id, className = "", ...props },
   ref,
@@ -22,18 +19,11 @@ export const Field = forwardRef<HTMLInputElement, FieldProps>(function Field(
   const errorId = error ? `${inputId}-error` : undefined;
   return (
     <div>
-      <div className="flex items-baseline justify-between mb-1">
-        <label
-          htmlFor={inputId}
-          className="text-micro uppercase tracking-wider text-muted"
-        >
+      <div className="flex items-baseline justify-between mb-1.5">
+        <label htmlFor={inputId} className="text-[13px] font-medium text-fg">
           {label}
         </label>
-        {optional && (
-          <span className="text-micro uppercase tracking-wider text-faint">
-            optional
-          </span>
-        )}
+        {optional && <span className="text-[12px] text-muted">Optional</span>}
       </div>
       <input
         ref={ref}
@@ -43,24 +33,23 @@ export const Field = forwardRef<HTMLInputElement, FieldProps>(function Field(
         }
         aria-invalid={!!error}
         className={[
-          "w-full bg-transparent px-0 h-9 text-[14px] text-fg",
-          "placeholder:text-faint border-0 border-b",
+          "w-full h-10 px-3 text-[14px] rounded-md bg-card text-fg",
+          "placeholder:text-faint border",
           error ? "border-danger" : "border-rule",
-          "focus:outline-hidden focus:border-accent",
-          "transition-colors",
+          "focus:outline-none focus:border-accent focus:ring-2 focus:ring-accent/25",
+          "transition",
           className,
         ].join(" ")}
         {...props}
       />
       {hint && !error && (
-        <p id={hintId} className="mt-1 text-meta text-muted">
+        <p id={hintId} className="mt-1.5 text-[12px] text-muted">
           {hint}
         </p>
       )}
       {error && (
-        <p id={errorId} className="mt-1 text-meta text-danger flex items-baseline gap-1.5">
-          <Glyph kind="error" />
-          <span>{error}</span>
+        <p id={errorId} className="mt-1.5 text-[12px] text-danger">
+          {error}
         </p>
       )}
     </div>
diff --git a/components/Glyph.tsx b/components/Glyph.tsx
index c1774b6..693d2fa 100644
--- a/components/Glyph.tsx
+++ b/components/Glyph.tsx
@@ -1,8 +1,6 @@
-// Typographic glyph vocabulary. Field error states, Alert prefixes,
-// Tag dots, Empty-state cursors, and Section bullets all reach into
-// this list rather than embedding their own ad-hoc characters. The
-// single source of truth keeps the terminal idiom legible: when a
-// user sees `×` once, they see `×` every time.
+// Small glyph vocabulary for status marks. Tones are tuned to read on the
+// light surface; the bright accent is reserved for fills, so accent-toned
+// glyphs use the readable deeper amber.
 
 type Kind = "prompt" | "ok" | "error" | "warn" | "active" | "inactive" | "dot";
 
@@ -17,13 +15,13 @@ const glyphs: Record<Kind, string> = {
 };
 
 const tones: Record<Kind, string> = {
-  prompt: "text-accent",
+  prompt: "text-muted",
   ok: "text-ok",
   error: "text-danger",
-  warn: "text-accent",
-  active: "text-accent",
+  warn: "text-accent-strong",
+  active: "text-accent-strong",
   inactive: "text-faint",
-  dot: "text-faint",
+  dot: "text-muted",
 };
 
 export function Glyph({
@@ -53,7 +51,7 @@ export function Cursor({ className = "" }: { className?: string }) {
   return (
     <span
       aria-hidden="true"
-      className={`inline-block leading-none cursor-blink text-accent ${className}`}
+      className={`inline-block leading-none cursor-blink text-accent-strong ${className}`}
     >
       ▌
     </span>
diff --git a/components/Kbd.tsx b/components/Kbd.tsx
index 56da073..0a12da8 100644
--- a/components/Kbd.tsx
+++ b/components/Kbd.tsx
@@ -1,7 +1,4 @@
-// Keyboard shortcut pill. Brackets are part of the glyph language —
-// no border, no background, no rounded box. Just bracketed characters
-// rendered in the muted shade so the keystroke reads as printed
-// documentation rather than a "click me" affordance.
+// Keyboard shortcut key: a small bordered, rounded cap.
 export function Kbd({
   children,
   className = "",
@@ -10,10 +7,10 @@ export function Kbd({
   className?: string;
 }) {
   return (
-    <span className={`text-micro text-muted whitespace-nowrap ${className}`}>
-      <span className="text-faint">[</span>
+    <span
+      className={`inline-flex items-center rounded border border-rule bg-card px-1.5 py-0.5 text-[11px] text-secondary whitespace-nowrap ${className}`}
+    >
       {children}
-      <span className="text-faint">]</span>
     </span>
   );
 }
diff --git a/components/PasskeyManager.tsx b/components/PasskeyManager.tsx
index 193f383..5ca46d3 100644
--- a/components/PasskeyManager.tsx
+++ b/components/PasskeyManager.tsx
@@ -4,7 +4,6 @@ import { useState } from "react";
 import { startRegistration } from "@simplewebauthn/browser";
 import { Row, RowLabel, RowValue, Empty } from "./Section";
 import { Tag } from "./Tag";
-import { Glyph } from "./Glyph";
 import { revokePasskeyAction } from "@/app/dashboard-actions";
 
 export function PasskeyManager({
@@ -50,32 +49,31 @@ export function PasskeyManager({
   return (
     <>
       {error && (
-        <div className="border-t border-rule first:border-t-0 px-1 py-2.5 text-meta flex items-baseline gap-2">
-          <Glyph kind="error" />
+        <div className="border-t border-rule first:border-t-0 px-1 py-2.5 text-[13px] flex items-baseline gap-2">
           <span className="text-danger">{error}</span>
         </div>
       )}
 
       {passkeys.length === 0 ? (
-        <Empty>no passkeys registered</Empty>
+        <Empty>No passkeys registered</Empty>
       ) : (
         passkeys.map(key => (
           <Row key={key.id}>
-            <RowLabel>{key.name || "unknown device"}</RowLabel>
+            <RowLabel>{key.name || "Unknown device"}</RowLabel>
             <RowValue>
-              <Tag tone="success">active</Tag>
-              <Glyph kind="dot" />
+              <Tag tone="success">Active</Tag>
+              <span className="text-faint">·</span>
               <span className="text-muted">
-                last used {key.lastUsed.slice(0, 10)}
+                Last used {key.lastUsed.slice(0, 10)}
               </span>
             </RowValue>
             <form action={revokePasskeyAction}>
               <input type="hidden" name="credentialId" value={key.id} />
               <button
                 type="submit"
-                className="text-meta uppercase tracking-wider text-secondary hover:text-danger transition-colors"
+                className="text-[13px] text-secondary hover:text-danger transition-colors"
               >
-                revoke
+                Revoke
               </button>
             </form>
           </Row>
@@ -86,19 +84,9 @@ export function PasskeyManager({
         <button
           onClick={registerPasskey}
           disabled={loading}
-          className="text-meta uppercase tracking-wider text-accent hover:text-fg transition-colors disabled:text-faint disabled:cursor-not-allowed flex items-baseline gap-2"
+          className="text-[13px] text-accent-strong hover:text-fg transition-colors disabled:text-faint disabled:cursor-not-allowed"
         >
-          {loading ? (
-            <>
-              <span className="cursor-blink">▌</span>
-              <span>registering</span>
-            </>
-          ) : (
-            <>
-              <Glyph kind="ok" />
-              <span>add passkey</span>
-            </>
-          )}
+          {loading ? "Registering…" : "Add passkey"}
         </button>
       </div>
     </>
diff --git a/components/Section.tsx b/components/Section.tsx
index 8c6c444..206be78 100644
--- a/components/Section.tsx
+++ b/components/Section.tsx
@@ -1,10 +1,6 @@
-import { Cursor, Glyph } from "./Glyph";
-
-// Sections drop the bordered-card pattern. Each one is structured
-// like a printed RFC subsection: a numeric / mnemonic prefix
-// alongside the title, a hairline rule beneath, content rows
-// separated by rule lines, and a closing rule. No card fill, no
-// rounded corners, no nested boxes.
+// A titled settings group: a heading with optional hint and action, then a
+// white card holding rows divided by hairlines. Replaces the prior RFC-style
+// rule-line subsection.
 
 export function Section({
   title,
@@ -20,27 +16,24 @@ export function Section({
   children: React.ReactNode;
 }) {
   return (
-    <section className="mb-10">
+    <section className="mb-8">
       <header className="flex items-baseline justify-between mb-3 gap-4">
-        <div className="flex items-baseline gap-3 min-w-0">
+        <div className="flex items-baseline gap-2 min-w-0">
           {index && (
-            <span className="text-meta text-faint tabular-nums shrink-0">
+            <span className="text-[13px] text-faint tabular-nums shrink-0">
               {index}
             </span>
           )}
-          <h2 className="text-[15px] uppercase tracking-wider text-fg shrink-0">
-            {title}
-          </h2>
+          <h2 className="text-[15px] font-semibold text-fg shrink-0">{title}</h2>
           {hint && (
-            <span className="text-meta text-muted truncate">
-              <span className="text-faint">// </span>
-              {hint}
-            </span>
+            <span className="text-[13px] text-muted truncate">{hint}</span>
           )}
         </div>
         {action}
       </header>
-      <div className="rule-x border-b border-rule">{children}</div>
+      <div className="bg-card border border-rule rounded-lg overflow-hidden">
+        {children}
+      </div>
     </section>
   );
 }
@@ -55,9 +48,9 @@ export function Row({
   return (
     <div
       className={[
-        "grid grid-cols-[180px_1fr_auto] gap-4 px-1 py-3",
+        "grid grid-cols-[200px_1fr_auto] gap-4 px-4 py-3",
         "border-t border-rule first:border-t-0",
-        "items-center text-[13px]",
+        "items-center text-[14px]",
         className,
       ].join(" ")}
     >
@@ -68,9 +61,7 @@ export function Row({
 
 export function RowLabel({ children }: { children: React.ReactNode }) {
   return (
-    <span className="text-meta uppercase tracking-wider text-muted truncate">
-      {children}
-    </span>
+    <span className="text-[13px] text-muted truncate">{children}</span>
   );
 }
 
@@ -85,8 +76,8 @@ export function RowValue({
     <span className="text-fg flex items-center gap-2 min-w-0">
       <span className="truncate">{children}</span>
       {privateField && (
-        <span className="text-micro uppercase tracking-wider text-accent shrink-0">
-          private
+        <span className="inline-flex items-center rounded bg-hover px-1.5 py-0.5 text-[11px] font-medium text-muted shrink-0">
+          Private
         </span>
       )}
     </span>
@@ -95,10 +86,8 @@ export function RowValue({
 
 export function Empty({ children }: { children: React.ReactNode }) {
   return (
-    <div className="px-1 py-8 text-meta text-muted flex items-center justify-center gap-2">
-      <Glyph kind="prompt" muted />
-      <span>{children}</span>
-      <Cursor className="text-faint" />
+    <div className="px-4 py-8 text-[13px] text-muted text-center">
+      {children}
     </div>
   );
 }
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index afc28c5..cbbab32 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import { usePathname, useRouter } from "next/navigation";
-import { Cursor, Glyph } from "./Glyph";
 import { Kbd } from "./Kbd";
 
 type NavItem = {
@@ -15,36 +14,36 @@ type NavItem = {
 
 const groups: { label: string; items: Omit<NavItem, "group">[] }[] = [
   {
-    label: "account",
+    label: "Account",
     items: [
-      { href: "/#profile", label: "profile" },
-      { href: "/#subscriptions", label: "subscriptions" },
-      { href: "/#apps", label: "connected apps" },
-      { href: "/#bearers", label: "api bearers" },
+      { href: "/#profile", label: "Profile" },
+      { href: "/#subscriptions", label: "Subscriptions" },
+      { href: "/#apps", label: "Connected apps" },
+      { href: "/#bearers", label: "API bearers" },
     ],
   },
   {
-    label: "security",
+    label: "Security",
     items: [
-      { href: "/#sessions", label: "sessions" },
-      { href: "/#security", label: "password & 2fa" },
-      { href: "/#events", label: "recent events" },
-      { href: "/security", label: "security center" },
+      { href: "/#sessions", label: "Sessions" },
+      { href: "/#security", label: "Password & 2FA" },
+      { href: "/#events", label: "Recent events" },
+      { href: "/security", label: "Security center" },
     ],
   },
   {
-    label: "developer",
+    label: "Developer",
     items: [
-      { href: "/developers/apps", label: "oauth apps" },
-      { href: "/developers/oauth", label: "oauth docs", newWindow: true },
-      { href: "/developers/test-lab", label: "test field lab" },
+      { href: "/developers/apps", label: "OAuth apps" },
+      { href: "/developers/oauth", label: "OAuth docs", newWindow: true },
+      { href: "/developers/test-lab", label: "Test field lab" },
     ],
   },
   {
-    label: "support",
+    label: "Support",
     items: [
-      { href: "https://t.me/bottleneck_help", label: "telegram" },
-      { href: "/#faq", label: "faq" },
+      { href: "https://t.me/bottleneck_help", label: "Telegram" },
+      { href: "/#faq", label: "FAQ" },
     ],
   },
 ];
@@ -79,8 +78,8 @@ function SearchPalette({ onClose }: { onClose: () => void }) {
   const results = query.trim()
     ? allItems.filter(
         it =>
-          it.label.includes(query.toLowerCase()) ||
-          it.group.includes(query.toLowerCase()),
+          it.label.toLowerCase().includes(query.toLowerCase()) ||
+          it.group.toLowerCase().includes(query.toLowerCase()),
       )
     : allItems;
 
@@ -123,27 +122,24 @@ function SearchPalette({ onClose }: { onClose: () => void }) {
 
   return (
     <div
-      className="overlay-mount fixed inset-0 z-50 flex items-start justify-center pt-[18vh] px-5 bg-bg/75 backdrop-blur-md"
+      className="overlay-mount fixed inset-0 z-50 flex items-start justify-center pt-[18vh] px-5 bg-fg/20 backdrop-blur-sm"
       onClick={onClose}
     >
       <div
         role="dialog"
         aria-modal="true"
-        aria-label="search palette"
-        className="palette-mount w-full max-w-[580px] bg-bg border border-rule-strong"
+        aria-label="Search"
+        className="palette-mount w-full max-w-[580px] bg-card border border-rule rounded-lg shadow-elevated overflow-hidden"
         onClick={e => e.stopPropagation()}
       >
         <div className="flex items-center gap-3 p-4 border-b border-rule">
-          <span className="text-accent text-[15px] leading-none" aria-hidden="true">
-            $
-          </span>
           <input
             ref={inputRef}
             value={query}
             onChange={e => setQuery(e.target.value)}
             onKeyDown={onKeyDown}
-            placeholder="search pages, settings, docs"
-            aria-label="search"
+            placeholder="Search pages, settings, docs"
+            aria-label="Search"
             aria-controls="sidebar-search-results"
             aria-activedescendant={
               results[selected]
@@ -152,26 +148,23 @@ function SearchPalette({ onClose }: { onClose: () => void }) {
             }
             className="flex-1 bg-transparent text-[15px] text-fg placeholder-faint outline-hidden focus:outline-hidden focus-visible:outline-hidden"
           />
-          <Kbd>esc</Kbd>
+          <Kbd>Esc</Kbd>
         </div>
         <ul
           id="sidebar-search-results"
           role="listbox"
-          aria-label="search results"
+          aria-label="Search results"
           className="max-h-[360px] overflow-y-auto py-1.5"
         >
           {results.length === 0 ? (
-            <li className="px-4 py-4 text-meta text-muted flex items-baseline gap-2">
-              <Glyph kind="prompt" muted />
-              <span>
-                no match
-                {query && (
-                  <>
-                    {" for "}
-                    <span className="text-accent">&quot;{query}&quot;</span>
-                  </>
-                )}
-              </span>
+            <li className="px-4 py-4 text-[13px] text-muted">
+              No match
+              {query && (
+                <>
+                  {" for "}
+                  <span className="text-fg">&quot;{query}&quot;</span>
+                </>
+              )}
             </li>
           ) : (
             results.map((it, i) => (
@@ -180,56 +173,41 @@ function SearchPalette({ onClose }: { onClose: () => void }) {
                 id={`sidebar-search-option-${i}`}
                 role="option"
                 aria-selected={i === selected}
+                className="px-1.5"
               >
                 <button
                   type="button"
                   onClick={() => navigate(it)}
                   onMouseEnter={() => setSelected(i)}
-                  className={`w-full text-left flex items-baseline gap-3 px-4 h-9 text-[13px] transition-colors ${
-                    i === selected
-                      ? "text-accent bg-bg-soft"
-                      : "text-secondary"
+                  className={`w-full text-left flex items-center gap-3 px-2.5 h-9 rounded-md text-[13px] transition-colors ${
+                    i === selected ? "bg-hover text-fg" : "text-secondary"
                   }`}
                 >
-                  <span
-                    aria-hidden="true"
-                    className={`w-3 ${
-                      i === selected ? "text-accent" : "text-faint"
-                    }`}
-                  >
-                    {i === selected ? "▸" : ""}
-                  </span>
-                  <span
-                    className={`text-micro uppercase tracking-wider w-[72px] shrink-0 ${
-                      i === selected ? "text-accent/70" : "text-faint"
-                    }`}
-                  >
+                  <span className="text-[12px] text-muted w-[64px] shrink-0">
                     {it.group}
                   </span>
                   <span className="flex-1 truncate">{it.label}</span>
                   {it.newWindow && (
-                    <span className="text-faint text-micro shrink-0">↗</span>
+                    <span className="text-faint text-[12px] shrink-0">↗</span>
                   )}
                 </button>
               </li>
             ))
           )}
         </ul>
-        <div className="px-4 h-9 border-t border-rule flex items-center justify-between text-meta text-faint">
+        <div className="px-4 h-9 border-t border-rule flex items-center justify-between text-[12px] text-muted">
           <div className="flex items-center gap-4">
             <span className="flex items-center gap-1.5">
               <Kbd>↑↓</Kbd>
-              <span>nav</span>
+              <span>Navigate</span>
             </span>
             <span className="flex items-center gap-1.5">
               <Kbd>↵</Kbd>
-              <span>open</span>
+              <span>Open</span>
             </span>
           </div>
-          <span className="tabular-nums">
-            {String(results.length).padStart(2, "0")}
-            <span className="text-faint/60">/</span>
-            {String(allItems.length).padStart(2, "0")}
+          <span className="tabular-nums text-faint">
+            {results.length}/{allItems.length}
           </span>
         </div>
       </div>
@@ -261,21 +239,13 @@ export function Sidebar({ user }: { user: { name: string; username: string } })
     <>
       <div className="hidden md:block w-[240px] shrink-0" aria-hidden />
 
-      <aside className="hidden md:flex fixed inset-y-0 left-0 w-[240px] flex-col border-r border-rule bg-bg z-10">
+      <aside className="hidden md:flex fixed inset-y-0 left-0 w-[240px] flex-col border-r border-rule bg-card z-10">
         <div className="px-5 py-5 border-b border-rule">
-          <Link
-            href="/"
-            className="flex items-center gap-2.5 select-none group"
-          >
+          <Link href="/" className="flex items-center gap-2.5 select-none group">
             <Monogram />
-            <div>
-              <div className="text-[14px] tracking-tightest text-fg group-hover:text-accent transition-colors">
-                bottleneck
-              </div>
-              <div className="text-micro uppercase tracking-wider text-faint">
-                console
-              </div>
-            </div>
+            <span className="text-[15px] font-semibold tracking-tight text-fg group-hover:text-accent-strong transition-colors">
+              bottleneck
+            </span>
           </Link>
         </div>
 
@@ -283,26 +253,22 @@ export function Sidebar({ user }: { user: { name: string; username: string } })
           <button
             type="button"
             onClick={() => setSearchOpen(true)}
-            className="w-full flex items-baseline gap-2 px-2 h-9 text-meta text-muted hover:text-accent transition-colors group"
+            className="w-full flex items-center gap-2 px-2.5 h-9 rounded-md border border-rule text-[13px] text-muted hover:bg-hover transition-colors"
           >
-            <span className="text-accent">$</span>
-            <span>locate</span>
+            <span>Search</span>
             <span className="ml-auto">
-              <Kbd>{isMac ? "⌘K" : "ctrl·k"}</Kbd>
+              <Kbd>{isMac ? "⌘K" : "Ctrl K"}</Kbd>
             </span>
           </button>
         </div>
 
-        <nav className="flex-1 px-3 py-5 space-y-6 overflow-y-auto">
-          {groups.map((g, gi) => (
+        <nav className="flex-1 px-3 py-4 space-y-5 overflow-y-auto">
+          {groups.map(g => (
             <div key={g.label}>
-              <div className="px-2 mb-2 text-micro uppercase tracking-wider text-faint flex items-baseline gap-2">
-                <span className="tabular-nums">
-                  {String(gi + 1).padStart(2, "0")}
-                </span>
-                <span>{g.label}</span>
+              <div className="px-2.5 mb-1.5 text-[11px] font-medium uppercase tracking-wider text-faint">
+                {g.label}
               </div>
-              <ul>
+              <ul className="space-y-0.5">
                 {g.items.map(it => {
                   const isActive =
                     !it.newWindow &&
@@ -315,25 +281,15 @@ export function Sidebar({ user }: { user: { name: string; username: string } })
                         href={it.href}
                         target={it.newWindow ? "_blank" : undefined}
                         rel={it.newWindow ? "noreferrer" : undefined}
-                        className={`group flex items-baseline gap-2 px-2 h-7 leading-7 text-[13px] transition-colors ${
+                        className={`flex items-center gap-2 px-2.5 h-8 rounded-md text-[13px] transition-colors ${
                           isActive
-                            ? "text-accent"
-                            : "text-secondary hover:text-fg"
+                            ? "bg-hover text-fg font-medium"
+                            : "text-secondary hover:bg-hover hover:text-fg"
                         }`}
                       >
-                        <span
-                          aria-hidden="true"
-                          className={`w-2 text-[10px] ${
-                            isActive ? "text-accent" : "text-faint"
-                          } group-hover:text-accent transition-colors`}
-                        >
-                          {isActive ? "■" : "·"}
-                        </span>
-                        <span>{it.label}</span>
+                        <span className="truncate">{it.label}</span>
                         {it.newWindow && (
-                          <span className="ml-auto text-faint text-micro">
-                            ↗
-                          </span>
+                          <span className="ml-auto text-faint text-[12px]">↗</span>
                         )}
                       </Link>
                     </li>
@@ -347,14 +303,14 @@ export function Sidebar({ user }: { user: { name: string; username: string } })
         <div className="px-3 py-3 border-t border-rule">
           <Link
             href={`/user/${user.username}`}
-            className="flex items-baseline gap-2 px-2 py-2 text-meta hover:text-accent transition-colors"
+            className="flex items-center gap-2.5 px-2 py-2 rounded-md hover:bg-hover transition-colors"
           >
-            <span className="text-accent" aria-hidden="true">
-              ▌
+            <span className="flex items-center justify-center w-7 h-7 rounded-full bg-hover text-[12px] font-medium text-secondary shrink-0">
+              {user.name.charAt(0).toUpperCase()}
             </span>
             <div className="min-w-0 flex-1">
               <div className="text-[13px] text-fg truncate">{user.name}</div>
-              <div className="text-meta text-muted truncate">
+              <div className="text-[12px] text-muted truncate">
                 @{user.username}
               </div>
             </div>
diff --git a/components/Tag.tsx b/components/Tag.tsx
index 025bbe3..9003bcf 100644
--- a/components/Tag.tsx
+++ b/components/Tag.tsx
@@ -1,18 +1,14 @@
-// Bracketed status marker. Square, hairline-bordered, uppercase. The
-// bracket characters are part of the glyph; they sit in faint type so
-// the body of the tag carries the tone. The `bracket` prop is kept
-// for prop-compatibility with existing call sites but no longer
-// changes the visual — both modes render the same way so callers
-// don't drift apart.
+// Small status badge: a tinted, rounded pill carrying the tone. The `bracket`
+// prop is kept for call-site compatibility but no longer affects the visual.
 
 type Tone = "neutral" | "success" | "danger" | "warning" | "info";
 
 const toneClass: Record<Tone, string> = {
-  neutral: "text-secondary",
-  success: "text-ok",
-  danger: "text-danger",
-  warning: "text-accent",
-  info: "text-secondary",
+  neutral: "bg-hover text-secondary",
+  success: "bg-[#e9f7ec] text-[#1c6b2b]",
+  danger: "bg-[#fdecec] text-[#9f1c25]",
+  warning: "bg-[#fff6e0] text-[#7a5200]",
+  info: "bg-[#eaf2ff] text-[#0b4ea8]",
 };
 
 export function Tag({
@@ -27,11 +23,9 @@ export function Tag({
 }) {
   return (
     <span
-      className={`inline-flex items-center text-micro uppercase tracking-wider ${toneClass[tone]}`}
+      className={`inline-flex items-center rounded px-1.5 py-0.5 text-[11px] font-medium ${toneClass[tone]}`}
     >
-      <span className="text-faint">[</span>
-      <span className="px-1">{children}</span>
-      <span className="text-faint">]</span>
+      {children}
     </span>
   );
 }
diff --git a/components/TopNav.tsx b/components/TopNav.tsx
index 8cfcb07..2021d63 100644
--- a/components/TopNav.tsx
+++ b/components/TopNav.tsx
@@ -2,11 +2,9 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { Glyph } from "./Glyph";
 
-// Console-style top bar — no backdrop blur, no shadow. A single
-// hairline rule under the bar, breadcrumb on the left written as a
-// `$` shell path, sign-out on the right with a > prompt mark.
+// Top bar: white surface, a single hairline beneath, brand and breadcrumb on
+// the left, admin link and sign-out on the right.
 export function TopNav({
   trail,
   isAdmin,
@@ -22,40 +20,30 @@ export function TopNav({
   }
 
   return (
-    <header className="border-b border-rule bg-bg sticky top-0 z-10">
-      <div className="max-w-[1140px] mx-auto px-6 h-11 flex items-center justify-between text-meta">
-        <div className="flex items-baseline gap-2">
-          <span className="text-accent" aria-hidden>
-            $
-          </span>
-          <Link
-            href="/"
-            className="text-fg hover:text-accent transition-colors tracking-wider"
-          >
+    <header className="border-b border-rule bg-card sticky top-0 z-10">
+      <div className="max-w-[1140px] mx-auto px-6 h-14 flex items-center justify-between text-[14px]">
+        <div className="flex items-center gap-2">
+          <Link href="/" className="font-semibold text-fg hover:text-accent-strong transition-colors">
             bottleneck
           </Link>
           <span className="text-faint">/</span>
-          <span className="text-secondary tracking-wider">{trail ?? "account"}</span>
+          <span className="text-secondary">{trail ?? "Account"}</span>
         </div>
-        <nav className="flex items-baseline gap-4 text-muted">
+        <nav className="flex items-center gap-4 text-[13px]">
           {isAdmin && (
-            <>
-              <Link
-                href="/admin"
-                className="hover:text-accent transition-colors flex items-baseline gap-1.5 uppercase tracking-wider"
-              >
-                <Glyph kind="active" className="text-[10px]" />
-                <span>admin</span>
-              </Link>
-              <span className="text-faint">·</span>
-            </>
+            <Link
+              href="/admin"
+              className="text-secondary hover:text-fg transition-colors"
+            >
+              Admin
+            </Link>
           )}
           <button
             type="button"
             onClick={signOut}
-            className="hover:text-danger transition-colors uppercase tracking-wider"
+            className="text-secondary hover:text-danger transition-colors"
           >
-            sign-out
+            Sign out
           </button>
         </nav>
       </div>
diff --git a/components/TurnstileField.tsx b/components/TurnstileField.tsx
index 8fe652d..3782480 100644
--- a/components/TurnstileField.tsx
+++ b/components/TurnstileField.tsx
@@ -12,7 +12,7 @@ declare global {
           callback: (token: string) => void;
           "expired-callback": () => void;
           "error-callback": () => void;
-          theme: "dark";
+          theme: "light";
         },
       ) => string;
       reset: (widgetId: string) => void;
@@ -74,7 +74,7 @@ export function TurnstileField() {
 
         widgetIdRef.current = window.turnstile.render(containerRef.current, {
           sitekey: siteKey,
-          theme: "dark",
+          theme: "light",
           callback: value => {
             setToken(value);
             setError("");
@@ -99,7 +99,7 @@ export function TurnstileField() {
     <div className="space-y-1.5">
       <input type="hidden" name="turnstileToken" value={token} />
       <div ref={containerRef} />
-      {error && <p className="text-meta text-danger">× {error}</p>}
+      {error && <p className="text-[12px] text-danger">{error}</p>}
     </div>
   );
 }
diff --git a/docs/ui-ux.md b/docs/ui-ux.md
index 219bc82..48dd9d3 100644
--- a/docs/ui-ux.md
+++ b/docs/ui-ux.md
@@ -4,19 +4,13 @@
 
 The interface should feel like a focused auth product, not a marketing site.
 
-References:
-
-- OpenAI login pages
-- Anthropic login pages
-- Cloudflare dashboard/auth screens
-
 Visual direction:
 
-- jet-black background
-- minimal panels
-- sharp typography
-- quiet borders
-- restrained color
+- light, near-white canvas
+- a single centered card for auth, lifted by a soft shadow and a hairline border
+- humanist sans-serif typography
+- quiet borders and restrained color
+- one warm accent, used sparingly
 - no decorative gradients
 - no oversized hero section
 - no playful illustrations
@@ -41,28 +35,29 @@ The user should immediately understand what action is required.
 
 Base:
 
-- background: near black, for example `#050505` or `#070707`
-- surface: `#0f0f10`
-- elevated surface: `#151516`
-- border: `#27272a`
-- primary text: `#f4f4f5`
-- secondary text: `#a1a1aa`
-- muted text: `#71717a`
+- canvas: near white, `#fafafa`
+- surface (cards): `#ffffff`
+- hover fill: `#f4f4f5`
+- border (hairline): `#e6e6e6`
+- primary text: `#1a1a1a`
+- secondary text: `#5c5c5c`
+- muted text: `#8a8a8a`
 
 Accent:
 
-- primary action: white or near-white button on dark background
-- destructive: muted red
-- success: muted green
-- warning: muted amber
+- primary action: amber `#ffb000` fill with dark text
+- accent text/links on white: deeper amber `#9a6300`
+- destructive: red `#e5484d`
+- success: green `#2f9e44`
 
-Avoid a one-color theme. The UI should read as black, white, and neutral gray with small semantic accents.
+The UI should read as white and neutral gray with a single warm accent and small semantic colors.
 
 ### Typography
 
-- Use a modern sans-serif stack.
-- Use compact headings.
-- Use normal letter spacing.
+- Inter (humanist sans), self-hosted via next/font.
+- 14px base size.
+- Sentence case for all copy: headings, labels, buttons, links.
+- Compact headings, normal letter spacing.
 - Do not scale font size with viewport width.
 - Labels should be smaller than field values.
 - Dashboard numbers can be slightly larger, but not hero-sized.
@@ -247,7 +242,7 @@ Give the user a quick account overview and basic control.
 
 Tone:
 
-Quiet, black, compact, utility-focused.
+Quiet, light, compact, utility-focused.
 
 Top area:
 
@@ -319,7 +314,7 @@ Do not use long explanatory empty states.
 
 ## Error Pages
 
-Use the same dark minimal shell.
+Use the same light minimal shell.
 
 Needed states:
 
@@ -384,7 +379,7 @@ Desktop:
 
 ## Copy Guidelines
 
-Use direct labels:
+Use sentence case (capitalize the first word and proper nouns only). Use direct labels:
 
 - `Sign in`
 - `Create account`
diff --git a/public/favicon.svg b/public/favicon.svg
index 69ad1c5..9442e6c 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,12 +1,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
-  <rect width="32" height="32" rx="6" fill="#070707"/>
-  <text
-    x="16"
-    y="23"
-    font-family="ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
-    font-weight="600"
-    font-size="20"
-    fill="#f4f4f5"
-    text-anchor="middle"
-  >B</text>
+  <rect width="32" height="32" rx="7" fill="#1a1a1a"/>
+  <g transform="translate(6 6)" fill="none" stroke="#ffb000" stroke-width="1.6" stroke-linecap="round">
+    <path d="M3 1 V7 L8 12 V19"/>
+    <path d="M17 1 V7 L12 12 V19"/>
+    <path d="M8 12 H12"/>
+  </g>
 </svg>
diff --git a/tests/e2e/visual.spec.ts b/tests/e2e/visual.spec.ts
index ce0579d..ecaf2b1 100644
--- a/tests/e2e/visual.spec.ts
+++ b/tests/e2e/visual.spec.ts
@@ -1,11 +1,11 @@
 import { expect, test } from "@playwright/test";
 
-// The Operator Console treatment is driven entirely by design tokens and
-// a single typeface defined in app/globals.css. Pixel snapshots would
-// flake across the macOS/Linux font-rendering gap, so instead assert the
-// tokens resolve as designed: if globals.css fails to load or a token
-// regresses, every themed surface loses its look and these fail.
-async function expectOperatorConsoleTokens(page: import("@playwright/test").Page) {
+// The light theme is driven entirely by design tokens and the Inter typeface
+// defined in app/globals.css and app/layout.tsx. Pixel snapshots would flake
+// across the macOS/Linux font-rendering gap, so instead assert the tokens
+// resolve as designed: if globals.css fails to load or a token regresses,
+// every themed surface loses its look and these fail.
+async function expectThemeTokens(page: import("@playwright/test").Page) {
   const tokens = await page.evaluate(() => {
     const root = getComputedStyle(document.documentElement);
     return {
@@ -15,24 +15,24 @@ async function expectOperatorConsoleTokens(page: import("@playwright/test").Page
     };
   });
   expect(tokens.accent).toBe("#ffb000");
-  expect(tokens.bg).toBe("#0a0a0a");
-  expect(tokens.fontFamily).toContain("JetBrains Mono");
+  expect(tokens.bg).toBe("#fafafa");
+  expect(tokens.fontFamily).toContain("Inter");
 }
 
-test("login renders with the Operator Console tokens", async ({ page }) => {
+test("login renders with the theme tokens", async ({ page }) => {
   await page.goto("/login");
-  await expect(page.getByRole("heading", { name: "sign in" })).toBeVisible();
-  await expectOperatorConsoleTokens(page);
+  await expect(page.getByRole("heading", { name: "Sign in" })).toBeVisible();
+  await expectThemeTokens(page);
 });
 
-test("forgot-password renders with the Operator Console tokens", async ({ page }) => {
+test("forgot-password renders with the theme tokens", async ({ page }) => {
   await page.goto("/forgot");
-  await expect(page.getByRole("heading", { name: "recover access" })).toBeVisible();
-  await expectOperatorConsoleTokens(page);
+  await expect(page.getByRole("heading", { name: "Recover access" })).toBeVisible();
+  await expectThemeTokens(page);
 });
 
-test("oauth consent error page renders with the Operator Console tokens", async ({ page }) => {
+test("oauth consent error page renders with the theme tokens", async ({ page }) => {
   await page.goto("/oauth/authorize?response_type=code");
-  await expect(page.getByRole("heading", { name: "authorization failed" })).toBeVisible();
-  await expectOperatorConsoleTokens(page);
+  await expect(page.getByRole("heading", { name: "Authorization failed" })).toBeVisible();
+  await expectThemeTokens(page);
 });