refactor: привести шаблон к правилам стайлгайда

- Архитектура SLM: провайдеры перенесены в infrastructure/mantine, стили в shared/styles - SVG-спрайты: переход на @gromlab/svg-sprites, добавлен preload в layout - Стили: переменные и брейкпоинты приведены к базовому набору стайлгайда (rem, Mobile First) - PostCSS: добавлены postcss-custom-media, postcss-nesting, autoprefixer, @csstools/postcss-global-data - tsconfig: исправлен алиас shared/* → ./src/shared/* - Удалены app/styles/, app/providers/, scripts/create-svg-sprite.js, public/img/sprites/ - README переписан на SLM-архитектуру - Добавлены иконки: clipboard-tick, doctor, people, symptom
2026-04-30 19:24:40 +03:00
parent 1950c3612a
commit bf792f6159
27 changed files with 549 additions and 321 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -40,3 +40,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# generated sprites
+/public/sprites/
+/src/ui/svg-sprite/
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -1,65 +1,11 @@
-# AGENTS.md
+# AGENTS.md — Маршрутизатор задач агента

-Инструкции для AI-ассистента, работающего с этим проектом.
+Этот файл определяет, какую документацию агент обязан прочитать перед выполнением задачи.

-## Главная директива
+## Разработка

-Перед выполнением любой задачи ассистент обязан свериться со стайлгайдом проекта: [`ai/nextjs-style-guide/README.md`](./ai/nextjs-style-guide/README.md).
+Если задача связана с разработкой (написание кода, рефакторинг, исправление багов, добавление фич, работа с компонентами, API и т.д.), агент **обязан** прочитать и следовать:

-Стайлгайд — единственный источник истины по архитектуре, стеку, оформлению кода и работе с данными. При расхождении между стайлгайдом и пользовательским запросом ассистент задаёт уточняющий вопрос, а не отступает молча.
+👉 [ai/nextjs-style-guide/DEVELOP.md](./ai/nextjs-style-guide/DEVELOP.md)

-Запрещено писать код «по общим знаниям Next.js / React / TypeScript». Любое решение принимается по правилам этого проекта.
-
-## Архитектура — фундамент проекта
-
-Архитектура SLM (Scoped Layered Module Design) — **самое важное в проекте**. Это не правило «при создании нового модуля», а сквозной принцип, применяемый **всегда**: при чтении кода, при правке одной строки, при добавлении импорта, при рефакторинге, при обсуждении решения.
-
-Без соблюдения архитектуры проект превращается в бардак. Поэтому каждое действие проверяется на соответствие SLM.
-
-Ключевые принципы, которые ассистент держит в голове постоянно:
-
- **Строгое разделение бизнес-логики и инфраструктуры.** Инфраструктура (`shared`, API-клиенты, транспорт, конфигурация) ничего не знает о бизнесе. Бизнес-модули используют инфраструктуру только через её публичный API.
- **Направление зависимостей — только сверху вниз по слоям.** Боковые и обратные связи в обход публичного API запрещены.
- **Публичный API модуля — единственная точка входа.** Импорт во внутренности чужого модуля запрещён.
- **Импорты — через алиасы слоёв.** Префикс `@/` не используется.
-
-Перед любым действием ассистент задаёт себе вопросы: к какому слою относится код? Не нарушается ли направление зависимостей? Не смешиваются ли бизнес и инфраструктура? Использую ли я публичный API модуля?
-
-Обязательные к чтению документы по архитектуре:
-
- [Архитектура: Обзор](./ai/nextjs-style-guide/basics/architecture/index.md)
- [Слои](./ai/nextjs-style-guide/basics/architecture/reference/layers.md)
- [Модули](./ai/nextjs-style-guide/basics/architecture/reference/modules.md)
- [Сегменты](./ai/nextjs-style-guide/basics/architecture/reference/segments.md)
-
-## Базовые правила (читать всегда)
-
- [Технологии и библиотеки](./ai/nextjs-style-guide/basics/tech-stack.md) — разрешённый стек.
- [Именование](./ai/nextjs-style-guide/basics/naming.md)
- [Стиль кода](./ai/nextjs-style-guide/basics/code-style.md)
- [Типизация](./ai/nextjs-style-guide/basics/typing.md)
- [Документирование](./ai/nextjs-style-guide/basics/documentation.md)
-
-## Контекстные разделы (читать по теме задачи)
-
-Полный перечень разделов стайлгайда — в его оглавлении: [`ai/nextjs-style-guide/README.md`](./ai/nextjs-style-guide/README.md). Это источник истины: AGENTS.md не дублирует список разделов, чтобы избежать рассинхронизации. Перед задачей ассистент открывает оглавление стайлгайда и выбирает релевантные разделы (компоненты, страницы App Router, данные REST/realtime, стили, SVG-спрайты, шаблоны и генерация, установка и настройка инструментов и т. д.).
-
-При появлении новых разделов в стайлгайде ассистент учитывает их автоматически — через оглавление, без правок этого файла.
-
-## Запреты
-
- Импорт во внутренности чужих модулей в обход публичного API.
- Бизнес-логика в `shared`; инфраструктура внутри бизнес-модулей.
- Прямые `fetch` или `useSWR` в компонентах. В клиентских компонентах данные получают только через хуки модуля API; в серверных — прямым вызовом метода API-клиента.
- Использование зависимостей вне [tech-stack.md](./ai/nextjs-style-guide/basics/tech-stack.md) без согласования с пользователем.
- Префикс `@/` в импортах — все пути идут через алиасы слоёв.
- Отступления от стайлгайда «ради скорости» или «потому что так короче».
-
-## Коммуникация
-
- Язык общения — русский.
- При неоднозначности задачи — уточняющий вопрос, без догадок.
-
-## Коммиты
-
-Коммиты создаются по правилам семантических коммитов через skill `commit`.
+Этот файл содержит строгий порядок чтения документации. Агент должен следовать ему **без исключений**.
--- a/README.md
+++ b/README.md
@@ -15,20 +15,23 @@

 ## Архитектура

-Проект использует кастомизированный FSD (Feature-Sliced Design):
+Проект использует SLM Design — модульную архитектуру с вертикальной организацией домена.

 ```
 src/
-├── app/        # Роутинг Next.js, провайдеры, глобальные стили
-├── screens/    # Собранные страницы (UI)
-├── layouts/    # Каркасы и шаблоны страниц
-├── widgets/    # Крупные самостоятельные блоки интерфейса
-├── features/   # Пользовательские сценарии
-├── entities/   # Бизнес-сущности
-└── shared/     # Переиспользуемый код (UI, утилиты, типы)
+├── app/            # Роутинг Next.js и точка входа приложения
+├── layouts/        # Каркасы страниц (header, footer, sidebar)
+├── screens/        # Контент конкретных страниц
+├── widgets/        # Составные блоки интерфейса, не привязанные к домену
+├── business/       # Бизнес-домены (auth, catalog, orders)
+├── infrastructure/ # Техсервисы (theme, i18n, API-адаптеры)
+├── ui/             # UI-кит без бизнес-логики
+└── shared/         # Общие ресурсы (утилиты, типы, стили, спрайты)
 ```

-Зависимости идут строго сверху вниз: `app` -> `screens` -> `layouts` -> `widgets` -> `features` -> `entities` -> `shared`.
+Зависимости идут строго сверху вниз: `app` → `[layouts | screens]` → `widgets` → `business` → `infrastructure` → `ui` → `shared`.
+
+Подробнее: [Архитектура SLM](./ai/nextjs-style-guide/basics/architecture/index.md).

 ## Быстрый старт

@@ -44,13 +47,12 @@ npm run dev
 Модули создаются из шаблонов `.templates/`:

 ```bash
-npx @gromlab/create component button src/shared/ui
-npx @gromlab/create feature auth src/features
+npx @gromlab/create module auth src/business
 npx @gromlab/create widget header src/widgets
-npx @gromlab/create entity user src/entities
 npx @gromlab/create layout admin src/layouts
 npx @gromlab/create screen profile src/screens
-npx @gromlab/create store auth src/shared/model
+npx @gromlab/create module button src/ui
+npx @gromlab/create store auth src/shared
 ```

 ## Скрипты
@@ -62,3 +64,4 @@ npx @gromlab/create store auth src/shared/model
 | `npm run start` | Запуск продакшен-сервера |
 | `npm run lint` | Проверка кода (Biome) |
 | `npm run format` | Форматирование кода (Biome) |
+| `npm run sprite` | Генерация SVG-спрайтов |
--- a/biome.json
+++ b/biome.json
@@ -33,6 +33,9 @@
      "recommended": true,
      "suspicious": {
        "noUnknownAtRules": "off"
+      },
+      "correctness": {
+        "noUnknownMediaFeatureName": "off"
      }
    },
    "domains": {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -8,9 +8,12 @@
    "start": "next start",
    "lint": "biome check",
    "format": "biome format --write",
-    "sprite": "node scripts/create-svg-sprite.js"
+    "sprite": "svg-sprites",
+    "predev": "svg-sprites",
+    "prebuild": "svg-sprites"
  },
  "dependencies": {
+    "@gromlab/svg-sprites": "^0.1.4",
    "@mantine/core": "^8.3.18",
    "@mantine/hooks": "^8.3.18",
    "clsx": "^2.1.1",
@@ -22,13 +25,15 @@
  },
  "devDependencies": {
    "@biomejs/biome": "2.2.0",
+    "@csstools/postcss-global-data": "^4.0.0",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
-    "colorette": "^2.0.20",
+    "autoprefixer": "^10.5.0",
+    "postcss-custom-media": "^12.0.1",
+    "postcss-nesting": "^14.0.0",
    "postcss-preset-mantine": "^1.18.0",
    "postcss-simple-vars": "^7.0.1",
-    "svg-sprite": "^2.0.4",
    "typescript": "^5"
  }
 }
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -1,6 +1,10 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
  plugins: {
+    '@csstools/postcss-global-data': {
+      files: ['src/shared/styles/media.css'],
+    },
+    'postcss-custom-media': {},
    'postcss-preset-mantine': {},
    'postcss-simple-vars': {
      variables: {
@@ -11,6 +15,8 @@ const config = {
        'mantine-breakpoint-xl': '88em',
      },
    },
+    'postcss-nesting': {},
+    autoprefixer: {},
  },
 };

--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,9 +1,10 @@
+import '@mantine/core/styles.css';
+import 'shared/styles/global.css';
+
 import { ColorSchemeScript } from '@mantine/core';
+import { MantineProvider } from 'infrastructure/mantine';
 import type { Metadata } from 'next';
 import type { PropsWithChildren } from 'react';
-import { MantineProvider } from './providers';
-import '@mantine/core/styles.css';
-import './styles/index.css';

 export const metadata: Metadata = {
  title: {
@@ -35,6 +36,7 @@ export default function RootLayout({ children }: PropsWithChildren) {
    <html lang="ru" suppressHydrationWarning>
      <head>
        <ColorSchemeScript />
+        <link rel="preload" href="/sprites/icons.sprite.svg" as="image" />
      </head>
      <body>
        <MantineProvider>{children}</MantineProvider>
--- a/src/infrastructure/mantine/index.ts
+++ b/src/infrastructure/mantine/index.ts
@@ -0,0 +1 @@
+export { MantineProvider } from './mantine-provider';
--- a/src/infrastructure/mantine/mantine-provider.tsx
+++ b/src/infrastructure/mantine/mantine-provider.tsx
@@ -0,0 +1,11 @@
+'use client';
+
+import { MantineProvider as BaseMantineProvider } from '@mantine/core';
+import type { PropsWithChildren } from 'react';
+
+/**
+ * Провайдер Mantine UI.
+ */
+export const MantineProvider = ({ children }: PropsWithChildren) => {
+  return <BaseMantineProvider>{children}</BaseMantineProvider>;
+};
--- a/src/screens/home/styles/home.module.css
+++ b/src/screens/home/styles/home.module.css
@@ -2,8 +2,4 @@
  display: flex;
  align-items: center;
  min-height: 100vh;
