merge(sprint-2): завершён Sprint 2 — цвета, типографика, оффлайн элементы

Результаты:
- /foundation/colors с WCAG-контрастом и экспортом JSON
- /foundation/typography с DINPro + Fira Sans шкалами
- 5 страниц /offline/*: форма, бейджи, навигация, транспорт, печать
- Sidebar v0.2.0

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.env.example

@@ -0,0 +1,8 @@
+# База данных
+DATABASE_URL="postgresql://brandbook:brandbook@localhost:5433/brandbook"
+
+# API (NestJS)
+API_PORT=3001
+
+# Web (Next.js)
+NEXT_PUBLIC_API_URL=http://localhost:3001

apps/api/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+# Keep environment variables out of version control
+.env
+
+/generated/prisma

apps/api/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

apps/api/README.md

@@ -0,0 +1,98 @@
+<p align="center">
+  <a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="120" alt="Nest Logo" /></a>
+</p>
+
+[circleci-image]: https://img.shields.io/circleci/build/github/nestjs/nest/master?token=abc123def456
+[circleci-url]: https://circleci.com/gh/nestjs/nest
+
+  <p align="center">A progressive <a href="http://nodejs.org" target="_blank">Node.js</a> framework for building efficient and scalable server-side applications.</p>
+    <p align="center">
+<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/v/@nestjs/core.svg" alt="NPM Version" /></a>
+<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/l/@nestjs/core.svg" alt="Package License" /></a>
+<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/dm/@nestjs/common.svg" alt="NPM Downloads" /></a>
+<a href="https://circleci.com/gh/nestjs/nest" target="_blank"><img src="https://img.shields.io/circleci/build/github/nestjs/nest/master" alt="CircleCI" /></a>
+<a href="https://discord.gg/G7Qnnhy" target="_blank"><img src="https://img.shields.io/badge/discord-online-brightgreen.svg" alt="Discord"/></a>
+<a href="https://opencollective.com/nest#backer" target="_blank"><img src="https://opencollective.com/nest/backers/badge.svg" alt="Backers on Open Collective" /></a>
+<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://opencollective.com/nest/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
+  <a href="https://paypal.me/kamilmysliwiec" target="_blank"><img src="https://img.shields.io/badge/Donate-PayPal-ff3f59.svg" alt="Donate us"/></a>
+    <a href="https://opencollective.com/nest#sponsor"  target="_blank"><img src="https://img.shields.io/badge/Support%20us-Open%20Collective-41B883.svg" alt="Support us"></a>
+  <a href="https://twitter.com/nestframework" target="_blank"><img src="https://img.shields.io/twitter/follow/nestframework.svg?style=social&label=Follow" alt="Follow us on Twitter"></a>
+</p>
+  <!--[![Backers on Open Collective](https://opencollective.com/nest/backers/badge.svg)](https://opencollective.com/nest#backer)
+  [![Sponsors on Open Collective](https://opencollective.com/nest/sponsors/badge.svg)](https://opencollective.com/nest#sponsor)-->
+
+## Description
+
+[Nest](https://github.com/nestjs/nest) framework TypeScript starter repository.
+
+## Project setup
+
+```bash
+$ pnpm install
+```
+
+## Compile and run the project
+
+```bash
+# development
+$ pnpm run start
+
+# watch mode
+$ pnpm run start:dev
+
+# production mode
+$ pnpm run start:prod
+```
+
+## Run tests
+
+```bash
+# unit tests
+$ pnpm run test
+
+# e2e tests
+$ pnpm run test:e2e
+
+# test coverage
+$ pnpm run test:cov
+```
+
+## Deployment
+
+When you're ready to deploy your NestJS application to production, there are some key steps you can take to ensure it runs as efficiently as possible. Check out the [deployment documentation](https://docs.nestjs.com/deployment) for more information.
+
+If you are looking for a cloud-based platform to deploy your NestJS application, check out [Mau](https://mau.nestjs.com), our official platform for deploying NestJS applications on AWS. Mau makes deployment straightforward and fast, requiring just a few simple steps:
+
+```bash
+$ pnpm install -g @nestjs/mau
+$ mau deploy
+```
+
+With Mau, you can deploy your application in just a few clicks, allowing you to focus on building features rather than managing infrastructure.
+
+## Resources
+
+Check out a few resources that may come in handy when working with NestJS:
+
+- Visit the [NestJS Documentation](https://docs.nestjs.com) to learn more about the framework.
+- For questions and support, please visit our [Discord channel](https://discord.gg/G7Qnnhy).
+- To dive deeper and get more hands-on experience, check out our official video [courses](https://courses.nestjs.com/).
+- Deploy your application to AWS with the help of [NestJS Mau](https://mau.nestjs.com) in just a few clicks.
+- Visualize your application graph and interact with the NestJS application in real-time using [NestJS Devtools](https://devtools.nestjs.com).
+- Need help with your project (part-time to full-time)? Check out our official [enterprise support](https://enterprise.nestjs.com).
+- To stay in the loop and get updates, follow us on [X](https://x.com/nestframework) and [LinkedIn](https://linkedin.com/company/nestjs).
+- Looking for a job, or have a job to offer? Check out our official [Jobs board](https://jobs.nestjs.com).
+
+## Support
+
+Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please [read more here](https://docs.nestjs.com/support).
+
+## Stay in touch
+
+- Author - [Kamil Myśliwiec](https://twitter.com/kammysliwiec)
+- Website - [https://nestjs.com](https://nestjs.com/)
+- Twitter - [@nestframework](https://twitter.com/nestframework)
+
+## License
+
+Nest is [MIT licensed](https://github.com/nestjs/nest/blob/master/LICENSE).

apps/api/eslint.config.mjs

@@ -0,0 +1,35 @@
+// @ts-check
+import eslint from '@eslint/js';
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  {
+    ignores: ['eslint.config.mjs'],
+  },
+  eslint.configs.recommended,
+  ...tseslint.configs.recommendedTypeChecked,
+  eslintPluginPrettierRecommended,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+      },
+      sourceType: 'commonjs',
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-floating-promises': 'warn',
+      '@typescript-eslint/no-unsafe-argument': 'warn',
+      "prettier/prettier": ["error", { endOfLine: "auto" }],
+    },
+  },
+);

apps/api/nest-cli.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/nest-cli",
+  "collection": "@nestjs/schematics",
+  "sourceRoot": "src",
+  "compilerOptions": {
+    "deleteOutDir": true
+  }
+}

apps/api/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "api",
+  "version": "0.0.1",
+  "description": "",
+  "author": "",
+  "private": true,
+  "license": "UNLICENSED",
+  "scripts": {
+    "build": "nest build",
+    "dev": "nest start --watch",
+    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
+    "start": "nest start",
+    "start:dev": "nest start --watch",
+    "start:debug": "nest start --debug --watch",
+    "start:prod": "node dist/main",
+    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:cov": "jest --coverage",
+    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
+    "test:e2e": "jest --config ./test/jest-e2e.json"
+  },
+  "dependencies": {
+    "@nestjs/common": "^11.0.1",
+    "@nestjs/core": "^11.0.1",
+    "@nestjs/platform-express": "^11.0.1",
+    "@prisma/client": "^7.5.0",
+    "dotenv": "^17.3.1",
+    "reflect-metadata": "^0.2.2",
+    "rxjs": "^7.8.1"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.18.0",
+    "@nestjs/cli": "^11.0.0",
+    "@nestjs/schematics": "^11.0.0",
+    "@nestjs/testing": "^11.0.1",
+    "@types/express": "^5.0.0",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^22.10.7",
+    "@types/supertest": "^6.0.2",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.2",
+    "globals": "^16.0.0",
+    "jest": "^30.0.0",
+    "prettier": "^3.4.2",
+    "prisma": "^7.5.0",
+    "source-map-support": "^0.5.21",
+    "supertest": "^7.0.0",
+    "ts-jest": "^29.2.5",
+    "ts-loader": "^9.5.2",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.20.0"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "ts"
+    ],
+    "rootDir": "src",
+    "testRegex": ".*\\.spec\\.ts$",
+    "transform": {
+      "^.+\\.(t|j)s$": "ts-jest"
+    },
+    "collectCoverageFrom": [
+      "**/*.(t|j)s"
+    ],
+    "coverageDirectory": "../coverage",
+    "testEnvironment": "node"
+  }
+}

apps/api/prisma.config.ts

@@ -0,0 +1,14 @@
+// This file was generated by Prisma, and assumes you have installed the following:
+// npm install --save-dev prisma dotenv
+import "dotenv/config";
+import { defineConfig } from "prisma/config";
+
+export default defineConfig({
+  schema: "prisma/schema.prisma",
+  migrations: {
+    path: "prisma/migrations",
+  },
+  datasource: {
+    url: process.env["DATABASE_URL"],
+  },
+});

apps/api/prisma/schema.prisma

@@ -0,0 +1,42 @@
+generator client {
+  provider = "prisma-client"
+  output   = "../generated/prisma"
+}
+
+datasource db {
+  provider = "postgresql"
+}
+
+enum Role {
+  viewer
+  editor
+}
+
+enum ComponentStatus {
+  draft
+  review
+  approved
+}
+
+model User {
+  id           String    @id @default(uuid())
+  email        String    @unique
+  name         String
+  passwordHash String
+  role         Role      @default(viewer)
+  createdAt    DateTime  @default(now())
+
+  components   ExperimentalComponent[]
+}
+
+model ExperimentalComponent {
+  id            String          @id @default(uuid())
+  name          String
+  baseComponent String
+  attributes    Json
+  status        ComponentStatus @default(draft)
+  author        User            @relation(fields: [authorId], references: [id])
+  authorId      String
+  createdAt     DateTime        @default(now())
+  updatedAt     DateTime        @updatedAt
+}

apps/api/src/app.controller.spec.ts

@@ -0,0 +1,22 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { AppController } from './app.controller';
+import { AppService } from './app.service';
+
+describe('AppController', () => {
+  let appController: AppController;
+
+  beforeEach(async () => {
+    const app: TestingModule = await Test.createTestingModule({
+      controllers: [AppController],
+      providers: [AppService],
+    }).compile();
+
+    appController = app.get<AppController>(AppController);
+  });
+
+  describe('root', () => {
+    it('should return "Hello World!"', () => {
+      expect(appController.getHello()).toBe('Hello World!');
+    });
+  });
+});

apps/api/src/app.controller.ts

@@ -0,0 +1,12 @@
+import { Controller, Get } from '@nestjs/common';
+import { AppService } from './app.service';
+
+@Controller()
+export class AppController {
+  constructor(private readonly appService: AppService) {}
+
+  @Get()
+  getHello(): string {
+    return this.appService.getHello();
+  }
+}

apps/api/src/app.module.ts

@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+import { AppController } from './app.controller';
+import { AppService } from './app.service';
+
+@Module({
+  imports: [],
+  controllers: [AppController],
+  providers: [AppService],
+})
+export class AppModule {}

apps/api/src/app.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@nestjs/common';
+
+@Injectable()
+export class AppService {
+  getHello(): string {
+    return 'Hello World!';
+  }
+}

apps/api/src/main.ts

@@ -0,0 +1,8 @@
+import { NestFactory } from '@nestjs/core';
+import { AppModule } from './app.module';
+
+async function bootstrap() {
+  const app = await NestFactory.create(AppModule);
+  await app.listen(process.env.PORT ?? 3000);
+}
+bootstrap();

apps/api/test/app.e2e-spec.ts

@@ -0,0 +1,25 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { INestApplication } from '@nestjs/common';
+import request from 'supertest';
+import { App } from 'supertest/types';
+import { AppModule } from './../src/app.module';
+
+describe('AppController (e2e)', () => {
+  let app: INestApplication<App>;
+
+  beforeEach(async () => {
+    const moduleFixture: TestingModule = await Test.createTestingModule({
+      imports: [AppModule],
+    }).compile();
+
+    app = moduleFixture.createNestApplication();
+    await app.init();
+  });
+
+  it('/ (GET)', () => {
+    return request(app.getHttpServer())
+      .get('/')
+      .expect(200)
+      .expect('Hello World!');
+  });
+});

apps/api/test/jest-e2e.json

@@ -0,0 +1,9 @@
+{
+  "moduleFileExtensions": ["js", "json", "ts"],
+  "rootDir": ".",
+  "testEnvironment": "node",
+  "testRegex": ".e2e-spec.ts$",
+  "transform": {
+    "^.+\\.(t|j)s$": "ts-jest"
+  }
+}

apps/api/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
+}

apps/api/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "resolvePackageJsonExports": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "declaration": true,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "ES2023",
+    "sourceMap": true,
+    "outDir": "./dist",
+    "baseUrl": "./",
+    "incremental": true,
+    "skipLibCheck": true,
+    "strictNullChecks": true,
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitAny": false,
+    "strictBindCallApply": false,
+    "noFallthroughCasesInSwitch": false
+  }
+}

apps/web/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

apps/web/AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

apps/web/CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

apps/web/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

apps/web/app/foundation/colors/page.tsx

