diff --git a/client/package-lock.json b/client/package-lock.json
index 2893612..9fb680a 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -14,6 +14,7 @@
         "@tanstack/react-query-devtools": "^5.100.9",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
         "lucide-react": "^1.14.0",
         "radix-ui": "^1.4.3",
         "react": "^19.2.5",
@@ -4844,6 +4845,16 @@
         "node": "^20.19.0 || ^22.12.0 || >=24.0.0"
       }
     },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
diff --git a/client/package.json b/client/package.json
index 3f89647..753d57e 100644
--- a/client/package.json
+++ b/client/package.json
@@ -18,6 +18,7 @@
     "@tanstack/react-query-devtools": "^5.100.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "lucide-react": "^1.14.0",
     "radix-ui": "^1.4.3",
     "react": "^19.2.5",
diff --git a/client/src/components/Avatar.tsx b/client/src/components/Avatar.tsx
new file mode 100644
index 0000000..5566f7f
--- /dev/null
+++ b/client/src/components/Avatar.tsx
@@ -0,0 +1,34 @@
+import { cn } from "@/lib/utils";
+import { colorIndex, initials } from "@/lib/avatar";
+
+const VARIANTS = [
+  "bg-avatar-1-bg text-avatar-1-fg",
+  "bg-avatar-2-bg text-avatar-2-fg",
+  "bg-avatar-3-bg text-avatar-3-fg",
+  "bg-avatar-4-bg text-avatar-4-fg",
+  "bg-avatar-5-bg text-avatar-5-fg",
+] as const;
+
+export function Avatar({
+  name,
+  size = "md",
+  className,
+}: {
+  name: string;
+  size?: "md" | "lg";
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center rounded-full font-medium",
+        VARIANTS[colorIndex(name)],
+        size === "lg" ? "h-12 w-12 text-name" : "h-9 w-9 text-meta",
+        className,
+      )}
+      aria-hidden
+    >
+      {initials(name)}
+    </div>
+  );
+}
diff --git a/client/src/components/EmptyState.tsx b/client/src/components/EmptyState.tsx
new file mode 100644
index 0000000..a841e62
--- /dev/null
+++ b/client/src/components/EmptyState.tsx
@@ -0,0 +1,32 @@
+import { type LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function EmptyState({
+  icon: Icon,
+  headline,
+  subtext,
+  cta,
+  className,
+}: {
+  icon: LucideIcon;
+  headline: string;
+  subtext?: string;
+  cta?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center gap-3 py-12 text-center",
+        className,
+      )}
+    >
+      <Icon className="h-8 w-8 text-muted-foreground" aria-hidden />
+      <p className="text-title font-medium">{headline}</p>
+      {subtext && (
+        <p className="text-meta text-muted-foreground">{subtext}</p>
+      )}
+      {cta && <div className="mt-2">{cta}</div>}
+    </div>
+  );
+}
diff --git a/client/src/components/EventBadge.tsx b/client/src/components/EventBadge.tsx
new file mode 100644
index 0000000..1323f50
--- /dev/null
+++ b/client/src/components/EventBadge.tsx
@@ -0,0 +1,20 @@
+import { cn } from "@/lib/utils";
+
+export function EventBadge({
+  label,
+  className,
+}: {
+  label: string;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "inline-block whitespace-nowrap rounded-full bg-event-bg px-2 py-0.5 text-label text-event-fg",
+        className,
+      )}
+    >
+      {label}
+    </span>
+  );
+}
diff --git a/client/src/components/RingBadge.tsx b/client/src/components/RingBadge.tsx
new file mode 100644
index 0000000..fa16c1a
--- /dev/null
+++ b/client/src/components/RingBadge.tsx
@@ -0,0 +1,37 @@
+import { cn } from "@/lib/utils";
+
+type Ring = "inner_circle" | "network" | "community" | "acquaintances";
+
+const LABELS: Record<Ring, string> = {
+  inner_circle: "Inner circle",
+  network: "Network",
+  community: "Community",
+  acquaintances: "Acquaintances",
+};
+
+const VARIANTS: Record<Ring, string> = {
+  inner_circle: "bg-tier-inner-bg text-tier-inner-fg",
+  network: "bg-tier-network-bg text-tier-network-fg",
+  community: "bg-tier-community-bg text-tier-community-fg",
+  acquaintances: "bg-tieracquaintances-bg text-tier-acquaintances-fg",
+};
+
+export function RingBadge({
+  ring,
+  className,
+}: {
+  ring: Ring;
+  className?: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "inline-block whitespace-nowrap rounded-full px-2 py-0.5 text-label",
+        VARIANTS[ring],
+        className,
+      )}
+    >
+      {LABELS[ring]}
+    </span>
+  );
+}
diff --git a/client/src/components/ui/alert-dialog.tsx b/client/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..c206c86
--- /dev/null
+++ b/client/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,199 @@
+"use client"
+
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}
diff --git a/client/src/components/ui/textarea.tsx b/client/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..04d27f7
--- /dev/null
+++ b/client/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/client/src/components/ui/tooltip.tsx b/client/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..7413f6e
--- /dev/null
+++ b/client/src/components/ui/tooltip.tsx
@@ -0,0 +1,55 @@
+import * as React from "react"
+import { Tooltip as TooltipPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
diff --git a/client/src/index.css b/client/src/index.css
index fb3c7e9..73ad0c9 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -48,6 +48,56 @@
     --radius-4xl: calc(var(--radius) * 2.6);
 }
 
