diff --git a/web/src/lib/ui/app/tokens.md b/web/src/lib/ui/app/tokens.md
new file mode 100644
index 0000000..b112ae5
--- /dev/null
+++ b/web/src/lib/ui/app/tokens.md
@@ -0,0 +1,22 @@
+# Design tokens (EvoBGP WebUI)
+
+Базовая тема — [shadcn-svelte](https://www.shadcn-svelte.com), переменные в [`src/routes/layout.css`](../../routes/layout.css).
+
+## Layout
+
+| Token | Значение | Tailwind |
+|-------|----------|----------|
+| `--page-padding` | 1.5rem | `p-page` через `p-[var(--page-padding)]` |
+| `--section-gap` | 1.5rem | `gap-section` |
+
+## Радиусы
+
+`--radius-sm` … `--radius-xl` — из `--radius` (shadcn).
+
+## Семантика
+
+`success`, `warning`, `info`, `destructive` — классы `text-success`, `bg-warning/10`, `border-info` и т.д.
+
+## Размеры компонентов
+
+Button/Input: `sm` | `default` | `lg` — через `buttonVariants` и классы input в `ui/core`.
diff --git a/web/src/routes/layout.css b/web/src/routes/layout.css
index c983beb..e010c7c 100644
--- a/web/src/routes/layout.css
+++ b/web/src/routes/layout.css
@@ -40,6 +40,9 @@
 	--sidebar-accent-foreground: oklch(0.205 0 0);
 	--sidebar-border: oklch(0.922 0 0);
 	--sidebar-ring: oklch(0.708 0 0);
+	/* EvoBGP page layout */
+	--page-padding: 1.5rem;
+	--section-gap: 1.5rem;
 }
 
 .dark {
@@ -118,6 +121,8 @@
 	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-ring: var(--sidebar-ring);
+	--spacing-page: var(--page-padding);
+	--spacing-section: var(--section-gap);
 }
 
 @layer base {