From 6bdeea2241d7d2ef61daf2420d651ff3c6363085 Mon Sep 17 00:00:00 2001
From: Nikita Khromov <nikita1tup@gmail.com>
Date: Wed, 27 May 2026 15:57:28 +0300
Subject: [PATCH] Added new design system

---
 web-v2/package.json                           |   5 +-
 web-v2/pnpm-lock.yaml                         |  11 +
 web-v2/scripts/add-icon.ts                    |  13 +-
 web-v2/src/App.tsx                            |   5 +
 web-v2/src/components/AppLayout.tsx           |  33 +-
 .../icons/{coins-icon.tsx => CoinsIcon.tsx}   |   0
 web-v2/src/components/ui/UiButton.tsx         |  28 +
 web-v2/src/components/ui/UiCard.tsx           |  11 +
 web-v2/src/components/ui/UiInput.tsx          |  50 ++
 web-v2/src/components/ui/UiModal.tsx          |  50 ++
 web-v2/src/components/ui/UiSelect.tsx         | 115 +++
 web-v2/src/components/ui/UiSpinner.tsx        |   7 +
 web-v2/src/components/ui/UiTable.tsx          |  14 +
 web-v2/src/components/ui/index.ts             |   7 +
 web-v2/src/constants/routes.ts                |   1 +
 web-v2/src/main.tsx                           |   1 +
 web-v2/src/pages/DesignSystem/index.tsx       | 670 ++++++++++++++++++
 web-v2/src/styles/components.css              |  62 ++
 web-v2/src/styles/index.css                   |  13 +-
 web-v2/src/styles/theme.css                   |  70 ++
 web-v2/src/styles/tokens.css                  |  86 +++
 web-v2/src/vite-env.d.ts                      |   2 +
 web-v2/tailwind.config.js                     |  16 -
 23 files changed, 1223 insertions(+), 47 deletions(-)
 rename web-v2/src/components/icons/{coins-icon.tsx => CoinsIcon.tsx} (100%)
 create mode 100644 web-v2/src/components/ui/UiButton.tsx
 create mode 100644 web-v2/src/components/ui/UiCard.tsx
 create mode 100644 web-v2/src/components/ui/UiInput.tsx
 create mode 100644 web-v2/src/components/ui/UiModal.tsx
 create mode 100644 web-v2/src/components/ui/UiSelect.tsx
 create mode 100644 web-v2/src/components/ui/UiSpinner.tsx
 create mode 100644 web-v2/src/components/ui/UiTable.tsx
 create mode 100644 web-v2/src/components/ui/index.ts
 create mode 100644 web-v2/src/pages/DesignSystem/index.tsx
 create mode 100644 web-v2/src/styles/components.css
 create mode 100644 web-v2/src/styles/theme.css
 create mode 100644 web-v2/src/styles/tokens.css
 delete mode 100644 web-v2/tailwind.config.js

diff --git a/web-v2/package.json b/web-v2/package.json
index b036a6c..69fcd7b 100644
--- a/web-v2/package.json
+++ b/web-v2/package.json
@@ -16,10 +16,11 @@
     "add-icon": "tsx ./scripts/add-icon.ts"
   },
   "dependencies": {
-    "lwk_web": "file:../lwk_wasm/pkg_web",
+    "@fontsource-variable/inter": "^5.2.8",
     "@heroui/react": "^3.0.4",
     "@tanstack/react-query": "^5.100.10",
     "axios": "^1.7.0",
+    "lwk_web": "file:../lwk_wasm/pkg_web",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
     "react-router-dom": "^7.15.0",
@@ -27,8 +28,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
-    "@tanstack/react-query-devtools": "^5.100.10",
     "@tailwindcss/postcss": "^4.2.0",
+    "@tanstack/react-query-devtools": "^5.100.10",
     "@types/node": "^24.12.4",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
diff --git a/web-v2/pnpm-lock.yaml b/web-v2/pnpm-lock.yaml
index f87f403..b01e6c3 100644
--- a/web-v2/pnpm-lock.yaml
+++ b/web-v2/pnpm-lock.yaml
@@ -7,6 +7,9 @@ settings:
 importers:
   .:
     dependencies:
+      '@fontsource-variable/inter':
+        specifier: ^5.2.8
+        version: 5.2.8
       '@heroui/react':
         specifier: ^3.0.4
         version: 3.0.4(@react-spectrum/provider@3.11.0(react-dom@19.2.6(react@19.2.6))(react@19.2.6))(@types/react-dom@19.2.3(@types/react@19.2.14))(@types/react@19.2.14)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)(tailwindcss@4.3.0)
@@ -622,6 +625,12 @@ packages:
       }
     engines: { node: ^18.18.0 || ^20.9.0 || >=21.1.0 }
 
