---
version: 1.1
name: Language You+ Design System
description: Премиальная дизайн-система для языковой платформы «Language You+» с концепцией «сайт в карточке» поверх плавного сиренево-фиолетового градиента, скругленными Bento-плитками и 100% поддержкой кириллицы.
tags: ["education", "language-learning", "bento-grid", "pastel-violet", "floating-card", "aura-premium"]
colors:
  primary: "#6320ee"
  on-primary: "#ffffff"
  background: "#ded3fc"
  on-background: "#141414"
  surface-lowest: "#ffffff"
  surface-low: "#f3f2f1"
  outline: "rgba(20, 20, 20, 0.05)"
  primary-hover: "#5811ec"
  accent: "#fbe452"
  accent-hover: "#fbe135"
  text-main: "#141414"
  text-muted: "#5f5f5f"
  background-gradient-start: "#a78bfa"
  background-gradient-end: "#7c3aed"
  surface-card: "#ffffff"
  surface-gray: "#f3f2f1"
  chip-chinese: "#fef3c7"
  chip-spanish: "#dcfce7"
  chip-english: "#f3e8ff"
  chip-georgian: "#ffedd5"
  chip-german: "#ecfccb"
  chip-japanese: "#e0f2fe"
  chip-turkish: "#fee2e2"
  chip-finnish: "#e0f2fe"
  chip-french: "#dcfce7"
typography:
  display-hero:
    fontFamily: "Onest"
    fontSize: "56px"
    fontWeight: "800"
    lineHeight: "1.1"
    letterSpacing: "-0.04em"
  headline-bento:
    fontFamily: "Onest"
    fontSize: "20px"
    fontWeight: "700"
    lineHeight: "1.2"
    letterSpacing: "-0.02em"
  body-main:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "1.6"
  label-capsule:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: "600"
    lineHeight: "1.2"
rounded:
  card: "40px"
  bento: "28px"
  capsule: "9999px"
  image-cutout: "24px"
spacing:
  base: "8px"
  card-padding: "40px"
  bento-gap: "16px"
  chip-gap: "10px"
components:
  floating-website-container:
    rounded: "40px"
    shadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
    margin: "40px 16px"
    backgroundColor: "#ffffff"
  language-chip:
    rounded: "9999px"
    padding: "8px 16px"
    fontSize: "14px"
    fontWeight: "600"
    display: "inline-flex"
    alignItems: "center"
    gap: "8px"
  bento-tile:
    rounded: "28px"
    padding: "24px"
    transition: "transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease"
    hover: "transform: scale(1.02); box-shadow: 0 10px 25px rgba(0,0,0,0.04)"
---

## Philosophy & Vibe

«Language You+» — это манифест современного образовательного дизайна. Он полностью преодолевает серые, скучные и шаблонные интерфейсы благодаря концепции «Сайт в карточке» (floating website container). 

Визуальный вайб — ультра-премиальный, чистый, тактильный и дружелюбный. Сочетание глубокого аметистового фиолетового цвета с ярким солнечным пастельно-желтым создает высокий контраст и динамику, в то время как мягкие пастельные тона чипсов балансируют палитру, делая ее доступной и легкой для восприятия. 

Никаких агрессивных черных обводок или теней — только деликатные границы `border-black/5` и воздушные размытые тени, создающие парящую многослойную эстетику.

## Source Replication Doctrine

Источник — абсолютный закон. При репликации «Language You+» агент воспроизводит:
1. **Контейнерную структуру:** Вся страница лежит внутри единой скругленной белой карточки (`rounded-[40px]`), парящей на органическом волнообразном градиентном фоне.
2. **Типографику:** Мощный заголовок слева с отрицательным трекингом (`letter-spacing: -0.04em`), выравнивание чипсов под ним, и текстовый блок описания справа.
3. **Элементы Bento-сетки:** 
   - Левая вертикальная плитка с мамой и сыном и перекрывающим белым блоком «GROUP CLASSES FOR YOUR FAMILY» с закруглением `rounded-tr-3xl`.
   - Центр-верх: солнечная пастельно-желтая плитка с белой круглой стрелкой ↗ и uppercase-заголовком.
   - Центр-низ: фиолетовая плитка с набором пастельных чипсов без рамки.
   - Правая-верх: вертикальная плитка с девушкой и ноутбуком и полупрозрачным бейджем «Anywhere».
   - Правая-низ: составная плитка, где белый блок «LESSONS FOR KIDS» имеет плавный фигурный cutout, а справа расположено фото детей.
