Soft / пастельный стиль: спокойный интерфейс для сервисов и обучения

Soft-стиль строит спокойствие через светлые оттеночные поверхности, округлую форму и дружелюбную типографику. Это не «сделать всё бледным»: ключевые действия, основной текст и состояния должны оставаться контрастными. Направление помогает убрать тревогу перед сложным первым шагом и сделать сервис человечнее, не пряча правила, цену и навигацию.

Когда подходит

Стиль уместен для образования, заботы о здоровье и благополучии, сервисов для семей, гостеприимства, HR и простых цифровых инструментов. Он хорошо работает на главной странице, в объясняющих сценариях и onboarding. Для кибербезопасности, жёсткого B2B-тендера или кампании с конфронтационным тоном мягкость может ослабить обещание.

Визуальные признаки

Молочная база соединяется с лавандовыми и мятными поверхностями; глубокий сливовый остаётся цветом текста и действия. Nunito Sans и Fraunces доступны в Google Fonts: первый сохраняет ясность интерфейса, второй добавляет редкий тёплый акцент заголовкам. Радиусы заметны, но одинаковы; тени мягкие и неглубокие. Иллюстрации показывают сценарий помощи, а не набор случайных абстрактных пятен. Контраст text-primary с фоном и primary-content с кнопкой соответствует AA.

Шаблон design.md

---
name: Soft Pastel
description: Тёплая доступная система для сервисов, обучения и сценариев заботы.
colors: { primary: "#5A3D72", primary-strong: "#402B52", secondary: "#527D74", accent: "#E69A8D", text-primary: "#2F2634", text-secondary: "#655C69", text-on-dark: "#FFFFFF", background: "#FFFDFB", surface: "#FFFFFF", surface-muted: "#F2ECF5", border: "#DDD4E1", success: "#37735C", warning: "#9A651B", error: "#A8364A", focus-ring: "#8663A8" }
typography:
  h1: { fontFamily: "Fraunces, serif", fontSize: "clamp(2rem, 4vw, 3.25rem)", fontWeight: 700, lineHeight: 1.1, letterSpacing: "-0.02em" }
  h2: { fontFamily: "Fraunces, serif", fontSize: "clamp(1.625rem, 3vw, 2.25rem)", fontWeight: 700, lineHeight: 1.15, letterSpacing: "-0.01em" }
  h3: { fontFamily: "Nunito Sans, sans-serif", fontSize: "clamp(1.25rem, 2vw, 1.5rem)", fontWeight: 700, lineHeight: 1.2, letterSpacing: "-0.01em" }
  body: { fontFamily: "Nunito Sans, sans-serif", fontSize: "1rem", fontWeight: 400, lineHeight: 1.6, letterSpacing: "0" }
  small: { fontFamily: "Nunito Sans, sans-serif", fontSize: "0.875rem", fontWeight: 400, lineHeight: 1.5, letterSpacing: "0" }
  label: { fontFamily: "Nunito Sans, sans-serif", fontSize: "0.875rem", fontWeight: 700, lineHeight: 1.3, letterSpacing: "0.02em" }