+@theme {
+    /* SABER brand */
+    --color-sapphire: #0F52BA;
+    --color-sapphire-dark: #0A3D8F;
+    --color-sapphire-subtle: #EAF0FB;
+    --color-orange: #F47C20;
+    --color-orange-light: #FEF0E6;
+    --color-orange-dark: #C45F0A;
+    --color-page: #F4F5F6;
+
+    /* Destructive (lock #10) */
+    --color-danger: #DC2626;
+    --color-danger-hover: #B91C1C;
+
+    /* Event badge */
+    --color-event-bg: #F0F4FF;
+    --color-event-fg: #0F52BA;
+
+    /* Avatar palette (lock #12) */
+    --color-avatar-1-bg: #EAF0FB;
+    --color-avatar-1-fg: #0A3D8F;
+    --color-avatar-2-bg: #FEF0E6;
+    --color-avatar-2-fg: #C45F0A;
+    --color-avatar-3-bg: #E6F4F1;
+    --color-avatar-3-fg: #0D5C4A;
+    --color-avatar-4-bg: #F0EEFE;
+    --color-avatar-4-fg: #4A3BA8;
+    --color-avatar-5-bg: #FDE8F0;
+    --color-avatar-5-fg: #8C2F54;
+
+    /* Ring tiers */
+    --color-tier-inner-bg: #EAF0FB;
+    --color-tier-inner-fg: #0A3D8F;
+    --color-tier-network-bg: #E6F4F1;
+    --color-tier-network-fg: #0D5C4A;
+    --color-tier-community-bg: #FEF3E2;
+    --color-tier-community-fg: #7A4A10;
+    --color-tier-acquaintances-bg: #F4F5F6;
+    --color-tier-acquaintances-fg: #555555;
+
+    /* Typography scale (lock #8) */
+    --text-label: 11px;
+    --text-meta: 12px;
+    --text-field: 13px;
+    --text-name: 14px;
+    --text-name-lg: 15px;
+    --text-title: 16px;
+    --text-stat: 22px;
+}
+
 :root {
     --background: oklch(1 0 0);
     --foreground: oklch(0.145 0 0);
diff --git a/client/src/lib/avatar.ts b/client/src/lib/avatar.ts
new file mode 100644
index 0000000..4ceb635
--- /dev/null
+++ b/client/src/lib/avatar.ts
@@ -0,0 +1,13 @@
+export function colorIndex(name: string): number {
+  return [...name].reduce(
+    (sum, char) => sum + char.charCodeAt(0),
+    0,
+  ) % 5;
+}
+
+export function initials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
diff --git a/client/src/lib/greeting.ts b/client/src/lib/greeting.ts
new file mode 100644
index 0000000..00d0332
--- /dev/null
+++ b/client/src/lib/greeting.ts
@@ -0,0 +1,6 @@
+export function getGreeting(date: Date = new Date()): string {
+  const hour = date.getHours();
+  if (hour >= 5 && hour < 12) return "Good morning";
+  if (hour >= 12 && hour < 18) return "Good afternoon";
+  return "Good evening";
+}
diff --git a/client/src/lib/time.ts b/client/src/lib/time.ts
new file mode 100644
index 0000000..555d43d
--- /dev/null
+++ b/client/src/lib/time.ts
@@ -0,0 +1,14 @@
+import { differenceInDays } from "date-fns";
+
+export function relativeDays(from: Date | string, now: Date = new Date()): string {
+  const fromDate = typeof from === "string" ? new Date(from) : from;
+  const days = differenceInDays(now, fromDate);
+
+  if (days < 14) return `${days} ${days === 1 ? "day" : "days"} ago`;
+  if (days < 60) {
+    const weeks = Math.floor(days / 7);
+    return `${weeks} ${weeks === 1 ? "week" : "weeks"} ago`;
+  }
+  const months = Math.floor(days / 30);
+  return `${months} ${months === 1 ? "month" : "months"} ago`;
+}
diff --git a/client/src/lib/use-document-title.ts b/client/src/lib/use-document-title.ts
new file mode 100644
index 0000000..8b2600a
--- /dev/null
+++ b/client/src/lib/use-document-title.ts
@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+
+export function useDocumentTitle(title: string): void {
+  useEffect(() => {
+    const previous = document.title;
+    document.title = title ? `${title} - SABER` : "SABER";
+    return () => {
+      document.title = previous;
+    };
+  }, [title]);
+}