4. **Анти-Эмодзи правила:** Категорический запрет на стандартные emoji. Флаги стран верстаются на чистом SVG в виде минималистичных круглых векторов.

## Color Guidance

Цветовая схема построена на глубоком фиолетовом и пастельно-желтом акцентах, создающих контрастный баланс. Обязательно учитывается психология цвета (color psychology):
- **Primary** (`#6320ee`) — благородный фиолетовый, ассоциирующийся с экспертностью, глубиной знаний и премиальным качеством. Используется для главного CTA и навигации.
- **Accent** (`#fbe452`) — пастельный желтый, олицетворяющий радость познания, оптимизм и легкость усвоения информации. Привлекает внимание к плитке философии.
- **Surface-контейнеры** формируют парящие уровни. Белая карточка лежит поверх сиреневого градиента, а внутри нее легкий серый фон плиток bento создает аккуратную вложенность.

## Typography Hierarchy

Для обеспечения безупречной поддержки русского и английского языков выбрана следующая пара шрифтов из Google Fonts с полной поддержкой кириллицы:
- **Заголовки (Display / Bento Titles):** `Onest` (имеет великолепную геометрическую плотность, отличную кириллицу и прекрасно выглядит в ultra-bold начертаниях с отрицательным трекингом `tracking-tight` или `tracking-tighter`).
- **Основной текст (Body / Labels):** `Inter` (мировой стандарт читаемости интерфейсов с полной поддержкой кириллицы).
- Подключение осуществляется в одной ссылке:
  `https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Onest:wght@700;800&display=swap`

## Layout & Grid

Вся сетка Bento Grid строится на CSS Grid / Flexbox с зазором `gap-4` (16px) и отступами карточки `p-6 sm:p-10`.
Каждая Bento-плитка имеет скругление `rounded-[28px]`, `overflow-hidden` и изысканную hover-анимацию с микро-масштабированием (`hover:scale-[1.02] hover:shadow-lg transition-all duration-300`).

## Composition Lock

Сохранение композиционного баланса является жестким условием:
- Главный заголовок слева и текстовый блок справа разделяют верхнюю часть секции в пропорциях 3:2.
- Bento-сетка строится по фиксированной схеме: Плитка 1 (высокая слева), Плитка 2 и Плитка 3 (по центру одна над другой), Плитка 4 (высокая справа, делит высоту с Плиткой 5), Плитка 5 (широкая снизу).
- Изменение соотношений сторон, удаление отступов или перераспределение блоков без запроса пользователя недопустимы.

## Component Specs

Все элементы управления спроектированы как дискретные интерактивные капсулы:
- **Кнопки Primary:** Капсульное скругление `rounded-full`, заливка `#6320ee` и белый текст.
- **Языковые чипсы:** Интерактивные теги с мягким пастельным фоном и круглыми SVG-иконками флагов стран. При наведении приподнимаются на `translate-y-[-2px]`.
- **Аккордеоны FAQ:** Плавное раскрытие высоты (`max-h-0` -> `max-h-[500px]`) без рывков с помощью переключателей на чистом JS.

## Asset Generation Rules

Все графические элементы генерируются строго по регламенту Aura:
- - Генерация всех новых реалистичных lifestyle-изображений для bento-сетки и hero-блоков осуществляется исключительно через инструмент `user-mcp-kv/gpt-image-2`. Использование случайных картинок из интернета или локальных заглушек заблокировано.
- Для получения прозрачных объектов или персонажей без фонового слоя обязательно применяется инструмент `user-mcp-kv/recraft_remove_background`, аккуратно отделяющий фигуру от фона.
- Это жесткое правило является обязательным техническим блокиратором сборки проекта. Сборка страницы с временными заглушками запрещена.

## Do's and Don'ts

### Do's:
- Верстать языковые чипсы только с кастомными круглыми SVG-векторами флагов стран.
- Использовать только шрифтовую пару Onest + Inter для 100% совместимости с кириллицей.
- Сохранять концепцию «сайт в карточке» с мягкой тенью поверх волнообразного градиентного фона.
- Маскировать стык Плитки 5 (Lessons for Kids) плавными закругленными cutout (вырезами).

### Don'ts:
- Категорически запрещено использовать стандартные эмодзи в интерфейсе или декорациях.
- Запрещено добавлять жесткие черные рамки (borders) или резкие черные тени, характерные для брутализма.
- Запрещено использовать тексты-заглушки типа "рыба-текст" — вся текстовая фактура должна быть реальной и осмысленной на русском или английском.