Add Button design system and Storybook Solid setup

add Button component and Storybook configuration
move TypeScript lint-staged and @astrojs/check to devDependencies
2026-05-27 15:10:38 +03:00 · 2026-05-04 11:38:50 +03:00 · 2026-04-29 15:45:04 +03:00 · 2026-04-29 15:38:36 +03:00 · 2026-04-29 15:33:42 +03:00 · 2026-04-29 15:31:26 +03:00
61 changed files with 6537 additions and 768 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -28,3 +28,6 @@ pnpm-debug.log*

 # zed setting folder
 .zed/
+
+*storybook.log
+storybook-static
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1,2 @@
+#!/usr/bin/env sh
+./node_modules/.bin/lint-staged
--- a/.node-version
+++ b/.node-version
@@ -0,0 +1 @@
+24.13.0
--- a/.npmrc
+++ b/.npmrc
@@ -1 +0,0 @@
-package-lock=false
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -0,0 +1,20 @@
+import tailwindcss from "@tailwindcss/vite";
+import type { StorybookConfig } from "storybook-solidjs-vite";
+
+const config: StorybookConfig = {
+	stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+	addons: ["@storybook/addon-a11y", "@storybook/addon-docs"],
+	framework: "storybook-solidjs-vite",
+	viteFinal: async (config) => {
+		config.plugins ||= [];
+		config.plugins.push(tailwindcss());
+
+		return config;
+	},
+	core: {
+		disableTelemetry: true,
+		disableWhatsNewNotifications: true,
+		enableCrashReports: false,
+	},
+};
+export default config;
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -0,0 +1,44 @@
+import type { Preview } from "storybook-solidjs-vite";
+import "../src/app/styles/global.css";
+
+const preview: Preview = {
+	globalTypes: {
+		theme: {
+			name: "Theme",
+			description: "Global theme for components",
+			defaultValue: "light",
+			toolbar: {
+				icon: "mirror",
+				items: [
+					{ value: "light", title: "Light" },
+					{ value: "dark", title: "Dark" },
+				],
+				dynamicTitle: true,
+			},
+		},
+	},
+	decorators: [
+		(Story, context) => {
+			document.documentElement.dataset.theme = context.globals.theme ?? "light";
+
+			return (
+				<div style={{ padding: "16px" }}>
+					<Story />
+				</div>
+			);
+		},
+	],
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+		a11y: {
+			test: "todo",
+		},
+	},
+};
+
+export default preview;
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,5 +1,25 @@
 // @ts-check
-import { defineConfig } from 'astro/config';
+import solid from "@astrojs/solid-js";
+import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from "astro/config";