@@ -0,0 +1,415 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import type { Metadata } from "next";
+
+/* ─── Утилиты конвертации ──────────────────────────────────────────── */
+function hexToRgb(hex: string): { r: number; g: number; b: number } {
+  const m = /^#([0-9a-f]{6})$/i.exec(hex);
+  if (!m) return { r: 0, g: 0, b: 0 };
+  return {
+    r: parseInt(m[1].slice(0, 2), 16),
+    g: parseInt(m[1].slice(2, 4), 16),
+    b: parseInt(m[1].slice(4, 6), 16),
+  };
+}
+
+function rgbToHsl(r: number, g: number, b: number): { h: number; s: number; l: number } {
+  r /= 255; g /= 255; b /= 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  let h = 0, s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r: h = ((g - b) / d + (g < b ? 6 : 0)) / 6; break;
+      case g: h = ((b - r) / d + 2) / 6; break;
+      case b: h = ((r - g) / d + 4) / 6; break;
+    }
+  }
+  return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100) };
+}
+
+function luminance(r: number, g: number, b: number): number {
+  const a = [r, g, b].map(v => {
+    v /= 255;
+    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+  });
+  return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+
+function contrastRatio(hex1: string, hex2: string): number {
+  const { r: r1, g: g1, b: b1 } = hexToRgb(hex1);
+  const { r: r2, g: g2, b: b2 } = hexToRgb(hex2);
+  const l1 = luminance(r1, g1, b1);
+  const l2 = luminance(r2, g2, b2);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return Math.round(((lighter + 0.05) / (darker + 0.05)) * 10) / 10;
+}
+
+/* ─── Данные цветов ────────────────────────────────────────────────── */
+const BRAND_COLORS = [
+  {
+    oracal: "053M",
+    name: "Основной бирюзовый",
+    hex: "#7ecfca",
+    usage: "Акцентный цвет, CTA-кнопки, иконки, активные состояния",
+    cssVar: "--brand-053m",
+  },
+  {
+    oracal: "073M",
+    name: "Тёмный серо-голубой",
+    hex: "#5b7b87",
+    usage: "Тёмный фон, хедер, акценты на тёмных поверхностях",
+    cssVar: "--brand-073m",
+  },
+  {
+    oracal: "066M",
+    name: "Средний бирюзовый",
+    hex: "#5bb5ad",
+    usage: "Вторичные акценты, фоны секций, иллюстрации",
+    cssVar: "--brand-066m",
+  },
+  {
+    oracal: "050M",
+    name: "Тёмно-синий",
+    hex: "#1b4c72",
+    usage: "Наружная реклама, полиграфия, заголовки на светлом фоне",
+    cssVar: "--brand-050m",
+  },
+  {
+    oracal: "081M",
+    name: "Бежевый",
+    hex: "#c4a882",
+    usage: "Форма сотрудников, оффлайн носители, тёплые акценты",
+    cssVar: "--brand-081m",
+  },
+  {
+    oracal: "080M",
+    name: "Тёмно-коричневый",
+    hex: "#5c2e0e",
+    usage: "Текст на бежевых поверхностях, логотип на форме",
+    cssVar: "--brand-080m",
+  },
+  {
+    oracal: "—",
+    name: "Белый",
+    hex: "#ffffff",
+    usage: "Фон, инвертированный текст, логотип на тёмных фонах",
+    cssVar: "--brand-white",
+  },
+];
+
+const CONTRAST_PAIRS = [
+  { fg: "#ffffff", bg: "#5b7b87", label: "Белый на тёмном серо-голубом" },
+  { fg: "#ffffff", bg: "#1b4c72", label: "Белый на тёмно-синем" },
+  { fg: "#ffffff", bg: "#5c2e0e", label: "Белый на тёмно-коричневом" },
+  { fg: "#ffffff", bg: "#5bb5ad", label: "Белый на среднем бирюзовом" },
+  { fg: "#111827", bg: "#7ecfca", label: "Тёмный текст на основном бирюзовом" },
+  { fg: "#111827", bg: "#c4a882", label: "Тёмный текст на бежевом" },
+  { fg: "#5c2e0e", bg: "#c4a882", label: "Тёмно-коричневый на бежевом (форма)" },
+];
+
+/* ─── Компоненты ───────────────────────────────────────────────────── */
+function CopyBadge({ value, label }: { value: string; label: string }) {
+  const [copied, setCopied] = useState(false);
+  const copy = useCallback(() => {
+    navigator.clipboard.writeText(value);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  }, [value]);
+  return (
+    <button
+      onClick={copy}
+      className="flex items-center gap-1.5 px-2 py-1 rounded text-xs font-mono transition-colors"
+      style={{
+        background: copied ? "#d1fae5" : "#f3f4f6",
+        color: copied ? "#065f46" : "#374151",
+        border: "1px solid",
+        borderColor: copied ? "#6ee7b7" : "#e5e7eb",
+      }}
+      title={`Скопировать ${label}`}
+    >
+      {copied ? "✓" : "⎘"} {value}
+    </button>
+  );
+}
+
+function ColorCard({ color }: { color: typeof BRAND_COLORS[0] }) {
+  const { r, g, b } = hexToRgb(color.hex);
+  const { h, s, l } = rgbToHsl(r, g, b);
+  const isLight = l > 55;
+
+  return (
+    <div
+      className="rounded-xl overflow-hidden border"
+      style={{ borderColor: "var(--bb-border)" }}
+    >
+      {/* Свотч */}
+      <div
+        className="h-32 flex items-end justify-between px-4 pb-3"
+        style={{ background: color.hex }}
+      >
+        {color.oracal !== "—" && (
+          <span
+            className="text-xs font-semibold px-2 py-0.5 rounded"
+            style={{
+              background: isLight ? "rgba(0,0,0,0.15)" : "rgba(255,255,255,0.2)",
+              color: isLight ? "rgba(0,0,0,0.8)" : "rgba(255,255,255,0.9)",
+            }}
+          >
+            Oracal {color.oracal}
+          </span>
+        )}
+      </div>
+
+      {/* Информация */}
+      <div className="p-4" style={{ background: "var(--bb-content-bg)" }}>
+        <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
+          {color.name}
+        </p>
+        <p className="text-xs mb-3" style={{ color: "var(--bb-text-muted)" }}>
+          {color.usage}
+        </p>
+
+        {/* Коды */}
+        <div className="flex flex-wrap gap-1.5">
+          <CopyBadge value={color.hex.toUpperCase()} label="HEX" />
+          <CopyBadge value={`rgb(${r}, ${g}, ${b})`} label="RGB" />
+          <CopyBadge value={`hsl(${h}, ${s}%, ${l}%)`} label="HSL" />
+          <CopyBadge value={color.cssVar} label="CSS var" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ContrastRow({ pair }: { pair: typeof CONTRAST_PAIRS[0] }) {
+  const ratio = contrastRatio(pair.fg, pair.bg);
+  const aa = ratio >= 4.5;
+  const aaa = ratio >= 7;
+  const aaLarge = ratio >= 3;
+
+  return (
+    <div
+      className="flex items-center gap-4 p-4 rounded-xl border"
+      style={{ borderColor: "var(--bb-border)" }}
+    >
+      {/* Превью */}
+      <div
+        className="w-32 shrink-0 h-12 rounded-lg flex items-center justify-center text-sm font-medium"
+        style={{ background: pair.bg, color: pair.fg }}
+      >
+        Aa Бб Вв
+      </div>
+
+      {/* Описание */}
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium truncate" style={{ color: "var(--bb-text)" }}>
+          {pair.label}
+        </p>
+        <div className="flex gap-1 mt-1 items-center">
+          <span className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
+            {pair.fg} / {pair.bg}
+          </span>
+        </div>
+      </div>
+
+      {/* Ratio и бейджи */}
+      <div className="shrink-0 flex items-center gap-3">
+        <span className="font-mono font-semibold text-sm" style={{ color: "var(--bb-text)" }}>
+          {ratio}:1
+        </span>
+        <div className="flex gap-1">
+          {[
+            { label: "AA", pass: aa },
+            { label: "AAA", pass: aaa },
+            { label: "AA large", pass: aaLarge },
+          ].map(({ label, pass }) => (
+            <span
+              key={label}
+              className="text-[10px] font-semibold px-1.5 py-0.5 rounded"
+              style={{
+                background: pass ? "#d1fae5" : "#fee2e2",
+                color: pass ? "#065f46" : "#991b1b",
+              }}
+            >
+              {pass ? "✓" : "✕"} {label}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Экспорт токенов ──────────────────────────────────────────────── */
+function exportTokens() {
+  const tokens: Record<string, Record<string, string>> = { colors: {} };
+  BRAND_COLORS.forEach(c => {
+    const key = c.oracal !== "—" ? `brand-${c.oracal.toLowerCase()}` : "brand-white";
+    const { r, g, b } = hexToRgb(c.hex);
+    const { h, s, l } = rgbToHsl(r, g, b);
+    tokens.colors[key] = {
+      oracal: c.oracal,
+      name: c.name,
+      hex: c.hex.toUpperCase(),
+      rgb: `rgb(${r}, ${g}, ${b})`,
+      hsl: `hsl(${h}, ${s}%, ${l}%)`,
+      cssVar: c.cssVar,
+    };
+  });
+  const blob = new Blob([JSON.stringify(tokens, null, 2)], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url; a.download = "oclinica-brand-tokens.json"; a.click();
+  URL.revokeObjectURL(url);
+}
+
+/* ─── Страница ─────────────────────────────────────────────────────── */
+export default function ColorsPage() {
+  return (
+    <div className="max-w-4xl mx-auto px-8 py-10">
+
+      {/* Заголовок */}
+      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-2"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Фундамент → 1.3
+        </p>
+        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
+          Цвета
+        </h1>
+        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
+          Фирменная цветовая палитра основана на кодах плёнки Oracal. HEX-значения
+          подобраны как ближайшие эквиваленты. Для точной печати используйте коды Oracal.
+        </p>
+
+        <div className="mt-4 flex items-center justify-between">
+          <div
+            className="px-4 py-3 rounded-lg border text-sm flex items-center gap-2"
+            style={{ borderColor: "#fde68a", background: "#fffbeb", color: "#92400e" }}
+          >
+            <span>⚠️</span>
+            <span>
+              HEX-значения приблизительны. Для оффлайн-носителей используйте
+              официальные коды Oracal.
+            </span>
+          </div>
+          <button
+            onClick={exportTokens}
+            className="ml-4 shrink-0 px-4 py-2 rounded-lg text-sm font-medium transition-colors"
+            style={{
+              background: "var(--brand-053m)",
+              color: "#ffffff",
+            }}
+          >
+            ↓ Экспорт JSON
+          </button>
+        </div>
+      </div>
+
+      {/* 1. Палитра */}
+      <section className="mb-12">
+        <div className="mb-6">
+          <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
+            Фирменные цвета
+          </h2>
+          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+            Нажмите на значение, чтобы скопировать его в буфер обмена.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+          {BRAND_COLORS.map(c => (
+            <ColorCard key={c.oracal} color={c} />
+          ))}
+        </div>
+      </section>
+
+      {/* 2. Контрастность */}
+      <section className="mb-12">
+        <div className="mb-6">
+          <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
+            Контрастность пар (WCAG)
+          </h2>
+          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+            Проверка соответствия требованиям доступности для основных комбинаций цветов.
+            AA = 4.5:1 для обычного текста, 3:1 для крупного (&gt;18pt).
+          </p>
+        </div>
+        <div className="flex flex-col gap-3">
+          {CONTRAST_PAIRS.map(pair => (
+            <ContrastRow key={pair.label} pair={pair} />
+          ))}
+        </div>
+      </section>
+
+      {/* 3. Применение */}
+      <section className="mb-12">
+        <div className="mb-6">
+          <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
+            Правила применения
+          </h2>
+        </div>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {[
+            {
+              icon: "✓",
+              color: "#d1fae5",
+              textColor: "#065f46",
+              title: "Используйте фирменные цвета",
+              text: "Только цвета из палитры обеспечивают узнаваемость бренда на всех носителях.",
+            },
+            {
+              icon: "✓",
+              color: "#d1fae5",
+              textColor: "#065f46",
+              title: "Соблюдайте контрастность",
+              text: "Текст на цветном фоне должен соответствовать минимум AA по WCAG 2.1.",
+            },
+            {
+              icon: "✕",
+              color: "#fee2e2",
+              textColor: "#991b1b",
+              title: "Не смешивайте произвольно",
+              text: "Не используйте фирменные цвета с посторонними цветами без согласования.",
+            },
+            {
+              icon: "✕",
+              color: "#fee2e2",
+              textColor: "#991b1b",
+              title: "Не изменяйте насыщенность",
+              text: "Осветление, затемнение или изменение оттенка недопустимо без необходимости.",
+            },
+          ].map(item => (
+            <div
+              key={item.title}
+              className="flex gap-3 p-4 rounded-xl border"
+              style={{ borderColor: "var(--bb-border)" }}
+            >
+              <span
+                className="shrink-0 w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold"
+                style={{ background: item.color, color: item.textColor }}
+              >
+                {item.icon}
+              </span>
+              <div>
+                <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
+                  {item.title}
+                </p>
+                <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+                  {item.text}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+    </div>
+  );
+}

apps/web/app/foundation/logo/page.tsx

@@ -0,0 +1,308 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+
+export const metadata: Metadata = {
+  title: "Логотип | Брендбук О!Клиника",
+};
+
+function RuleTag({ children }: { children: React.ReactNode }) {
+  return (
+    <span
+      className="inline-block px-2 py-0.5 rounded text-xs font-medium"
+      style={{ background: "#e0f5f4", color: "var(--brand-073m)" }}
+    >
+      {children}
+    </span>
+  );
+}
+
+function Section({
+  id,
+  title,
+  subtitle,
+  children,
+}: {
+  id?: string;
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section id={id} className="mb-12">
+      <div className="mb-6">
+        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
+          {title}
+        </h2>
+        {subtitle && (
+          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+            {subtitle}
+          </p>
+        )}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+/* ─── Карточка логотипа с реальным изображением ─────────────── */
+function LogoCard({
+  src,
+  alt,
+  label,
+  description,
+  tag,
+  dark = false,
+}: {
+  src: string;
+  alt: string;
+  label: string;
+  description: string;
+  tag: string;
+  dark?: boolean;
+}) {
+  return (
+    <div>
+      <div
+        className="flex items-center justify-center rounded-xl border p-8 mb-4"
+        style={{
+          background: dark ? "var(--brand-073m)" : "#f8f9fa",
+          borderColor: dark ? "transparent" : "var(--bb-border)",
+          minHeight: 200,
+        }}
+      >
+        <Image
+          src={src}
+          alt={alt}
+          width={320}
+          height={130}
+          className="object-contain"
+          style={{ filter: dark ? "brightness(0) invert(1)" : undefined }}
+        />
+      </div>
+      <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
+        {label}
+      </p>
+      <p className="text-sm mb-2" style={{ color: "var(--bb-text-muted)" }}>
+        {description}
+      </p>
+      <RuleTag>{tag}</RuleTag>
+    </div>
+  );
+}
+
+function ProhibitedItem({ label }: { label: string }) {
+  return (
+    <div
+      className="flex items-start gap-3 p-4 rounded-lg border"
+      style={{ borderColor: "#fecaca", background: "#fff5f5" }}
+    >
+      <span className="text-red-400 text-lg leading-none mt-0.5">✕</span>
+      <p className="text-sm" style={{ color: "#7f1d1d" }}>{label}</p>
+    </div>
+  );
+}
+
+export default function LogoPage() {
+  return (
+    <div className="max-w-4xl mx-auto px-8 py-10">
+
+      {/* Заголовок */}
+      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
+        <p className="text-xs font-semibold uppercase tracking-widest mb-2"
+          style={{ color: "var(--brand-053m)" }}>
+          Фундамент → 1.2
+        </p>
+        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
+          Логотип
+        </h1>
+        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
+          Логотип может быть использован во всех визуальных коммуникациях бренда.
+          Он не подлежит никаким изменениям и не допускается его сочетание ни с каким
+          дополнительным текстом.
+        </p>
+        <div
+          className="mt-4 px-4 py-3 rounded-lg border text-sm flex items-center gap-2"
+          style={{ borderColor: "#fde68a", background: "#fffbeb", color: "#92400e" }}
+        >
+          <span>⚠️</span>
+          <span>
+            Изображение извлечено из PDF-брендбука. Векторный SVG будет добавлен
+            после передачи исходных файлов от дизайнера.
+          </span>
+        </div>
+      </div>
+
+      {/* 1. Иерархия */}
+      <Section
+        id="hierarchy"
+        title="Иерархия и версии"
+        subtitle="Клиника использует два варианта логотипа в зависимости от контекста применения."
+      >
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
+          <LogoCard
+            src="/logo/logo-transparent.png"
+            alt="Основной логотип Клиника УХО ГОРЛО НОС им. проф. Е.Н. Оленевой"
+            label="Основной логотип"
+            description="Локальные версии по направлениям (ЛОР, аллергология и др.). Применяется в точках контакта с клиентами, на лендингах и сайтах направлений."
+            tag="Точки контакта с клиентом"
+          />
+          <LogoCard
+            src="/logo/logo-transparent.png"
+            alt="Общий логотип сети клиник"
+            label="Общий логотип"
+            description="Версия сети клиник. Применяется для онлайн и оффлайн коммуникаций с клиентами, во внутренней документации. Допустимо на общем сайте."
+            tag="Сеть клиник · Документация · Сайт"
+          />
+        </div>
+      </Section>
+
+      {/* 2. Цветовые варианты */}
+      <Section
+        id="variants"
+        title="Цветовые варианты"
+        subtitle="Логотип существует в нескольких вариантах в зависимости от фона носителя."
+      >
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
+          <div>
+            <div
+              className="flex items-center justify-center rounded-xl border p-6 mb-3"
+              style={{ background: "#f8f9fa", borderColor: "var(--bb-border)", minHeight: 160 }}
+            >
+              <Image src="/logo/logo-transparent.png" alt="Логотип на светлом фоне"
+                width={220} height={87} className="object-contain" />
+            </div>
+            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+              Основной — на светлом фоне
+            </p>
+          </div>
+          <div>
+            <div
+              className="flex items-center justify-center rounded-xl p-6 mb-3"
+              style={{ background: "var(--brand-073m)", minHeight: 160 }}
+            >
+              {/* brightness(0) делает всё чёрным, invert(1) — белым */}
+              <Image src="/logo/logo-transparent.png" alt="Логотип инвертированный"
+                width={220} height={87} className="object-contain"
+                style={{ filter: "brightness(0) invert(1)" }} />
+            </div>
+            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+              Инвертированный — на тёмном фоне
+            </p>
+          </div>
+          <div>
+            <div
+              className="flex items-center justify-center rounded-xl border p-6 mb-3"
+              style={{ background: "var(--brand-081m)", borderColor: "transparent", minHeight: 160 }}
+            >
+              {/* Коричневый: насыщенный sepia + darkening */}
+              <Image src="/logo/logo-transparent.png" alt="Логотип коричневый на форме"
+                width={220} height={87} className="object-contain"
+                style={{ filter: "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)" }} />
+            </div>
+            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+              Коричневый — на форме (бежевый костюм)
+            </p>
+          </div>
+        </div>
+      </Section>
+
+      {/* 3. Охранная зона */}
+      <Section
+        id="clearspace"
+        title="Охранная зона"
+        subtitle="Вокруг логотипа всегда должно быть свободное пространство — не менее высоты буквы «x» в слове «КЛИНИКА»."
+      >
+        <div
+          className="flex items-center justify-center rounded-xl border p-16 relative"
+          style={{ background: "#f8f9fa", borderColor: "var(--bb-border)" }}
+        >
+          <div className="absolute inset-8 border-2 border-dashed rounded-lg"
+            style={{ borderColor: "var(--brand-053m)", opacity: 0.5 }} />
+          {["top","bottom","left","right"].map(side => (
+            <div key={side} className={`absolute text-xs font-medium
+              ${side==="top" ? "top-2 left-1/2 -translate-x-1/2" : ""}
+              ${side==="bottom" ? "bottom-2 left-1/2 -translate-x-1/2" : ""}
+              ${side==="left" ? "left-2 top-1/2 -translate-y-1/2" : ""}
+              ${side==="right" ? "right-2 top-1/2 -translate-y-1/2" : ""}
+            `} style={{ color: "var(--brand-053m)" }}>x</div>
+          ))}
+          <Image src="/logo/logo-transparent.png" alt="Логотип с охранной зоной"
+            width={320} height={126} className="object-contain relative z-10" />
+        </div>
+        <p className="mt-3 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+          Пунктирная рамка — граница охранной зоны. Никакие другие элементы не должны её пересекать.
+        </p>
+      </Section>
+
+      {/* 4. Минимальные размеры */}
+      <Section
+        id="sizes"
+        title="Минимальные размеры"
+        subtitle="Размеры логотипа для размещения на форме сотрудников."
+      >
+        <div className="overflow-hidden rounded-xl border" style={{ borderColor: "var(--bb-border)" }}>
+          <table className="w-full text-sm">
+            <thead>
+              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
+                {["Размер одежды","Длина","Высота","Расположение"].map(h => (
+                  <th key={h} className="text-left px-5 py-3 font-medium"
+                    style={{ color: "var(--bb-text-muted)" }}>{h}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                ["До 46 (включительно)", "70 мм", "25,5 мм", "Левая сторона груди"],
+                ["От 48", "90 мм", "32,8 мм", "Левая сторона груди"],
+              ].map(([size, w, h, pos]) => (
+                <tr key={size} className="border-t" style={{ borderColor: "var(--bb-border)" }}>
+                  <td className="px-5 py-3" style={{ color: "var(--bb-text)" }}>{size}</td>
+                  <td className="px-5 py-3 font-mono text-xs" style={{ color: "var(--bb-text)" }}>{w}</td>
+                  <td className="px-5 py-3 font-mono text-xs" style={{ color: "var(--bb-text)" }}>{h}</td>
+                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{pos}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Section>
+
+      {/* 5. Недопустимые варианты */}
+      <Section
+        id="prohibited"
+        title="Недопустимые варианты использования"
+      >
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          <ProhibitedItem label="Изменять пропорции или искажать логотип" />
+          <ProhibitedItem label="Изменять цвета элементов логотипа" />
+          <ProhibitedItem label="Добавлять рядом произвольный текст" />
+          <ProhibitedItem label="Размещать на фоне без достаточного контраста" />
+          <ProhibitedItem label="Использовать отдельные элементы без остальных" />
+          <ProhibitedItem label="Применять тени, обводки, градиенты" />
+        </div>
+      </Section>
+
+      {/* 6. Скачать */}
+      <Section id="download" title="Скачать файлы">
+        <div
+          className="rounded-xl border p-6 flex flex-col sm:flex-row items-start sm:items-center gap-4"
+          style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
+        >
+          <div className="flex-1">
+            <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
+              Векторные файлы логотипа (SVG, AI, PNG)
+            </p>
+            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+              Будут доступны после передачи исходных файлов от дизайнера.
+            </p>
+          </div>
+          <button disabled className="px-4 py-2 rounded-lg text-sm font-medium cursor-not-allowed"
+            style={{ background: "#e5e7eb", color: "#9ca3af" }}>
+            Скачать (скоро)
+          </button>
+        </div>
+      </Section>
+
+    </div>
+  );
+}

apps/web/app/foundation/typography/page.tsx

@@ -0,0 +1,349 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Типографика | Брендбук О!Клиника",
+};
+
+/* ─── Шкала типографики ────────────────────────────────────────────── */
+const DIN_SCALE = [
+  { token: "h1", size: "40px / 2.5rem", weight: "700", lh: "1.2", sample: "Клиника ухо, горло, нос" },
+  { token: "h2", size: "32px / 2rem",   weight: "700", lh: "1.25", sample: "Наши специалисты" },
+  { token: "h3", size: "24px / 1.5rem", weight: "700", lh: "1.3",  sample: "Запись на приём" },
+  { token: "h4", size: "20px / 1.25rem",weight: "700", lh: "1.35", sample: "Расписание врачей" },
+  { token: "h5", size: "16px / 1rem",   weight: "700", lh: "1.4",  sample: "Услуги и цены" },
+  { token: "h6", size: "14px / 0.875rem",weight:"700", lh: "1.4",  sample: "Контакты клиники" },
+];
+
+const FIRA_SCALE = [
+  { token: "h1",       size: "40px / 2.5rem",  weight: "600", lh: "1.2",  sample: "Клиника ухо, горло, нос" },
+  { token: "h2",       size: "32px / 2rem",    weight: "600", lh: "1.25", sample: "Наши специалисты" },
+  { token: "h3",       size: "24px / 1.5rem",  weight: "600", lh: "1.3",  sample: "Запись на приём" },
+  { token: "h4",       size: "20px / 1.25rem", weight: "500", lh: "1.35", sample: "Расписание врачей" },
+  { token: "h5",       size: "16px / 1rem",    weight: "500", lh: "1.4",  sample: "Услуги и цены" },
+  { token: "h6",       size: "14px / 0.875rem",weight: "500", lh: "1.4",  sample: "Контакты клиники" },
+  { token: "body",     size: "16px / 1rem",    weight: "400", lh: "1.6",  sample: "ЛОР-клиника предоставляет полный спектр услуг по диагностике и лечению заболеваний уха, горла и носа." },
+  { token: "body-sm",  size: "14px / 0.875rem",weight: "400", lh: "1.6",  sample: "Запись по телефону или через форму на сайте. Работаем без выходных." },
+  { token: "caption",  size: "12px / 0.75rem", weight: "400", lh: "1.5",  sample: "Лицензия № ЛО-77-01-018234 от 12.01.2022" },
+  { token: "label",    size: "12px / 0.75rem", weight: "500", lh: "1.4",  sample: "СПЕЦИАЛИЗАЦИЯ ВРАЧА" },
+  { token: "overline", size: "10px / 0.625rem",weight: "600", lh: "1.4",  sample: "ФУНДАМЕНТ → 1.4" },
+];
+
+/* ─── Компоненты ───────────────────────────────────────────────────── */
+function Section({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="mb-14">
+      <div className="mb-6">
+        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
+          {title}
+        </h2>
+        {subtitle && (
+          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+            {subtitle}
+          </p>
+        )}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+function UsageBadge({ label, color }: { label: string; color: string }) {
+  return (
+    <span
+      className="inline-block px-2 py-0.5 rounded text-xs font-medium"
+      style={{ background: color === "teal" ? "#e0f5f4" : "#fef3c7", color: color === "teal" ? "var(--brand-073m)" : "#92400e" }}
+    >
+      {label}
+    </span>
+  );
+}
+
+function TypeRow({
+  token,
+  size,
+  weight,
+  lh,
+  sample,
+  fontFamily,
+}: {
+  token: string;
+  size: string;
+  weight: string;
+  lh: string;
+  sample: string;
+  fontFamily: string;
+}) {
+  const [sizeVal] = size.split(" / ");
+  const pxSize = parseInt(sizeVal);
+
+  return (
+    <div
+      className="border-t py-4 grid gap-4"
+      style={{
+        borderColor: "var(--bb-border)",
+        gridTemplateColumns: "80px 1fr 140px",
+        alignItems: "start",
+      }}
+    >
+      {/* Токен */}
+      <div className="pt-1">
+        <span
+          className="font-mono text-xs px-2 py-0.5 rounded"
+          style={{ background: "#f3f4f6", color: "#374151" }}
+        >
+          {token}
+        </span>
+      </div>
+
+      {/* Образец */}
+      <div
+        style={{
+          fontFamily,
+          fontSize: `${Math.min(pxSize, 28)}px`,
+          fontWeight: weight,
+          lineHeight: lh,
+          color: "var(--bb-text)",
+          wordBreak: "break-word",
+        }}
+      >
+        {sample}
+      </div>
+
+      {/* Метаданные */}
+      <div className="pt-1 space-y-1 text-right">
+        <p className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
+          {size}
+        </p>
+        <p className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
+          w{weight} · lh{lh}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Страница ─────────────────────────────────────────────────────── */
+export default function TypographyPage() {
+  return (
+    <div className="max-w-4xl mx-auto px-8 py-10">
+
+      {/* Заголовок */}
+      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-2"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Фундамент → 1.4
+        </p>
+        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
+          Типографика
+        </h1>
+        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
+          Бренд использует два шрифта с чётким разделением по контексту применения.
+          Никогда не смешивайте их в одном носителе без необходимости.
+        </p>
+      </div>
+
+      {/* Карточки шрифтов */}
+      <section className="mb-12">
+        <h2 className="text-xl font-semibold mb-6" style={{ color: "var(--bb-text)" }}>
+          Шрифты бренда
+        </h2>
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {/* DINPro */}
+          <div
+            className="rounded-xl border p-6"
+            style={{ borderColor: "var(--bb-border)" }}
+          >
+            <div className="flex items-start justify-between mb-3">
+              <div>
+                <p className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+                  DINPro
+                </p>
+                <p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}>
+                  Бренд-шрифт · не Google Fonts
+                </p>
+              </div>
+              <UsageBadge label="Оффлайн · Бренд" color="yellow" />
+            </div>
+            <div
+              className="text-4xl mb-4 font-bold"
+              style={{ fontFamily: "'DINPro', Arial, sans-serif", color: "var(--bb-text)" }}
+            >
+              Aa Бб Вв
+            </div>
+            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+              Применяется на: форме сотрудников, бейджах, вывесках, транспорте,
+              полиграфии. Лицензионный шрифт — передаётся дизайнером.
+            </p>
+            <p className="text-xs mt-3 font-mono px-2 py-1 rounded inline-block"
+              style={{ background: "#f3f4f6", color: "#374151" }}>
+              --font-brand
+            </p>
+          </div>
+
+          {/* Fira Sans */}
+          <div
+            className="rounded-xl border p-6"
+            style={{ borderColor: "var(--bb-border)" }}
+          >
+            <div className="flex items-start justify-between mb-3">
+              <div>
+                <p className="font-semibold text-base" style={{ color: "var(--bb-text)" }}>
+                  Fira Sans
+                </p>
+                <p className="text-xs mt-0.5" style={{ color: "var(--bb-text-muted)" }}>
+                  Веб-шрифт · Google Fonts
+                </p>
+              </div>
+              <UsageBadge label="Веб · Цифровой" color="teal" />
+            </div>
+            <div
+              className="text-4xl mb-4 font-semibold"
+              style={{ fontFamily: "var(--font-fira-sans)", color: "var(--bb-text)" }}
+            >
+              Aa Бб Вв
+            </div>
+            <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>
+              Применяется на: сайте oclinica.ru, в цифровом брендбуке, онлайн-материалах.
+              Подключён через next/font/google (кириллица + латиница).
+            </p>
+            <p className="text-xs mt-3 font-mono px-2 py-1 rounded inline-block"
+              style={{ background: "#f3f4f6", color: "#374151" }}>
+              --font-web
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Таблица применения */}
+      <section className="mb-12">
+        <h2 className="text-xl font-semibold mb-4" style={{ color: "var(--bb-text)" }}>
+          Правило применения
+        </h2>
+        <div
+          className="overflow-hidden rounded-xl border"
+          style={{ borderColor: "var(--bb-border)" }}
+        >
+          <table className="w-full text-sm">
+            <thead>
+              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
+                {["Носитель", "Шрифт"].map(h => (
+                  <th
+                    key={h}
+                    className="text-left px-5 py-3 font-medium"
+                    style={{ color: "var(--bb-text-muted)" }}
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                ["Сайт, цифровые материалы, брендбук",   "Fira Sans"],
+                ["Форма сотрудников, бейджи",             "DINPro"],
+                ["Вывески, таблички, навигация",          "DINPro"],
+                ["Брендирование транспорта",              "DINPro"],
+                ["Визитки, листовки, полиграфия",         "DINPro"],
+                ["Telegram-бот, пуш-уведомления",        "Fira Sans (системный)"],
+              ].map(([media, font]) => (
+                <tr
+                  key={media}
+                  className="border-t"
+                  style={{ borderColor: "var(--bb-border)" }}
+                >
+                  <td className="px-5 py-3" style={{ color: "var(--bb-text)" }}>{media}</td>
+                  <td className="px-5 py-3 font-medium" style={{ color: "var(--brand-073m)" }}>
+                    {font}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      {/* DINPro Scale */}
+      <Section
+        title="DINPro — шкала заголовков"
+        subtitle="Бренд-шрифт. Используется в оффлайн-носителях. Отображается с системным фоллбэком Arial, если шрифт не установлен."
+      >
+        <div>
+          {DIN_SCALE.map(row => (
+            <TypeRow
+              key={row.token}
+              {...row}
+              fontFamily="'DINPro', 'DIN Pro', Arial, sans-serif"
+            />
+          ))}
+        </div>
+      </Section>
+
+      {/* Fira Sans Scale */}
+      <Section
+        title="Fira Sans — полная шкала"
+        subtitle="Веб-шрифт. Используется на сайте и в цифровых материалах. Загружается через Google Fonts."
+      >
+        <div>
+          {FIRA_SCALE.map(row => (
+            <TypeRow
+              key={row.token}
+              {...row}
+              fontFamily="var(--font-fira-sans, 'Fira Sans', sans-serif)"
+            />
+          ))}
+        </div>
+      </Section>
+
+      {/* Живой пример */}
+      <Section
+        title="Живой пример — блок контента"
+        subtitle="Типичная комбинация заголовка и тела текста на сайте."
+      >
+        <div
+          className="rounded-xl border p-8"
+          style={{
+            borderColor: "var(--bb-border)",
+            background: "var(--bb-sidebar-bg)",
+            fontFamily: "var(--font-fira-sans, 'Fira Sans', sans-serif)",
+          }}
+        >
+          <p
+            className="text-xs font-semibold uppercase tracking-widest mb-3"
+            style={{ color: "var(--brand-053m)", letterSpacing: "0.1em" }}
+          >
+            Наши специалисты
+          </p>
+          <h2
+            className="mb-4"
+            style={{ fontSize: 28, fontWeight: 600, lineHeight: 1.3, color: "var(--bb-text)" }}
+          >
+            Запись к ЛОР-врачу<br />без очереди и ожидания
+          </h2>
+          <p
+            className="mb-4 max-w-xl"
+            style={{ fontSize: 16, fontWeight: 400, lineHeight: 1.6, color: "var(--bb-text-muted)" }}
+          >
+            В нашей клинике работают специалисты высшей категории с опытом от 15 лет.
+            Диагностика и лечение заболеваний уха, горла, носа и смежных органов.
+          </p>
+          <p
+            style={{ fontSize: 12, fontWeight: 400, lineHeight: 1.5, color: "#9ca3af" }}
+          >
+            Лицензия № ЛО-77-01-018234 · Москва, ул. Примерная, д. 1
+          </p>
+        </div>
+      </Section>
+
+    </div>
+  );
+}

apps/web/app/globals.css

@@ -0,0 +1,44 @@
+@import "tailwindcss";
+
+/* ─── Бренд-токены О!Клиника ─────────────────────────────────────────── */
+/* Цвета уточняются в Sprint 2 по таблице Oracal                          */
+:root {
+  /* Фирменные цвета (приблизительно — уточнить в Sprint 2) */
+  --brand-053m: #7ecfca;   /* Основной бирюзовый (Oracal 053M) */
+  --brand-073m: #5b7b87;   /* Тёмный серо-голубой (Oracal 073M) */
+  --brand-066m: #5bb5ad;   /* Средний бирюзовый (Oracal 066M) */
+  --brand-050m: #1b4c72;   /* Тёмно-синий, наружная реклама (Oracal 050M) */
+  --brand-081m: #c4a882;   /* Бежевый (Oracal 081M) */
+  --brand-080m: #5c2e0e;   /* Тёмно-коричневый (Oracal 080M) */
+  --brand-white: #ffffff;
+
+  /* UI-цвета брендбука */
+  --bb-sidebar-bg: #f8f9fa;
+  --bb-sidebar-border: #e5e7eb;
+  --bb-sidebar-text: #374151;
+  --bb-sidebar-text-muted: #6b7280;
+  --bb-sidebar-active-bg: #e0f5f4;
+  --bb-sidebar-active-text: var(--brand-053m);
+  --bb-sidebar-section: #9ca3af;
+  --bb-content-bg: #ffffff;
+  --bb-border: #e5e7eb;
+  --bb-text: #111827;
+  --bb-text-muted: #6b7280;
+
+  /* Шрифты */
+  --font-brand: 'DINPro', 'DIN Pro', Arial, sans-serif;
+  --font-web: 'Fira Sans', sans-serif;
+  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
+}
+
+@theme inline {
+  --color-background: #ffffff;
+  --color-foreground: var(--bb-text);
+}
+
+body {
+  font-family: var(--font-web);
+  background: var(--bb-content-bg);
+  color: var(--bb-text);
+  -webkit-font-smoothing: antialiased;
+}

apps/web/app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Fira_Sans } from "next/font/google";
+import "./globals.css";
+import { Sidebar } from "@/components/layout/Sidebar";
+
+const firaSans = Fira_Sans({
+  subsets: ["latin", "cyrillic"],
+  weight: ["300", "400", "500", "600"],
+  variable: "--font-fira-sans",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: "Цифровой брендбук | Клиника ухо, горло, нос им. проф. Е.Н.Оленевой",
+  description: "Интерактивный брендбук — Living Styleguide oclinica.ru",
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="ru" className={firaSans.variable}>
+      <body className="flex h-screen overflow-hidden bg-white">
+        <Sidebar />
+        <main className="flex-1 overflow-y-auto">
+          {children}
+        </main>
+      </body>
+    </html>
+  );
+}

apps/web/app/offline/badges/page.tsx

@@ -0,0 +1,273 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+
+export const metadata: Metadata = {
+  title: "Бейджи | Брендбук О!Клиника",
+};
+
+function Section({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="mb-12">
+      <div className="mb-6">
+        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
+          {title}
+        </h2>
+        {subtitle && (
+          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+            {subtitle}
+          </p>
+        )}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+/* Компонент бейджа (масштабированный макет) */
+function BadgeMockup({
+  variant,
+  name,
+  role,
+}: {
+  variant: "light" | "dark";
+  name: string;
+  role: string;
+}) {
+  const isDark = variant === "dark";
+  /* 70×30 мм → пропорция 7:3. Отображаем в 280×120px */
+  return (
+    <div className="flex flex-col items-center gap-3">
+      <div
+        className="rounded-lg flex items-center px-5 gap-4"
+        style={{
+          width: 280,
+          height: 120,
+          background: isDark ? "var(--brand-073m)" : "var(--brand-081m)",
+          border: isDark ? "none" : "1px solid #d1d5db",
+          flexShrink: 0,
+        }}
+      >
+        {/* Логотип */}
+        <Image
+          src="/logo/logo-transparent.png"
+          alt="Логотип"
+          width={72}
+          height={26}
+          className="object-contain shrink-0"
+          style={{
+            filter: isDark
+              ? "brightness(0) invert(1)"
+              : "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)",
+          }}
+        />
+        {/* Разделитель */}
+        <div
+          className="self-stretch w-px mx-1"
+          style={{ background: isDark ? "rgba(255,255,255,0.25)" : "rgba(92,46,14,0.2)" }}
+        />
+        {/* Текст */}
+        <div>
+          <p
+            className="font-bold leading-tight"
+            style={{
+              fontFamily: "'DINPro', Arial, sans-serif",
+              fontSize: 13,
+              color: isDark ? "#ffffff" : "#5c2e0e",
+            }}
+          >
+            {name}
+          </p>
+          <p
+            className="leading-tight mt-0.5"
+            style={{
+              fontFamily: "'DINPro', Arial, sans-serif",
+              fontSize: 10,
+              color: isDark ? "rgba(255,255,255,0.7)" : "rgba(92,46,14,0.7)",
+            }}
+          >
+            {role}
+          </p>
+        </div>
+      </div>
+      <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
+        {isDark ? "Тёмный вариант (серо-голубой)" : "Светлый вариант (бежевый)"}
+      </p>
+    </div>
+  );
+}
+
+export default function BadgesPage() {
+  return (
+    <div className="max-w-4xl mx-auto px-8 py-10">
+
+      {/* Заголовок */}
+      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-2"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Оффлайн элементы → 6.2
+        </p>
+        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
+          Бейджи сотрудников
+        </h1>
+        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
+          Именные бейджи для идентификации сотрудников клиники. Размер 70×30 мм.
+          Два цветовых варианта в зависимости от должности.
+        </p>
+      </div>
+
+      {/* Размеры и технические требования */}
+      <Section
+        title="Технические параметры"
+        subtitle="Единый стандарт для всех сотрудников клиники."
+      >
+        <div
+          className="grid grid-cols-2 gap-4 sm:grid-cols-4 mb-6"
+        >
+          {[
+            { label: "Ширина", value: "70 мм" },
+            { label: "Высота", value: "30 мм" },
+            { label: "Материал", value: "ПВХ / металл" },
+            { label: "Крепление", value: "Булавка / клипса" },
+          ].map(({ label, value }) => (
+            <div
+              key={label}
+              className="rounded-xl border p-4 text-center"
+              style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
+            >
+              <p className="font-mono text-lg font-semibold" style={{ color: "var(--brand-073m)" }}>
+                {value}
+              </p>
+              <p className="text-xs mt-1" style={{ color: "var(--bb-text-muted)" }}>
+                {label}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      {/* Варианты */}
+      <Section
+        title="Варианты бейджей"
+        subtitle="Макет бейджа (масштаб: 4× от реального размера 70×30 мм)."
+      >
+        <div className="flex flex-wrap gap-8 items-start">
+          <BadgeMockup
+            variant="light"
+            name="Иванова А.В."
+            role="Врач-оториноларинголог"
+          />
+          <BadgeMockup
+            variant="dark"
+            name="Петров К.С."
+            role="Главный врач"
+          />
+        </div>
+      </Section>
+
+      {/* Состав текста */}
+      <Section
+        title="Состав текста на бейдже"
+        subtitle="Строгий порядок элементов. Шрифт — DINPro."
+      >
+        <div
+          className="overflow-hidden rounded-xl border"
+          style={{ borderColor: "var(--bb-border)" }}
+        >
+          <table className="w-full text-sm">
+            <thead>
+              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
+                {["Элемент", "Содержание", "Шрифт / Размер", "Позиция"].map(h => (
+                  <th
+                    key={h}
+                    className="text-left px-5 py-3 font-medium"
+                    style={{ color: "var(--bb-text-muted)" }}
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                ["Логотип", "Логотип клиники", "PNG / SVG", "Левая часть, по центру по высоте"],
+                ["Разделитель", "Вертикальная линия", "1px, 40% прозрачность", "Между логотипом и текстом"],
+                ["ФИО", "Фамилия И.О.", "DINPro Bold 13px", "Правая часть, верхняя строка"],
+                ["Должность", "Полное название должности", "DINPro Regular 10px", "Правая часть, нижняя строка"],
+              ].map(([el, content, font, pos]) => (
+                <tr
+                  key={el}
+                  className="border-t"
+                  style={{ borderColor: "var(--bb-border)" }}
+                >
+                  <td className="px-5 py-3 font-medium" style={{ color: "var(--bb-text)" }}>{el}</td>
+                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{content}</td>
+                  <td className="px-5 py-3 font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>{font}</td>
+                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{pos}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Section>
+
+      {/* Цветовые варианты */}
+      <Section
+        title="Применение вариантов"
+        subtitle="Выбор варианта зависит от должности сотрудника."
+      >
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {[
+            {
+              variant: "Светлый (бежевый)",
+              color: "#c4a882",
+              usage: "Медицинский персонал, санитарки, технический персонал",
+              oracal: "081M",
+            },
+            {
+              variant: "Тёмный (серо-голубой)",
+              color: "#5b7b87",
+              usage: "Административный персонал, менеджеры, главный врач",
+              oracal: "073M",
+            },
+          ].map(item => (
+            <div
+              key={item.variant}
+              className="flex gap-4 p-4 rounded-xl border"
+              style={{ borderColor: "var(--bb-border)" }}
+            >
+              <div
+                className="w-8 h-8 rounded-lg shrink-0 mt-0.5"
+                style={{ background: item.color }}
+              />
+              <div>
+                <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
+                  {item.variant}
+                </p>
+                <p className="text-xs mb-1.5" style={{ color: "var(--bb-text-muted)" }}>
+                  {item.usage}
+                </p>
+                <span
+                  className="text-[10px] font-mono px-1.5 py-0.5 rounded"
+                  style={{ background: "#f3f4f6", color: "#374151" }}
+                >
+                  Oracal {item.oracal}
+                </span>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+    </div>
+  );
+}

apps/web/app/offline/navigation/page.tsx

@@ -0,0 +1,252 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Внутренняя навигация | Брендбук О!Клиника",
+};
+
+function Section({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="mb-12">
+      <div className="mb-6">
+        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
+          {title}
+        </h2>
+        {subtitle && (
+          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+            {subtitle}
+          </p>
+        )}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+/* Макет настенной таблички */
+function SignMockup({
+  type,
+  text,
+  subtext,
+  bgColor,
+  textColor,
+  accentColor,
+  size,
+}: {
+  type: string;
+  text: string;
+  subtext?: string;
+  bgColor: string;
+  textColor: string;
+  accentColor: string;
+  size: string;
+}) {
+  return (
+    <div className="flex flex-col items-start gap-2">
+      <div
+        className="rounded-lg px-6 py-4 flex items-center gap-4"
+        style={{
+          background: bgColor,
+          width: 260,
+          border: bgColor === "#ffffff" ? "1px solid #e5e7eb" : "none",
+        }}
+      >
+        {/* Цветовая полоса */}
+        <div
+          className="w-1.5 self-stretch rounded-full"
+          style={{ background: accentColor, minHeight: 32 }}
+        />
+        <div>
+          <p
+            style={{
+              fontFamily: "'DINPro', Arial, sans-serif",
+              fontSize: 14,
+              fontWeight: 700,
+              color: textColor,
+              lineHeight: 1.3,
+            }}
+          >
+            {text}
+          </p>
+          {subtext && (
+            <p
+              style={{
+                fontFamily: "'DINPro', Arial, sans-serif",
+                fontSize: 10,
+                color: textColor,
+                opacity: 0.65,
+                marginTop: 3,
+              }}
+            >
+              {subtext}
+            </p>
+          )}
+        </div>
+      </div>
+      <div className="pl-1">
+        <p className="text-xs font-medium" style={{ color: "var(--bb-text)" }}>{type}</p>
+        <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{size}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function NavigationPage() {
+  return (
+    <div className="max-w-4xl mx-auto px-8 py-10">
+
+      {/* Заголовок */}
+      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-2"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Оффлайн элементы → 6.3
+        </p>
+        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
+          Внутренняя навигация
+        </h1>
+        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
+          Система навигационных табличек и указателей внутри клиники.
+          Единый стиль с фирменными цветами и шрифтом DINPro.
+        </p>
+      </div>
+
+      {/* Шаблоны табличек */}
+      <Section
+        title="Типы табличек"
+        subtitle="Четыре базовых шаблона для разных зон клиники."
+      >
+        <div className="flex flex-wrap gap-6">
+          <SignMockup
+            type="Кабинет врача"
+            text="Кабинет № 101"
+            subtext="Оториноларингология"
+            bgColor="#ffffff"
+            textColor="#1b4c72"
+            accentColor="#7ecfca"
+            size="200 × 80 мм"
+          />
+          <SignMockup
+            type="Направляющий указатель"
+            text="→ Регистратура"
+            subtext="2-й этаж"
+            bgColor="#5b7b87"
+            textColor="#ffffff"
+            accentColor="#7ecfca"
+            size="300 × 80 мм"
+          />
+          <SignMockup
+            type="Зона ожидания"
+            text="Зона ожидания"
+            subtext="Пожалуйста, соблюдайте тишину"
+            bgColor="#e0f5f4"
+            textColor="#1b4c72"
+            accentColor="#5bb5ad"
+            size="250 × 80 мм"
+          />
+          <SignMockup
+            type="Запрещающий"
+            text="Вход только для персонала"
+            bgColor="#1b4c72"
+            textColor="#ffffff"
+            accentColor="#c4a882"
+            size="250 × 60 мм"
+          />
+        </div>
+      </Section>
+
+      {/* Технические требования */}
+      <Section
+        title="Технические требования"
+        subtitle="Материалы и цвета для производства."
+      >
+        <div
+          className="overflow-hidden rounded-xl border"
+          style={{ borderColor: "var(--bb-border)" }}
+        >
+          <table className="w-full text-sm">
+            <thead>
+              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
+                {["Параметр", "Значение"].map(h => (
+                  <th
+                    key={h}
+                    className="text-left px-5 py-3 font-medium"
+                    style={{ color: "var(--bb-text-muted)" }}
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                ["Основной материал", "ПВХ 3мм / ПС зеркальный / акрил"],
+                ["Покрытие фона", "Oracal плёнка (053M / 073M / 050M)"],
+                ["Шрифт", "DINPro Bold / Regular (DXF для фрезеровки)"],
+                ["Крепление", "Двусторонний скотч / шурупы с дистанционным держателем"],
+                ["Толщина букв (фрезеровка)", "3 мм от основы"],
+                ["Минимальный размер текста", "10 мм по высоте"],
+              ].map(([param, value]) => (
+                <tr
+                  key={param}
+                  className="border-t"
+                  style={{ borderColor: "var(--bb-border)" }}
+                >
+                  <td className="px-5 py-3 font-medium" style={{ color: "var(--bb-text)" }}>
+                    {param}
+                  </td>
+                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>
+                    {value}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Section>
+
+      {/* Цвета Oracal */}
+      <Section
+        title="Цвета Oracal для навигации"
+        subtitle="Допустимые цвета плёнки по коду Oracal."
+      >
+        <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
+          {[
+            { code: "053M", hex: "#7ecfca", name: "Акцент / полоса" },
+            { code: "073M", hex: "#5b7b87", name: "Фон указателей" },
+            { code: "050M", hex: "#1b4c72", name: "Фон запрещающих" },
+            { code: "081M", hex: "#c4a882", name: "Акцент на тёмном" },
+          ].map(c => (
+            <div
+              key={c.code}
+              className="rounded-xl overflow-hidden border"
+              style={{ borderColor: "var(--bb-border)" }}
+            >
+              <div className="h-16" style={{ background: c.hex }} />
+              <div className="p-3">
+                <p className="font-medium text-xs" style={{ color: "var(--bb-text)" }}>
+                  Oracal {c.code}
+                </p>
+                <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>
+                  {c.name}
+                </p>
+                <p className="font-mono text-xs mt-1" style={{ color: "var(--bb-text-muted)" }}>
+                  {c.hex}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+    </div>
+  );
+}

apps/web/app/offline/print/page.tsx

@@ -0,0 +1,331 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+
+export const metadata: Metadata = {
+  title: "Печатные материалы | Брендбук О!Клиника",
+};
+
+function Section({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="mb-12">
+      <div className="mb-6">
+        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
+          {title}
+        </h2>
+        {subtitle && (
+          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+            {subtitle}
+          </p>
+        )}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+/* Макет визитки */
+function BusinessCardMockup({ side }: { side: "front" | "back" }) {
+  /* 90×50 мм → пропорция 9:5. Отображаем 288×160px */
+  if (side === "front") {
+    return (
+      <div
+        className="rounded-xl overflow-hidden shadow-md"
+        style={{ width: 288, height: 160, background: "#5b7b87", flexShrink: 0 }}
+      >
+        {/* Верхняя бирюзовая полоса */}
+        <div style={{ height: 6, background: "#7ecfca" }} />
+
+        <div className="flex h-full">
+          {/* Левая колонка с логотипом */}
+          <div
+            className="flex items-center justify-center px-6"
+            style={{ width: 110, borderRight: "1px solid rgba(255,255,255,0.15)" }}
+          >
+            <Image
+              src="/logo/logo-transparent.png"
+              alt="Логотип"
+              width={80}
+              height={28}
+              className="object-contain"
+              style={{ filter: "brightness(0) invert(1)" }}
+            />
+          </div>
+
+          {/* Правая колонка с данными */}
+          <div className="flex flex-col justify-center px-5 pb-2 gap-1">
+            <p
+              style={{
+                fontFamily: "'DINPro', Arial, sans-serif",
+                fontSize: 12,
+                fontWeight: 700,
+                color: "#ffffff",
+              }}
+            >
+              Иванова Анна Викторовна
+            </p>
+            <p
+              style={{
+                fontFamily: "'DINPro', Arial, sans-serif",
+                fontSize: 9,
+                color: "rgba(255,255,255,0.7)",
+              }}
+            >
+              Врач-оториноларинголог
+            </p>
+            <div className="mt-2 space-y-0.5">
+              {["+7 (495) 000-00-00", "oclinica.ru"].map(line => (
+                <p
+                  key={line}
+                  style={{
+                    fontFamily: "'DINPro', Arial, sans-serif",
+                    fontSize: 8,
+                    color: "rgba(255,255,255,0.6)",
+                  }}
+                >
+                  {line}
+                </p>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="rounded-xl overflow-hidden shadow-md flex items-center justify-center"
+      style={{ width: 288, height: 160, background: "#c4a882", flexShrink: 0 }}
+    >
+      <Image
+        src="/logo/logo-transparent.png"
+        alt="Логотип на обороте"
+        width={140}
+        height={50}
+        className="object-contain"
+        style={{
+          filter: "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)",
+        }}
+      />
+    </div>
+  );
+}
+
+/* Макет листовки */
+function LeafletMockup() {
+  /* А5 = 148×210 мм → пропорция ≈ 1:1.42. Отображаем 180×256px */
+  return (
+    <div
+      className="rounded-xl overflow-hidden shadow-md"
+      style={{ width: 180, height: 256, background: "#ffffff", border: "1px solid #e5e7eb", flexShrink: 0 }}
+    >
+      {/* Шапка */}
+      <div
+        className="px-4 pt-4 pb-3 flex items-end justify-between"
+        style={{ background: "#5b7b87" }}
+      >
+        <Image
+          src="/logo/logo-transparent.png"
+          alt="Логотип"
+          width={90}
+          height={32}
+          className="object-contain"
+          style={{ filter: "brightness(0) invert(1)" }}
+        />
+      </div>
+
+      {/* Тело */}
+      <div className="px-4 pt-3">
+        {/* Плейсхолдер фото */}
+        <div
+          className="w-full rounded mb-3"
+          style={{ height: 70, background: "#e0f5f4" }}
+        />
+        {/* Заголовок */}
+        <div
+          className="h-3 rounded mb-1.5"
+          style={{ background: "#1b4c72", width: "80%" }}
+        />
+        <div
+          className="h-3 rounded mb-3"
+          style={{ background: "#1b4c72", width: "60%" }}
+        />
+        {/* Текст-заглушка */}
+        {[100, 90, 95, 80].map((w, i) => (
+          <div
+            key={i}
+            className="h-1.5 rounded mb-1"
+            style={{ background: "#e5e7eb", width: `${w}%` }}
+          />
+        ))}
+        {/* CTA-кнопка */}
+        <div
+          className="mt-4 rounded py-2 text-center"
+          style={{ background: "#7ecfca" }}
+        >
+          <p
+            style={{
+              fontFamily: "'DINPro', Arial, sans-serif",
+              fontSize: 9,
+              fontWeight: 700,
+              color: "#ffffff",
+            }}
+          >
+            ЗАПИСАТЬСЯ НА ПРИЁМ
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function PrintPage() {
+  return (
+    <div className="max-w-4xl mx-auto px-8 py-10">
+
+      {/* Заголовок */}
+      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-2"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Оффлайн элементы → 6.5
+        </p>
+        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
+          Печатные материалы
+        </h1>
+        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
+          Листовки, визитки и digital-каналы клиники. Все материалы следуют
+          единому фирменному стилю с использованием шрифта DINPro и цветов Oracal.
+        </p>
+      </div>
+
+      {/* Визитки */}
+      <Section
+        title="Визитки"
+        subtitle="Стандарт 90×50 мм. Двусторонняя печать. Изображены в масштабе."
+      >
+        <div className="flex flex-wrap gap-6 items-start">
+          <div className="flex flex-col items-center gap-2">
+            <BusinessCardMockup side="front" />
+            <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>Лицевая сторона</p>
+          </div>
+          <div className="flex flex-col items-center gap-2">
+            <BusinessCardMockup side="back" />
+            <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>Оборотная сторона</p>
+          </div>
+        </div>
+
+        <div
+          className="mt-6 overflow-hidden rounded-xl border"
+          style={{ borderColor: "var(--bb-border)" }}
+        >
+          <table className="w-full text-sm">
+            <thead>
+              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
+                {["Элемент", "Содержание"].map(h => (
+                  <th key={h} className="text-left px-5 py-3 font-medium"
+                    style={{ color: "var(--bb-text-muted)" }}>{h}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                ["Лицевая — логотип", "Белый инвертированный на тёмно-серо-голубом фоне"],
+                ["Лицевая — ФИО", "DINPro Bold, 10pt, белый"],
+                ["Лицевая — должность", "DINPro Regular, 8pt, белый 70%"],
+                ["Лицевая — контакты", "DINPro Regular, 7pt, белый 60%"],
+                ["Оборотная", "Логотип тёмно-коричневый на бежевом фоне (081M)"],
+                ["Размер", "90 × 50 мм, 4+4 офсет или цифровая печать"],
+              ].map(([el, content]) => (
+                <tr key={el} className="border-t" style={{ borderColor: "var(--bb-border)" }}>
+                  <td className="px-5 py-3 font-medium" style={{ color: "var(--bb-text)" }}>{el}</td>
+                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{content}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Section>
+
+      {/* Листовки */}
+      <Section
+        title="Листовки"
+        subtitle="Формат А5 (148×210 мм). Шаблон для акций и информационных материалов."
+      >
+        <div className="flex gap-8 items-start">
+          <LeafletMockup />
+          <div className="flex-1">
+            <p className="font-medium text-sm mb-3" style={{ color: "var(--bb-text)" }}>
+              Структура листовки
+            </p>
+            <div className="space-y-3">
+              {[
+                { zone: "Шапка", desc: "Логотип белый на тёмно-серо-голубом (073M)" },
+                { zone: "Фото", desc: "Фото врача или процедуры, 70% ширины" },
+                { zone: "Заголовок", desc: "DINPro Bold, тёмно-синий (050M), 18–22pt" },
+                { zone: "Текст", desc: "DINPro Regular, 9–10pt, серый #374151" },
+                { zone: "CTA-кнопка", desc: "Основной бирюзовый (053M), DINPro Bold белый" },
+              ].map(({ zone, desc }) => (
+                <div key={zone} className="flex gap-3">
+                  <span
+                    className="shrink-0 text-xs font-semibold px-2 py-0.5 rounded mt-0.5"
+                    style={{ background: "#e0f5f4", color: "var(--brand-073m)" }}
+                  >
+                    {zone}
+                  </span>
+                  <p className="text-sm" style={{ color: "var(--bb-text-muted)" }}>{desc}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      {/* Telegram-бот */}
+      <Section
+        title="Telegram-бот"
+        subtitle="Цифровой канал взаимодействия с пациентами."
+      >
+        <div
+          className="rounded-xl border p-6"
+          style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
+        >
+          <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+            {[
+              { icon: "🤖", title: "Запись на приём", desc: "Выбор врача, даты и времени через бот" },
+              { icon: "📋", title: "Результаты анализов", desc: "Уведомления и просмотр результатов" },
+              { icon: "💬", title: "Напоминания", desc: "Напоминание о предстоящем визите" },
+            ].map(({ icon, title, desc }) => (
+              <div key={title} className="flex gap-3">
+                <span className="text-2xl shrink-0">{icon}</span>
+                <div>
+                  <p className="font-medium text-sm mb-1" style={{ color: "var(--bb-text)" }}>
+                    {title}
+                  </p>
+                  <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div
+            className="mt-4 pt-4 border-t text-xs"
+            style={{ borderColor: "var(--bb-border)", color: "var(--bb-text-muted)" }}
+          >
+            В Telegram-боте используется системный шрифт Telegram. Логотип и цвета бренда
+            применяются в аватаре, приветственном изображении и кнопках меню.
+          </div>
+        </div>
+      </Section>
+
+    </div>
+  );
+}

apps/web/app/offline/transport/page.tsx

@@ -0,0 +1,262 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+
+export const metadata: Metadata = {
+  title: "Брендирование транспорта | Брендбук О!Клиника",
+};
+
+function Section({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="mb-12">
+      <div className="mb-6">
+        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
+          {title}
+        </h2>
+        {subtitle && (
+          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+            {subtitle}
+          </p>
+        )}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+/* Макет трамвая (упрощённый силуэт) */
+function TramMockup() {
+  return (
+    <div
+      className="relative rounded-2xl overflow-hidden"
+      style={{
+        background: "#f8f9fa",
+        border: "1px solid var(--bb-border)",
+        padding: "32px 24px",
+      }}
+    >
+      {/* Кузов трамвая */}
+      <div
+        className="relative mx-auto rounded-xl overflow-hidden"
+        style={{
+          width: "100%",
+          maxWidth: 560,
+          height: 160,
+          background: "#ffffff",
+          border: "2px solid #e5e7eb",
+        }}
+      >
+        {/* Верхняя полоса — бирюзовая */}
+        <div
+          className="absolute top-0 left-0 right-0"
+          style={{ height: 28, background: "#7ecfca" }}
+        />
+
+        {/* Основная бежевая полоса */}
+        <div
+          className="absolute left-0 right-0"
+          style={{ top: 28, height: 76, background: "#c4a882" }}
+        />
+
+        {/* Нижняя полоса — серо-голубая */}
+        <div
+          className="absolute left-0 right-0"
+          style={{ top: 104, height: 56, background: "#5b7b87" }}
+        />
+
+        {/* Логотип по центру бежевой полосы */}
+        <div
+          className="absolute flex items-center justify-center"
+          style={{ top: 28, left: 0, right: 0, height: 76 }}
+        >
+          <Image
+            src="/logo/logo-transparent.png"
+            alt="Логотип на трамвае"
+            width={180}
+            height={64}
+            className="object-contain"
+            style={{
+              filter: "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)",
+            }}
+          />
+        </div>
+
+        {/* Окна (декоративные) */}
+        {[80, 180, 280, 380, 460].map(x => (
+          <div
+            key={x}
+            className="absolute rounded"
+            style={{
+              left: x,
+              top: 40,
+              width: 50,
+              height: 44,
+              background: "rgba(255,255,255,0.6)",
+              border: "1px solid rgba(255,255,255,0.8)",
+            }}
+          />
+        ))}
+
+        {/* Колёса (декоративные) */}
+        {[60, 200, 360, 500].map(x => (
+          <div
+            key={x}
+            className="absolute rounded-full"
+            style={{
+              left: x,
+              bottom: -8,
+              width: 24,
+              height: 24,
+              background: "#374151",
+            }}
+          />
+        ))}
+      </div>
+
+      <p className="mt-4 text-center text-xs" style={{ color: "var(--bb-text-muted)" }}>
+        Схема цветового решения (превью, не финальный макет)
+      </p>
+    </div>
+  );
+}
+
+export default function TransportPage() {
+  return (
+    <div className="max-w-4xl mx-auto px-8 py-10">
+
+      {/* Заголовок */}
+      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-2"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Оффлайн элементы → 6.4
+        </p>
+        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
+          Брендирование транспорта
+        </h1>
+        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
+          Схема нанесения фирменной символики на трамвай и другой общественный транспорт.
+          Трёхполосная структура с логотипом клиники по центру.
+        </p>
+      </div>
+
+      {/* Макет */}
+      <Section
+        title="Макет трамвая"
+        subtitle="Трёхполосная схема брендирования: верхняя бирюзовая, центральная бежевая с логотипом, нижняя серо-голубая."
+      >
+        <TramMockup />
+      </Section>
+
+      {/* Цветовая схема */}
+      <Section
+        title="Цветовая схема"
+        subtitle="Порядок и размеры полос."
+      >
+        <div
+          className="overflow-hidden rounded-xl border"
+          style={{ borderColor: "var(--bb-border)" }}
+        >
+          <table className="w-full text-sm">
+            <thead>
+              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
+                {["Зона", "Цвет", "Oracal", "Высота", "Содержимое"].map(h => (
+                  <th
+                    key={h}
+                    className="text-left px-4 py-3 font-medium"
+                    style={{ color: "var(--bb-text-muted)" }}
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                ["Верхняя полоса", "#7ecfca", "053M", "~17% высоты", "Декоративная"],
+                ["Центральная полоса", "#c4a882", "081M", "~48% высоты", "Логотип клиники (по центру)"],
+                ["Нижняя полоса", "#5b7b87", "073M", "~35% высоты", "Декоративная / контактная информация"],
+              ].map(([zone, hex, oracal, height, content]) => (
+                <tr
+                  key={zone}
+                  className="border-t"
+                  style={{ borderColor: "var(--bb-border)" }}
+                >
+                  <td className="px-4 py-3 font-medium" style={{ color: "var(--bb-text)" }}>
+                    {zone}
+                  </td>
+                  <td className="px-4 py-3">
+                    <div className="flex items-center gap-2">
+                      <div
+                        className="w-5 h-5 rounded"
+                        style={{ background: hex as string, border: "1px solid #e5e7eb" }}
+                      />
+                      <span className="font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
+                        {hex}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="px-4 py-3 font-mono text-xs" style={{ color: "var(--bb-text-muted)" }}>
+                    {oracal}
+                  </td>
+                  <td className="px-4 py-3" style={{ color: "var(--bb-text-muted)" }}>{height}</td>
+                  <td className="px-4 py-3" style={{ color: "var(--bb-text-muted)" }}>{content}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Section>
+
+      {/* Логотип на транспорте */}
+      <Section
+        title="Размещение логотипа"
+        subtitle="На центральной полосе, горизонтально по центру борта."
+      >
+        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          {[
+            { label: "Минимальная длина логотипа", value: "600 мм" },
+            { label: "Отступ от краёв борта", value: "≥ 400 мм" },
+            { label: "Вертикальное выравнивание", value: "По центру полосы" },
+            { label: "Цвет логотипа", value: "Тёмно-коричневый (080M)" },
+          ].map(({ label, value }) => (
+            <div
+              key={label}
+              className="flex items-center gap-4 p-4 rounded-xl border"
+              style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
+            >
+              <div
+                className="w-2 h-2 rounded-full shrink-0"
+                style={{ background: "var(--brand-053m)" }}
+              />
+              <div>
+                <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>{label}</p>
+                <p className="font-semibold text-sm" style={{ color: "var(--bb-text)" }}>{value}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+      <div
+        className="rounded-xl border p-4 text-sm flex items-start gap-3"
+        style={{ borderColor: "#fde68a", background: "#fffbeb", color: "#92400e" }}
+      >
+        <span className="text-base shrink-0">⚠️</span>
+        <p>
+          Финальные макеты для производства предоставляются дизайнером в форматах AI / PDF с
+          реальными размерами конкретного транспортного средства.
+        </p>
+      </div>
+
+    </div>
+  );
+}

apps/web/app/offline/uniform/page.tsx

@@ -0,0 +1,207 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+
+export const metadata: Metadata = {
+  title: "Форма сотрудников | Брендбук О!Клиника",
+};
+
+function Section({
+  title,
+  subtitle,
+  children,
+}: {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <section className="mb-12">
+      <div className="mb-6">
+        <h2 className="text-xl font-semibold" style={{ color: "var(--bb-text)" }}>
+          {title}
+        </h2>
+        {subtitle && (
+          <p className="mt-1 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+            {subtitle}
+          </p>
+        )}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+export default function UniformPage() {
+  return (
+    <div className="max-w-4xl mx-auto px-8 py-10">
+
+      {/* Заголовок */}
+      <div className="mb-10 pb-6 border-b" style={{ borderColor: "var(--bb-border)" }}>
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-2"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Оффлайн элементы → 6.1
+        </p>
+        <h1 className="text-3xl font-semibold mb-3" style={{ color: "var(--bb-text)" }}>
+          Форма сотрудников
+        </h1>
+        <p className="text-base max-w-2xl" style={{ color: "var(--bb-text-muted)" }}>
+          Фирменная медицинская одежда сотрудников клиники. Бежевый костюм
+          с логотипом клиники на левой стороне груди.
+        </p>
+      </div>
+
+      {/* Описание костюма */}
+      <Section
+        title="Описание комплекта"
+        subtitle="Стандартная форма для всех сотрудников клиники."
+      >
+        <div
+          className="rounded-xl border p-6"
+          style={{ borderColor: "var(--bb-border)", background: "var(--bb-sidebar-bg)" }}
+        >
+          <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
+            <div>
+              <p className="font-medium text-sm mb-3" style={{ color: "var(--bb-text)" }}>
+                Состав формы
+              </p>
+              <ul className="space-y-2">
+                {["Медицинский костюм (куртка + брюки)", "Цвет: бежевый (Oracal 081M)", "Материал: медицинская ткань", "Логотип вышит или нанесён термопечатью"].map(item => (
+                  <li key={item} className="flex items-start gap-2 text-sm" style={{ color: "var(--bb-text-muted)" }}>
+                    <span style={{ color: "var(--brand-053m)" }}>•</span> {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div>
+              <p className="font-medium text-sm mb-3" style={{ color: "var(--bb-text)" }}>
+                Цветовая схема
+              </p>
+              <div className="flex gap-3">
+                <div className="text-center">
+                  <div className="w-12 h-12 rounded-lg border mb-1"
+                    style={{ background: "#c4a882", borderColor: "var(--bb-border)" }} />
+                  <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>081M</p>
+                  <p className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>#c4a882</p>
+                </div>
+                <div className="text-center">
+                  <div className="w-12 h-12 rounded-lg border mb-1"
+                    style={{ background: "#5c2e0e", borderColor: "var(--bb-border)" }} />
+                  <p className="text-xs" style={{ color: "var(--bb-text-muted)" }}>080M</p>
+                  <p className="text-xs font-mono" style={{ color: "var(--bb-text-muted)" }}>#5c2e0e</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Section>
+
+      {/* Логотип на форме */}
+      <Section
+        title="Размещение логотипа"
+        subtitle="Логотип располагается на левой стороне груди. Размер зависит от размера одежды."
+      >
+        {/* Визуализация размещения */}
+        <div
+          className="rounded-xl border p-8 mb-6 flex flex-col items-center justify-center"
+          style={{ background: "#c4a882", borderColor: "transparent", minHeight: 200 }}
+        >
+          <div className="relative w-64 h-48 flex items-center justify-center">
+            {/* Силуэт куртки (упрощённая схема) */}
+            <div className="absolute inset-0 rounded-xl opacity-20"
+              style={{ border: "2px dashed #5c2e0e" }} />
+            {/* Зона логотипа — левая грудь */}
+            <div className="absolute top-6 left-10 flex flex-col items-center gap-2">
+              <Image
+                src="/logo/logo-transparent.png"
+                alt="Логотип на форме"
+                width={100}
+                height={36}
+                className="object-contain"
+                style={{ filter: "brightness(0) sepia(1) saturate(2) hue-rotate(330deg) brightness(0.45)" }}
+              />
+              <div className="border border-dashed rounded px-1"
+                style={{ borderColor: "#5c2e0e50" }}>
+                <p className="text-xs" style={{ color: "#5c2e0e80" }}>← Левая грудь</p>
+              </div>
+            </div>
+          </div>
+          <p className="mt-4 text-sm" style={{ color: "rgba(92,46,14,0.7)" }}>
+            Схема размещения логотипа (превью)
+          </p>
+        </div>
+
+        {/* Таблица размеров */}
+        <div
+          className="overflow-hidden rounded-xl border"
+          style={{ borderColor: "var(--bb-border)" }}
+        >
+          <table className="w-full text-sm">
+            <thead>
+              <tr style={{ background: "var(--bb-sidebar-bg)" }}>
+                {["Размер одежды", "Длина логотипа", "Высота логотипа", "Расположение"].map(h => (
+                  <th
+                    key={h}
+                    className="text-left px-5 py-3 font-medium"
+                    style={{ color: "var(--bb-text-muted)" }}
+                  >
+                    {h}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                ["До 46 р. включительно", "70 мм", "25,5 мм", "Левая сторона груди"],
+                ["От 48 р.", "90 мм", "32,8 мм", "Левая сторона груди"],
+              ].map(([size, w, h, pos]) => (
+                <tr
+                  key={size}
+                  className="border-t"
+                  style={{ borderColor: "var(--bb-border)" }}
+                >
+                  <td className="px-5 py-3" style={{ color: "var(--bb-text)" }}>{size}</td>
+                  <td className="px-5 py-3 font-mono text-xs" style={{ color: "var(--bb-text)" }}>{w}</td>
+                  <td className="px-5 py-3 font-mono text-xs" style={{ color: "var(--bb-text)" }}>{h}</td>
+                  <td className="px-5 py-3" style={{ color: "var(--bb-text-muted)" }}>{pos}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </Section>
+
+      {/* Правила */}
+      <Section title="Правила использования">
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          {[
+            { ok: true,  text: "Носить комплект в полном составе" },
+            { ok: true,  text: "Поддерживать чистоту и опрятность формы" },
+            { ok: true,  text: "Логотип — только тёмно-коричневый на бежевом" },
+            { ok: false, text: "Носить форму без логотипа" },
+            { ok: false, text: "Изменять цвет или материал формы" },
+            { ok: false, text: "Добавлять сторонние нашивки и знаки" },
+          ].map(item => (
+            <div
+              key={item.text}
+              className="flex items-start gap-3 p-4 rounded-lg border"
+              style={{
+                borderColor: item.ok ? "#a7f3d0" : "#fecaca",
+                background: item.ok ? "#f0fdf4" : "#fff5f5",
+              }}
+            >
+              <span style={{ color: item.ok ? "#16a34a" : "#ef4444" }}>
+                {item.ok ? "✓" : "✕"}
+              </span>
+              <p className="text-sm" style={{ color: item.ok ? "#14532d" : "#7f1d1d" }}>
+                {item.text}
+              </p>
+            </div>
+          ))}
+        </div>
+      </Section>
+
+    </div>
+  );
+}

apps/web/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function RootPage() {
+  redirect("/foundation/logo");
+}

apps/web/components/layout/Sidebar.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+type NavItem = {
+  label: string;
+  href: string;
+  soon?: boolean;
+};
+
+type NavSection = {
+  title: string;
+  items: NavItem[];
+};
+
+const NAV: NavSection[] = [
+  {
+    title: "Фундамент",
+    items: [
+      { label: "Логотип", href: "/foundation/logo" },
+      { label: "Цвета", href: "/foundation/colors" },
+      { label: "Типографика", href: "/foundation/typography" },
+      { label: "Иконография", href: "/foundation/icons", soon: true },
+    ],
+  },
+  {
+    title: "Компоненты",
+    items: [
+      { label: "Кнопки", href: "/components/buttons", soon: true },
+      { label: "Форм-контролы", href: "/components/forms", soon: true },
+      { label: "Карточки", href: "/components/cards", soon: true },
+      { label: "Бейджи и теги", href: "/components/badges", soon: true },
+      { label: "Алерты", href: "/components/alerts", soon: true },
+      { label: "Модальные окна", href: "/components/modals", soon: true },
+      { label: "Таблицы", href: "/components/tables", soon: true },
+      { label: "Навигация", href: "/components/navigation", soon: true },
+    ],
+  },
+  {
+    title: "Блоки",
+    items: [
+      { label: "Hero", href: "/blocks/hero", soon: true },
+      { label: "CEO-текст", href: "/blocks/ceo", soon: true },
+      { label: "Наши врачи", href: "/blocks/doctors", soon: true },
+      { label: "Отзывы", href: "/blocks/reviews", soon: true },
+      { label: "Новости", href: "/blocks/news", soon: true },
+      { label: "Формы контакта", href: "/blocks/contact-forms", soon: true },
+      { label: "Контакт", href: "/blocks/contact", soon: true },
+      { label: "Услуги", href: "/blocks/services", soon: true },
+    ],
+  },
+  {
+    title: "Страницы",
+    items: [
+      { label: "Главная", href: "/pages/home", soon: true },
+      { label: "Заболевание", href: "/pages/disease", soon: true },
+      { label: "Все врачи", href: "/pages/doctors", soon: true },
+      { label: "Врач", href: "/pages/doctor", soon: true },
+      { label: "Цены", href: "/pages/prices", soon: true },
+      { label: "Контакты", href: "/pages/contacts", soon: true },
+    ],
+  },
+  {
+    title: "Оффлайн элементы",
+    items: [
+      { label: "Форма сотрудников", href: "/offline/uniform" },
+      { label: "Бейджи", href: "/offline/badges" },
+      { label: "Навигация", href: "/offline/navigation" },
+      { label: "Транспорт", href: "/offline/transport" },
+      { label: "Печать", href: "/offline/print" },
+    ],
+  },
+  {
+    title: "Эксперименты",
+    items: [
+      { label: "Библиотека", href: "/experiments", soon: true },
+    ],
+  },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <aside
+      className="w-64 shrink-0 h-screen overflow-y-auto border-r flex flex-col"
+      style={{
+        background: "var(--bb-sidebar-bg)",
+        borderColor: "var(--bb-sidebar-border)",
+      }}
+    >
+      {/* Логотип брендбука */}
+      <div
+        className="px-5 py-4 border-b"
+        style={{ borderColor: "var(--bb-sidebar-border)" }}
+      >
+        <p
+          className="text-xs font-semibold uppercase tracking-widest mb-0.5"
+          style={{ color: "var(--brand-053m)" }}
+        >
+          Брендбук
+        </p>
+        <p
+          className="text-xs leading-tight"
+          style={{ color: "var(--bb-sidebar-text-muted)" }}
+        >
+          Клиника ухо, горло, нос
+          <br />
+          им. проф. Е.Н.Оленевой
+        </p>
+      </div>
+
+      {/* Навигация */}
+      <nav className="flex-1 px-3 py-4 space-y-5">
+        {NAV.map((section) => (
+          <div key={section.title}>
+            <p
+              className="px-2 mb-1 text-[10px] font-semibold uppercase tracking-widest"
+              style={{ color: "var(--bb-sidebar-section)" }}
+            >
+              {section.title}
+            </p>
+            <ul className="space-y-0.5">
+              {section.items.map((item) => {
+                const isActive = pathname === item.href;
+                return (
+                  <li key={item.href}>
+                    <Link
+                      href={item.soon ? "#" : item.href}
+                      className="flex items-center justify-between px-2 py-1.5 rounded-md text-sm transition-colors"
+                      style={{
+                        color: isActive
+                          ? "var(--brand-073m)"
+                          : item.soon
+                          ? "var(--bb-sidebar-text-muted)"
+                          : "var(--bb-sidebar-text)",
+                        background: isActive
+                          ? "var(--bb-sidebar-active-bg)"
+                          : "transparent",
+                        fontWeight: isActive ? 500 : 400,
+                        cursor: item.soon ? "default" : "pointer",
+                      }}
+                    >
+                      {item.label}
+                      {item.soon && (
+                        <span
+                          className="text-[10px] px-1.5 py-0.5 rounded"
+                          style={{
+                            background: "#f3f4f6",
+                            color: "var(--bb-sidebar-section)",
+                          }}
+                        >
+                          скоро
+                        </span>
+                      )}
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        ))}
+      </nav>
+
+      {/* Версия */}
+      <div
+        className="px-5 py-3 border-t text-xs"
+        style={{
+          borderColor: "var(--bb-sidebar-border)",
+          color: "var(--bb-sidebar-text-muted)",
+        }}
+      >
+        Sprint 2 · v0.2.0
+      </div>
+    </aside>
+  );
+}

apps/web/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

apps/web/next.config.ts

@@ -0,0 +1,10 @@
+import type { NextConfig } from "next";
+import path from "path";
+
+const nextConfig: NextConfig = {
+  turbopack: {
+    root: path.resolve(__dirname, "../.."),
+  },
+};
+
+export default nextConfig;

apps/web/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "next": "16.2.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.1",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

apps/web/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+ignoredBuiltDependencies:
+  - sharp
+  - unrs-resolver

apps/web/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

apps/web/public/file.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

apps/web/public/globe.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

apps/web/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

apps/web/public/vercel.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

apps/web/public/window.svg

@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

apps/web/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

docker-compose.yml

@@ -0,0 +1,16 @@
+services:
+  postgres:
+    image: postgres:16-alpine
+    container_name: brandbook_postgres
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: brandbook
+      POSTGRES_PASSWORD: brandbook
+      POSTGRES_DB: brandbook
+    ports:
+      - "5433:5432"
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+
+volumes:
+  postgres_data:

docs/SPRINTS.md

@@ -14,60 +14,86 @@
 
 ---
 
-## Sprint 1 — Инициализация проекта + страница «Логотип»
+## Sprint 1 — Инициализация проекта + страница «Логотип» ✅ ЗАВЕРШЁН
 
 **Цель:** Рабочее окружение, monorepo, базовая архитектура, первая живая страница брендбука — «Логотип».
 
 ### Задачи — инфраструктура
-- [ ] FE: Инициализация Next.js (App Router) в `apps/web`
-- [ ] BE: Инициализация NestJS в `apps/api`
-- [ ] DB: Подключение PostgreSQL + Prisma, базовая схема
-- [ ] Настройка Docker Compose для локальной разработки
-- [ ] Настройка monorepo (pnpm workspaces)
-- [ ] Создание `.env.example`
-- [ ] Git: создание веток `develop` и `sprint/1`
-- [ ] FE: Базовая структура брендбука (layout, боковая навигация по разделам)
-- [ ] FE: Подключение шрифта Fira Sans (веб) + подготовка к DINPro (бренд)
+- [x] FE: Инициализация Next.js 16 (App Router, Tailwind 4, TypeScript) в `apps/web`
+- [x] BE: Инициализация NestJS 11 в `apps/api`
+- [x] DB: PostgreSQL 16 + Prisma 7, схема User + ExperimentalComponent
+- [x] Настройка Docker Compose (порт 5433 — 5432 занят на хосте)
+- [x] Настройка monorepo (pnpm workspaces)
+- [x] Создание `.env.example`
+- [x] Git: создание веток `develop` и `sprint/1`, подключён remote git.pirogov.ai
+- [x] FE: Layout с боковой навигацией (все разделы, статус «скоро»)
+- [x] FE: Fira Sans подключён через next/font/google, CSS-токены бренда в globals.css
 
-### Задачи — страница «Логотип» (первый контент брендбука)
-- [ ] Design: Экспорт PNG логотипа из PDF для использования как placeholder
-- [ ] FE: Страница `/foundation/logo` в брендбуке
-- [ ] FE: Отображение обеих версий логотипа: «Общий» и «Основной»
-- [ ] FE: Секция «Иерархия»: описание применения каждой версии
-- [ ] FE: Секция «Цветовые варианты»: основной / инвертированный / на форме
-- [ ] FE: Секция «Охранная зона» с визуализацией отступов
-- [ ] FE: Секция «Минимальные размеры» (таблица: до 46 р. и от 48 р.)
-- [ ] FE: Секция «Недопустимые варианты» — правило не менять и не сочетать с текстом
-- [ ] FE: Placeholder-блок «Скачать вектор» (кнопка неактивна до получения SVG)
+### Задачи — страница «Логотип»
+- [x] Design: PNG логотипа извлечён из PDF программно (PyMuPDF + Pillow)
+- [x] FE: Прозрачная версия логотипа (удалён белый фон через numpy)
+- [x] FE: Страница `/foundation/logo`
+- [x] FE: Иерархия версий (Основной / Общий) с реальным изображением из PDF
+- [x] FE: Цветовые варианты: светлый / инвертированный (CSS filter) / на форме
+- [x] FE: Охранная зона с визуализацией отступов
+- [x] FE: Таблица минимальных размеров (до 46 р. и от 48 р.)
+- [x] FE: 6 правил недопустимого использования
+- [x] FE: Placeholder «Скачать вектор» (кнопка неактивна)
 
-**Результат спринта:** Запускается `pnpm dev`, открывается брендбук с навигацией. Раздел «Логотип» полностью заполнен контентом и правилами.
+### Фактические результаты
+- Брендбук запущен локально на `http://localhost:3001`
+- Название клиники исправлено: «Клиника ухо, горло, нос им. проф. Е.Н.Оленевой»
+- Инвертированный логотип корректно отображается (белый на тёмном фоне)
+
+### Технические решения Sprint 1
+- PostgreSQL запущен на порту **5433** (5432 занят на хосте)
+- Логотип хранится как PNG с прозрачным фоном (`public/logo/logo-transparent.png`)
+- Инверсия логотипа: CSS `filter: brightness(0) invert(1)` на прозрачном PNG
+- Next.js запускается на порту **3001** (3000 занят на хосте)
 
 ---
 
-## Sprint 2 — Цвета, типографика и оффлайн элементы (Brand Foundation)
+## Sprint 2 — Цвета, типографика и оффлайн элементы (Brand Foundation) ✅ ЗАВЕРШЁН
 
 **Цель:** Секция «Фундамент бренда» — цвета, оба шрифта, а также первый оффлайн-раздел.
 
 ### Задачи — цвета
-- [ ] Design: Зафиксировать HEX-эквиваленты всех цветов бренда (053M, 073M, 066M, 050M, 081M, 080M)
-- [ ] FE: Создать CSS-переменные / дизайн-токены для всей цветовой палитры
-- [ ] FE: Страница «Цвета» — палитра с кодами Oracal/Pantone, HEX, RGB, HSL, копирование в клик
-- [ ] FE: Проверка контрастности пар цветов (WCAG AA/AAA)
-- [ ] FE: Экспорт токенов в JSON (Figma-compatible)
+- [x] Design: Зафиксировать HEX-эквиваленты всех цветов бренда (053M, 073M, 066M, 050M, 081M, 080M)
+- [x] FE: Создать CSS-переменные / дизайн-токены для всей цветовой палитры
+- [x] FE: Страница «Цвета» — палитра с кодами Oracal/Pantone, HEX, RGB, HSL, копирование в клик
+- [x] FE: Проверка контрастности пар цветов (WCAG AA/AAA)
+- [x] FE: Экспорт токенов в JSON (Figma-compatible)
 
 ### Задачи — типографика
-- [ ] FE: Страница «Типографика» — раздел DINPro (бренд/оффлайн) + раздел Fira Sans (веб)
-- [ ] FE: Шкала размеров для обоих шрифтов: h1–h6, body, caption, label, overline
-- [ ] FE: Чёткое указание: где DINPro, где Fira Sans
-- [ ] FE: Живые примеры текста обоими шрифтами
+- [x] FE: Страница «Типографика» — раздел DINPro (бренд/оффлайн) + раздел Fira Sans (веб)
+- [x] FE: Шкала размеров для обоих шрифтов: h1–h6, body, caption, label, overline
+- [x] FE: Чёткое указание: где DINPro, где Fira Sans
+- [x] FE: Живые примеры текста обоими шрифтами
 
 ### Задачи — оффлайн элементы (справочный раздел)
-- [ ] FE: Раздел «Оффлайн элементы» в навигации брендбука
-- [ ] FE: Страница «Форма сотрудников» — фото, правила размещения логотипа, таблица размеров
-- [ ] FE: Страница «Бейджи» — размеры 70×30 мм, варианты, состав текста
-- [ ] FE: Страница «Внутренняя навигация» — шаблоны табличек, материалы, цвета Oracal
-- [ ] FE: Страница «Брендирование транспорта» — макет трамвая, цветовая схема
-- [ ] FE: Страница «Печатные материалы» — листовки, визитки, Telegram-бот
+- [x] FE: Раздел «Оффлайн элементы» в навигации брендбука
+- [x] FE: Страница «Форма сотрудников» — схема размещения логотипа, таблица размеров
+- [x] FE: Страница «Бейджи» — размеры 70×30 мм, варианты (светлый/тёмный), состав текста
+- [x] FE: Страница «Внутренняя навигация» — шаблоны табличек, материалы, цвета Oracal
+- [x] FE: Страница «Брендирование транспорта» — макет трамвая, цветовая схема
+- [x] FE: Страница «Печатные материалы» — листовки, визитки, Telegram-бот
+
+### Фактические результаты
+- Страница `/foundation/colors` — 7 цветов с HEX/RGB/HSL/CSS-var и копированием, WCAG-контраст 7 пар, экспорт JSON
+- Страница `/foundation/typography` — DINPro (оффлайн) + Fira Sans (веб), таблица применения, полные шкалы, живой пример
+- Страница `/offline/uniform` — схема формы, таблица размеров логотипа, правила использования
+- Страница `/offline/badges` — макеты бейджей 70×30 мм (светлый/тёмный), состав текста, применение
+- Страница `/offline/navigation` — 4 шаблона табличек, технические требования, цвета Oracal
+- Страница `/offline/transport` — CSS-макет трамвая с трёхполосной схемой, таблица зон
+- Страница `/offline/print` — макеты визитки (лицо/оборот) и листовки А5, Telegram-бот
+- Sidebar: убраны «скоро» для Цветов, Типографики и всех 5 страниц Оффлайн
+- Версия обновлена до **Sprint 2 · v0.2.0**
+
+### Технические решения Sprint 2
+- Страница «Цвета» — `"use client"` для clipboard API и экспорта JSON
+- WCAG relative luminance вычисляется на клиенте, без зависимостей
+- DINPro отображается с фоллбэком Arial (лицензионный шрифт)
+- Макеты (бейджи, трамвай, визитки) — чистый CSS/Tailwind без внешних зависимостей
 
 **Результат спринта:** Разделы «Цвета», «Типографика» и «Оффлайн элементы» полностью готовы.
 

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "oclinica-brandbook",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "pnpm --parallel -r dev",
+    "build": "pnpm --parallel -r build",
+    "lint": "pnpm --parallel -r lint"
+  },
+  "engines": {
+    "node": ">=20",
+    "pnpm": ">=9"
+  }
+}

pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - 'apps/*'
+  - 'packages/*'