diff --git a/biome.json b/biome.json
index da481c4..f572cef 100644
--- a/biome.json
+++ b/biome.json
@@ -14,6 +14,11 @@
     "indentStyle": "space",
     "indentWidth": 2
   },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
+  },
   "linter": {
     "enabled": true,
     "rules": {
diff --git a/packages/frontend/README.md b/packages/frontend/README.md
index 5c4780a..3f4e4d7 100644
--- a/packages/frontend/README.md
+++ b/packages/frontend/README.md
@@ -82,6 +82,10 @@ Make sure to deploy the output of `npm run build`
 
 This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
 
+FoR-specific design token operation rules live at:
+
+- `app/design-tokens.md`
+
 ---
 
 Built with ❤️ using React Router.
diff --git a/packages/frontend/app/app.css b/packages/frontend/app/app.css
index 99345d8..424a49a 100644
--- a/packages/frontend/app/app.css
+++ b/packages/frontend/app/app.css
@@ -1,15 +1,279 @@
 @import "tailwindcss";
 
-@theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+:root {
+  color-scheme: light;
+
+  /* Semantic Color: Text */
+  --for-text-default: rgb(0 0 0 / 0.8);
+  --for-text-subtle: rgb(0 0 0 / 0.6);
+  --for-text-hint: rgb(0 0 0 / 0.3);
+  --for-text-invert: #ffffff;
+  --for-text-danger-default: #eb3d3d;
+  --for-text-danger-subtle: #ff6161;
+  --for-text-danger-strong: #8b1d1d;
+
+  /* Semantic Color: Background */
+  --for-bg-default: #ffffff;
+  --for-bg-subtle: #f2f3f0;
+  --for-bg-danger-default: #feebeb;
+  --for-bg-alpha-white-30: rgb(255 255 255 / 0.3);
+  --for-bg-alpha-white-60: rgb(255 255 255 / 0.6);
+  --for-bg-alpha-black-10: rgb(0 0 0 / 0.1);
+  --for-bg-modal: rgb(0 0 0 / 0.5);
+
+  /* Semantic Color: Stroke */
+  --for-stroke-default: rgb(0 0 0 / 0.05);
+
+  /* Semantic Color: Button */
+  --for-button-primary-frame-default: #454545;
+  --for-button-primary-frame-hover: #1a1a1a;
+  --for-button-primary-frame-disabled: #b4b4b4;
+  --for-button-primary-text-invert: #ffffff;
+  --for-button-primary-text-disabled: #858585;
+
+  --for-button-secondary-frame-default: #ffffff;
+  --for-button-secondary-frame-hover: #1a1a1a;
+  --for-button-secondary-frame-disabled: #f0f0f0;
+  --for-button-secondary-stroke-default: #454545;
+  --for-button-secondary-stroke-hover: #1a1a1a;
+  --for-button-secondary-stroke-disabled: #b4b4b4;
+  --for-button-secondary-text-default: #454545;
+  --for-button-secondary-text-hover: #1a1a1a;
+  --for-button-secondary-text-disabled: #b4b4b4;
+
+  /* Tertiary values are taken from screenshot labels; hover frame was not shown */
+  --for-button-tertiary-frame-default: #757b7f;
+  --for-button-tertiary-frame-disabled: #aeaeae;
+  --for-button-tertiary-text-default: #e0e0e0;
+  --for-button-tertiary-text-hover: #ffffff;
+  --for-button-tertiary-text-disabled: #cfcfcf;
+
+  --for-button-danger-frame-default: #eb3d3d;
+  --for-button-danger-frame-hover: #8b1d1d;
+  --for-button-danger-frame-pressed: #8b1d1d;
+  --for-button-danger-frame-disabled: #fbbdbf;
+  --for-button-danger-text-default: #eb3d3d;
+  --for-button-danger-text-hover: #8b1d1d;
+  --for-button-danger-text-pressed: #8b1d1d;
+  --for-button-danger-text-disabled: #fbbdbf;
+  --for-button-danger-text-invert: #ffffff;
+
+  /* Semantic Color: Visual Accent */
+  --for-visual-natural-1: #e4edf7;
+  --for-visual-natural-2: #d1dce8;
+  --for-visual-natural-3: #9fb2c4;
+  --for-visual-natural-4: #72818f;
+  --for-visual-natural-5: #414a52;
+  --for-visual-green-1: #a5fee1;
+  --for-visual-green-2: #3ff4b7;
+  --for-visual-green-3: #00e998;
+  --for-visual-green-4: #0ecb8c;
+  --for-visual-green-5: #009e69;
+  --for-visual-red-1: #ffdadd;
+  --for-visual-red-2: #ff7885;
+  --for-visual-red-3: #eb3d3d;
+  --for-visual-red-4: #9b2727;
+  --for-visual-red-5: #5c1414;
+
+  /* Semantic spacing tokens (source of truth) */
+  --for-space-0: 0px;
+  --for-space-2: 2px;
+  --for-space-4: 4px;
+  --for-space-6: 6px;
+  --for-space-8: 8px;
+  --for-space-12: 12px;
+  --for-space-16: 16px;
+  --for-space-20: 20px;
+  --for-space-24: 24px;
+  --for-space-28: 28px;
+  --for-space-32: 32px;
+  --for-space-40: 40px;
+
+  /* shadcn/ui compatible tokens mapped from FoR semantics */
+  --background: var(--for-bg-subtle);
+  --foreground: var(--for-text-default);
+  --card: var(--for-bg-default);
+  --card-foreground: var(--for-text-default);
+  --popover: var(--for-bg-default);
+  --popover-foreground: var(--for-text-default);
+  --primary: var(--for-button-primary-frame-default);
+  --primary-foreground: var(--for-button-primary-text-invert);
+  --secondary: var(--for-button-secondary-frame-default);
+  --secondary-foreground: var(--for-button-secondary-text-default);
+  --muted: var(--for-bg-subtle);
+  --muted-foreground: var(--for-text-subtle);
+  --accent: var(--for-visual-green-3);
+  --accent-foreground: var(--for-text-default);
+  --destructive: var(--for-button-danger-frame-default);
+  --destructive-foreground: var(--for-button-danger-text-invert);
+  --border: var(--for-stroke-default);
+  --input: var(--for-stroke-default);
+  --ring: var(--for-button-primary-frame-hover);
+  --radius: 12px;
+}
+
+@theme inline {
+  /* Typography */
+  --font-ui:
+    "Zen Kaku Gothic New", "Roboto", ui-sans-serif, system-ui, sans-serif;
+  --font-latin: "Roboto", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: var(--font-ui);
+
+  --text-ui-10: 10px;
+  --text-ui-10--line-height: 1.3;
+  --text-ui-12: 12px;
+  --text-ui-12--line-height: 1.3;
+  --text-ui-13: 13px;
+  --text-ui-13--line-height: 1.3;
+  --text-ui-16: 16px;
+  --text-ui-16--line-height: 1.3;
+  --text-ui-20: 20px;
+  --text-ui-20--line-height: 1.3;
+
+  --text-content-display-l: 28px;
+  --text-content-display-l--line-height: 1.3;
+  --text-content-display-m: 24px;
+  --text-content-display-m--line-height: 1.3;
+  --text-content-display-s: 20px;
+  --text-content-display-s--line-height: 1.3;
+
+  --text-content-headline-l: 20px;
+  --text-content-headline-l--line-height: 1.3;
+  --text-content-headline-m: 17px;
+  --text-content-headline-m--line-height: 1.3;
+  --text-content-headline-s: 16px;
+  --text-content-headline-s--line-height: 1.3;
+
+  --text-content-number-l: 32px;
+  --text-content-number-l--line-height: 1.3;
+  --text-content-number-m: 24px;
+  --text-content-number-m--line-height: 1.3;
+  --text-content-number-s: 16px;
+  --text-content-number-s--line-height: 1.3;
+
+  --text-content-body-l: 15px;
+  --text-content-body-l--line-height: 1.6;
+  --text-content-body-m: 14px;
+  --text-content-body-m--line-height: 1.6;
+  --text-content-body-s: 13px;
+  --text-content-body-s--line-height: 1.6;
+
+  --text-content-caption: 12px;
+  --text-content-caption--line-height: 1.6;
+
+  /* shadcn/ui color namespace */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-text-danger-default: var(--for-text-danger-default);
+  --color-text-danger-subtle: var(--for-text-danger-subtle);
+  --color-text-danger-strong: var(--for-text-danger-strong);
+
+  --color-button-primary-frame: var(--for-button-primary-frame-default);
+  --color-button-primary-frame-hover: var(--for-button-primary-frame-hover);
+  --color-button-primary-frame-disabled: var(
+    --for-button-primary-frame-disabled
+  );
+  --color-button-primary-text: var(--for-button-primary-text-invert);
+  --color-button-primary-text-disabled: var(--for-button-primary-text-disabled);
+
+  --color-button-secondary-frame: var(--for-button-secondary-frame-default);
+  --color-button-secondary-frame-hover: var(--for-button-secondary-frame-hover);
+  --color-button-secondary-frame-disabled: var(
+    --for-button-secondary-frame-disabled
+  );
+  --color-button-secondary-stroke: var(--for-button-secondary-stroke-default);
+  --color-button-secondary-stroke-hover: var(
+    --for-button-secondary-stroke-hover
+  );
+  --color-button-secondary-stroke-disabled: var(
+    --for-button-secondary-stroke-disabled
+  );
+  --color-button-secondary-text: var(--for-button-secondary-text-default);
+  --color-button-secondary-text-hover: var(--for-button-secondary-text-hover);
+  --color-button-secondary-text-disabled: var(
+    --for-button-secondary-text-disabled
+  );
+
+  --color-button-tertiary-frame: var(--for-button-tertiary-frame-default);
+  --color-button-tertiary-frame-disabled: var(
+    --for-button-tertiary-frame-disabled
+  );
+  --color-button-tertiary-text: var(--for-button-tertiary-text-default);
+  --color-button-tertiary-text-hover: var(--for-button-tertiary-text-hover);
+  --color-button-tertiary-text-disabled: var(
+    --for-button-tertiary-text-disabled
+  );
+
+  --color-button-danger-frame: var(--for-button-danger-frame-default);
+  --color-button-danger-frame-hover: var(--for-button-danger-frame-hover);
+  --color-button-danger-frame-pressed: var(--for-button-danger-frame-pressed);
+  --color-button-danger-frame-disabled: var(--for-button-danger-frame-disabled);
+  --color-button-danger-text: var(--for-button-danger-text-default);
+  --color-button-danger-text-hover: var(--for-button-danger-text-hover);
+  --color-button-danger-text-pressed: var(--for-button-danger-text-pressed);
+  --color-button-danger-text-disabled: var(--for-button-danger-text-disabled);
+  --color-button-danger-text-invert: var(--for-button-danger-text-invert);
+
+  --color-visual-natural-1: var(--for-visual-natural-1);
+  --color-visual-natural-2: var(--for-visual-natural-2);
+  --color-visual-natural-3: var(--for-visual-natural-3);
+  --color-visual-natural-4: var(--for-visual-natural-4);
+  --color-visual-natural-5: var(--for-visual-natural-5);
+  --color-visual-green-1: var(--for-visual-green-1);
+  --color-visual-green-2: var(--for-visual-green-2);
+  --color-visual-green-3: var(--for-visual-green-3);
+  --color-visual-green-4: var(--for-visual-green-4);
+  --color-visual-green-5: var(--for-visual-green-5);
+  --color-visual-red-1: var(--for-visual-red-1);
+  --color-visual-red-2: var(--for-visual-red-2);
+  --color-visual-red-3: var(--for-visual-red-3);
+  --color-visual-red-4: var(--for-visual-red-4);
+  --color-visual-red-5: var(--for-visual-red-5);
+
+  /* Radius */
+  --radius-sm: calc(var(--radius) - 6px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /*
+    Spacing operation rule:
+    - Tailwind spacing utilities are px-based via --spacing: 1px.
+    - Use only 0,2,4,6,8,12,16,20,24,28,32,40.
+    - Disallow arbitrary spacing values like p-[14px], m-[3px], gap-[22px].
+  */
+  --spacing: 1px;
 }
 
-html,
-body {
-  @apply bg-white dark:bg-gray-950;
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  html,
+  body {
+    min-height: 100%;
+  }
 
-  @media (prefers-color-scheme: dark) {
-    color-scheme: dark;
+  body {
+    @apply bg-background text-foreground font-ui text-ui-13 antialiased;
   }
 }
diff --git a/packages/frontend/app/components/ui/button.tsx b/packages/frontend/app/components/ui/button.tsx
new file mode 100644
index 0000000..2a4c53c
--- /dev/null
+++ b/packages/frontend/app/components/ui/button.tsx
@@ -0,0 +1,58 @@
+import * as React from "react";
+
+import { cn } from "~/lib/utils";
+
+const buttonVariantClasses = {
+  default:
+    "border-transparent bg-button-primary-frame text-button-primary-text hover:bg-button-primary-frame-hover active:bg-button-primary-frame-hover disabled:bg-button-primary-frame-disabled disabled:text-button-primary-text-disabled",
+  secondary:
+    "border-button-secondary-stroke bg-button-secondary-frame text-button-secondary-text hover:border-button-secondary-stroke-hover hover:bg-button-secondary-frame-hover hover:text-button-secondary-text-hover active:border-button-secondary-stroke-hover active:bg-button-secondary-frame-hover active:text-button-secondary-text-hover disabled:border-button-secondary-stroke-disabled disabled:bg-button-secondary-frame-disabled disabled:text-button-secondary-text-disabled",
+  ghost:
+    "border-transparent bg-button-tertiary-frame text-button-tertiary-text hover:text-button-tertiary-text-hover active:text-button-tertiary-text-hover disabled:bg-button-tertiary-frame-disabled disabled:text-button-tertiary-text-disabled",
+  destructive:
+    "border-transparent bg-button-danger-frame text-button-danger-text-invert hover:bg-button-danger-frame-hover active:bg-button-danger-frame-pressed disabled:bg-button-danger-frame-disabled disabled:text-button-danger-text-disabled",
+} as const;
+
+const buttonSizeClasses = {
+  default: "h-40 px-16",
+  sm: "h-32 px-12 text-ui-10",
+  lg: "h-40 px-20 text-ui-16",
+  icon: "size-40 p-0",
+} as const;
+
+type ButtonVariant = keyof typeof buttonVariantClasses;
+type ButtonSize = keyof typeof buttonSizeClasses;
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant = "default",
+      size = "default",
+      type = "button",
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        className={cn(
+          "inline-flex shrink-0 items-center justify-center gap-8 whitespace-nowrap rounded-md border text-ui-13 font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none",
+          buttonVariantClasses[variant],
+          buttonSizeClasses[size],
+          className,
+        )}
+        type={type}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
diff --git a/packages/frontend/app/design-tokens.md b/packages/frontend/app/design-tokens.md
new file mode 100644
index 0000000..2ec23c2
--- /dev/null
+++ b/packages/frontend/app/design-tokens.md
@@ -0,0 +1,73 @@
+# FoR Token Operation Rules
+
+Latest adjustment source: Figma screenshots shared on 2026-02-16.
+
+## 1) Semantic Color source of truth
+
+Use `--for-*` variables as the source layer and map them to shadcn-compatible
+variables in `app.css`.
+
+- Text: `--for-text-*`
+- Background: `--for-bg-*`
+- Stroke: `--for-stroke-*`
+- Button: `--for-button-*`
+- Visual Accent: `--for-visual-*`
+
+Key values reflected from screenshots:
+
+- Text Default/Subtle/Hint: `rgba(0,0,0,0.8/0.6/0.3)`, Invert: `#ffffff`
+- Background Default/Subtle: `#ffffff` / `#f2f3f0`
+- Stroke Default: `rgba(0,0,0,0.05)`
+- Primary Button Frame: `#454545` (hover `#1a1a1a`, disabled `#b4b4b4`)
+- Danger Base: `#eb3d3d` (hover/pressed `#8b1d1d`, disabled `#fbbdbf`)
+
+## 2) Component reference rule
+
+Components should consume only the shadcn/Tailwind theme layer:
+
+- `bg-background`, `text-foreground`, `border-border`
+- `bg-primary`, `text-primary-foreground`
+- `bg-secondary`, `text-secondary-foreground`
+- `bg-destructive`, `text-destructive-foreground`
+
+Do not reference `--for-*` values directly inside component files.
+
+## 3) Typography rule
+
+- `font-ui`: Zen Kaku Gothic New + Roboto (UI default)
+- `font-latin`: Roboto
+- `text-ui-*`: line-height fixed to `130%`
+- `text-content-*`: content-oriented styles (130% or 160% depending on group)
+
+Supported UI sizes:
+
+- `text-ui-10`, `text-ui-12`, `text-ui-13`, `text-ui-16`, `text-ui-20`
+
+Supported content styles:
+
+- Display: `text-content-display-l/m/s` (130%)
+- Headline: `text-content-headline-l/m/s` (130%)
+- Number: `text-content-number-l/m/s` (130%)
+- Body: `text-content-body-l/m/s` (160%)
+- Caption: `text-content-caption` (160%)
+
+## 4) Spacing rule
+
+`--spacing: 1px` is used, so spacing utilities are pixel based.
+
+Allowed spacing values:
+
+- `0`, `2`, `4`, `6`, `8`, `12`, `16`, `20`, `24`, `28`, `32`, `40`
+
+Allowed examples:
+
+- `p-16`, `px-24`, `py-12`, `gap-8`, `mt-40`
+
+Disallowed examples:
+
+- `p-[14px]`, `m-[3px]`, `gap-[22px]`
+
+## 5) Icon policy
+
+Use `lucide-react` as temporary placeholder icons until FoR icon assets are
+finalized.
diff --git a/packages/frontend/app/hooks/useActiveWallet.ts b/packages/frontend/app/hooks/useActiveWallet.ts
index 6d1fac7..3a3f804 100644
--- a/packages/frontend/app/hooks/useActiveWallet.ts
+++ b/packages/frontend/app/hooks/useActiveWallet.ts
@@ -32,11 +32,7 @@ interface ActiveWalletResult {
  * Selects Smart Account for embedded wallets, EOA otherwise
  */
 export function useActiveWallet(): ActiveWalletResult {
-  const {
-    walletClient,
-    connectedWallet,
-    address: eoaAddress,
-  } = useWallet();
+  const { walletClient, connectedWallet, address: eoaAddress } = useWallet();
   const {
     smartAccountClient,
     smartAccountAddress,
diff --git a/packages/frontend/app/lib/utils.ts b/packages/frontend/app/lib/utils.ts
new file mode 100644
index 0000000..737ea7e
--- /dev/null
+++ b/packages/frontend/app/lib/utils.ts
@@ -0,0 +1,3 @@
+export function cn(...classes: Array<string | false | null | undefined>) {
+  return classes.filter(Boolean).join(" ");
+}
diff --git a/packages/frontend/app/root.tsx b/packages/frontend/app/root.tsx
index 9e549ff..8a18820 100644
--- a/packages/frontend/app/root.tsx
+++ b/packages/frontend/app/root.tsx
@@ -20,7 +20,7 @@ export const links: Route.LinksFunction = () => [
   },
   {
     rel: "stylesheet",
-    href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
+    href: "https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap",
   },
 ];
 
diff --git a/packages/frontend/app/routes/home.tsx b/packages/frontend/app/routes/home.tsx
index fc08e1b..ea864a7 100644
--- a/packages/frontend/app/routes/home.tsx
+++ b/packages/frontend/app/routes/home.tsx
@@ -1,10 +1,14 @@
 import { Welcome } from "../welcome/welcome";
 import type { Route } from "./+types/home";
 
-export function meta({}: Route.MetaArgs) {
+export function meta(_args: Route.MetaArgs) {
   return [
-    { title: "New React Router App" },
-    { name: "description", content: "Welcome to React Router!" },
+    { title: "FoR Design Token Foundation" },
+    {
+      name: "description",
+      content:
+        "FoR semantic design tokens mapped to shadcn/ui theme variables.",
+    },
   ];
 }
 
diff --git a/packages/frontend/app/welcome/welcome.tsx b/packages/frontend/app/welcome/welcome.tsx
index 8ac6e1d..d5e0541 100644
--- a/packages/frontend/app/welcome/welcome.tsx
+++ b/packages/frontend/app/welcome/welcome.tsx
@@ -1,89 +1,224 @@
-import logoDark from "./logo-dark.svg";
-import logoLight from "./logo-light.svg";
+import { ArrowRight, Leaf, ShieldAlert, Wallet } from "lucide-react";
+
+import { Button } from "~/components/ui/button";
+import { cn } from "~/lib/utils";
 
 export function Welcome() {
   return (
-    <main className="flex items-center justify-center pt-16 pb-4">
-      <div className="flex-1 flex flex-col items-center gap-16 min-h-0">
-        <header className="flex flex-col items-center gap-9">
-          <div className="w-[500px] max-w-[100vw] p-4">
-            <img
-              src={logoLight}
-              alt="React Router"
-              className="block w-full dark:hidden"
-            />
-            <img
-              src={logoDark}
-              alt="React Router"
-              className="hidden w-full dark:block"
-            />
-          </div>
-        </header>
-        <div className="max-w-[300px] w-full space-y-6 px-4">
-          <nav className="rounded-3xl border border-gray-200 p-6 dark:border-gray-700 space-y-4">
-            <p className="leading-6 text-gray-700 dark:text-gray-200 text-center">
-              What&apos;s next?
+    <main className="mx-auto flex min-h-screen w-full max-w-screen-lg flex-col gap-32 px-24 py-32">
+      <header className="flex flex-col gap-12">
+        <p className="text-ui-12 font-medium text-muted-foreground">
+          FoR Frontend Foundation
+        </p>
+        <h1 className="text-content-display-l font-semibold">
+          Design Tokens mapped to shadcn/ui theme variables
+        </h1>
+        <p className="max-w-screen-md text-content-body-m text-muted-foreground">
+          Semantic Color, Typography, and Spacing are centralized as tokens.
+          Components consume the shadcn-compatible layer so global theme tuning
+          can be done in one place.
+        </p>
+      </header>
+
+      <section className="rounded-lg border bg-card p-24">
+        <h2 className="text-content-headline-l font-semibold">
+          Button Theme Preview
+        </h2>
+        <p className="mt-8 text-content-body-s text-muted-foreground">
+          Placeholder icons use lucide-react. Variants read only mapped theme
+          tokens.
+        </p>
+        <div className="mt-16 flex flex-wrap items-center gap-12">
+          <Button>
+            <Wallet className="size-16" />
+            Primary
+          </Button>
+          <Button variant="secondary">
+            <Leaf className="size-16" />
+            Secondary
+          </Button>
+          <Button variant="destructive">
+            <ShieldAlert className="size-16" />
+            Destructive
+          </Button>
+          <Button variant="ghost">
+            <ArrowRight className="size-16" />
+            Ghost
+          </Button>
+          <Button size="icon" aria-label="Arrow icon button">
+            <ArrowRight className="size-16" />
+          </Button>
+        </div>
+      </section>
+
+      <section className="rounded-lg border bg-card p-24">
+        <h2 className="text-content-headline-l font-semibold">
+          Semantic Color Mapping
+        </h2>
+        <p className="mt-8 text-content-body-s text-muted-foreground">
+          Reference rule: component styles use shadcn tokens such as{" "}
+          <code>bg-background</code>, <code>text-foreground</code>, and{" "}
+          <code>border-border</code>. Raw FoR variables remain source-only.
+        </p>
+        <div className="mt-16 grid gap-12 sm:grid-cols-2">
+          <ColorChip
+            label="Text / Primary -> foreground"
+            swatchClass="bg-foreground"
+          />
+          <ColorChip
+            label="Background / Canvas -> background"
+            swatchClass="bg-background"
+          />
+          <ColorChip
+            label="Background / Surface -> card"
+            swatchClass="bg-card"
+          />
+          <ColorChip
+            label="Stroke / Default -> border"
+            swatchClass="bg-border"
+          />
+          <ColorChip
+            label="Button / Primary -> primary"
+            swatchClass="bg-primary"
+          />
+          <ColorChip
+            label="Button / Secondary -> secondary"
+            swatchClass="bg-secondary"
+          />
+          <ColorChip
+            label="Text / Danger Default"
+            swatchClass="bg-text-danger-default"
+          />
+          <ColorChip
+            label="VisualAccent / Natural-3"
+            swatchClass="bg-visual-natural-3"
+          />
+          <ColorChip
+            label="VisualAccent / Green-3"
+            swatchClass="bg-visual-green-3"
+          />
+          <ColorChip
+            label="VisualAccent / Red-3"
+            swatchClass="bg-visual-red-3"
+          />
+        </div>
+      </section>
+
+      <section className="rounded-lg border bg-card p-24">
+        <h2 className="text-content-headline-l font-semibold">
+          Typography Utilities
+        </h2>
+        <p className="mt-8 text-content-body-s text-muted-foreground">
+          <code>font-ui</code> uses Zen Kaku Gothic New + Roboto, and every{" "}
+          <code>text-ui-*</code> token enforces line-height 130%. Content styles
+          are exposed as <code>text-content-*</code>.
+        </p>
+        <div className="mt-16 flex flex-col gap-8">
+          {uiTypographyRows.map(({ className, label }) => (
+            <p key={label} className={cn("font-ui text-foreground", className)}>
+              {label} / line-height 130%
+            </p>
+          ))}
+        </div>
+        <div className="mt-16 flex flex-col gap-8">
+          {contentTypographyRows.map(({ className, label }) => (
+            <p key={label} className={cn("font-ui text-foreground", className)}>
+              {label}
             </p>
-            <ul>
-              {resources.map(({ href, text, icon }) => (
-                <li key={href}>
-                  <a
-                    className="group flex items-center gap-3 self-stretch p-3 leading-normal text-blue-700 hover:underline dark:text-blue-500"
-                    href={href}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    {icon}
-                    {text}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </nav>
+          ))}
         </div>
-      </div>
+      </section>
+
+      <section className="rounded-lg border bg-card p-24">
+        <h2 className="text-content-headline-l font-semibold">
+          Spacing Scale Rule
+        </h2>
+        <p className="mt-8 text-content-body-s text-muted-foreground">
+          Allowed spacing values are 0, 2, 4, 6, 8, 12, 16, 20, 24, 28, 32, and
+          40px. Avoid arbitrary spacing classes such as <code>p-[14px]</code>.
+        </p>
+        <div className="mt-16 flex flex-wrap items-end gap-12">
+          {spacingScale.map((space) => (
+            <div key={space} className="flex flex-col items-center gap-4">
+              <div
+                className="w-16 rounded-sm bg-primary/80"
+                style={{ height: `${Math.max(space, 2)}px` }}
+              />
+              <span className="text-ui-10 text-muted-foreground">
+                {space}px
+              </span>
+            </div>
+          ))}
+        </div>
+      </section>
     </main>
   );
 }
 
-const resources = [
+function ColorChip({
+  label,
+  swatchClass,
+}: {
+  label: string;
+  swatchClass: string;
+}) {
+  return (
+    <div className="flex items-center gap-8 rounded-md border bg-background p-12">
+      <span
+        className={cn("size-20 rounded-sm border border-border", swatchClass)}
+      />
+      <span className="text-ui-12 text-muted-foreground">{label}</span>
+    </div>
+  );
+}
+
+const typographyRows = [
+  { className: "text-ui-10", label: "UI 10" },
+  { className: "text-ui-12", label: "UI 12" },
+  { className: "text-ui-13", label: "UI 13" },
+  { className: "text-ui-16", label: "UI 16" },
+  { className: "text-ui-20", label: "UI 20" },
+];
+
+const uiTypographyRows = typographyRows;
+
+const contentTypographyRows = [
+  {
+    className: "text-content-display-l",
+    label: "Display/L 28px 130%",
+  },
+  {
+    className: "text-content-display-m",
+    label: "Display/M 24px 130%",
+  },
+  {
+    className: "text-content-display-s",
+    label: "Display/S 20px 130%",
+  },
+  {
+    className: "text-content-headline-l",
+    label: "Headline/L 20px 130%",
+  },
+  {
+    className: "text-content-headline-m",
+    label: "Headline/M 17px 130%",
+  },
+  {
+    className: "text-content-body-l",
+    label: "Body/L 15px 160%",
+  },
+  {
+    className: "text-content-body-m",
+    label: "Body/M 14px 160%",
+  },
   {
-    href: "https://reactrouter.com/docs",
-    text: "React Router Docs",
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="20"
-        viewBox="0 0 20 20"
-        fill="none"
-        className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
-      >
-        <path
-          d="M9.99981 10.0751V9.99992M17.4688 17.4688C15.889 19.0485 11.2645 16.9853 7.13958 12.8604C3.01467 8.73546 0.951405 4.11091 2.53116 2.53116C4.11091 0.951405 8.73546 3.01467 12.8604 7.13958C16.9853 11.2645 19.0485 15.889 17.4688 17.4688ZM2.53132 17.4688C0.951566 15.8891 3.01483 11.2645 7.13974 7.13963C11.2647 3.01471 15.8892 0.951453 17.469 2.53121C19.0487 4.11096 16.9854 8.73551 12.8605 12.8604C8.73562 16.9853 4.11107 19.0486 2.53132 17.4688Z"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-        />
-      </svg>
-    ),
+    className: "text-content-body-s",
+    label: "Body/S 13px 160%",
   },
   {
-    href: "https://rmx.as/discord",
-    text: "Join Discord",
-    icon: (
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="24"
-        height="20"
-        viewBox="0 0 24 20"
-        fill="none"
-        className="stroke-gray-600 group-hover:stroke-current dark:stroke-gray-300"
-      >
-        <path
-          d="M15.0686 1.25995L14.5477 1.17423L14.2913 1.63578C14.1754 1.84439 14.0545 2.08275 13.9422 2.31963C12.6461 2.16488 11.3406 2.16505 10.0445 2.32014C9.92822 2.08178 9.80478 1.84975 9.67412 1.62413L9.41449 1.17584L8.90333 1.25995C7.33547 1.51794 5.80717 1.99419 4.37748 2.66939L4.19 2.75793L4.07461 2.93019C1.23864 7.16437 0.46302 11.3053 0.838165 15.3924L0.868838 15.7266L1.13844 15.9264C2.81818 17.1714 4.68053 18.1233 6.68582 18.719L7.18892 18.8684L7.50166 18.4469C7.96179 17.8268 8.36504 17.1824 8.709 16.4944L8.71099 16.4904C10.8645 17.0471 13.128 17.0485 15.2821 16.4947C15.6261 17.1826 16.0293 17.8269 16.4892 18.4469L16.805 18.8725L17.3116 18.717C19.3056 18.105 21.1876 17.1751 22.8559 15.9238L23.1224 15.724L23.1528 15.3923C23.5873 10.6524 22.3579 6.53306 19.8947 2.90714L19.7759 2.73227L19.5833 2.64518C18.1437 1.99439 16.6386 1.51826 15.0686 1.25995ZM16.6074 10.7755L16.6074 10.7756C16.5934 11.6409 16.0212 12.1444 15.4783 12.1444C14.9297 12.1444 14.3493 11.6173 14.3493 10.7877C14.3493 9.94885 14.9378 9.41192 15.4783 9.41192C16.0471 9.41192 16.6209 9.93851 16.6074 10.7755ZM8.49373 12.1444C7.94513 12.1444 7.36471 11.6173 7.36471 10.7877C7.36471 9.94885 7.95323 9.41192 8.49373 9.41192C9.06038 9.41192 9.63892 9.93712 9.6417 10.7815C9.62517 11.6239 9.05462 12.1444 8.49373 12.1444Z"
-          strokeWidth="1.5"
-        />
-      </svg>
-    ),
+    className: "text-content-caption",
+    label: "Caption 12px 160%",
   },
 ];
+
+const spacingScale = [0, 2, 4, 6, 8, 12, 16, 20, 24, 28, 32, 40];
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 46c0886..15a65ca 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -14,6 +14,7 @@
     "@react-router/node": "^7.9.2",
     "@react-router/serve": "^7.9.2",
     "isbot": "^5.1.31",
+    "lucide-react": "^0.554.0",
     "permissionless": "^0.2.57",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9b0a687..b830b7d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       isbot:
         specifier: ^5.1.31
         version: 5.1.32
+      lucide-react:
+        specifier: ^0.554.0
+        version: 0.554.0(react@19.2.0)
       permissionless:
         specifier: ^0.2.57
         version: 0.2.57(viem@2.43.5(bufferutil@4.1.0)(typescript@5.9.3)(utf-8-validate@5.0.10)(zod@3.25.76))