-// https://astro.build/config
-export default defineConfig({});
+const alias = {
+	"@app": new URL("./src/app", import.meta.url).pathname,
+	"@pageModules": new URL("./src/pageModules", import.meta.url).pathname,
+	"@widgets": new URL("./src/widgets", import.meta.url).pathname,
+	"@features": new URL("./src/features", import.meta.url).pathname,
+	"@entities": new URL("./src/entities", import.meta.url).pathname,
+	"@shared": new URL("./src/shared", import.meta.url).pathname,
+	"@mocks": new URL("./src/__mocks__", import.meta.url).pathname,
+};
+
+export default defineConfig({
+	vite: {
+		plugins: [tailwindcss()],
+		resolve: {
+			alias,
+		},
+	},
+	server: {},
+	integrations: [solid({ devtools: true })],
+});
--- a/biome.json
+++ b/biome.json
@@ -0,0 +1,47 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.4.13/schema.json",
+	"vcs": {
+		"enabled": true,
+		"clientKind": "git",
+		"useIgnoreFile": true
+	},
+	"files": {
+		"includes": ["**", "!!**/dist"]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab"
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double"
+		}
+	},
+	"assist": {
+		"enabled": true,
+		"actions": {
+			"source": {
+				"organizeImports": "on"
+			}
+		}
+	},
+	"overrides": [
+		{
+			"includes": ["**/*.astro"],
+			"linter": {
+				"rules": {
+					"correctness": {
+						"noUnusedImports": "off",
+						"noUnusedVariables": "off"
+					}
+				}
+			}
+		}
+	]
+}
--- a/package.json
+++ b/package.json
@@ -1,20 +1,53 @@
 {
-  "name": "nikitapozd_website",
-  "type": "module",
-  "version": "0.0.1",
-  "engines": {
-    "node": "24.13.0",
-    "pnpm": ">=9.0.0"
-  },
-  "enginesStrict": true,
-  "scripts": {
-    "dev": "astro dev",
-    "build": "astro build",
-    "preview": "astro preview",
-    "astro": "astro",
-    "preinstall": "node ./scripts/enforce-pnpm.mjs"
-  },
-  "dependencies": {
-    "astro": "^5.16.10"
-  }
+	"name": "nikitapozd_website",
+	"type": "module",
+	"version": "0.0.1",
+	"engines": {
+		"node": ">=24.13.0 <25",
+		"pnpm": ">=10.28.0"
+	},
+	"enginesStrict": true,
+	"scripts": {
+		"dev": "astro dev",
+		"build": "astro build",
+		"preview": "astro preview",
+		"astro": "astro",
+		"preinstall": "node ./scripts/enforce-pnpm.mjs",
+		"lint": "astro check && biome check .",
+		"format": "biome format . --write",
+		"prepare": "husky",
+		"ci": "astro check && biome ci .",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"lint-staged": {
+		"*.{js,jsx,ts,tsx,json,jsonc,css,scss}": [
+			"biome check --no-errors-on-unmatched"
+		],
+		"*.{astro}": [
+			"astro check"
+		]
+	},
+	"dependencies": {
+		"@astrojs/solid-js": "^6.0.1",
+		"@tailwindcss/vite": "^4.2.4",
+		"@webtui/css": "^0.1.7",
+		"astro": "^6.3.1",
+		"solid-js": "^1.9.13",
+		"tailwindcss": "^4.2.4"
+	},
+	"devDependencies": {
+		"@astrojs/check": "^0.9.9",
+		"@biomejs/biome": "2.4.13",
+		"@storybook/addon-a11y": "^10.4.1",
+		"@storybook/addon-docs": "^10.4.1",
+		"husky": "^9.1.7",
+		"lint-staged": "^16.4.0",
+		"sass": "^1.100.0",
+		"solid-devtools": "^0.34.5",
+		"storybook": "^10.4.1",
+		"storybook-solidjs-vite": "^10.0.13",
+		"typescript": "^6.0.3",
+		"vite-plugin-solid": "^2.11.12"
+	}
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/scripts/enforce-pnpm.mjs
+++ b/scripts/enforce-pnpm.mjs
@@ -1,6 +1,6 @@
-if (!process.env.npm_execpath || !process.env.npm_execpath.includes('pnpm')) {
-    console.error(
-        'Ошибка: используйте только `pnpm` для установки зависимостей (запускать: `pnpm install`).'
-    );
-    process.exit(1);
+if (!process.env.npm_execpath?.includes("pnpm")) {
+	console.error(
+		"Ошибка: используйте только `pnpm` для установки зависимостей (запускать: `pnpm install`).",
+	);
+	process.exit(1);
 }
--- a/src/mocks/demo.ts
+++ b/src/mocks/demo.ts
@@ -0,0 +1,43 @@
+export const articles = [
+	{
+		title: "Нативный light/dark без лишнего JS",
+		tag: "CSS / UI",
+		meta: "06.04.2026",
+		desc: "Разбор переключения темы, системных предпочтений и аккуратной деградации интерфейса.",
+	},
+	{
+		title: "Astro + WebTUI: терминальный UI без боли",
+		tag: "ASTRO / WEBTUI",
+		meta: "02.04.2026",
+		desc: "Как подключить стили, разнести слои и не потерять читаемость в гибридном интерфейсе.",
+	},
+	{
+		title: "React-архитектура для pet-проектов",
+		tag: "REACT / TS",
+		meta: "27.03.2026",
+		desc: "Минимальный, но живучий сетап: фичи, shared-слой, UI-кит и понятные контракты.",
+	},
+];
+
+export const projects = [
+	{
+		title: "UI System",
+		type: "DESIGN SYSTEM",
+		status: "ONLINE",
+		desc: "Компоненты и паттерны для React / Solid с единым visual language.",
+	},
+	{
+		title: "Lab Notes",
+		type: "BLOG",
+		status: "SYNCED",
+		desc: "Статьи, заметки и эксперименты по фронтенду, DX и интерфейсам.",
+	},
+	{
+		title: "Experiments",
+		type: "PLAYGROUND",
+		status: "WIP",
+		desc: "Графика, WebGPU, 3D и интерактивные эксперименты.",
+	},
+];
+
+export const contacts = ["GitHub", "Telegram", "Email", "LinkedIn"];
--- a/src/mocks/index.ts
+++ b/src/mocks/index.ts
@@ -0,0 +1 @@
+export * from "./demo.ts";
--- a/src/app/layouts/BaseLayout/BaseLayout.astro
+++ b/src/app/layouts/BaseLayout/BaseLayout.astro
@@ -0,0 +1,44 @@
+---
+import "@app/styles/global.css";
+
+interface Props {
+	title?: string;
+	description?: string;
+}
+
+const { title = "NikitaPozd Dev", description = "" } = Astro.props;
+---
+
+<html lang="ru" data-theme="dark">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="generator" content={Astro.generator} />
+    <meta name="description" content={description} />
+    <title>{title}</title>
+
+    <script is:inline>
+      const storageKey = "theme";
+      const root = document.documentElement;
+      const savedTheme = localStorage.getItem(storageKey);
+
+      if (savedTheme === "light" || savedTheme === "dark") {
+        root.dataset.theme = savedTheme;
+      } else {
+        const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+        root.dataset.theme = prefersDark ? "dark" : "light";
+      }
+    </script>
+  </head>
+  <body>
+    <slot />
+
+    <script is:inline>
+      window.__setTheme = (theme) => {
+        document.documentElement.dataset.theme = theme;
+        localStorage.setItem("theme", theme);
+      };
+    </script>
+  </body>
+</html>
--- a/src/app/layouts/BaseLayout/index.ts
+++ b/src/app/layouts/BaseLayout/index.ts
@@ -0,0 +1 @@
+export { default } from "./BaseLayout.astro";
--- a/src/app/styles/global.css
+++ b/src/app/styles/global.css
@@ -0,0 +1,3 @@
+@import "tailwindcss";
+
+@import "../../shared/designSystem/styles/global.css";
--- a/src/entities/.gitkeep
+++ b/src/entities/.gitkeep
--- a/src/features/.gitkeep
+++ b/src/features/.gitkeep
--- a/src/pageModules/demo/index.ts
+++ b/src/pageModules/demo/index.ts
@@ -0,0 +1 @@
+export { default } from "./ui/DemoPage.astro";
--- a/src/pageModules/demo/ui/DemoPage.astro
+++ b/src/pageModules/demo/ui/DemoPage.astro
@@ -0,0 +1,680 @@
+---
+import { articles, contacts, projects } from "@mocks/demo.ts";
+---
+
+<div class="page-shell">
+	<div class="bg-glow"></div>
+	<div class="bg-grid"></div>
+
+	<header class="topbar box">
+		<div class="brand">
+			<div class="brand-mark" aria-hidden="true"></div>
+			<div>
+				<div class="eyebrow">ctOS / profile</div>
+				<div class="brand-title">nikitapozd.dev</div>
+			</div>
+		</div>
+
+		<nav class="nav">
+			<a class="nav-link nav-link--active" href="#home">Главная</a>
+			<a class="nav-link" href="#articles">Статьи</a>
+			<a class="nav-link" href="#projects">Проекты</a>
+			<a class="nav-link" href="#about">Обо мне</a>
+			<a class="nav-link" href="#contact">Контакты</a>
+		</nav>
+	</header>
+
+	<main class="layout">
+		<section id="home" class="hero-grid">
+			<section class="panel hero box">
+				<div class="hero-head">
+					<div>
+						<div class="badge-line">
+							<span is-="badge" variant-="cyan">personal node / online</span>
+						</div>
+						<h1>Никита Поздняков</h1>
+						<p class="hero-text">
+							Фронтенд-разработчик. Делаю быстрые, аккуратные интерфейсы на React,
+							TypeScript, Next.js и Astro. Люблю дизайн-системы, терминальную эстетику и
+							чуть-чуть киберпанка.
+						</p>
+					</div>
+
+					<aside class="status-card box">
+						<div class="status-row status-row--head">
+							<span>status</span>
+							<span>v0.01</span>
+						</div>
+						<div class="status-row"><span>stack</span><span>React / TS</span></div>
+						<div class="status-row"><span>focus</span><span>DX / UI</span></div>
+						<div class="status-row"><span>mode</span><span>building</span></div>
+						<div class="status-row"><span>location</span><span>remote</span></div>
+					</aside>
+				</div>
+
+				<div class="stat-grid">
+					<article class="stat box"><span>Статьи</span><strong>013</strong></article>
+					<article class="stat box"><span>Проекты</span><strong>008</strong></article>
+					<article class="stat box"><span>Опыт с UI</span><strong>06+</strong></article>
+				</div>
+
+				<div class="hero-actions">
+					<button is-="button" variant-="foreground0">Смотреть статьи</button>
+					<button is-="button" variant-="cyan">Открыть проекты</button>
+				</div>
+			</section>
+
+			<div class="side-stack">
+				<section class="panel box tone-lime">
+					<div class="section-head">
+						<span class="eyebrow lime">mission feed</span>
+						<span class="muted">active</span>
+					</div>
+					<div class="mission-list">
+						<div class="mission box">Собрать личный сайт с сильной визуальной системой</div>
+						<div class="mission box">Показать статьи, проекты и стек без визуального шума</div>
+						<div class="mission box">Смешать WebTUI и HUD Watch Dogs в современный лендинг</div>
+					</div>
+				</section>
+
+				<section class="panel box">
+					<div class="section-head">
+						<span class="eyebrow">quick links</span>
+						<span class="muted">sync</span>
+					</div>
+					<div class="link-grid">
+						{contacts.map((item) => (
+							<a class="quick-link box" href="#contact">{item}</a>
+						))}
+					</div>
+				</section>
+			</div>
+		</section>
+
+		<section class="content-grid">
+			<section id="about" class="panel box">
+				<div class="section-head">
+					<div>
+						<div class="eyebrow">about.exe</div>
+						<h2>Обо мне</h2>
+					</div>
+					<span is-="badge" variant-="cyan">profile</span>
+				</div>
+
+				<div class="prose-copy">
+					<p>
+						Мне нравится делать интерфейсы, в которых есть структура, ритм и понятная
+						логика. Люблю, когда дизайн не спорит с контентом, а усиливает его.
+					</p>
+					<p>
+						Этот макет опирается на спокойную структуру персонального сайта, но сверху
+						добавляет HUD-слои, статусы, терминальные компоненты и акцентные панели в
+						духе ctOS.
+					</p>
+				</div>
+
+				<div class="tag-grid">
+					{["Next.js", "TypeScript", "Design Systems", "Astro", "Accessibility", "Motion"].map((item) => (
+						<span is-="badge" variant-="foreground2">{item}</span>
+					))}
+				</div>
+			</section>
+
+			<section id="articles" class="panel box tone-cyan">
+				<div class="section-head">
+					<div>
+						<div class="eyebrow">articles.log</div>
+						<h2>Последние статьи</h2>
+					</div>
+					<button is-="button" variant-="foreground3">Все записи</button>
+				</div>
+
+				<div class="card-list">
+					{articles.map((article) => (
+						<article class="article-card box">
+							<div class="card-meta">
+								<span>{article.tag}</span>
+								<span class="accent">{article.meta}</span>
+							</div>
+							<h3>{article.title}</h3>
+							<p>{article.desc}</p>
+						</article>
+					))}
+				</div>
+			</section>
+		</section>
+
+		<section id="projects" class="panel box tone-lime">
+			<div class="section-head">
+				<div>
+					<div class="eyebrow lime">projects.map</div>
+					<h2>Избранные проекты</h2>
+				</div>
+				<span class="muted">3 active nodes</span>
+			</div>
+
+			<div class="project-grid">
+				{projects.map((project) => (
+					<article class="project-card box">
+						<div class="card-meta">
+							<span class="accent-lime">{project.type}</span>
+							<span>{project.status}</span>
+						</div>
+						<h3>{project.title}</h3>
+						<p>{project.desc}</p>
+						<div class="project-foot">
+							<span>open</span>
+							<span>→</span>
+						</div>
+					</article>
+				))}
+			</div>
+		</section>
+
+		<section class="footer-grid">
+			<section class="panel box">
+				<div class="eyebrow">terminal / broadcast</div>
+				<pre is-="pre" class="terminal-block"><code>&gt; status: available for frontend / ui work
+&gt; stack: react nextjs typescript astro
+&gt; interests: design systems webtui webgpu motion</code></pre>
+			</section>
+
+			<section id="contact" class="panel box tone-cyan">
+				<div class="eyebrow">contact</div>
+				<h2>Давай делать что-то красивое и удобное</h2>
+				<p class="contact-copy">
+					Блог, сайт-портфолио, продуктовый лендинг или внутренняя дизайн-система — этот
+					шаблон можно развить в полноценный персональный сайт.
+				</p>
+				<div class="hero-actions">
+					<button is-="button" variant-="foreground0">Написать мне</button>
+					<button is-="button" variant-="cyan">GitHub</button>
+				</div>
+			</section>
+		</section>
+	</main>
+</div>
+
+<style is:global>
+	:root {
+		--background0: #05070a;
+		--background1: #0a0f14;
+		--background2: #10161e;
+		--foreground0: #f4f7fb;
+		--foreground1: #d9e2ea;
+		--foreground2: #9aa8b4;
+		--foreground3: #6f7d88;
+		--cyan: #52d9ff;
+		--cyan-dim: rgba(82, 217, 255, 0.18);
+		--lime: #d8f24f;
+		--lime-dim: rgba(216, 242, 79, 0.16);
+		--red: #ff5b66;
+		--border-soft: rgba(255, 255, 255, 0.1);
+		--shadow-cyan: 0 0 36px rgba(82, 217, 255, 0.08);
+		--shadow-lime: 0 0 28px rgba(216, 242, 79, 0.06);
+	}
+
+	* {
+		box-sizing: border-box;
+	}
+
+	html {
+		scroll-behavior: smooth;
+	}
+
+	body {
+		margin: 0;
+		color: var(--foreground1);
+		background:
+			radial-gradient(circle at top, rgba(82, 217, 255, 0.11), transparent 28%),
+			linear-gradient(180deg, #06080b 0%, #040506 100%);
+		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+	}
+
+	a {
+		color: inherit;
+		text-decoration: none;
+	}
+
+	.page-shell {
+		position: relative;
+		min-height: 100vh;
+		overflow: clip;
+	}
+
+	.bg-glow,
+	.bg-grid {
+		pointer-events: none;
+		position: fixed;
+		inset: 0;
+	}
+
+	.bg-glow {
+		background:
+			radial-gradient(circle at 15% 15%, rgba(82, 217, 255, 0.11), transparent 25%),
+			radial-gradient(circle at 90% 35%, rgba(216, 242, 79, 0.06), transparent 22%);
+	}
+
+	.bg-grid {
+		opacity: 0.08;
+		background-image:
+			linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
+			linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
+		background-size: 32px 32px;
+	}
+
+	.layout {
+		position: relative;
+		z-index: 1;
+		max-width: 1280px;
+		margin: 0 auto;
+		padding: 1.5rem;
+		display: grid;
+		gap: 1.5rem;
+	}
+
+	.topbar {
+		position: sticky;
+		top: 0;
+		z-index: 50;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1rem;
+		max-width: 1280px;
+		margin: 0 auto;
+		padding: 1rem 1.5rem;
+		background: rgba(5, 8, 11, 0.82);
+		backdrop-filter: blur(10px);
+		border-bottom: 1px solid rgba(82, 217, 255, 0.15);
+	}
+
+	.brand {
+		display: flex;
+		align-items: center;
+		gap: 0.9rem;
+	}
+
+	.brand-mark {
+		width: 2.5rem;
+		height: 2.5rem;
+		border: 1px solid rgba(82, 217, 255, 0.55);
+		background: #000;
+		box-shadow: var(--shadow-cyan);
+		position: relative;
+	}
+
+	.brand-mark::after {
+		content: "";
+		position: absolute;
+		inset: 0.62rem;
+		border: 1px solid var(--cyan);
+		transform: rotate(45deg);
+	}
+
+	.eyebrow {
+		text-transform: uppercase;
+		letter-spacing: 0.28em;
+		font-size: 0.72rem;
+		color: rgba(82, 217, 255, 0.8);
+	}
+
+	.eyebrow.lime {
+		color: var(--lime);
+	}
+
+	.brand-title {
+		font-size: 0.95rem;
+		color: var(--foreground0);
+	}
+
+	.nav {
+		display: flex;
+		gap: 0.55rem;
+		flex-wrap: wrap;
+	}
+
+	.nav-link {
+		border: 1px solid rgba(82, 217, 255, 0.2);
+		background: rgba(0, 0, 0, 0.35);
+		color: var(--foreground1);
+		padding: 0.7rem 0.9rem;
+		text-transform: uppercase;
+		letter-spacing: 0.18em;
+		font-size: 0.72rem;
+		transition: 160ms ease;
+	}
+
+	.nav-link:hover,
+	.nav-link:focus-visible {
+		border-color: rgba(82, 217, 255, 0.65);
+		color: var(--foreground0);
+	}
+
+	.nav-link--active {
+		background: var(--foreground0);
+		color: #000;
+		border-color: var(--foreground0);
+	}
+
+	.hero-grid,
+	.content-grid,
+	.footer-grid {
+		display: grid;
+		gap: 1.5rem;
+	}
+
+	.hero-grid {
+		grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
+	}
+
+	.content-grid,
+	.footer-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	.side-stack {
+		display: grid;
+		gap: 1.5rem;
+	}
+
+	.panel {
+		background: rgba(0, 0, 0, 0.48);
+		border: 1px solid var(--border-soft);
+		padding: 1.5rem;
+	}
+
+	.panel.tone-cyan {
+		border-color: rgba(82, 217, 255, 0.22);
+		box-shadow: var(--shadow-cyan);
+	}
+
+	.panel.tone-lime {
+		border-color: rgba(216, 242, 79, 0.22);
+		box-shadow: var(--shadow-lime);
+	}
+
+	.hero {
+		position: relative;
+		overflow: clip;
+		box-shadow: var(--shadow-cyan);
+	}
+
+	.hero::after {
+		content: "";
+		position: absolute;
+		right: -4rem;
+		top: 3rem;
+		width: 12rem;
+		height: 12rem;
+		border: 1px solid rgba(82, 217, 255, 0.16);
+		transform: rotate(45deg);
+	}
+
+	.hero-head {
+		display: flex;
+		justify-content: space-between;
+		gap: 1.5rem;
+		padding-bottom: 1.5rem;
+		margin-bottom: 1.5rem;
+		border-bottom: 1px dashed rgba(82, 217, 255, 0.16);
+	}
+
+	h1,
+	h2,
+	h3,
+	p,
+	pre {
+		margin: 0;
+	}
+
+	h1 {
+		margin-top: 0.85rem;
+		font-size: clamp(2.4rem, 7vw, 4.8rem);
+		line-height: 0.95;
+		color: var(--foreground0);
+	}
+
+	h2 {
+		margin-top: 0.45rem;
+		font-size: 1.7rem;
+		line-height: 1.1;
+		color: var(--foreground0);
+	}
+
+	h3 {
+		font-size: 1.2rem;
+		color: var(--foreground0);
+	}
+
+	.hero-text,
+	.prose-copy p,
+	.article-card p,
+	.project-card p,
+	.contact-copy {
+		line-height: 1.75;
+		color: var(--foreground1);
+	}
+
+	.hero-text {
+		margin-top: 1rem;
+		max-width: 48rem;
+	}
+
+	.status-card {
+		min-width: 220px;
+		padding: 1rem;
+		background: rgba(10, 16, 22, 0.95);
+	}
+
+	.status-row {
+		display: flex;
+		justify-content: space-between;
+		gap: 1rem;
+		padding: 0.55rem 0;
+		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+		color: var(--foreground1);
+		font-size: 0.9rem;
+	}
+
+	.status-row--head {
+		padding-top: 0;
+		text-transform: uppercase;
+		letter-spacing: 0.2em;
+		font-size: 0.7rem;
+		color: rgba(82, 217, 255, 0.8);
+	}
+
+	.status-row:last-child {
+		border-bottom: 0;
+		padding-bottom: 0;
+	}
+
+	.stat-grid,
+	.project-grid,
+	.tag-grid,
+	.link-grid {
+		display: grid;
+		gap: 1rem;
+	}
+
+	.stat-grid {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+
+	.stat {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		padding: 1rem;
+		background: rgba(255, 255, 255, 0.03);
+	}
+
+	.stat span,
+	.muted,
+	.card-meta,
+	.project-foot {
+		font-size: 0.75rem;
+		text-transform: uppercase;
+		letter-spacing: 0.18em;
+		color: var(--foreground2);
+	}
+
+	.stat strong {
+		font-size: 2rem;
+		color: var(--foreground0);
+		font-weight: 600;
+	}
+
+	.hero-actions {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.75rem;
+		margin-top: 1.5rem;
+	}
+
+	.section-head {
+		display: flex;
+		align-items: start;
+		justify-content: space-between;
+		gap: 1rem;
+		padding-bottom: 1rem;
+		margin-bottom: 1.25rem;
+		border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
+	}
+
+	.mission-list,
+	.card-list {
+		display: grid;
+		gap: 0.9rem;
+	}
+
+	.mission,
+	.quick-link,
+	.article-card,
+	.project-card {
+		background: rgba(255, 255, 255, 0.03);
+		border: 1px solid rgba(255, 255, 255, 0.08);
+		padding: 1rem;
+	}
+
+	.quick-link {
+		display: block;
+		text-transform: uppercase;
+		letter-spacing: 0.16em;
+		font-size: 0.82rem;
+		transition: 160ms ease;
+	}
+
+	.quick-link:hover,
+	.article-card:hover,
+	.project-card:hover {
+		border-color: rgba(82, 217, 255, 0.35);
+		background: rgba(82, 217, 255, 0.04);
+	}
+
+	.link-grid {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+
+	.prose-copy {
+		display: grid;
+		gap: 1rem;
+	}
+
+	.tag-grid {
+		grid-template-columns: repeat(3, minmax(0, max-content));
+		margin-top: 1.5rem;
+		align-items: start;
+	}
+
+	.card-meta {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.75rem;
+		margin-bottom: 0.8rem;
+	}
+
+	.accent {
+		color: rgba(82, 217, 255, 0.8);
+	}
+
+	.accent-lime {
+		color: var(--lime);
+	}
+
+	.article-card h3,
+	.project-card h3 {
+		margin-bottom: 0.75rem;
+	}
+
+	.project-grid {
+		grid-template-columns: repeat(3, minmax(0, 1fr));
+	}
+
+	.project-foot {
+		display: flex;
+		justify-content: space-between;
+		gap: 1rem;
+		margin-top: 1.2rem;
+		padding-top: 1rem;
+		border-top: 1px solid rgba(255, 255, 255, 0.08);
+	}
+
+	.terminal-block {
+		margin-top: 1rem;
+		border: 1px solid rgba(255, 255, 255, 0.08);
+		background: rgba(7, 16, 24, 0.95);
+		color: var(--foreground1);
+		overflow-x: auto;
+	}
+
+	@media (max-width: 1080px) {
+		.hero-grid,
+		.content-grid,
+		.footer-grid,
+		.project-grid {
+			grid-template-columns: 1fr;
+		}
+
+		.hero-head {
+			flex-direction: column;
+		}
+
+		.status-card {
+			min-width: 0;
+		}
+	}
+
+	@media (max-width: 720px) {
+		.layout,
+		.topbar {
+			padding-inline: 1rem;
+		}
+
+		.topbar {
+			align-items: start;
+			flex-direction: column;
+		}
+
+		.nav {
+			width: 100%;
+		}
+
+		.nav-link {
+			flex: 1 1 auto;
+			text-align: center;
+		}
+
+		.stat-grid,
+		.link-grid,
+		.tag-grid {
+			grid-template-columns: 1fr;
+		}
+
+		.panel {
+			padding: 1rem;
+		}
+	}
+</style>
+
--- a/src/pageModules/home/index.ts
+++ b/src/pageModules/home/index.ts
@@ -0,0 +1 @@
+export { default } from "./ui/HomePage.astro";
--- a/src/pageModules/home/ui/HomePage.astro
+++ b/src/pageModules/home/ui/HomePage.astro
@@ -0,0 +1,12 @@
+---
+import { Button } from "@shared/designSystem";
+---
+
+<main class="mx-auto flex min-h-screen max-w-6xl flex-col items-center gap-10 px-4 py-8 md:px-6">
+	<section class="box flex w-full flex-col gap-6 border border-cyan/20 p-6">
+		<h1>Home Page</h1>
+		<Button>
+			Hello
+		</Button>
+	</section>
+</main>
--- a/src/pageModules/uiSandbox/index.ts
+++ b/src/pageModules/uiSandbox/index.ts
@@ -0,0 +1 @@
+export { default } from "./ui/UiSandboxPage.astro";
--- a/src/pageModules/uiSandbox/ui/UiSandboxPage.astro
+++ b/src/pageModules/uiSandbox/ui/UiSandboxPage.astro
@@ -0,0 +1,39 @@
+<main class="mx-auto flex min-h-screen max-w-6xl flex-col gap-6 px-4 py-8 md:px-6">
+	<h1>Heading 1</h1>
+	<details is-="accordion">
+		<summary>Summary title</summary>
+		<p>Accordion content</p>
+	</details>
+
+	<dialog id="dialog" popover>
+		<div box-="round" id="content">
+			<p>Are you sure you want to delete this?</p>
+			<div id="buttons">
+				<button box-="round">Cancel</button>
+				<button box-="round">Delete</button>
+			</div>
+		</div>
+	</dialog>
+	<button popovertarget="dialog">Open Dialog</button>
+</main>
+
+<style>
+	dialog::backdrop {
+		background-color: rgba(0, 0, 0, 0.5);
+	}
+
+	#content {
+		display: flex;
+		flex-direction: column;
+		gap: 1lh;
+		padding: 2lh 2ch 1lh 2ch;
+		background-color: var(--background1);
+	}
+
+	#buttons {
+		display: flex;
+		gap: 1ch;
+		justify-content: flex-end;
+	}
+</style>
+
--- a/src/pages/demo.astro
+++ b/src/pages/demo.astro
@@ -0,0 +1,11 @@
+---
+import BaseLayout from "@app/layouts/BaseLayout";
+import DemoPage from "@pageModules/demo";
+---
+
+<BaseLayout
+	title="Никита Поздняков — Frontend Engineer"
+	description="Персональный сайт в стилистике Watch Dogs + WebTUI на Astro 6."
+>
+	<DemoPage />
+</BaseLayout>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,16 +1,8 @@
 ---
+import BaseLayout from "@app/layouts/BaseLayout";
+import HomePage from "@pageModules/home";
+---

---
-
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<h1>Nikita Pozd Main Site</h1>
-	</body>
-</html>
+<BaseLayout title="Главная | NikitaPozd Dev" description="Главная страница сайта NikitaPozd Dev.">
+  <HomePage />
+</BaseLayout>
--- a/src/pages/ui-sandbox.astro
+++ b/src/pages/ui-sandbox.astro
@@ -0,0 +1,8 @@
+---
+import BaseLayout from "@app/layouts/BaseLayout";
+import UiSandboxPage from "@pageModules/uiSandbox";
+---
+
+<BaseLayout title="UI Demo | NikitaPozd Dev" description="Демонстрационная страница компонентов WebTUI и Tailwind CSS.">
+	<UiSandboxPage />
+</BaseLayout>
--- a/src/shared/designSystem/components/Button/helpers/getButtonClassNames.ts
+++ b/src/shared/designSystem/components/Button/helpers/getButtonClassNames.ts
@@ -0,0 +1,41 @@
+import styles from "../styles/Button.module.scss";
+import type { ButtonProps } from "../types/Button.types.ts";
+
+type ButtonVariant = NonNullable<ButtonProps["variant"]>;
+type ButtonColor = NonNullable<ButtonProps["color"]>;
+type ButtonSize = NonNullable<ButtonProps["size"]>;
+
+type GetButtonClassNamesParams = {
+	variant?: ButtonVariant;
+	color?: ButtonColor;
+	size?: ButtonSize;
+	fullWidth?: boolean;
+	loading?: boolean;
+	disabled?: boolean;
+	class?: string;
+};
+
+export const getButtonClassNames = ({
+	variant = "primary",
+	color = "dark",
+	size = 44,
+	fullWidth = false,
+	loading = false,
+	disabled = false,
+	class: className = "",
+}: GetButtonClassNamesParams): string => {
+	return [
+		styles.root,
+		styles[`size-${size}`],
+		styles[`color-${color}-${variant}`],
+		disabled ? styles[`disabled-${variant}`] : "",
+		fullWidth && styles.block,
+		loading && styles.isLoading,
+		className,
+	]
+		.filter(Boolean)
+		.join(" ");
+};
+
+export const buttonContentClassName = styles.content;
+export const buttonSpinnerClassName = styles.spinner;
--- a/src/shared/designSystem/components/Button/helpers/isLinkButton.ts
+++ b/src/shared/designSystem/components/Button/helpers/isLinkButton.ts
@@ -0,0 +1,7 @@
+import type { ButtonAsLinkProps, ButtonProps } from "../types/Button.types.ts";
+
+export const isLinkButton = (
+	props: ButtonProps,
+): props is ButtonAsLinkProps => {
+	return props.as === "a";
+};
--- a/src/shared/designSystem/components/Button/index.ts
+++ b/src/shared/designSystem/components/Button/index.ts
@@ -0,0 +1,2 @@
+export type { ButtonProps } from "./types/Button.types.ts";
+export { Button } from "./ui/Button.tsx";
--- a/src/shared/designSystem/components/Button/stories/Button.stories.tsx
+++ b/src/shared/designSystem/components/Button/stories/Button.stories.tsx
@@ -0,0 +1,242 @@
+import type { Meta, StoryObj } from "storybook-solidjs-vite";
+import { Button } from "../ui/Button.tsx";
+
+const variants = ["primary", "secondary", "outlined", "text"] as const;
+const colors = ["blue", "dark", "red", "cyan"] as const;
+const sizes = [36, 44, 52, 60] as const;
+
+const meta = {
+	title: "shared/designSystem/Button",
+	component: Button,
+	args: {
+		children: "Button",
+		as: "button",
+		variant: "primary",
+		color: "cyan",
+		size: 52,
+		fullWidth: false,
+		loading: false,
+		disabled: false,
+		type: "button",
+	},
+	argTypes: {
+		as: {
+			control: "radio",
+			options: ["button", "a"],
+		},
+		variant: {
+			control: "select",
+			options: variants,
+		},
+		color: {
+			control: "select",
+			options: colors,
+		},
+		size: {
+			control: "select",
+			options: sizes,
+		},
+		fullWidth: {
+			control: "boolean",
+		},
+		loading: {
+			control: "boolean",
+		},
+		disabled: {
+			control: "boolean",
+		},
+		type: {
+			control: "select",
+			options: ["button", "submit", "reset"],
+		},
+		href: {
+			control: "text",
+		},
+	},
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {};
+
+export const Primary: Story = {
+	args: {
+		children: "Primary button",
+		variant: "primary",
+		color: "cyan",
+	},
+};
+
+export const Secondary: Story = {
+	args: {
+		children: "Secondary button",
+		variant: "secondary",
+		color: "cyan",
+	},
+};
+
+export const Outlined: Story = {
+	args: {
+		children: "Outlined button",
+		variant: "outlined",
+		color: "cyan",
+	},
+};
+
+export const Text: Story = {
+	args: {
+		children: "Text button",
+		variant: "text",
+		color: "cyan",
+	},
+};
+
+export const Loading: Story = {
+	args: {
+		children: "Loading",
+		loading: true,
+		size: 52,
+	},
+};
+
+export const Disabled: Story = {
+	args: {
+		children: "Disabled",
+		disabled: true,
+		size: 52,
+	},
+};
+
+export const AsLink: Story = {
+	args: {
+		as: "a",
+		href: "/demo",
+		children: "Open demo",
+		variant: "text",
+		color: "cyan",
+	},
+};
+
+export const FullWidth: Story = {
+	args: {
+		children: "Continue",
+		fullWidth: true,
+		size: 52,
+	},
+	parameters: {
+		layout: "padded",
+	},
+	render: (args) => (
+		<div style={{ width: "320px" }}>
+			<Button {...args} />
+		</div>
+	),
+};
+
+export const Sizes: Story = {
+	render: () => (
+		<div
+			style={{
+				display: "flex",
+				"flex-wrap": "wrap",
+				gap: "12px",
+				"align-items": "center",
+			}}
+		>
+			{sizes.map((size) => (
+				<Button size={size} variant="primary" color="cyan">
+					size {size}
+				</Button>
+			))}
+		</div>
+	),
+};
+
+export const Colors: Story = {
+	render: () => (
+		<div style={{ display: "flex", "flex-wrap": "wrap", gap: "12px" }}>
+			{colors.map((color) => (
+				<Button color={color} variant="primary" size={52}>
+					primary / {color}
+				</Button>
+			))}
+		</div>
+	),
+};
+
+export const VariantMatrix: Story = {
+	render: () => (
+		<div style={{ display: "flex", "flex-direction": "column", gap: "24px" }}>
+			{variants.map((variant) => (
+				<section
+					style={{
+						display: "flex",
+						"flex-direction": "column",
+						gap: "12px",
+					}}
+				>
+					<h3 style={{ margin: 0 }}>{variant}</h3>
+					<div style={{ display: "flex", "flex-wrap": "wrap", gap: "12px" }}>
+						{colors.map((color) => (
+							<Button variant={variant} color={color} size={52}>
+								{variant} / {color}
+							</Button>
+						))}
+					</div>
+				</section>
+			))}
+		</div>
+	),
+};
+
+export const LoadingMatrix: Story = {
+	render: () => (
+		<div style={{ display: "flex", "flex-direction": "column", gap: "24px" }}>
+			{variants.map((variant) => (
+				<section
+					style={{
+						display: "flex",
+						"flex-direction": "column",
+						gap: "12px",
+					}}
+				>
+					<h3 style={{ margin: 0 }}>{variant} loading</h3>
+					<div style={{ display: "flex", "flex-wrap": "wrap", gap: "12px" }}>
+						{colors.map((color) => (
+							<Button variant={variant} color={color} loading size={52}>
+								{variant} / {color}
+							</Button>
+						))}
+					</div>
+				</section>
+			))}
+		</div>
+	),
+};
+
+export const DisabledMatrix: Story = {
+	render: () => (
+		<div style={{ display: "flex", "flex-direction": "column", gap: "24px" }}>
+			{variants.map((variant) => (
+				<section
+					style={{
+						display: "flex",
+						"flex-direction": "column",
+						gap: "12px",
+					}}
+				>
+					<h3 style={{ margin: 0 }}>{variant} disabled</h3>
+					<div style={{ display: "flex", "flex-wrap": "wrap", gap: "12px" }}>
+						{colors.map((color) => (
+							<Button variant={variant} color={color} disabled size={52}>
+								{variant} / {color}
+							</Button>
+						))}
+					</div>
+				</section>
+			))}
+		</div>
+	),
+};
--- a/src/shared/designSystem/components/Button/styles/Button.module.scss
+++ b/src/shared/designSystem/components/Button/styles/Button.module.scss
@@ -0,0 +1,195 @@
+
+
+$button-colors: "dark", "blue", "red", "cyan";
+$button-variants: "primary", "secondary", "outlined", "text";
+$button-sizes: 36, 44, 52, 60;
+
+.root {
+  display: flex;
+  width: fit-content;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ds-space-4);
+  border-width: 1px;
+  border-style: solid;
+  outline: none;
+  font-weight: 600;
+  line-height: 1;
+  vertical-align: middle;
+  white-space: nowrap;
+  user-select: none;
+  cursor: pointer;
+  border-radius: var(--ds-radius-1);
+
+  color: var(--button-current-color);
+  background-color: var(--button-current-background);
+  border-color: var(--button-current-border);
+  transition:
+          background-color var(--ds-duration-fast) var(--ds-ease-in-out),
+          border-color var(--ds-duration-fast) var(--ds-ease-in-out),
+          color var(--ds-duration-fast) var(--ds-ease-in-out),
+          box-shadow var(--ds-duration-fast) var(--ds-ease-in-out),
+          transform var(--ds-duration-fast) var(--ds-ease-in-out);
+}
+
+.root:focus-visible {
+  box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.35);
+}
+
+.content {
+  display: flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ds-space-4);
+}
+
+.block {
+  display: flex;
+  width: 100%;
+}
+
+.isLoading {
+  cursor: wait;
+  pointer-events: none;
+}
+
+.isLoading .content {
+  color: transparent;
+}
+
+.spinner {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  inline-size: var(--ds-icon-size-16);
+  block-size: var(--ds-icon-size-16);
+  transform: translate(-50%, -50%);
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 999px;
+  animation: button-spin 0.8s linear infinite;
+}
+
+
+@keyframes button-spin {
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+/* sizes */
+
+.size-36 {
+  height: var(--ds-container-size-36);
+  padding-inline: var(--ds-space-12);
+  font-size: var(--ds-font-size-14);
+}
+
+.size-44 {
+  height: var(--ds-container-size-44);
+  padding-inline: var(--ds-space-16);
+  font-size: var(--ds-font-size-14);
+}
+
+.size-52 {
+  height: var(--ds-container-size-52);
+  padding-inline: var(--ds-space-20);
+  font-size: var(--ds-font-size-16);
+}
+
+.size-60 {
+  height: var(--ds-container-size-60);
+  padding-inline: var(--ds-space-24);
+  font-size: var(--ds-font-size-16);
+}
+
+/* variant + color bindings */
+
+@each $color in $button-colors {
+  .color-#{$color}-text {
+    height: fit-content;
+    padding: 0;
+  }
+
+  @each $variant in $button-variants {
+    .color-#{$color}-#{$variant} {
+      --button-current-color: var(--button-#{$variant}-#{$color}-default-color);
+      --button-current-background: var(
+              --button-#{$variant}-#{$color}-default-background
+      );
+      --button-current-border: var(
+              --button-#{$variant}-#{$color}-default-border,
+              transparent
+      );
+    }
+
+    .color-#{$color}-#{$variant}:hover,
+    .color-#{$color}-#{$variant}:focus-visible {
+      --button-current-color: var(
+              --button-#{$variant}-#{$color}-hover-color,
+              var(--button-#{$variant}-#{$color}-default-color)
+      );
+      --button-current-background: var(
+              --button-#{$variant}-#{$color}-hover-background,
+              var(--button-#{$variant}-#{$color}-default-background)
+      );
+      --button-current-border: var(
+              --button-#{$variant}-#{$color}-hover-border,
+              var(--button-#{$variant}-#{$color}-default-border, transparent)
+      );
+    }
+
+    .color-#{$color}-#{$variant}:active {
+      --button-current-color: var(
+              --button-#{$variant}-#{$color}-active-color,
+              var(
+                      --button-#{$variant}-#{$color}-hover-color,
+                      var(--button-#{$variant}-#{$color}-default-color)
+              )
+      );
+      --button-current-background: var(
+              --button-#{$variant}-#{$color}-active-background,
+              var(
+                      --button-#{$variant}-#{$color}-hover-background,
+                      var(--button-#{$variant}-#{$color}-default-background)
+              )
+      );
+      --button-current-border: var(
+              --button-#{$variant}-#{$color}-active-border,
+              var(
+                      --button-#{$variant}-#{$color}-hover-border,
+                      var(--button-#{$variant}-#{$color}-default-border, transparent)
+              )
+      );
+    }
+  }
+}
+
+/* disabled by variant */
+
+@each $variant in $button-variants {
+  .disabled-#{$variant} {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  @each $color in $button-colors {
+    .color-#{$color}-#{$variant}.disabled-#{$variant},
+    .color-#{$color}-#{$variant}[aria-disabled="true"] {
+      --button-current-color: var(
+              --button-#{$variant}-#{$color}-disabled-color,
+              var(--button-#{$variant}-#{$color}-default-color)
+      );
+      --button-current-background: var(
+              --button-#{$variant}-#{$color}-disabled-background,
+              var(--button-#{$variant}-#{$color}-default-background)
+      );
+      --button-current-border: var(
+              --button-#{$variant}-#{$color}-disabled-border,
+              var(--button-#{$variant}-#{$color}-default-border, transparent)
+      );
+    }
+  }
+}
--- a/src/shared/designSystem/components/Button/types/Button.types.ts
+++ b/src/shared/designSystem/components/Button/types/Button.types.ts
@@ -0,0 +1,40 @@
+import type {
+	ColorValue,
+	ContainerSizeValue,
+	VariantValue,
+} from "@shared/designSystem/constants";
+import type { JSX, ParentProps } from "solid-js";
+
+export type CommonProps = ParentProps<{
+	variant?: VariantValue;
+	size?: ContainerSizeValue;
+	color?: Extract<ColorValue, "dark" | "cyan" | "blue" | "red">;
+	fullWidth?: boolean;
+	loading?: boolean;
+	disabled?: boolean;
+	class?: string;
+	leftIcon?: JSX.Element;
+	rightIcon?: JSX.Element;
+}>;
+
+export type ButtonAsButtonProps = CommonProps &
+	Omit<
+		JSX.ButtonHTMLAttributes<HTMLButtonElement>,
+		"class" | "disabled" | "type" | "href"
+	> & {
+		as?: "button";
+		type?: "button" | "submit" | "reset";
+		href?: never;
+	};
+
+export type ButtonAsLinkProps = CommonProps &
+	Omit<
+		JSX.AnchorHTMLAttributes<HTMLAnchorElement>,
+		"class" | "href" | "type"
+	> & {
+		as: "a";
+		href: string;
+		type?: never;
+	};
+
+export type ButtonProps = ButtonAsButtonProps | ButtonAsLinkProps;
--- a/src/shared/designSystem/components/Button/ui/Button.tsx
+++ b/src/shared/designSystem/components/Button/ui/Button.tsx
@@ -0,0 +1,13 @@
+import type { Component } from "solid-js";
+import { isLinkButton } from "../helpers/isLinkButton.ts";
+import type { ButtonProps } from "../types/Button.types.ts";
+import { ButtonAsButton } from "./ButtonAsButton.tsx";
+import { ButtonAsLink } from "./ButtonAsLink.tsx";
+
+export const Button: Component<ButtonProps> = (props) => {
+	if (isLinkButton(props)) {
+		return <ButtonAsLink {...props} />;
+	}
+
+	return <ButtonAsButton {...props} />;
+};
--- a/src/shared/designSystem/components/Button/ui/ButtonAsButton.tsx
+++ b/src/shared/designSystem/components/Button/ui/ButtonAsButton.tsx
@@ -0,0 +1,58 @@
+import type { Component } from "solid-js";
+import { Show, splitProps } from "solid-js";
+import {
+	buttonContentClassName,
+	buttonSpinnerClassName,
+	getButtonClassNames,
+} from "../helpers/getButtonClassNames.ts";
+import type { ButtonAsButtonProps } from "../types/Button.types.ts";
+
+export const ButtonAsButton: Component<ButtonAsButtonProps> = (props) => {
+	const [local, rest] = splitProps(props as ButtonAsButtonProps, [
+		"variant",
+		"color",
+		"size",
+		"fullWidth",
+		"loading",
+		"disabled",
+		"class",
+		"leftIcon",
+		"rightIcon",
+		"children",
+		"type",
+	]);
+
+	const isLoading = local.loading ?? false;
+	const isDisabled = local.disabled ?? false;
+
+	const classes = getButtonClassNames({
+		variant: local.variant || "primary",
+		color: local.color || "cyan",
+		size: local.size || 44,
+		fullWidth: local.fullWidth ?? false,
+		loading: isLoading ?? false,
+		disabled: isDisabled ?? false,
+		class: local.class,
+	});
+
+	return (
+		<button
+			{...rest}
+			type={local.type ?? "button"}
+			class={classes}
+			disabled={isDisabled}
+			data-loading={isLoading ? "true" : undefined}
+		>
+			<Show
+				when={!isLoading}
+				fallback={<span aria-hidden="true" class={buttonSpinnerClassName} />}
+			>
+				{local.leftIcon}
+
+				<span class={buttonContentClassName}>{local.children}</span>
+
+				{local.rightIcon}
+			</Show>
+		</button>
+	);
+};
--- a/src/shared/designSystem/components/Button/ui/ButtonAsLink.tsx
+++ b/src/shared/designSystem/components/Button/ui/ButtonAsLink.tsx
@@ -0,0 +1,59 @@
+import type { Component } from "solid-js";
+import { Show, splitProps } from "solid-js";
+import {
+	buttonContentClassName,
+	buttonSpinnerClassName,
+	getButtonClassNames,
+} from "../helpers/getButtonClassNames.ts";
+import type { ButtonAsLinkProps } from "../types/Button.types.ts";
+
+export const ButtonAsLink: Component<ButtonAsLinkProps> = (props) => {
+	const [local, rest] = splitProps(props as ButtonAsLinkProps, [
+		"variant",
+		"color",
+		"size",
+		"fullWidth",
+		"loading",
+		"disabled",
+		"class",
+		"leftIcon",
+		"rightIcon",
+		"children",
+		"type",
+		"href",
+	]);
+
+	const isLoading = local.loading ?? false;
+	const isDisabled = (local.disabled ?? false) || isLoading;
+
+	const classes = getButtonClassNames({
+		variant: local.variant || "primary",
+		color: local.color || "cyan",
+		size: local.size || 44,
+		fullWidth: local.fullWidth ?? false,
+		loading: isLoading ?? false,
+		class: local.class,
+	});
+
+	return (
+		<a
+			{...rest}
+			href={local.href as string}
+			class={classes}
+			aria-disabled={isDisabled ? "true" : undefined}
+			data-loading={isLoading ? "true" : undefined}
+			tabIndex={isDisabled ? -1 : undefined}
+		>
+			<Show
+				when={!isLoading}
+				fallback={<span aria-hidden="true" class={buttonSpinnerClassName} />}
+			>
+				{local.leftIcon}
+
+				<span class={buttonContentClassName}>{local.children}</span>
+
+				{local.rightIcon}
+			</Show>
+		</a>
+	);
+};
--- a/src/shared/designSystem/constants/colors.ts
+++ b/src/shared/designSystem/constants/colors.ts
@@ -0,0 +1,12 @@
+export const colors = {
+	light: "light",
+	dark: "dark",
+	green: "green",
+	blue: "blue",
+	orange: "orange",
+	red: "red",
+	cyan: "cyan",
+} as const;
+
+export type ColorName = keyof typeof colors;
+export type ColorValue = (typeof colors)[ColorName];
--- a/src/shared/designSystem/constants/index.ts
+++ b/src/shared/designSystem/constants/index.ts
@@ -0,0 +1,5 @@
+export * from "./colors.ts";
+export * from "./sizes.ts";
+export * from "./spaces.ts";
+export * from "./variants.ts";
+export * from "./zIndexes.ts";
--- a/src/shared/designSystem/constants/sizes.ts
+++ b/src/shared/designSystem/constants/sizes.ts
@@ -0,0 +1,52 @@
+export const contentSizes = {
+	s16: 16,
+	s20: 20,
+	s24: 24,
+	s28: 28,
+} as const;
+
+export type ContentSizeName = keyof typeof contentSizes;
+export type ContentSizeValue = (typeof contentSizes)[ContentSizeName];
+
+export const containerSizes = {
+	s36: 36,
+	s44: 44,
+	s52: 52,
+	s60: 60,
+} as const;
+
+export type ContainerSizeName = keyof typeof containerSizes;
+export type ContainerSizeValue = (typeof containerSizes)[ContainerSizeName];
+
+export const fontSizes = {
+	s8: 8,
+	s10: 10,
+	s12: 12,
+	s14: 14,
+	s16: 16,
+	s20: 20,
+} as const;
+
+export type FontSizeName = keyof typeof fontSizes;
+export type FontSizeValue = (typeof fontSizes)[FontSizeName];
+
+export const borderRadiusSizes = {
+	s4: 4,
+	s8: 8,
+	s12: 12,
+	s16: 16,
+	s24: 24,
+	s40: 40,
+} as const;
+
+export type BorderRadiusSizeName = keyof typeof borderRadiusSizes;
+export type BorderRadiusSizeValue =
+	(typeof borderRadiusSizes)[BorderRadiusSizeName];
+
+export const iconSizes = {
+	s12: 12,
+	...contentSizes,
+} as const;
+
+export type IconSizeName = keyof typeof iconSizes;
+export type IconSizeValue = (typeof iconSizes)[IconSizeName];
--- a/src/shared/designSystem/constants/spaces.ts
+++ b/src/shared/designSystem/constants/spaces.ts
@@ -0,0 +1,20 @@
+export const spaces = {
+	s0: 0,
+	s2: 2,
+	s4: 4,
+	s6: 6,
+	s8: 8,
+	s12: 12,
+	s16: 16,
+	s20: 20,
+	s24: 24,
+	s28: 28,
+	s32: 32,
+	s36: 36,
+	s40: 40,
+	s48: 48,
+	s60: 60,
+} as const;
+
+export type SpaceName = keyof typeof spaces;
+export type SpaceValue = (typeof spaces)[SpaceName];
--- a/src/shared/designSystem/constants/variants.ts
+++ b/src/shared/designSystem/constants/variants.ts
@@ -0,0 +1,9 @@
+export const variants = {
+	outlined: "outlined",
+	primary: "primary",
+	secondary: "secondary",
+	text: "text",
+} as const;
+
+export type VariantName = keyof typeof variants;
+export type VariantValue = (typeof variants)[VariantName];
--- a/src/shared/designSystem/constants/zIndexes.ts
+++ b/src/shared/designSystem/constants/zIndexes.ts
@@ -0,0 +1,11 @@
+export const zIndexes = {
+	dropdown: 1060,
+	sticky: 1020,
+	fixed: 1030,
+	modalBackdrop: 1040,
+	modal: 1050,
+	tooltip: 1060,
+} as const;
+
+export type ZIndexName = keyof typeof zIndexes;
+export type ZIndexValue = (typeof zIndexes)[ZIndexName];
--- a/src/shared/designSystem/index.ts
+++ b/src/shared/designSystem/index.ts
@@ -0,0 +1 @@
+export { Button } from "./components/Button";
--- a/src/shared/designSystem/styles/components/button/index.css
+++ b/src/shared/designSystem/styles/components/button/index.css
@@ -0,0 +1,4 @@
+@import "./primary.css";
+@import "./secondary.css";
+@import "./outlined.css";
+@import "./text.css";
--- a/src/shared/designSystem/styles/components/button/outlined.css
+++ b/src/shared/designSystem/styles/components/button/outlined.css
@@ -0,0 +1,90 @@
+:root {
+	/* BLUE */
+	--button-outlined-blue-default-background: transparent;
+	--button-outlined-blue-hover-background: color-mix(
+		in srgb,
+		var(--ds-color-blue-primary) 20%,
+		transparent
+	);
+	--button-outlined-blue-default-color: var(--ds-color-blue-primary);
+	--button-outlined-blue-active-color: var(--ds-color-blue-primary-hover);
+	--button-outlined-blue-disabled-color: color-mix(
+		in srgb,
+		var(--button-outlined-blue-default-color) 70%,
+		transparent
+	);
+	--button-outlined-blue-default-border: var(--ds-color-blue-primary);
+	--button-outlined-blue-hover-border: var(--ds-color-blue-primary-hover);
+	--button-outlined-blue-disabled-border: color-mix(
+		in srgb,
+		var(--ds-color-blue-primary) 50%,
+		transparent
+	);
+
+	/* DARK */
+	--button-outlined-dark-default-background: transparent;
+	--button-outlined-dark-hover-background: color-mix(
+		in srgb,
+		var(--ds-color-gray-secondary) 20%,
+		transparent
+	);
+	--button-outlined-dark-default-color: var(--ds-theme-text-primary);
+	--button-outlined-dark-hover-color: var(--ds-theme-text-primary-hover);
+	--button-outlined-dark-active-color: var(--ds-theme-text-primary-active);
+	--button-outlined-dark-disabled-color: color-mix(
+		in srgb,
+		var(--button-outlined-dark-default-color) 70%,
+		transparent
+	);
+	--button-outlined-dark-default-border: var(--ds-theme-text-primary);
+	--button-outlined-dark-hover-border: var(--ds-theme-text-primary-hover);
+	--button-outlined-dark-disabled-border: color-mix(
+		in srgb,
+		var(--button-outlined-dark-default-border) 50%,
+		transparent
+	);
+
+	/* RED */
+	--button-outlined-red-default-background: transparent;
+	--button-outlined-red-hover-background: color-mix(
+		in srgb,
+		var(--ds-color-red-primary) 20%,
+		transparent
+	);
+	--button-outlined-red-default-color: var(--ds-color-red-primary);
+	--button-outlined-red-active-color: var(--ds-color-red-primary-hover);
+	--button-outlined-red-disabled-color: color-mix(
+		in srgb,
+		var(--button-outlined-red-default-color) 70%,
+		transparent
+	);
+	--button-outlined-red-default-border: var(--ds-color-red-primary);
+	--button-outlined-red-hover-border: var(--ds-color-red-primary-hover);
+	--button-outlined-red-disabled-border: color-mix(
+		in srgb,
+		var(--ds-color-red-primary) 50%,
+		transparent
+	);
+
+	/* CYAN */
+	--button-outlined-cyan-default-background: transparent;
+	--button-outlined-cyan-hover-background: color-mix(
+		in srgb,
+		var(--ds-color-cyan-primary) 20%,
+		transparent
+	);
+	--button-outlined-cyan-default-color: var(--ds-color-cyan-primary);
+	--button-outlined-cyan-active-color: var(--ds-color-cyan-primary-hover);
+	--button-outlined-cyan-disabled-color: color-mix(
+		in srgb,
+		var(--button-outlined-cyan-default-color) 70%,
+		transparent
+	);
+	--button-outlined-cyan-default-border: var(--ds-color-cyan-primary);
+	--button-outlined-cyan-hover-border: var(--ds-color-cyan-primary-hover);
+	--button-outlined-cyan-disabled-border: color-mix(
+		in srgb,
+		var(--ds-color-cyan-primary) 50%,
+		transparent
+	);
+}
--- a/src/shared/designSystem/styles/components/button/primary.css
+++ b/src/shared/designSystem/styles/components/button/primary.css
@@ -0,0 +1,59 @@
+:root {
+	/* BLUE */
+	--button-primary-blue-default-background: var(--ds-color-blue-primary);
+	--button-primary-blue-hover-background: var(--ds-color-blue-primary-hover);
+	--button-primary-blue-active-background: var(--ds-color-blue-primary-active);
+	--button-primary-blue-disabled-background: var(--ds-color-blue-4);
+	--button-primary-blue-default-color: var(--ds-color-gray-1);
+	--button-primary-blue-disabled-color: color-mix(
+		in srgb,
+		var(--button-primary-blue-default-color) 40%,
+		transparent
+	);
+	--button-primary-blue-default-border: transparent;
+
+	/* DARK */
+	--button-primary-dark-default-background: var(--ds-color-gray-primary);
+	--button-primary-dark-hover-background: var(--ds-color-gray-primary-hover);
+	--button-primary-dark-active-background: var(--ds-color-gray-primary-active);
+	--button-primary-dark-disabled-background: var(--ds-color-gray-7);
+	--button-primary-dark-default-color: var(--ds-color-gray-1);
+	--button-primary-dark-disabled-color: color-mix(
+		in srgb,
+		var(--button-primary-dark-default-color) 40%,
+		transparent
+	);
+	--button-primary-dark-default-border: transparent;
+
+	/* RED */
+	--button-primary-red-default-background: var(--ds-color-red-primary);
+	--button-primary-red-hover-background: var(--ds-color-red-primary-hover);
+	--button-primary-red-active-background: var(--ds-color-red-primary-active);
+	--button-primary-red-disabled-background: var(--ds-color-red-4);
+	--button-primary-red-default-color: var(--ds-color-gray-1);
+	--button-primary-red-disabled-color: color-mix(
+		in srgb,
+		var(--button-primary-red-default-color) 40%,
+		transparent
+	);
+	--button-primary-red-default-border: transparent;
+
+	/* CYAN */
+	--button-primary-cyan-default-background: var(--ds-color-cyan-primary);
+	--button-primary-cyan-hover-background: var(--ds-color-cyan-primary-hover);
+	--button-primary-cyan-active-background: var(--ds-color-cyan-primary-active);
+	--button-primary-cyan-disabled-background: var(--ds-color-cyan-4);
+	--button-primary-cyan-default-color: var(--ds-theme-text-primary-inverted);
+	--button-primary-cyan-hover-color: var(
+		--ds-theme-text-primary-inverted-hover
+	);
+	--button-primary-cyan-active-color: var(
+		--ds-theme-text-primary-inverted-active
+	);
+	--button-primary-cyan-disabled-color: color-mix(
+		in srgb,
+		var(--button-primary-cyan-default-color) 40%,
+		transparent
+	);
+	--button-primary-cyan-default-border: transparent;
+}
--- a/src/shared/designSystem/styles/components/button/secondary.css
+++ b/src/shared/designSystem/styles/components/button/secondary.css
@@ -0,0 +1,71 @@
+:root {
+	/* BLUE */
+	--button-secondary-blue-default-background: var(--ds-color-blue-secondary);
+	--button-secondary-blue-hover-background: var(
+		--ds-color-blue-secondary-hover
+	);
+	--button-secondary-blue-active-background: var(
+		--ds-color-blue-secondary-active
+	);
+	--button-secondary-blue-default-color: var(--ds-color-blue-primary);
+	--button-secondary-blue-hover-color: var(--ds-color-blue-primary-hover);
+	--button-secondary-blue-active-color: var(--ds-color-blue-primary-active);
+	--button-secondary-blue-disabled-color: color-mix(
+		in srgb,
+		var(--button-secondary-blue-default-color) 70%,
+		transparent
+	);
+	--button-secondary-blue-default-border: transparent;
+
+	/* DARK */
+	--button-secondary-dark-default-background: var(--ds-color-gray-secondary);
+	--button-secondary-dark-hover-background: var(
+		--ds-color-gray-secondary-hover
+	);
+	--button-secondary-dark-active-background: var(
+		--ds-color-gray-secondary-active
+	);
+	--button-secondary-dark-default-color: var(--ds-color-gray-primary);
+	--button-secondary-dark-hover-color: var(--ds-color-gray-primary-hover);
+	--button-secondary-dark-active-color: var(--ds-color-gray-primary-active);
+	--button-secondary-dark-disabled-color: color-mix(
+		in srgb,
+		var(--button-secondary-dark-default-color) 70%,
+		transparent
+	);
+	--button-secondary-dark-default-border: transparent;
+
+	/* RED */
+	--button-secondary-red-default-background: var(--ds-color-red-secondary);
+	--button-secondary-red-hover-background: var(--ds-color-red-secondary-hover);
+	--button-secondary-red-active-background: var(
+		--ds-color-red-secondary-active
+	);
+	--button-secondary-red-default-color: var(--ds-color-red-primary);
+	--button-secondary-red-hover-color: var(--ds-color-red-primary-hover);
+	--button-secondary-red-active-color: var(--ds-color-red-primary-active);
+	--button-secondary-red-disabled-color: color-mix(
+		in srgb,
+		var(--button-secondary-red-default-color) 70%,
+		transparent
+	);
+	--button-secondary-red-default-border: transparent;
+
+	/* CYAN */
+	--button-secondary-cyan-default-background: var(--ds-color-cyan-secondary);
+	--button-secondary-cyan-hover-background: var(
+		--ds-color-cyan-secondary-hover
+	);
+	--button-secondary-cyan-active-background: var(
+		--ds-color-cyan-secondary-active
+	);
+	--button-secondary-cyan-default-color: var(--ds-color-cyan-8);
+	--button-secondary-cyan-hover-color: var(--ds-color-cyan-primary-hover);
+	--button-secondary-cyan-active-color: var(--ds-color-cyan-primary-active);
+	--button-secondary-cyan-disabled-color: color-mix(
+		in srgb,
+		var(--button-secondary-cyan-default-color) 70%,
+		transparent
+	);
+	--button-secondary-cyan-default-border: transparent;
+}
--- a/src/shared/designSystem/styles/components/button/text.css
+++ b/src/shared/designSystem/styles/components/button/text.css
@@ -0,0 +1,49 @@
+:root {
+	/* BLUE */
+	--button-text-blue-default-background: transparent;
+	--button-text-blue-default-color: var(--ds-color-blue-primary);
+	--button-text-blue-hover-color: var(--ds-color-blue-primary-hover);
+	--button-text-blue-active-color: var(--ds-color-blue-primary-active);
+	--button-text-blue-disabled-color: color-mix(
+		in srgb,
+		var(--button-text-blue-default-color) 40%,
+		transparent
+	);
+	--button-text-blue-default-border: transparent;
+
+	/* DARK */
+	--button-text-dark-default-background: transparent;
+	--button-text-dark-default-color: var(--ds-theme-text-primary);
+	--button-text-dark-hover-color: var(--ds-theme-text-primary-hover);
+	--button-text-dark-active-color: var(--ds-theme-text-primary-active);
+	--button-text-dark-disabled-color: color-mix(
+		in srgb,
+		var(--button-text-dark-default-color) 40%,
+		transparent
+	);
+	--button-text-dark-default-border: transparent;
+
+	/* RED */
+	--button-text-red-default-background: transparent;
+	--button-text-red-default-color: var(--ds-color-red-primary);
+	--button-text-red-hover-color: var(--ds-color-red-primary-hover);
+	--button-text-red-active-color: var(--ds-color-red-primary-active);
+	--button-text-red-disabled-color: color-mix(
+		in srgb,
+		var(--button-text-red-default-color) 40%,
+		transparent
+	);
+	--button-text-red-default-border: transparent;
+
+	/* CYAN */
+	--button-text-cyan-default-background: transparent;
+	--button-text-cyan-default-color: var(--ds-color-cyan-primary);
+	--button-text-cyan-hover-color: var(--ds-color-cyan-primary-hover);
+	--button-text-cyan-active-color: var(--ds-color-cyan-primary-active);
+	--button-text-cyan-disabled-color: color-mix(
+		in srgb,
+		var(--button-text-cyan-default-color) 40%,
+		transparent
+	);
+	--button-text-cyan-default-border: transparent;
+}
--- a/src/shared/designSystem/styles/components/index.css
+++ b/src/shared/designSystem/styles/components/index.css
@@ -0,0 +1 @@
+@import "./button/index.css";
--- a/src/shared/designSystem/styles/core/animation.css
+++ b/src/shared/designSystem/styles/core/animation.css
@@ -0,0 +1,20 @@
+:root {
+	--ds-ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
+	--ds-ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
+	--ds-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
+	--ds-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+	--ds-ease-in-out: cubic-bezier(0.46, 0, 0.03, 0.99);
+	--ds-ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
+	--ds-ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
+	--ds-ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
+	--ds-ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
+	--ds-ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
+	--ds-ease-in-out-circ: cubic-bezier(0.4, 0.15, 0.6, 0.85);
+	--ds-ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+	--ds-ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+	--ds-ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
+
+	--ds-duration-fast: 160ms;
+	--ds-duration-base: 220ms;
+	--ds-duration-slow: 320ms;
+}
--- a/src/shared/designSystem/styles/core/base.css
+++ b/src/shared/designSystem/styles/core/base.css
@@ -0,0 +1,51 @@
+html {
+	scroll-behavior: smooth;
+}
+
+body {
+	background: var(--ds-theme-background);
+	color: var(--ds-theme-text-primary);
+	font-family: var(--ds-font-family-secondary), "Roboto", sans-serif;
+	line-height: 1.5;
+	text-rendering: optimizeLegibility;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+a {
+	color: inherit;
+	text-decoration: none;
+}
+
+button {
+	border: 0;
+	background: transparent;
+}
+
+.theme-bg {
+	background-color: var(--ds-theme-background);
+}
+
+.theme-surface {
+	background-color: var(--ds-theme-surface);
+}
+
+.theme-surface-muted {
+	background-color: var(--ds-theme-surface-muted);
+}
+
+.theme-text {
+	color: var(--ds-theme-text-primary);
+}
+
+.theme-text-secondary {
+	color: var(--ds-theme-text-secondary);
+}
+
+.theme-text-muted {
+	color: var(--ds-theme-text-muted);
+}
+
+.theme-border {
+	border-color: var(--ds-theme-border);
+}
--- a/src/shared/designSystem/styles/core/colors.css
+++ b/src/shared/designSystem/styles/core/colors.css
@@ -0,0 +1,118 @@
+:root {
+	/* gray scale */
+	--ds-color-gray-1: #ffffff;
+	--ds-color-gray-2: #fafafa;
+	--ds-color-gray-3: #f5f5f5;
+	--ds-color-gray-4: #f0f0f0;
+	--ds-color-gray-5: #d9d9d9;
+	--ds-color-gray-6: #bfbfbf;
+	--ds-color-gray-7: #8c8c8c;
+	--ds-color-gray-8: #595959;
+	--ds-color-gray-9: #434343;
+	--ds-color-gray-10: #262626;
+	--ds-color-gray-11: #1f1f1f;
+	--ds-color-gray-12: #141414;
+	--ds-color-gray-13: #000000;
+
+	--ds-color-gray-primary: var(--ds-color-gray-12);
+	--ds-color-gray-primary-hover: var(--ds-color-gray-11);
+	--ds-color-gray-primary-active: var(--ds-color-gray-10);
+	--ds-color-gray-secondary: var(--ds-color-gray-5);
+	--ds-color-gray-secondary-hover: var(--ds-color-gray-4);
+	--ds-color-gray-secondary-active: var(--ds-color-gray-3);
+
+	/* green scale */
+	--ds-color-green-1: #f6ffed;
+	--ds-color-green-2: #d9f7be;
+	--ds-color-green-3: #b7eb8f;
+	--ds-color-green-4: #95de64;
+	--ds-color-green-5: #73d13d;
+	--ds-color-green-6: #52c41a;
+	--ds-color-green-7: #389e0d;
+	--ds-color-green-8: #237804;
+	--ds-color-green-9: #135200;
+	--ds-color-green-10: #092b00;
+
+	--ds-color-green-primary: var(--ds-color-green-6);
+	--ds-color-green-primary-hover: var(--ds-color-green-7);
+	--ds-color-green-primary-active: var(--ds-color-green-8);
+	--ds-color-green-secondary: var(--ds-color-green-3);
+	--ds-color-green-secondary-hover: var(--ds-color-green-2);
+	--ds-color-green-secondary-active: var(--ds-color-green-1);
+
+	/* blue scale */
+	--ds-color-blue-1: #e6f7ff;
+	--ds-color-blue-2: #bae7ff;
+	--ds-color-blue-3: #91d5ff;
+	--ds-color-blue-4: #69c0ff;
+	--ds-color-blue-5: #40a9ff;
+	--ds-color-blue-6: #1890ff;
+	--ds-color-blue-7: #096dd9;
+	--ds-color-blue-8: #0050b3;
+	--ds-color-blue-9: #003a8c;
+	--ds-color-blue-10: #002766;
+
+	--ds-color-blue-primary: var(--ds-color-blue-6);
+	--ds-color-blue-primary-hover: var(--ds-color-blue-7);
+	--ds-color-blue-primary-active: var(--ds-color-blue-8);
+	--ds-color-blue-secondary: var(--ds-color-blue-3);
+	--ds-color-blue-secondary-hover: var(--ds-color-blue-2);
+	--ds-color-blue-secondary-active: var(--ds-color-blue-1);
+
+	/* cyan scale */
+	--ds-color-cyan-1: #e6fffb;
+	--ds-color-cyan-2: #b5f5ec;
+	--ds-color-cyan-3: #87e8de;
+	--ds-color-cyan-4: #5cdbd3;
+	--ds-color-cyan-5: #36cfc9;
+	--ds-color-cyan-6: #13c2c2;
+	--ds-color-cyan-7: #08979c;
+	--ds-color-cyan-8: #006d75;
+	--ds-color-cyan-9: #00474f;
+	--ds-color-cyan-10: #002329;
+
+	--ds-color-cyan-primary: var(--ds-color-cyan-5);
+	--ds-color-cyan-primary-hover: var(--ds-color-cyan-7);
+	--ds-color-cyan-primary-active: var(--ds-color-cyan-8);
+	--ds-color-cyan-secondary: var(--ds-color-cyan-3);
+	--ds-color-cyan-secondary-hover: var(--ds-color-cyan-2);
+	--ds-color-cyan-secondary-active: var(--ds-color-cyan-1);
+
+	/* orange scale */
+	--ds-color-orange-1: #fff7e6;
+	--ds-color-orange-2: #ffe7ba;
+	--ds-color-orange-3: #ffd591;
+	--ds-color-orange-4: #ffc069;
+	--ds-color-orange-5: #ffa940;
+	--ds-color-orange-6: #fa8c16;
+	--ds-color-orange-7: #d46b08;
+	--ds-color-orange-8: #ad4e00;
+	--ds-color-orange-9: #873800;
+	--ds-color-orange-10: #612500;
+
+	--ds-color-orange-primary: var(--ds-color-orange-6);
+	--ds-color-orange-primary-hover: var(--ds-color-orange-7);
+	--ds-color-orange-primary-active: var(--ds-color-orange-8);
+	--ds-color-orange-secondary: var(--ds-color-orange-3);
+	--ds-color-orange-secondary-hover: var(--ds-color-orange-2);
+	--ds-color-orange-secondary-active: var(--ds-color-orange-1);
+
+	/* red scale */
+	--ds-color-red-1: #fff1f0;
+	--ds-color-red-2: #ffccc7;
+	--ds-color-red-3: #ffa39e;
+	--ds-color-red-4: #ff7875;
+	--ds-color-red-5: #ff4d4f;
+	--ds-color-red-6: #f5222d;
+	--ds-color-red-7: #cf1322;
+	--ds-color-red-8: #a8071a;
+	--ds-color-red-9: #820014;
+	--ds-color-red-10: #5c0011;
+
+	--ds-color-red-primary: var(--ds-color-red-6);
+	--ds-color-red-primary-hover: var(--ds-color-red-7);
+	--ds-color-red-primary-active: var(--ds-color-red-8);
+	--ds-color-red-secondary: var(--ds-color-red-3);
+	--ds-color-red-secondary-hover: var(--ds-color-red-2);
+	--ds-color-red-secondary-active: var(--ds-color-red-1);
+}
--- a/src/shared/designSystem/styles/core/fonts.css
+++ b/src/shared/designSystem/styles/core/fonts.css
@@ -0,0 +1,13 @@
+:root {
+	--ds-font-family-fallback:
+		-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
+		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+	--ds-font-family-primary:
+		"Aeroport-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+		Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+		"Segoe UI Symbol";
+	--ds-font-family-secondary:
+		"Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+		Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+		"Segoe UI Symbol";
+}
--- a/src/shared/designSystem/styles/core/reset.css
+++ b/src/shared/designSystem/styles/core/reset.css
@@ -0,0 +1,205 @@
+/**
+Use a better box model (opinionated).
+*/
+*,
+::before,
+::after {
+	box-sizing: border-box;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers.
+2. Correct the line height in all browsers.
+3. Prevent adjustments of font size after orientation changes in iOS.
+4. Use a more readable tab size (opinionated).
+*/
+html {
+	font-family:
+		system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+		"Apple Color Emoji", "Segoe UI Emoji"; /* 1 */
+	line-height: 1.15; /* 2 */
+	-webkit-text-size-adjust: 100%; /* 3 */
+	tab-size: 4; /* 4 */
+}
+
+/*
+Sections
+========
+*/
+
+/**
+Remove the margin in all browsers.
+*/
+
+body {
+	margin: 0;
+}
+
+/*
+Text-level semantics
+====================
+*/
+
+/**
+Add the correct font weight in Chrome and Safari.
+*/
+
+b,
+strong {
+	font-weight: bolder;
+}
+
+/**
+1. Improve consistency of default fonts in all browsers.
+2. Correct the odd 'em' font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+	font-family:
+		ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
+	font-size: 1em; /* 2 */
+}
+
+/**
+Add the correct font size in all browsers.
+*/
+
+small {
+	font-size: 80%;
+}
+
+/**
+Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+sup {
+	top: -0.5em;
+}
+
+/*
+Tabular data
+============
+*/
+
+/**
+Correct table border color inheritance in Chrome and Safari.
+(https://issues.chromium.org/issues/40615503,
+https://bugs.webkit.org/show_bug.cgi?id=195016)
+*/
+
+table {
+	border-color: currentcolor;
+}
+
+/*
+Forms
+=====
+*/
+
+/**
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+	font-family: inherit; /* 1 */
+	font-size: 100%; /* 1 */
+	line-height: 1.15; /* 1 */
+	margin: 0; /* 2 */
+}
+
+/**
+Correct the inability to style clickable types in iOS and Safari.
+*/
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+	-webkit-appearance: button;
+}
+
+/**
+Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
+*/
+
+legend {
+	padding: 0;
+}
+
+/**
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+	vertical-align: baseline;
+}
+
+/**
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+	height: auto;
+}
+
+/**
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type="search"] {
+	-webkit-appearance: textfield; /* 1 */
+	outline-offset: -2px; /* 2 */
+}
+
+/**
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+	-webkit-appearance: none;
+}
+
+/**
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to 'inherit' in Safari.
+*/
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button; /* 1 */
+	font: inherit; /* 2 */
+}
+
+/*
+Interactive
+===========
+*/
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+	display: list-item;
+}
--- a/src/shared/designSystem/styles/core/sizes.css
+++ b/src/shared/designSystem/styles/core/sizes.css
@@ -0,0 +1,39 @@
+:root {
+	/* content sizes */
+	--ds-content-size-16: 16px;
+	--ds-content-size-20: 20px;
+	--ds-content-size-24: 24px;
+	--ds-content-size-28: 28px;
+
+	/* container sizes */
+	--ds-container-size-36: 36px;
+	--ds-container-size-44: 44px;
+	--ds-container-size-52: 52px;
+	--ds-container-size-60: 60px;
+
+	/* font sizes */
+	--ds-font-size-8: 8px;
+	--ds-font-size-10: 10px;
+	--ds-font-size-12: 12px;
+	--ds-font-size-14: 14px;
+	--ds-font-size-16: 16px;
+	--ds-font-size-20: 20px;
+
+	/* border radius sizes */
+	--ds-radius-1: 1px;
+	--ds-radius-2: 2px;
+	--ds-radius-4: 4px;
+	--ds-radius-8: 8px;
+	--ds-radius-12: 12px;
+	--ds-radius-16: 16px;
+	--ds-radius-24: 24px;
+	--ds-radius-36: 36px;
+	--ds-radius-40: 40px;
+
+	/* icon sizes */
+	--ds-icon-size-12: 12px;
+	--ds-icon-size-16: 16px;
+	--ds-icon-size-20: 20px;
+	--ds-icon-size-24: 24px;
+	--ds-icon-size-28: 28px;
+}
--- a/src/shared/designSystem/styles/core/spaces.css
+++ b/src/shared/designSystem/styles/core/spaces.css
@@ -0,0 +1,13 @@
+:root {
+	--ds-space-0: 0;
+	--ds-space-2: 0.125rem;
+	--ds-space-4: 0.25rem;
+	--ds-space-6: 0.375rem;
+	--ds-space-8: 0.5rem;
+	--ds-space-12: 0.75rem;
+	--ds-space-16: 1rem;
+	--ds-space-20: 1.25rem;
+	--ds-space-24: 1.5rem;
+	--ds-space-32: 2rem;
+	--ds-space-40: 2.5rem;
+}
--- a/src/shared/designSystem/styles/core/theme.css
+++ b/src/shared/designSystem/styles/core/theme.css
@@ -0,0 +1,48 @@
+:root,
+[data-theme="light"] {
+	color-scheme: light;
+
+	--ds-theme-background: var(--ds-color-gray-1);
+	--ds-theme-surface: var(--ds-color-gray-2);
+	--ds-theme-surface-muted: var(--ds-color-gray-3);
+
+	--ds-theme-text-primary: var(--ds-color-gray-12);
+	--ds-theme-text-primary-hover: var(--ds-color-gray-7);
+	--ds-theme-text-primary-active: var(--ds-color-gray-6);
+
+	--ds-theme-text-primary-inverted: var(--ds-color-gray-1);
+	--ds-theme-text-primary-inverted-hover: var(--ds-color-gray-5);
+	--ds-theme-text-primary-inverted-active: var(--ds-color-gray-6);
+
+	--ds-theme-text-secondary: var(--ds-color-gray-8);
+	--ds-theme-text-muted: var(--ds-color-gray-7);
+
+	--ds-theme-border: var(--ds-color-gray-4);
+	--ds-theme-border-strong: var(--ds-color-gray-6);
+
+	--ds-theme-danger: var(--ds-color-red-5);
+}
+
+[data-theme="dark"] {
+	color-scheme: dark;
+
+	--ds-theme-background: var(--ds-color-gray-13);
+	--ds-theme-surface: var(--ds-color-gray-12);
+	--ds-theme-surface-muted: var(--ds-color-gray-11);
+
+	--ds-theme-text-primary: var(--ds-color-gray-1);
+	--ds-theme-text-primary-hover: var(--ds-color-gray-5);
+	--ds-theme-text-primary-active: var(--ds-color-gray-6);
+
+	--ds-theme-text-primary-inverted: var(--ds-color-gray-12);
+	--ds-theme-text-primary-inverted-hover: var(--ds-color-gray-5);
+	--ds-theme-text-primary-inverted-active: var(--ds-color-gray-4);
+
+	--ds-theme-text-secondary: var(--ds-color-gray-5);
+	--ds-theme-text-muted: var(--ds-color-gray-7);
+
+	--ds-theme-border: var(--ds-color-gray-10);
+	--ds-theme-border-strong: var(--ds-color-gray-8);
+
+	--ds-theme-danger: var(--ds-color-red-5);
+}
--- a/src/shared/designSystem/styles/core/z-indexes.css
+++ b/src/shared/designSystem/styles/core/z-indexes.css
@@ -0,0 +1,8 @@
+:root {
+	--ds-z-dropdown: 1060;
+	--ds-z-sticky: 1020;
+	--ds-z-fixed: 1030;
+	--ds-z-modal-backdrop: 1040;
+	--ds-z-modal: 1050;
+	--ds-z-tooltip: 1060;
+}
--- a/src/shared/designSystem/styles/global.css
+++ b/src/shared/designSystem/styles/global.css
@@ -0,0 +1,12 @@
+@import "./core/reset.css";
+@import "./core/fonts.css";
+@import "./core/colors.css";
+@import "./core/theme.css";
+
+@import "./core/base.css";
+@import "./core/animation.css";
+@import "./core/sizes.css";
+@import "./core/spaces.css";
+@import "./core/z-indexes.css";
+
+@import "./components";
--- a/src/widgets/.gitkeep
+++ b/src/widgets/.gitkeep
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,23 @@
 {
-  "extends": "astro/tsconfigs/strict",
-  "include": [".astro/types.d.ts", "**/*"],
-  "exclude": ["dist"]
+	"extends": "astro/tsconfigs/strict",
+	"compilerOptions": {
+		"baseUrl": "./",
+		"paths": {
+			"@app/*": ["src/app/*"],
+			"@pageModules/*": ["src/pageModules/*"],
+			"@widgets/*": ["src/widgets/*"],
+			"@features/*": ["src/features/*"],
+			"@entities/*": ["src/entities/*"],
+			"@shared/*": ["src/shared/*"],
+			"@mocks/*": ["src/__mocks__/*"]
+		},
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"forceConsistentCasingInFileNames": true,
+		"jsx": "preserve",
+		"jsxImportSource": "solid-js"
+	},
+	"include": [".astro/types.d.ts", ".storybook/**/*", "./**/*"],
+	"exclude": ["dist"]
 }
Author	SHA1	Message	Date
Nikita Pozdniakov	8642a5bce1	Add Button design system and Storybook Solid setup Some checks failed CI TEST (Vault secrets) / build (push) Failing after 15s Details	2026-05-27 15:10:38 +03:00
Nikita Pozdniakov	7d3d87b1e5	add Button component and Storybook configuration Some checks failed CI TEST (Vault secrets) / build (push) Failing after 9s Details	2026-05-04 11:38:50 +03:00
Nikita Pozdniakov	3105d23e42	move TypeScript lint-staged and @astrojs/check to devDependencies Some checks failed CI TEST (Vault secrets) / build (push) Failing after 7s Details	2026-04-29 15:45:04 +03:00
Nikita Pozdniakov	8cef9f08d2	fix lint-staged and lint scripts Some checks failed CI TEST (Vault secrets) / build (push) Failing after 7s Details	2026-04-29 15:38:36 +03:00
Nikita Pozdniakov	62ac18f4fb	remove unused script	2026-04-29 15:33:42 +03:00
Nikita Pozdniakov	5544b226d9	Fix pre commit hook	2026-04-29 15:31:26 +03:00
Nikita Pozdniakov	d45fdaf21a	Enable strict TypeScript compiler checks	2026-04-29 15:26:16 +03:00
Nikita Pozdniakov	70fa864f6d	Add node-version Some checks failed CI TEST (Vault secrets) / build (push) Failing after 12s Details	2026-04-29 15:10:21 +03:00
Nikita Pozdniakov	be6703c86d	Remove unused var	2026-04-29 15:09:42 +03:00
Nikita Pozdniakov	07c90564de	Setup FSD	2026-04-29 15:09:09 +03:00
Nikita Pozdniakov	7fd0ae8a6b	Add webtui, tailwind and biome	2026-04-29 12:46:56 +03:00
				`@@ -0,0 +1 @@`
				`export { default } from "./BaseLayout.astro";`
				`@@ -0,0 +1 @@`
				`export { default } from "./ui/DemoPage.astro";`
				`@@ -0,0 +1 @@`
				`export { default } from "./ui/HomePage.astro";`
				`@@ -0,0 +1 @@`
				`export { default } from "./ui/UiSandboxPage.astro";`
				`@@ -0,0 +1 @@`
				`export { Button } from "./components/Button";`