-
-  @media (--md) {
-    display: none;
-  }
 }
--- a/src/shared/sprites/.gitkeep
+++ b/src/shared/sprites/.gitkeep
--- a/src/shared/sprites/icons.generated.ts
+++ b/src/shared/sprites/icons.generated.ts
@@ -1,7 +0,0 @@
-/**
- * Имена иконок спрайта «icons».
- * @generated — файл создан автоматически (npm run sprite), не редактировать вручную.
- */
-export type IconsIconName =
-  | 'arrow-down'
-  | 'arrow-right'
--- a/src/shared/sprites/icons/arrow-down.svg
+++ b/src/shared/sprites/icons/arrow-down.svg
@@ -1,4 +0,0 @@
-<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18.0701 14.4301L12.0001 20.5001L5.93005 14.4301" stroke="var(--icon-color-1, currentColor)" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M12 3.5V20.33" stroke="var(--icon-color-1, currentColor)" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
--- a/src/shared/sprites/icons/arrow-right.svg
+++ b/src/shared/sprites/icons/arrow-right.svg
@@ -1,3 +0,0 @@
-<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.2503 10.0003C18.2503 10.1992 18.1713 10.39 18.0307 10.5307L12.1973 16.364C11.9044 16.6569 11.4296 16.6569 11.1367 16.364C10.8438 16.0711 10.8438 15.5962 11.1367 15.3033L15.6897 10.7503L1.66699 10.7503C1.25278 10.7503 0.916992 10.4145 0.916992 10.0003C0.916992 9.58611 1.25278 9.25033 1.66699 9.25033L15.6897 9.25033L11.1367 4.69732C10.8438 4.40443 10.8438 3.92956 11.1367 3.63666C11.4296 3.34377 11.9044 3.34377 12.1973 3.63666L18.0307 9.47C18.1713 9.61065 18.2503 9.80141 18.2503 10.0003Z" fill="var(--icon-color-1, currentColor)"/>
-</svg>
--- a/src/shared/sprites/icons/clipboard-tick.svg
+++ b/src/shared/sprites/icons/clipboard-tick.svg
@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.965 22.05L16.215 24.3L22.215 18.3" stroke="#A93133" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 9H21C24 9 24 7.5 24 6C24 3 22.5 3 21 3H15C13.5 3 12 3 12 6C12 9 13.5 9 15 9Z" stroke="#A93133" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24 6.03003C28.995 6.30003 31.5 8.14503 31.5 15V24C31.5 30 30 33 22.5 33H13.5C6 33 4.5 30 4.5 24V15C4.5 8.16003 7.005 6.30003 12 6.03003" stroke="#A93133" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/shared/sprites/icons/doctor.svg
+++ b/src/shared/sprites/icons/doctor.svg
@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 6H7.5C6.70435 6 5.94129 6.31607 5.37868 6.87868C4.81607 7.44129 4.5 8.20435 4.5 9V14.25C4.5 16.438 5.36919 18.5365 6.91637 20.0836C8.46354 21.6308 10.562 22.5 12.75 22.5C14.938 22.5 17.0365 21.6308 18.5836 20.0836C20.1308 18.5365 21 16.438 21 14.25V9C21 8.20435 20.6839 7.44129 20.1213 6.87868C19.5587 6.31607 18.7956 6 18 6H16.5M12 22.5C12 23.6819 12.2328 24.8522 12.6851 25.9442C13.1374 27.0361 13.8003 28.0282 14.636 28.864C15.4718 29.6997 16.4639 30.3626 17.5558 30.8149C18.6478 31.2672 19.8181 31.5 21 31.5C22.1819 31.5 23.3522 31.2672 24.4442 30.8149C25.5361 30.3626 26.5282 29.6997 27.364 28.864C28.1997 28.0282 28.8626 27.0361 29.3149 25.9442C29.7672 24.8522 30 23.6819 30 22.5V18M30 18C29.2044 18 28.4413 17.6839 27.8787 17.1213C27.3161 16.5587 27 15.7956 27 15C27 14.2044 27.3161 13.4413 27.8787 12.8787C28.4413 12.3161 29.2044 12 30 12C30.7956 12 31.5587 12.3161 32.1213 12.8787C32.6839 13.4413 33 14.2044 33 15C33 15.7956 32.6839 16.5587 32.1213 17.1213C31.5587 17.6839 30.7956 18 30 18ZM16.5 4.5V7.5M9 4.5V7.5" stroke="#A93133" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/shared/sprites/icons/people.svg
+++ b/src/shared/sprites/icons/people.svg
@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.455 21.66C27.51 22.005 29.775 21.645 31.365 20.58C33.48 19.17 33.48 16.86 31.365 15.45C29.76 14.385 27.465 14.025 25.41 14.385M10.5 21.66C8.44503 22.005 6.18003 21.645 4.59003 20.58C2.47503 19.17 2.47503 16.86 4.59003 15.45C6.19503 14.385 8.49003 14.025 10.545 14.385M27 10.74C26.91 10.725 26.805 10.725 26.715 10.74C24.645 10.665 22.995 8.97 22.995 6.87C22.995 4.725 24.72 3 26.865 3C29.01 3 30.735 4.74 30.735 6.87C30.72 8.97 29.07 10.665 27 10.74ZM8.95503 10.74C9.04503 10.725 9.15003 10.725 9.24003 10.74C11.31 10.665 12.96 8.97 12.96 6.87C12.96 4.725 11.235 3 9.09003 3C6.94503 3 5.22003 4.74 5.22003 6.87C5.23503 8.97 6.88503 10.665 8.95503 10.74ZM18 21.945C17.91 21.93 17.805 21.93 17.715 21.945C15.645 21.87 13.995 20.175 13.995 18.075C13.995 15.93 15.72 14.205 17.865 14.205C20.01 14.205 21.735 15.945 21.735 18.075C21.72 20.175 20.07 21.885 18 21.945ZM13.635 26.67C11.52 28.08 11.52 30.39 13.635 31.8C16.035 33.405 19.965 33.405 22.365 31.8C24.48 30.39 24.48 28.08 22.365 26.67C19.98 25.08 16.035 25.08 13.635 26.67Z" stroke="#A93133" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/shared/sprites/icons/symptom.svg
+++ b/src/shared/sprites/icons/symptom.svg
@@ -0,0 +1,5 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M31.0013 17.0006V17.0006C31.0013 24.7331 24.7331 31.0013 17.0006 31.0013V31.0013C9.26812 31.0013 3 24.7331 3 17.0006V17.0006C3 9.26812 9.26812 3 17.0006 3V3C24.7331 3 31.0013 9.26812 31.0013 17.0006Z" stroke="#A93133" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33 33L26.9062 26.9062" stroke="#A93133" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 17.0007H9.04125L12.1669 12.3132L16.3331 21.6882L19.4587 17.0007H23.625" stroke="#A93133" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/shared/styles/.gitkeep
+++ b/src/shared/styles/.gitkeep
--- a/src/shared/styles/global.css
+++ b/src/shared/styles/global.css
@@ -0,0 +1,8 @@
+@import "./variables.css";
+@import "./reset.css";
+
+/* Сюда же подключаются будущие глобалы через @import:
+ * @import './typography.css';
+ * @import './themes.css';
+ * media.css НЕ импортируется — он работает через PostCSS.
+ */
--- a/src/shared/styles/media.css
+++ b/src/shared/styles/media.css
@@ -1,15 +1,17 @@
-@custom-media --xs (max-width: 575px);
-@custom-media --sm (min-width: 576px);
-@custom-media --md (min-width: 768px);
-@custom-media --lg (min-width: 992px);
-@custom-media --xl (min-width: 1200px);
-@custom-media --2xl (min-width: 1408px);
-@custom-media --3xl (min-width: 1920px);
+/* Ширина — Mobile First (min-width), кроме --xs (max-width) */
+@custom-media --xs  (max-width: 35.9375rem);
+@custom-media --sm  (min-width: 36rem);
+@custom-media --md  (min-width: 48rem);
+@custom-media --lg  (min-width: 62rem);
+@custom-media --xl  (min-width: 75rem);
+@custom-media --2xl (min-width: 88rem);
+@custom-media --3xl (min-width: 120rem);