spacing: { xxs: "0.25rem", xs: "0.5rem", sm: "0.75rem", md: "1rem", lg: "1.5rem", xl: "2rem", xxl: "3rem", section-mobile: "3.5rem", section-desktop: "5rem" }
layout: { container-max: "72rem", content-max: "48rem", grid-gap: "1.5rem", radius-sm: "0.5rem", radius-md: "0.75rem", radius-lg: "1rem", radius-xl: "1.5rem" }
elevation: { none: "none", sm: "0 2px 6px rgba(67,45,83,.08)", md: "0 10px 28px rgba(67,45,83,.12)" }
motion: { fast: "150ms", normal: "220ms", slow: "320ms", easing-standard: "cubic-bezier(.2,.8,.2,1)" }
components:
  button-primary: { backgroundColor: "{colors.primary}", textColor: "{colors.text-on-dark}", borderColor: "{colors.primary}", borderRadius: "{layout.radius-md}", padding: "{spacing.sm} {spacing.lg}" }
  button-primary-hover: { backgroundColor: "{colors.primary-strong}", borderColor: "{colors.primary-strong}", shadow: "{elevation.md}" }
  button-secondary: { backgroundColor: "{colors.secondary}", textColor: "{colors.text-on-dark}", borderColor: "{colors.secondary}", borderRadius: "{layout.radius-md}", padding: "{spacing.sm} {spacing.lg}" }
  button-ghost: { backgroundColor: "transparent", textColor: "{colors.primary}", borderColor: "{colors.primary}", borderRadius: "{layout.radius-md}", padding: "{spacing.sm} {spacing.lg}" }
  card-default: { backgroundColor: "{colors.surface}", textColor: "{colors.text-primary}", borderColor: "{colors.border}", borderRadius: "{layout.radius-lg}", padding: "{spacing.xl}", shadow: "{elevation.sm}" }
  input-default: { backgroundColor: "{colors.surface}", textColor: "{colors.text-primary}", borderColor: "{colors.border}", borderRadius: "{layout.radius-sm}", padding: "{spacing.sm} {spacing.md}" }
  input-focus: { borderColor: "{colors.focus-ring}", outline: "2px solid {colors.focus-ring}", outlineOffset: "1px" }
  section-default: { backgroundColor: "{colors.surface}", paddingYMobile: "{spacing.section-mobile}", paddingYDesktop: "{spacing.section-desktop}" }
---
# Обзор / Бренд и стиль
- Снижайте тревогу ясным языком и предсказуемыми шагами.
- Мягкость не заменяет условия, стоимость и действие.
# Цвета
- Пастельные оттенки — поверхности; primary остаётся контрастным действием.
- Text-primary и текст на primary проходят WCAG AA.
# Типографика
- Подключите Fraunces и Nunito Sans из Google Fonts.
- Не используйте декоративный serif для длинного текста.
# Лейаут и отступы
- Одинаковые радиусы и токенные отступы создают спокойный ритм.
- На mobile карточки и шаги идут одной колонкой.
# Компоненты
- Поля и кнопки показывают все состояния и focus-ring.
- Иллюстрация поясняет сервис, а не заслоняет CTA.
# Чего избегать
- Не делайте критичный текст бледным и не добавляйте детскую декоративность.
- Не маскируйте сложность процесса «милыми» формулировками.

Тема daisyUI

Быстрая встроенная альтернатива — cupcake; эта тема оставляет пастельные поверхности, но делает действие и текст строже.

@plugin "daisyui/theme" { name: "soft-pastel"; default: false; prefersdark: false; color-scheme: light; --color-base-100: oklch(.995 .006 30); --color-base-200: oklch(.95 .02 315); --color-base-300: oklch(.89 .035 315); --color-base-content: oklch(.24 .03 315); --color-primary: oklch(.37 .09 310); --color-primary-content: oklch(1 0 0); --color-secondary: oklch(.5 .06 175); --color-secondary-content: oklch(1 0 0); --color-accent: oklch(.73 .1 30); --color-accent-content: oklch(.24 .03 315); --color-neutral: oklch(.24 .03 315); --color-neutral-content: oklch(1 0 0); --color-info: oklch(.6 .1 245); --color-info-content: oklch(1 0 0); --color-success: oklch(.5 .09 160); --color-success-content: oklch(1 0 0); --color-warning: oklch(.58 .11 75); --color-warning-content: oklch(.24 .03 315); --color-error: oklch(.48 .14 15); --color-error-content: oklch(1 0 0); --radius-selector: .5rem; --radius-field: .5rem; --radius-box: 1rem; --size-selector: .25rem; --size-field: .25rem; --border: 1px; --depth: 0; --noise: 0; }

Типовые ошибки

Пастель не должна съедать контраст: бледные ссылки, предупреждения и placeholder-текст создают риск. Не добавляйте округлости разного размера, инфантильные иконки или несколько равнозначных CTA. И не превращайте заботу в расплывчатое обещание — пользователь всё равно должен понимать следующий шаг.

Что дальше

Проверьте hero на ясный первый шаг и соберите сценарий главной страницы. Если контент должен стать основным источником доверия, сопоставьте направление с редакционным стилем.