+  '@fontsource-variable/inter@5.2.8':
+    resolution:
+      {
+        integrity: sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==,
+      }
+
   '@formatjs/ecma402-abstract@2.3.6':
     resolution:
       {
@@ -4757,6 +4766,8 @@ snapshots:
       '@eslint/core': 0.17.0
       levn: 0.4.1
 
+  '@fontsource-variable/inter@5.2.8': {}
+
   '@formatjs/ecma402-abstract@2.3.6':
     dependencies:
       '@formatjs/fast-memoize': 2.2.7
diff --git a/web-v2/scripts/add-icon.ts b/web-v2/scripts/add-icon.ts
index d537348..123c761 100644
--- a/web-v2/scripts/add-icon.ts
+++ b/web-v2/scripts/add-icon.ts
@@ -67,18 +67,19 @@ async function getIconOptions() {
 }
 
 async function createIconComponent({ name, content }: { name: string; content: string }) {
-  const fileName = name.toLowerCase().replace(/ /g, '-') + '-icon'
-  const filePath = `./src/components/icons/${fileName}.tsx`
+  const componentName =
+    name
+      .toLowerCase()
+      .replace(/ /g, '-')
+      .replace(/(^\w|-\w)/g, c => c.toUpperCase())
+      .replace(/-/g, '') + 'Icon'
+  const filePath = `./src/components/icons/${componentName}.tsx`
 
-  // Check if the file already exists
   if (fs.existsSync(filePath)) {
     console.error(chalk.red(`File ${filePath} already exists. Please choose a different name.`))
     process.exit(1)
   }
 
-  // Use PascalCase for the component name
-  const componentName = fileName.replace(/(^\w|-\w)/g, c => c.toUpperCase()).replace(/-/g, '')
-
   const fileContent = `
 import type { SVGProps } from "react"
 
diff --git a/web-v2/src/App.tsx b/web-v2/src/App.tsx
index c0c4785..8b31ece 100644
--- a/web-v2/src/App.tsx
+++ b/web-v2/src/App.tsx
@@ -7,6 +7,7 @@ import { AppProviders } from '@/providers/AppProviders'
 import ErrorBoundary from './components/ErrorBoundary'
 import BorrowPage from './pages/Borrow'
 import DashboardPage from './pages/Dashboard'
+import DesignSystemPage from './pages/DesignSystem'
 import SupplyPage from './pages/Supply'
 
 const router = createBrowserRouter([
@@ -27,6 +28,10 @@ const router = createBrowserRouter([
         path: RoutePath.Supply,
         element: <SupplyPage />,
       },
+      {
+        path: RoutePath.DesignSystem,
+        element: <DesignSystemPage />,
+      },
     ],
   },
 ])
diff --git a/web-v2/src/components/AppLayout.tsx b/web-v2/src/components/AppLayout.tsx
index bd55351..122fe4a 100644
--- a/web-v2/src/components/AppLayout.tsx
+++ b/web-v2/src/components/AppLayout.tsx
@@ -3,30 +3,31 @@ import { Link, Outlet } from 'react-router-dom'
 import { env } from '@/constants/env'
 import { RoutePath } from '@/constants/routes'
 
+const NAV = [
+  { to: RoutePath.Dashboard, label: 'Dashboard' },
+  { to: RoutePath.Borrow, label: 'Borrow' },
+  { to: RoutePath.Supply, label: 'Supply' },
+  { to: RoutePath.DesignSystem, label: 'System' },
+]
+
 export default function AppLayout() {
   return (
-    <main className='min-h-screen'>
+    <main className='bg-background text-foreground min-h-screen'>
       <div className='mx-auto flex w-full max-w-5xl flex-col gap-8 px-4 py-8'>
-        <header className='flex justify-between items-center'>
-          <h1 className='text-4xl font-black uppercase'>Lending</h1>
+        <header className='flex items-center justify-between'>
+          <h1 className='text-h2'>Lending</h1>
           <nav className='flex flex-wrap items-center gap-6 text-sm font-medium'>
-            <Link className='text-accent hover:underline' to={RoutePath.Dashboard}>
-              Dashboard
-            </Link>
-            <Link className='text-accent hover:underline' to={RoutePath.Borrow}>
-              Borrow
-            </Link>
-            <Link className='text-accent hover:underline' to={RoutePath.Supply}>
-              Supply
-            </Link>
+            {NAV.map(({ to, label }) => (
+              <Link key={to} className='text-accent hover:underline' to={to}>
+                {label}
+              </Link>
+            ))}
           </nav>
         </header>
 
-        <section className='rounded-2xl border bg-white p-6 shadow-sm'>
-          <Outlet />
-        </section>
+        <Outlet />
 
-        <footer className='text-sm'>
+        <footer className='text-muted text-xs'>
           <p>Network: {env.VITE_NETWORK}</p>
           <p>API URL: {env.VITE_API_URL}</p>
           <p>Esplora Base URL: {env.VITE_ESPLORA_BASE_URL}</p>
diff --git a/web-v2/src/components/icons/coins-icon.tsx b/web-v2/src/components/icons/CoinsIcon.tsx
similarity index 100%
rename from web-v2/src/components/icons/coins-icon.tsx
rename to web-v2/src/components/icons/CoinsIcon.tsx
diff --git a/web-v2/src/components/ui/UiButton.tsx b/web-v2/src/components/ui/UiButton.tsx
new file mode 100644
index 0000000..18a8fb6
--- /dev/null
+++ b/web-v2/src/components/ui/UiButton.tsx
@@ -0,0 +1,28 @@
+import { Button, type ButtonProps, Spinner } from '@heroui/react'
+import type { ReactNode } from 'react'
+
+export interface UiButtonProps extends Omit<ButtonProps, 'children'> {
+  isLoading?: boolean
+  loadingText?: ReactNode
+  startContent?: ReactNode
+  endContent?: ReactNode
+  children?: ReactNode
+}
+
+export function UiButton({
+  isLoading,
+  loadingText,
+  isDisabled,
+  startContent,
+  endContent,
+  children,
+  ...props
+}: UiButtonProps) {
+  return (
+    <Button isDisabled={isDisabled || isLoading} {...props}>
+      {isLoading ? <Spinner size='sm' color='current' aria-hidden /> : startContent}
+      {isLoading ? (loadingText ?? children) : children}
+      {!isLoading && endContent}
+    </Button>
+  )
+}
diff --git a/web-v2/src/components/ui/UiCard.tsx b/web-v2/src/components/ui/UiCard.tsx
new file mode 100644
index 0000000..06bbe71
--- /dev/null
+++ b/web-v2/src/components/ui/UiCard.tsx
@@ -0,0 +1,11 @@
+import { Card, type CardProps } from '@heroui/react'
+
+export type UiCardProps = CardProps
+
+export const UiCard = Object.assign((props: UiCardProps) => <Card {...props} />, {
+  Header: Card.Header,
+  Title: Card.Title,
+  Description: Card.Description,
+  Content: Card.Content,
+  Footer: Card.Footer,
+})
diff --git a/web-v2/src/components/ui/UiInput.tsx b/web-v2/src/components/ui/UiInput.tsx
new file mode 100644
index 0000000..96da82d
--- /dev/null
+++ b/web-v2/src/components/ui/UiInput.tsx
@@ -0,0 +1,50 @@
+import {
+  Description,
+  FieldError,
+  Input,
+  InputGroup,
+  Label,
+  TextField,
+  type TextFieldProps,
+} from '@heroui/react'
+import type { ReactNode } from 'react'
+
+export interface UiInputProps extends Omit<TextFieldProps, 'children'> {
+  label?: ReactNode
+  placeholder?: string
+  description?: ReactNode
+  errorMessage?: ReactNode
+  startContent?: ReactNode
+  endContent?: ReactNode
+}
+
+export function UiInput({
+  label,
+  placeholder,
+  description,
+  errorMessage,
+  isInvalid,
+  startContent,
+  endContent,
+  ...props
+}: UiInputProps) {
+  const invalid = isInvalid ?? Boolean(errorMessage)
+  const hasGroup = Boolean(startContent || endContent)
+
+  return (
+    <TextField isInvalid={invalid} {...props}>
+      {label && <Label>{label}</Label>}
+      {hasGroup ? (
+        <InputGroup>
+          {startContent && <InputGroup.Prefix>{startContent}</InputGroup.Prefix>}
+          <InputGroup.Input placeholder={placeholder} />
+          {endContent && <InputGroup.Suffix>{endContent}</InputGroup.Suffix>}
+        </InputGroup>
+      ) : (
+        <Input placeholder={placeholder} />
+      )}
+      {description && !invalid && <Description>{description}</Description>}
+      {invalid && errorMessage && <FieldError>{errorMessage}</FieldError>}
+    </TextField>
+  )
+}
diff --git a/web-v2/src/components/ui/UiModal.tsx b/web-v2/src/components/ui/UiModal.tsx
new file mode 100644
index 0000000..6ffbbcb
--- /dev/null
+++ b/web-v2/src/components/ui/UiModal.tsx
@@ -0,0 +1,50 @@
+import { Modal, type ModalContainerProps } from '@heroui/react'
+import type { ReactNode } from 'react'
+
+export interface UiModalProps {
+  isOpen?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (isOpen: boolean) => void
+  title?: ReactNode
+  children?: ReactNode
+  footer?: ReactNode
+  trigger?: ReactNode
+  size?: ModalContainerProps['size']
+  placement?: ModalContainerProps['placement']
+  isDismissable?: boolean
+  showCloseButton?: boolean
+}
+
+export function UiModal({
+  isOpen,
+  defaultOpen,
+  onOpenChange,
+  title,
+  children,
+  footer,
+  trigger,
+  size,
+  placement,
+  isDismissable = true,
+  showCloseButton = true,
+}: UiModalProps) {
+  return (
+    <Modal.Root isOpen={isOpen} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
+      {trigger ? <Modal.Trigger>{trigger}</Modal.Trigger> : null}
+      <Modal.Backdrop isDismissable={isDismissable}>
+        <Modal.Container size={size} placement={placement}>
+          <Modal.Dialog>
+            {title || showCloseButton ? (
+              <Modal.Header>
+                {title ? <Modal.Heading>{title}</Modal.Heading> : null}
+                {showCloseButton ? <Modal.CloseTrigger /> : null}
+              </Modal.Header>
+            ) : null}
+            <Modal.Body>{children}</Modal.Body>
+            {footer ? <Modal.Footer>{footer}</Modal.Footer> : null}
+          </Modal.Dialog>
+        </Modal.Container>
+      </Modal.Backdrop>
+    </Modal.Root>
+  )
+}
diff --git a/web-v2/src/components/ui/UiSelect.tsx b/web-v2/src/components/ui/UiSelect.tsx
new file mode 100644
index 0000000..48b91e6
--- /dev/null
+++ b/web-v2/src/components/ui/UiSelect.tsx
@@ -0,0 +1,115 @@
+import {
+  ComboBox,
+  Description,
+  FieldError,
+  Input,
+  Label,
+  ListBox,
+  ListBoxItem,
+  Select,
+} from '@heroui/react'
+import type { ReactNode } from 'react'
+
+export type UiSelectKey = string | number
+
+export interface UiSelectOption {
+  id: UiSelectKey
+  label: string
+  isDisabled?: boolean
+}
+
+export interface UiSelectProps {
+  options: UiSelectOption[]
+  label?: ReactNode
+  placeholder?: string
+  description?: ReactNode
+  errorMessage?: ReactNode
+  isInvalid?: boolean
+  isDisabled?: boolean
+  isRequired?: boolean
+  withSearch?: boolean
+  name?: string
+  className?: string
+  value?: UiSelectKey | null
+  defaultValue?: UiSelectKey | null
+  onChange?: (key: UiSelectKey | null) => void
+}
+
+const renderOption = (option: UiSelectOption) => (
+  <ListBoxItem id={option.id} textValue={option.label} isDisabled={option.isDisabled}>
+    {option.label}
+  </ListBoxItem>
+)
+
+export function UiSelect({
+  options,
+  label,
+  placeholder,
+  description,
+  errorMessage,
+  isInvalid,
+  withSearch,
+  value,
+  defaultValue,
+  onChange,
+  isDisabled,
+  isRequired,
+  name,
+  className,
+}: UiSelectProps) {
+  const invalid = isInvalid ?? Boolean(errorMessage)
+  const helper = description && !invalid ? <Description>{description}</Description> : null
+  const error = invalid && errorMessage ? <FieldError>{errorMessage}</FieldError> : null
+
+  if (withSearch) {
+    return (
+      <ComboBox
+        defaultItems={options}
+        value={value}
+        defaultValue={defaultValue}
+        onChange={onChange}
+        isInvalid={invalid}
+        isDisabled={isDisabled}
+        isRequired={isRequired}
+        name={name}
+        className={className}
+      >
+        {label && <Label>{label}</Label>}
+        <ComboBox.InputGroup>
+          <Input placeholder={placeholder} />
+          <ComboBox.Trigger />
+        </ComboBox.InputGroup>
+        {helper}
+        {error}
+        <ComboBox.Popover>
+          <ListBox<UiSelectOption>>{renderOption}</ListBox>
+        </ComboBox.Popover>
+      </ComboBox>
+    )
+  }
+
+  return (
+    <Select
+      placeholder={placeholder}
+      value={value}
+      defaultValue={defaultValue}
+      onChange={onChange}
+      isInvalid={invalid}
+      isDisabled={isDisabled}
+      isRequired={isRequired}
+      name={name}
+      className={className}
+    >
+      {label && <Label>{label}</Label>}
+      <Select.Trigger>
+        <Select.Value />
+        <Select.Indicator />
+      </Select.Trigger>
+      {helper}
+      {error}
+      <Select.Popover>
+        <ListBox items={options}>{renderOption}</ListBox>
+      </Select.Popover>
+    </Select>
+  )
+}
diff --git a/web-v2/src/components/ui/UiSpinner.tsx b/web-v2/src/components/ui/UiSpinner.tsx
new file mode 100644
index 0000000..48a0276
--- /dev/null
+++ b/web-v2/src/components/ui/UiSpinner.tsx
@@ -0,0 +1,7 @@
+import { Spinner, type SpinnerProps } from '@heroui/react'
+
+export type UiSpinnerProps = SpinnerProps
+
+export function UiSpinner(props: UiSpinnerProps) {
+  return <Spinner {...props} />
+}
diff --git a/web-v2/src/components/ui/UiTable.tsx b/web-v2/src/components/ui/UiTable.tsx
new file mode 100644
index 0000000..3abf4e4
--- /dev/null
+++ b/web-v2/src/components/ui/UiTable.tsx
@@ -0,0 +1,14 @@
+import { Table, type TableProps } from '@heroui/react'
+
+export type UiTableProps = TableProps
+
+export const UiTable = Object.assign((props: UiTableProps) => <Table {...props} />, {
+  ScrollContainer: Table.ScrollContainer,
+  Content: Table.Content,
+  Header: Table.Header,
+  Column: Table.Column,
+  Body: Table.Body,
+  Row: Table.Row,
+  Cell: Table.Cell,
+  Footer: Table.Footer,
+})
diff --git a/web-v2/src/components/ui/index.ts b/web-v2/src/components/ui/index.ts
new file mode 100644
index 0000000..d005899
--- /dev/null
+++ b/web-v2/src/components/ui/index.ts
@@ -0,0 +1,7 @@
+export * from './UiButton'
+export * from './UiCard'
+export * from './UiInput'
+export * from './UiModal'
+export * from './UiSelect'
+export * from './UiSpinner'
+export * from './UiTable'
diff --git a/web-v2/src/constants/routes.ts b/web-v2/src/constants/routes.ts
index a962813..9f02327 100644
--- a/web-v2/src/constants/routes.ts
+++ b/web-v2/src/constants/routes.ts
@@ -2,6 +2,7 @@ export const RoutePath = {
   Dashboard: '/',
   Borrow: '/borrow',
   Supply: '/supply',
+  DesignSystem: '/design-system',
 } as const
 
 export type RoutePath = (typeof RoutePath)[keyof typeof RoutePath]
diff --git a/web-v2/src/main.tsx b/web-v2/src/main.tsx
index 75a007f..d466520 100644
--- a/web-v2/src/main.tsx
+++ b/web-v2/src/main.tsx
@@ -1,3 +1,4 @@
+import '@fontsource-variable/inter'
 import '@/styles/index.css'
 
 import { StrictMode } from 'react'
diff --git a/web-v2/src/pages/DesignSystem/index.tsx b/web-v2/src/pages/DesignSystem/index.tsx
new file mode 100644
index 0000000..2e299a2
--- /dev/null
+++ b/web-v2/src/pages/DesignSystem/index.tsx
@@ -0,0 +1,670 @@
+import { Chip, Pagination } from '@heroui/react'
+import type { ReactNode, SVGProps } from 'react'
+import { useState } from 'react'
+
+import CoinsIcon from '@/components/icons/CoinsIcon'
+import {
+  UiButton,
+  UiCard,
+  UiInput,
+  UiModal,
+  UiSelect,
+  type UiSelectKey,
+  type UiSelectOption,
+  UiSpinner,
+  UiTable,
+} from '@/components/ui'
+
+const SearchIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox='0 0 16 16' fill='none' aria-hidden {...props}>
+    <circle cx='7' cy='7' r='5' stroke='currentColor' strokeWidth='1.5' />
+    <path d='m11 11 3 3' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
+  </svg>
+)
+
+const PlusIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox='0 0 16 16' fill='none' aria-hidden {...props}>
+    <path d='M8 3v10M3 8h10' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
+  </svg>
+)
+
+const TrashIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox='0 0 16 16' fill='none' aria-hidden {...props}>
+    <path
+      d='M3 4h10M6 4V2.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 .5.5V4m-5 0v8a1 1 0 0 0 1 1h4a1 1 0 0 0 1-1V4'
+      stroke='currentColor'
+      strokeWidth='1.5'
+      strokeLinecap='round'
+    />
+  </svg>
+)
+
+function Section({
+  title,
+  description,
+  children,
+}: {
+  title: string
+  description?: string
+  children: ReactNode
+}) {
+  return (
+    <section className='border-separator border-b py-10 last:border-b-0'>
+      <header className='mb-6'>
+        <h2 className='text-h2'>{title}</h2>
+        {description && <p className='text-muted mt-1 max-w-2xl text-sm'>{description}</p>}
+      </header>
+      {children}
+    </section>
+  )
+}
+
+function Row({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className='flex flex-col gap-3 py-3'>
+      <h3 className='text-muted text-xs font-medium tracking-wide uppercase'>{label}</h3>
+      <div className='flex flex-wrap items-center gap-3'>{children}</div>
+    </div>
+  )
+}
+
+type Swatch = { label: string; className: string; note: string; fg?: string }
+type Family = { name: string; description: string; swatches: Swatch[] }
+
+const TYPOGRAPHY: { name: string; className: string; meta: string }[] = [
+  { name: 'Heading 1', className: 'text-h1', meta: '36 / 40 / 800' },
+  { name: 'Display (balance)', className: 'text-display', meta: '30 / 36 / 700' },
+  { name: 'Heading 2', className: 'text-h2', meta: '24 / 32 / 700' },
+  { name: 'Heading 3', className: 'text-h3', meta: '20 / 28 / 600' },
+  { name: 'Heading 4', className: 'text-h4', meta: '16 / 24 / 600' },
+  { name: 'Body base', className: 'text-base', meta: '16 / 24 / 400' },
+  { name: 'Body base medium', className: 'text-base font-medium', meta: '16 / 24 / 500' },
+  { name: 'Body sm', className: 'text-sm', meta: '14 / 20 / 400' },
+  { name: 'Body sm medium', className: 'text-sm font-medium', meta: '14 / 20 / 500' },
+  { name: 'Body xs', className: 'text-xs', meta: '12 / 16 / 400' },
+  { name: 'Mono', className: 'font-mono text-sm', meta: 'system mono' },
+]
+
+const COLOR_FAMILIES: Family[] = [
+  {
+    name: 'Accent',
+    description: 'Primary brand colour.',
+    swatches: [
+      { label: 'Accent', className: 'bg-accent', note: '#2706CF', fg: 'text-accent-foreground' },
+      {
+        label: 'Hover',
+        className: 'bg-accent-hover',
+        note: 'derived',
+        fg: 'text-accent-foreground',
+      },
+      { label: 'Foreground', className: 'bg-accent-foreground', note: '#FCFCFC' },
+      {
+        label: 'Soft',
+        className: 'bg-accent-soft',
+        note: 'accent · 15%',
+        fg: 'text-accent-soft-foreground',
+      },
+      {
+        label: 'Soft Hover',
+        className: 'bg-accent-soft-hover',
+        note: 'accent · 20%',
+        fg: 'text-accent-soft-foreground',
+      },
+    ],
+  },
+  {
+    name: 'Default',
+    description: 'Neutral surfaces.',
+    swatches: [
+      { label: 'Default', className: 'bg-default', note: '#EBEBEC', fg: 'text-default-foreground' },
+      {
+        label: 'Hover',
+        className: 'bg-default-hover',
+        note: 'derived',
+        fg: 'text-default-foreground',
+      },
+      { label: 'Foreground', className: 'bg-default-foreground', note: '#18181B' },
+    ],
+  },
+  {
+    name: 'Success',
+    description: 'Positive states.',
+    swatches: [
+      { label: 'Success', className: 'bg-success', note: '#17C964', fg: 'text-success-foreground' },
+      {
+        label: 'Hover',
+        className: 'bg-success-hover',
+        note: 'derived',
+        fg: 'text-success-foreground',
+      },
+      {
+        label: 'Soft',
+        className: 'bg-success-soft',
+        note: 'success · 15%',
+        fg: 'text-success-soft-foreground',
+      },
+    ],
+  },
+  {
+    name: 'Warning',
+    description: 'Caution states.',
+    swatches: [
+      { label: 'Warning', className: 'bg-warning', note: '#F5A524', fg: 'text-warning-foreground' },
+      {
+        label: 'Hover',
+        className: 'bg-warning-hover',
+        note: 'derived',
+        fg: 'text-warning-foreground',
+      },
+      {
+        label: 'Soft',
+        className: 'bg-warning-soft',
+        note: 'warning · 15%',
+        fg: 'text-warning-soft-foreground',
+      },
+    ],
+  },
+  {
+    name: 'Danger',
+    description: 'Destructive states.',
+    swatches: [
+      { label: 'Danger', className: 'bg-danger', note: '#FF383C', fg: 'text-danger-foreground' },
+      {
+        label: 'Hover',
+        className: 'bg-danger-hover',
+        note: 'derived',
+        fg: 'text-danger-foreground',
+      },
+      {
+        label: 'Soft',
+        className: 'bg-danger-soft',
+        note: 'danger · 15%',
+        fg: 'text-danger-soft-foreground',
+      },
+    ],
+  },
+  {
+    name: 'Background',
+    description: 'Canvas tiers.',
+    swatches: [
+      { label: 'Background', className: 'bg-background', note: '#F5F5F5' },
+      { label: 'Secondary', className: 'bg-background-secondary', note: '#EBEBEB' },
+      { label: 'Tertiary', className: 'bg-background-tertiary', note: '#E1E1E1' },
+      { label: 'Inverse', className: 'bg-background-inverse', note: '#18181B', fg: 'text-surface' },
+    ],
+  },
+  {
+    name: 'Surface',
+    description: 'Cards, panels, modals.',
+    swatches: [
+      { label: 'Surface', className: 'bg-surface', note: '#FFFFFF' },
+      { label: 'Secondary', className: 'bg-surface-secondary', note: '#FAFAFA' },
+      { label: 'Tertiary', className: 'bg-surface-tertiary', note: '#EFEFF0' },
+    ],
+  },
+  {
+    name: 'Separator & Border',
+    description: 'Dividers and outlines.',
+    swatches: [
+      { label: 'Border', className: 'bg-border', note: '#DEDEE0' },
+      { label: 'Separator', className: 'bg-separator', note: '#E4E4E7' },
+      { label: 'Separator·2', className: 'bg-separator-secondary', note: '#D7D7D7' },
+      { label: 'Separator·3', className: 'bg-separator-tertiary', note: '#CDCDCE' },
+    ],
+  },
+  {
+    name: 'Other',
+    description: 'Overlay, backdrop, focus.',
+    swatches: [
+      { label: 'Overlay', className: 'bg-overlay', note: '#FFFFFF' },
+      { label: 'Backdrop', className: 'bg-backdrop', note: 'rgba(0,0,0,.5)' },
+      { label: 'Focus', className: 'bg-focus', note: '= accent' },
+      { label: 'Muted', className: 'bg-muted', note: '#71717A' },
+    ],
+  },
+]
+
+const SHADOWS: { label: string; className: string }[] = [
+  { label: 'shadow-field', className: 'shadow-field' },
+  { label: 'shadow-surface', className: 'shadow-surface' },
+  { label: 'shadow-overlay', className: 'shadow-overlay' },
+]
+
+const RADII: { label: string; className: string; value: string }[] = [
+  { label: 'xs', className: 'rounded-xs', value: '0.125rem' },
+  { label: 'sm', className: 'rounded-sm', value: '0.375rem' },
+  { label: 'md', className: 'rounded-md', value: '0.5625rem' },
+  { label: 'lg (base)', className: 'rounded-lg', value: '0.75rem' },
+  { label: 'xl', className: 'rounded-xl', value: '1.125rem' },
+  { label: '2xl', className: 'rounded-2xl', value: '1.5rem' },
+  { label: 'full', className: 'rounded-full', value: '9999px' },
+]
+
+const BUTTON_VARIANTS = ['primary', 'secondary', 'ghost', 'danger', 'danger-soft'] as const
+const BUTTON_SIZES = ['sm', 'md', 'lg'] as const
+
+const ASSETS: UiSelectOption[] = [
+  { id: 'btc', label: 'Bitcoin' },
+  { id: 'lbtc', label: 'Liquid Bitcoin' },
+  { id: 'usdt', label: 'Tether (USDt)' },
+  { id: 'eurx', label: 'EURx' },
+  { id: 'mex', label: 'MEX' },
+]
+
+function SwatchTile({ label, className, note, fg }: Swatch) {
+  return (
+    <div className='border-border bg-surface flex flex-col overflow-hidden rounded-md border'>
+      <div
+        className={`${className} ${fg ?? 'text-foreground'} flex h-14 items-end px-3 py-2 text-xs font-medium`}
+      >
+        {label}
+      </div>
+      <div className='border-separator text-muted border-t px-3 py-1.5 font-mono text-[11px]'>
+        {note}
+      </div>
+    </div>
+  )
+}
+
+type OfferStatus = 'open' | 'matched' | 'expired'
+
+interface Offer {
+  id: string
+  asset: string
+  amount: string
+  rate: string
+  term: string
+  status: OfferStatus
+}
+
+const OFFERS: Offer[] = [
+  { id: 'o1', asset: 'L-BTC', amount: '1.20', rate: '5.4%', term: '30 days', status: 'open' },
+  { id: 'o2', asset: 'USDt', amount: '50,000', rate: '4.1%', term: '14 days', status: 'open' },
+  { id: 'o3', asset: 'EURx', amount: '12,300', rate: '3.8%', term: '7 days', status: 'matched' },
+  { id: 'o4', asset: 'MEX', amount: '8,500', rate: '6.2%', term: '60 days', status: 'expired' },
+  { id: 'o5', asset: 'L-BTC', amount: '0.75', rate: '5.0%', term: '45 days', status: 'open' },
+]
+
+const STATUS_CHIP: Record<OfferStatus, { color: 'success' | 'accent' | 'default'; label: string }> =
+  {
+    open: { color: 'success', label: 'Open' },
+    matched: { color: 'accent', label: 'Matched' },
+    expired: { color: 'default', label: 'Expired' },
+  }
+
+const TOTAL_RESULTS = 120
+const DEFAULT_PAGE_SIZE = 10
+
+const PAGE_SIZE_OPTIONS: UiSelectOption[] = [
+  { id: 5, label: '5' },
+  { id: 10, label: '10' },
+  { id: 25, label: '25' },
+  { id: 50, label: '50' },
+]
+
+const RefreshIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg viewBox='0 0 24 24' fill='none' aria-hidden {...props}>
+    <path
+      d='M20 4v6h-6M4 20v-6h6M4 10a8 8 0 0 1 14-3l2 3M20 14a8 8 0 0 1-14 3l-2-3'
+      stroke='currentColor'
+      strokeWidth='1.75'
+      strokeLinecap='round'
+      strokeLinejoin='round'
+    />
+  </svg>
+)
+
+function buildPageList(current: number, total: number): (number | 'ellipsis')[] {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i + 1)
+  // Figma pattern: near edges show [1,2,3,…,total-2,total-1,total]; middle shows
+  // [1,…,current-1,current,current+1,…,total].
+  if (current <= 3 || current >= total - 2) {
+    return [1, 2, 3, 'ellipsis', total - 2, total - 1, total]
+  }
+  return [1, 'ellipsis', current - 1, current, current + 1, 'ellipsis', total]
+}
+
+function TableDemo() {
+  const [page, setPage] = useState(1)
+  const [pageSize, setPageSize] = useState<UiSelectKey | null>(DEFAULT_PAGE_SIZE)
+
+  const effectivePageSize = typeof pageSize === 'number' ? pageSize : DEFAULT_PAGE_SIZE
+  const pageCount = Math.max(1, Math.ceil(TOTAL_RESULTS / effectivePageSize))
+  const currentPage = Math.min(Math.max(1, page), pageCount)
+  const pages = buildPageList(currentPage, pageCount)
+  const isFirst = currentPage <= 1
+  const isLast = currentPage >= pageCount
+
+  const handlePageSizeChange = (key: UiSelectKey | null) => {
+    setPageSize(key)
+    setPage(1)
+  }
+
+  return (
+    <div className='bg-surface-secondary flex flex-col gap-6 rounded-3xl p-6'>
+      <header className='flex items-center gap-3'>
+        <RefreshIcon className='size-6' />
+        <h3 className='text-h4'>Most recent Borrow Offers</h3>
+      </header>
+
+      <UiTable variant='secondary'>
+        <UiTable.ScrollContainer>
+          <UiTable.Content aria-label='Most recent Borrow Offers' selectionMode='single'>
+            <UiTable.Header>
+              <UiTable.Column isRowHeader>Asset</UiTable.Column>
+              <UiTable.Column>Amount</UiTable.Column>
+              <UiTable.Column>Rate</UiTable.Column>
+              <UiTable.Column>Term</UiTable.Column>
+              <UiTable.Column>Status</UiTable.Column>
+            </UiTable.Header>
+            <UiTable.Body items={OFFERS}>
+              {offer => (
+                <UiTable.Row id={offer.id}>
+                  <UiTable.Cell>{offer.asset}</UiTable.Cell>
+                  <UiTable.Cell>{offer.amount}</UiTable.Cell>
+                  <UiTable.Cell>{offer.rate}</UiTable.Cell>
+                  <UiTable.Cell>{offer.term}</UiTable.Cell>
+                  <UiTable.Cell>
+                    <Chip color={STATUS_CHIP[offer.status].color} variant='soft' size='sm'>
+                      {STATUS_CHIP[offer.status].label}
+                    </Chip>
+                  </UiTable.Cell>
+                </UiTable.Row>
+              )}
+            </UiTable.Body>
+          </UiTable.Content>
+        </UiTable.ScrollContainer>
+        <UiTable.Footer className='pr-2 pl-4'>
+          <Pagination>
+            <Pagination.Summary>
+              <span>Showing</span>
+              <UiSelect
+                options={PAGE_SIZE_OPTIONS}
+                value={pageSize}
+                onChange={handlePageSizeChange}
+                className='w-20'
+              />
+              <span>of {TOTAL_RESULTS} results</span>
+            </Pagination.Summary>
+            <Pagination.Content>
+              <Pagination.Item>
+                <Pagination.Previous isDisabled={isFirst} onPress={() => setPage(currentPage - 1)}>
+                  <Pagination.PreviousIcon />
+                  Previous
+                </Pagination.Previous>
+              </Pagination.Item>
+              {pages.map((p, idx) =>
+                p === 'ellipsis' ? (
+                  <Pagination.Item key={`e-${idx}`}>
+                    <Pagination.Ellipsis />
+                  </Pagination.Item>
+                ) : (
+                  <Pagination.Item key={p}>
+                    <Pagination.Link isActive={p === currentPage} onPress={() => setPage(p)}>
+                      {p}
+                    </Pagination.Link>
+                  </Pagination.Item>
+                ),
+              )}
+              <Pagination.Item>
+                <Pagination.Next isDisabled={isLast} onPress={() => setPage(currentPage + 1)}>
+                  Next
+                  <Pagination.NextIcon />
+                </Pagination.Next>
+              </Pagination.Item>
+            </Pagination.Content>
+          </Pagination>
+        </UiTable.Footer>
+      </UiTable>
+    </div>
+  )
+}
+
+function ModalDemo() {
+  const [isOpen, setIsOpen] = useState(false)
+  return (
+    <>
+      <UiButton onPress={() => setIsOpen(true)}>Open modal</UiButton>
+      <UiModal
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        title='Confirm action'
+        footer={
+          <div className='flex justify-end gap-2'>
+            <UiButton variant='ghost' onPress={() => setIsOpen(false)}>
+              Cancel
+            </UiButton>
+            <UiButton onPress={() => setIsOpen(false)}>Confirm</UiButton>
+          </div>
+        }
+      >
+        <p>Modal body. Uses overlay surface and shadow tokens from Figma.</p>
+      </UiModal>
+    </>
+  )
+}
+
+export default function DesignSystemPage() {
+  const [asset, setAsset] = useState<UiSelectKey | null>('btc')
+  const [assetSearch, setAssetSearch] = useState<UiSelectKey | null>(null)
+
+  return (
+    <div className='flex flex-col'>
+      <header className='py-8'>
+        <p className='text-muted text-xs font-medium tracking-wide uppercase'>Design system</p>
+        <h1 className='text-h1 mt-2'>System</h1>
+        <p className='text-muted mt-3 max-w-2xl text-base'>
+          Tokens and base components extracted from the Figma «Lending UX / System» page.
+        </p>
+      </header>
+
+      <Section title='Typography' description='Inter for sans, system mono fallback.'>
+        <div className='flex flex-col gap-3'>
+          {TYPOGRAPHY.map(t => (
+            <div
+              key={t.name}
+              className='border-separator flex items-baseline justify-between gap-6 border-b pb-3 last:border-b-0'
+            >
+              <span className={t.className}>{t.name} — The quick brown fox jumps</span>
+              <span className='text-muted shrink-0 font-mono text-xs'>{t.meta}</span>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      <Section
+        title='Colors'
+        description='Semantic families. HeroUI derives hover/soft via color-mix.'
+      >
+        <div className='flex flex-col gap-10'>
+          {COLOR_FAMILIES.map(family => (
+            <div key={family.name}>
+              <h3 className='text-h4'>{family.name}</h3>
+              <p className='text-muted mt-1 text-sm'>{family.description}</p>
+              <div className='mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4'>
+                {family.swatches.map(s => (
+                  <SwatchTile key={s.label} {...s} />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      <Section title='Radii' description='Derived from `--radius: 0.75rem` (12px).'>
+        <div className='grid grid-cols-2 gap-3 sm:grid-cols-4'>
+          {RADII.map(r => (
+            <div key={r.label} className='border-border bg-surface flex flex-col gap-2 border p-3'>
+              <div className={`bg-default h-12 ${r.className}`} />
+              <div className='flex items-baseline justify-between'>
+                <span className='text-sm font-medium'>{r.label}</span>
+                <span className='text-muted font-mono text-xs'>{r.value}</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      <Section title='Shadows' description='Field, surface (elevated card) and overlay (modals).'>
+        <div className='grid grid-cols-1 gap-6 sm:grid-cols-3'>
+          {SHADOWS.map(s => (
+            <div
+              key={s.label}
+              className={`bg-surface flex h-24 items-center justify-center rounded-lg ${s.className}`}
+            >
+              <span className='font-mono text-xs'>{s.label}</span>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      <Section title='Button' description='Variants, sizes, states.'>
+        <Row label='Variants'>
+          {BUTTON_VARIANTS.map(v => (
+            <UiButton key={v} variant={v}>
+              {v}
+            </UiButton>
+          ))}
+        </Row>
+        <Row label='Sizes'>
+          {BUTTON_SIZES.map(s => (
+            <UiButton key={s} size={s}>
+              Size {s}
+            </UiButton>
+          ))}
+        </Row>
+        <Row label='States'>
+          <UiButton>Default</UiButton>
+          <UiButton isLoading loadingText='Saving…'>
+            Save
+          </UiButton>
+          <UiButton isDisabled>Disabled</UiButton>
+        </Row>
+        <Row label='With icons'>
+          <UiButton startContent={<SearchIcon className='size-4' />}>Search</UiButton>
+          <UiButton variant='secondary' startContent={<PlusIcon className='size-4' />}>
+            Add member
+          </UiButton>
+          <UiButton variant='ghost' startContent={<CoinsIcon className='size-4' />}>
+            Go back
+          </UiButton>
+          <UiButton variant='danger' startContent={<TrashIcon className='size-4' />}>
+            Delete
+          </UiButton>
+        </Row>
+        <Row label='Icon-only'>
+          {BUTTON_SIZES.map(s => (
+            <UiButton key={s} size={s} isIconOnly aria-label='Add'>
+              <PlusIcon className='size-4' />
+            </UiButton>
+          ))}
+        </Row>
+      </Section>
+
+      <Section title='Input' description='Label, description, error, leading/trailing content.'>
+        <div className='grid max-w-xl grid-cols-1 gap-5'>
+          <UiInput label='Email address' placeholder='name@email.com' />
+          <UiInput
+            label='Your name'
+            placeholder='Mary'
+            description="We'll never share this with anyone else"
+            isRequired
+          />
+          <UiInput
+            label='Your name'
+            defaultValue='Mary387'
+            errorMessage='Please enter only letters'
+          />
+          <UiInput label='Memo' placeholder='Optional' isDisabled defaultValue='locked' />
+          <UiInput
+            label='Search'
+            placeholder='Search assets'
+            startContent={<SearchIcon className='size-4' />}
+          />
+          <UiInput
+            label='Set a price'
+            startContent={<span className='text-muted text-sm'>$</span>}
+            endContent={<span className='text-muted text-sm'>USD</span>}
+            defaultValue='10'
+            description='What customers would pay'
+          />
+        </div>
+      </Section>
+
+      <Section
+        title='Select'
+        description='Plain dropdown and searchable combo-box share the same API.'
+      >
+        <div className='grid max-w-xl grid-cols-1 gap-5'>
+          <UiSelect
+            label='Asset'
+            placeholder='Pick an asset'
+            options={ASSETS}
+            value={asset}
+            onChange={setAsset}
+          />
+          <UiSelect
+            label='Asset (searchable)'
+            placeholder='Type to filter…'
+            withSearch
+            options={ASSETS}
+            value={assetSearch}
+            onChange={setAssetSearch}
+          />
+          <UiSelect
+            label='Asset (error)'
+            placeholder='Pick an asset'
+            options={ASSETS}
+            errorMessage='Please pick an asset.'
+          />
+          <UiSelect label='Asset (disabled)' placeholder='—' options={ASSETS} isDisabled />
+        </div>
+      </Section>
+
+      <Section title='Modal' description='Overlay dialog with header, body, footer, close button.'>
+        <ModalDemo />
+      </Section>
+
+      <Section
+        title='Card'
+        description='Surface container with shadow, padding and compound parts.'
+      >
+        <UiCard className='max-w-md'>
+          <UiCard.Header>
+            <UiCard.Title>Liquid Bitcoin</UiCard.Title>
+            <UiCard.Description>L-BTC · Liquid sidechain asset</UiCard.Description>
+          </UiCard.Header>
+          <UiCard.Content>
+            <p className='text-display'>1.2345 L-BTC</p>
+            <p className='text-muted text-sm'>≈ $68,420</p>
+          </UiCard.Content>
+          <UiCard.Footer>
+            <UiButton size='sm'>Supply</UiButton>
+          </UiCard.Footer>
+        </UiCard>
+      </Section>
+
+      <Section
+        title='Spinner'
+        description='Loading indicator. Sizes sm / md / lg / xl; status colors.'
+      >
+        <div className='flex flex-wrap items-end gap-6'>
+          <UiSpinner size='sm' />
+          <UiSpinner size='md' />
+          <UiSpinner size='lg' />
+          <UiSpinner size='xl' />
+          <UiSpinner color='success' />
+          <UiSpinner color='warning' />
+          <UiSpinner color='danger' />
+        </div>
+      </Section>
+
+      <Section
+        title='Table'
+        description='Sortable, selectable rows. Composable with status chips and pagination.'
+      >
+        <TableDemo />
+      </Section>
+    </div>
+  )
+}
diff --git a/web-v2/src/styles/components.css b/web-v2/src/styles/components.css
new file mode 100644
index 0000000..032d485
--- /dev/null
+++ b/web-v2/src/styles/components.css
@@ -0,0 +1,62 @@
+@layer components {
+  .input:where(:focus, :focus-visible, [data-focused='true'], [data-focus-visible='true']) {
+    --field-shadow: 0 0 #0000;
+  }
+
+  .table-root--secondary .table__header {
+    background-color: transparent;
+    border-bottom-width: 0;
+  }
+
+  .table-root--secondary .table__column {
+    background-color: var(--surface);
+    border-radius: 0;
+    border-bottom: 4px solid var(--surface-secondary);
+  }
+
+  .table-root--secondary .table__column:first-child {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+
+  .table-root--secondary .table__column:last-child {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+
+  .table-root--secondary .table__row .table__cell {
+    background-color: var(--surface);
+    border-bottom: 4px solid var(--surface-secondary);
+  }
+
+  .table-root--secondary .table__row .table__cell:first-child {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+
+  .table-root--secondary .table__row .table__cell:last-child {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+
+  .table-root--secondary .table__row[data-hovered='true'] .table__cell {
+    background-color: var(--accent-soft-hover);
+  }
+
+  .table-root--secondary .table__row[data-selected='true'] .table__cell {
+    background-color: var(--accent-soft);
+  }
+
+  .table-root--secondary .table__footer {
+    background-color: var(--surface);
+    border-radius: 4px;
+  }
+
+  .pagination__link {
+    border-radius: 4px;
+  }
+
+  .pagination__summary {
+    gap: 0.75rem;
+  }
+}
diff --git a/web-v2/src/styles/index.css b/web-v2/src/styles/index.css
index 324ffaa..241b8cb 100644
--- a/web-v2/src/styles/index.css
+++ b/web-v2/src/styles/index.css
@@ -1,16 +1,15 @@
 @import 'tailwindcss';
 @import '@heroui/react/styles';
-
-/* TODO: Put design system tokens here */
-/* :root {} */
-
-/* TODO: Put theme overrides here */
-/* @theme {} */
+@import './tokens.css';
+@import './theme.css';
+@import './components.css';
 
 * {
   box-sizing: border-box;
 }
 
 body {
-  font-family: system-ui, sans-serif;
+  font-family: var(--font-sans);
+  background-color: var(--color-background);
+  color: var(--color-foreground);
 }
diff --git a/web-v2/src/styles/theme.css b/web-v2/src/styles/theme.css
new file mode 100644
index 0000000..171c833
--- /dev/null
+++ b/web-v2/src/styles/theme.css
@@ -0,0 +1,70 @@
+@theme inline {
+  --shadow-focus-ring: var(--focus-ring);
+  --shadow-focus-ring-field: var(--focus-ring-field);
+  --color-field-hover: var(--field-hover);
+
+  --color-accent-hover: var(--accent-hover);
+  --color-default-hover: var(--default-hover);
+  --color-success-hover: var(--success-hover);
+  --color-warning-hover: var(--warning-hover);
+  --color-danger-hover: var(--danger-hover);
+}
+
+@theme {
+  --font-sans: 'Inter Variable', Inter, system-ui, sans-serif;
+  --font-mono:
+    ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+
+  --text-h1: 2.25rem;
+  --text-h1--line-height: 2.5rem;
+  --text-h1--font-weight: 800;
+
+  --text-display: 1.875rem;
+  --text-display--line-height: 2.25rem;
+  --text-display--font-weight: 700;
+
+  --text-h2: 1.5rem;
+  --text-h2--line-height: 2rem;
+  --text-h2--font-weight: 700;
+
+  --text-h3: 1.25rem;
+  --text-h3--line-height: 1.75rem;
+  --text-h3--font-weight: 600;
+
+  --text-h4: 1rem;
+  --text-h4--line-height: 1.5rem;
+  --text-h4--font-weight: 600;
+}
+
+:root {
+  --z-base: 0;
+  --z-dropdown: 1000;
+  --z-sticky: 1100;
+  --z-overlay: 1200;
+  --z-modal: 1300;
+  --z-popover: 1400;
+  --z-toast: 1500;
+  --z-tooltip: 1600;
+}
+
+@utility z-dropdown {
+  z-index: var(--z-dropdown);
+}
+@utility z-sticky {
+  z-index: var(--z-sticky);
+}
+@utility z-overlay {
+  z-index: var(--z-overlay);
+}
+@utility z-modal {
+  z-index: var(--z-modal);
+}
+@utility z-popover {
+  z-index: var(--z-popover);
+}
+@utility z-toast {
+  z-index: var(--z-toast);
+}
+@utility z-tooltip {
+  z-index: var(--z-tooltip);
+}
diff --git a/web-v2/src/styles/tokens.css b/web-v2/src/styles/tokens.css
new file mode 100644
index 0000000..34ca92e
--- /dev/null
+++ b/web-v2/src/styles/tokens.css
@@ -0,0 +1,86 @@
+@layer base {
+  :root {
+    --radius: 0.75rem;
+
+    --background: #f5f5f5;
+    --background-secondary: #ebebeb;
+    --background-tertiary: #e1e1e1;
+    --background-inverse: #18181b;
+
+    --foreground: #18181b;
+    --muted: #71717a;
+    --link: #18181b;
+    --segment: #ffffff;
+    --segment-foreground: #18181b;
+
+    --surface: #ffffff;
+    --surface-foreground: var(--foreground);
+    --surface-secondary: #fafafa;
+    --surface-secondary-foreground: var(--foreground);
+    --surface-tertiary: #efeff0;
+    --surface-tertiary-foreground: var(--foreground);
+
+    --overlay: #ffffff;
+    --overlay-foreground: var(--foreground);
+
+    --default: #ebebec;
+    --default-foreground: #18181b;
+
+    --accent: #2706cf;
+    --accent-hover: #573ed5;
+    --accent-foreground: #fcfcfc;
+    --accent-soft: rgba(39, 6, 207, 0.15);
+    --accent-soft-foreground: var(--accent);
+    --accent-soft-hover: rgba(39, 6, 207, 0.2);
+
+    --default-hover: #e1e1e2;
+
+    --success: #17c964;
+    --success-hover: #21b55d;
+    --success-foreground: #18181b;
+    --success-soft: rgba(23, 201, 100, 0.15);
+    --success-soft-foreground: var(--success);
+    --success-soft-hover: rgba(23, 201, 100, 0.2);
+
+    --warning: #f5a524;
+    --warning-hover: #dc952a;
+    --warning-foreground: #18181b;
+    --warning-soft: rgba(245, 165, 36, 0.15);
+    --warning-soft-foreground: var(--warning);
+    --warning-soft-hover: rgba(220, 149, 42, 0.2);
+
+    --danger: #ff383c;
+    --danger-hover: #ff5551;
+    --danger-foreground: #fcfcfc;
+    --danger-soft: rgba(255, 56, 60, 0.15);
+    --danger-soft-foreground: var(--danger);
+    --danger-soft-hover: rgba(255, 85, 81, 0.2);
+
+    --field-background: #ffffff;
+    --field-foreground: #18181b;
+    --field-placeholder: #71717a;
+    --field-border: transparent;
+    --field-hover: rgba(249, 249, 249, 0.92);
+
+    --border: #dedee0;
+    --separator: #e4e4e7;
+    --separator-secondary: #d7d7d7;
+    --separator-tertiary: #cdcdce;
+
+    --focus: var(--accent);
+    --backdrop: rgba(0, 0, 0, 0.5);
+
+    --field-shadow:
+      0 0 1px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
+      0 2px 4px 0 rgba(0, 0, 0, 0.04);
+    --surface-shadow:
+      0 0 1px 0 rgba(0, 0, 0, 0.06), 0 1px 2px 0 rgba(0, 0, 0, 0.06),
+      0 2px 4px 0 rgba(0, 0, 0, 0.04);
+    --overlay-shadow:
+      0 2px 8px 0 rgba(0, 0, 0, 0.06), 0 -6px 12px 0 rgba(0, 0, 0, 0.03),
+      0 14px 28px 0 rgba(0, 0, 0, 0.08);
+
+    --focus-ring: 0 0 0 2px var(--background), 0 0 0 4px var(--accent);
+    --focus-ring-field: 0 0 0 2px var(--accent);
+  }
+}
diff --git a/web-v2/src/vite-env.d.ts b/web-v2/src/vite-env.d.ts
index 9a88a97..b91cb4c 100644
--- a/web-v2/src/vite-env.d.ts
+++ b/web-v2/src/vite-env.d.ts
@@ -9,3 +9,5 @@ interface ImportMetaEnv {
 interface ImportMeta {
   readonly env: ImportMetaEnv
 }
+
+declare module '@fontsource-variable/inter'
diff --git a/web-v2/tailwind.config.js b/web-v2/tailwind.config.js
deleted file mode 100644
index 562d80c..0000000
--- a/web-v2/tailwind.config.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {
-      colors: {
-        brand: {
-          50: 'var(--token-color-brand-50)',
-          500: 'var(--token-color-brand-500)',
-          700: 'var(--token-color-brand-700)',
-        },
-      },
-    },
-  },
-  plugins: [],
-}