-@custom-media --h-xs (min-height: 667px);
-@custom-media --h-sm (min-height: 702px);
-@custom-media --h-md (min-height: 810px);
-@custom-media --h-lg (min-height: 900px);
-@custom-media --h-xl (min-height: 1000px);
-@custom-media --h-xxl (min-height: 1100px);
-@custom-media --h-xxxl (min-height: 1200px);
+/* Высота — min-height */
+@custom-media --h-xs  (min-height: 41.6875rem);
+@custom-media --h-sm  (min-height: 43.875rem);
+@custom-media --h-md  (min-height: 50.625rem);
+@custom-media --h-lg  (min-height: 56.25rem);
+@custom-media --h-xl  (min-height: 62.5rem);
+@custom-media --h-2xl (min-height: 68.75rem);
+@custom-media --h-3xl (min-height: 75rem);
--- a/src/shared/styles/reset.css
+++ b/src/shared/styles/reset.css
@@ -0,0 +1,27 @@
+html {
+  height: 100%;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  color: var(--color-text);
+  background: var(--color-bg);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
--- a/src/shared/styles/variables.css
+++ b/src/shared/styles/variables.css
@@ -1,102 +1,31 @@
 :root {
-	/* ========================================
-   * Цвета
-   * ======================================== */
-
-	/* Фоновые */
+  /* Цвета */
+  --color-primary: #3b82f6;
  --color-bg: #ffffff;
-	--color-bg-hero: #edf3f9;
-	--color-bg-accent: #f2f8fa;
-	--color-bg-dark: #08050d;
+  --color-bg-hover: #f5f5f5;
+  --color-text: #1a1a1a;
+  --color-text-secondary: #6b7280;
+  --color-border: #e5e7eb;
+  --color-error: #fa5252;
+  --color-success: #40c057;
+  --color-warning: #fab005;

-	/* Текстовые */
-	--color-text: #08050d;
-	--color-text-secondary: #4e5566;
-	--color-text-tertiary: #8a8f9c;
-
-	/* Бордеры */
-	--color-border: #d9dde5;
-	--color-border-light: #e8ebf3;
-
-	/* Скроллбар */
-	--color-scrollbar: #e1eff4;
-
-	/* Акцент */
-	--color-accent: #129d9d;
-
-	/* ========================================
-   * Шрифты
-   * ======================================== */
-	--font-display: 'Biocad Display', sans-serif;
-	--font-serif: 'Lora', serif;
-	--font-sans: 'Noto Sans', sans-serif;
-
-	/* ========================================
-   * Отступы
-   * ======================================== */
+  /* Отступы */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
-	--space-7: 28px;
  --space-8: 32px;
-	--space-9: 36px;
  --space-10: 40px;
-	--space-11: 44px;
  --space-12: 48px;
-	--space-13: 52px;
-	--space-14: 56px;
-	--space-15: 60px;
  --space-16: 64px;
-	--space-17: 68px;
-	--space-18: 72px;
-	--space-19: 76px;
-	--space-20: 80px;
-	--space-21: 84px;
-	--space-22: 88px;
-	--space-23: 92px;
-	--space-24: 96px;
-	--space-25: 100px;
-	--space-26: 104px;
-	--space-27: 108px;
-	--space-28: 112px;
-	--space-29: 116px;
-	--space-30: 120px;
-	--space-31: 124px;
-	--space-32: 128px;
-	--space-33: 132px;
-	--space-34: 136px;
-	--space-35: 140px;
-	--space-36: 144px;
-	--space-37: 148px;
-	--space-38: 152px;
-	--space-39: 156px;
-	--space-40: 160px;
-	--space-41: 164px;
-	--space-42: 168px;
-	--space-43: 172px;
-	--space-44: 176px;
-	--space-45: 180px;
-	--space-46: 184px;
-	--space-47: 188px;
-	--space-48: 192px;
-	--space-49: 196px;
-	--space-50: 200px;

-	/* ========================================
-   * Скругления
-   * ======================================== */
-	--radius-1: 12px;
-	--radius-2: 18px;
-	--radius-3: 24px;
-	--radius-4: 36px;
-	--radius-full: 800px;
-
-	/* ========================================
-   * Layout
-   * ======================================== */
-	--content-width: 1728px;
-	--content-padding: 48px;
+  /* Скругления */
+  --radius-1: 4px;
+  --radius-2: 8px;
+  --radius-3: 12px;
+  --radius-4: 16px;
+  --radius-full: 9999px;
 }
--- a/src/ui/.gitkeep
+++ b/src/ui/.gitkeep
--- a/svg-sprites.config.ts
+++ b/svg-sprites.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from '@gromlab/svg-sprites';
+
+export default defineConfig({
+  output: 'public/sprites',
+  publicPath: '/sprites',
+  react: 'src/ui/svg-sprite',
+  sprites: [{ name: 'icons', input: 'src/shared/sprites/icons' }],
+});
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -25,7 +25,7 @@
      "layouts/*": ["./src/layouts/*"],
      "screens/*": ["./src/screens/*"],
      "ui/*": ["./src/ui/*"],
-      "shared/*": ["./src/ui/*"]
+      "shared/*": ["./src/shared/*"]
    }
  },
  "include": [
				`@@ -0,0 +1 @@`
				`export { MantineProvider } from './mantine-provider';`