Dark tech: контрастный стиль для SaaS и цифровых продуктов

Dark tech использует тёмную поверхность как рабочую среду, а не как декоративный фон. Светлый текст, сдержанный неоновый акцент и чёткие границы помогают показать интерфейс, метрики и сценарий продукта. Направление добавляет технологичности, когда контент действительно связан с цифровым инструментом; тьма сама по себе не делает предложение инновационным.

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

Это хороший выбор для SaaS, платформ разработчиков, аналитических продуктов, кибербезопасности и launch-страниц, где скриншот интерфейса — главный носитель смысла. Он сочетается с SaaS-веб-приложением и лендингом. Для длинных юридических текстов, каталога услуг с большим количеством чтения или аудитории, ожидающей консервативности, светлый корпоративный минимализм обычно безопаснее.

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

База — почти чёрный с холодным синим подтоном, поверхности отличаются друг от друга на один спокойный шаг светлоты. Яркий cyan маркирует действие, фиолетовый разделяет второстепенные функции. Space Grotesk и Inter доступны в Google Fonts: первый отвечает за характер заголовков, второй — за данные и текст. Контраст основного текста с базой рассчитан выше AA; серые подписи нельзя опускать до декоративной тусклости. Свечение ограничивается фокусом и редкими акцентами, движения короткие.

Шаблон design.md

---
name: Dark Tech
description: Контрастная тёмная система для продуктовых интерфейсов и технологичных SaaS.
colors: { primary: "#167A9D", primary-strong: "#0E5C79", secondary: "#7463C8", accent: "#B7F36B", text-primary: "#F4F7FB", text-secondary: "#B5C0D2", text-on-dark: "#FFFFFF", background: "#0B1020", surface: "#141B2E", surface-muted: "#1C2640", border: "#2C3855", success: "#5CCB8B", warning: "#F6C85F", error: "#FF7188", focus-ring: "#82E6FF" }
typography:
  h1: { fontFamily: "Space Grotesk, sans-serif", fontSize: "clamp(2rem, 4vw, 3.25rem)", fontWeight: 700, lineHeight: 1.1, letterSpacing: "-0.02em" }
  h2: { fontFamily: "Space Grotesk, sans-serif", fontSize: "clamp(1.625rem, 3vw, 2.25rem)", fontWeight: 700, lineHeight: 1.15, letterSpacing: "-0.01em" }
  h3: { fontFamily: "Space Grotesk, sans-serif", fontSize: "clamp(1.25rem, 2vw, 1.5rem)", fontWeight: 600, lineHeight: 1.2, letterSpacing: "-0.01em" }
  body: { fontFamily: "Inter, sans-serif", fontSize: "1rem", fontWeight: 400, lineHeight: 1.6, letterSpacing: "0" }
  small: { fontFamily: "Inter, sans-serif", fontSize: "0.875rem", fontWeight: 400, lineHeight: 1.5, letterSpacing: "0" }
  label: { fontFamily: "Inter, sans-serif", fontSize: "0.875rem", fontWeight: 600, 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 1px 2px rgba(0,0,0,.25)", md: "0 8px 24px rgba(0,0,0,.35)" }
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.background}", paddingYMobile: "{spacing.section-mobile}", paddingYDesktop: "{spacing.section-desktop}" }
---
# Обзор / Бренд и стиль
- Делайте интерфейс и данные главным изображением продукта.
- Используйте свечение только как состояние или редкий акцент.
# Цвета
- Text-primary на background и surface проходит WCAG AA.
- Не применяйте приглушённый текст для критичных данных.
# Типографика
- Подключите Space Grotesk и Inter из Google Fonts.
- Табличные данные не должны быть мельче body без причины.
# Лейаут и отступы
- Сохраняйте видимые границы между тёмными поверхностями.
- На mobile выводите предложение и CTA до демо-скриншота.
# Компоненты
- Focus-ring остаётся заметным на всех поверхностях.
- Яркая primary-кнопка одна на визуальную группу.
# Чего избегать
- Не используйте pure black, бесконечные градиенты и мерцание.
- Не жертвуйте текстом ради «кибер»-настроения.

Тема daisyUI

Быстрая встроенная альтернатива — night; тема ниже оставляет более ясные поверхности и cyan-действие.

@plugin "daisyui/theme" { name: "dark-tech"; default: false; prefersdark: true; color-scheme: dark;
  --color-base-100: oklch(.16 .025 265); --color-base-200: oklch(.2 .03 265); --color-base-300: oklch(.25 .04 265); --color-base-content: oklch(.97 .01 260); --color-primary: oklch(.52 .11 220); --color-primary-content: oklch(1 0 0); --color-secondary: oklch(.55 .12 290); --color-secondary-content: oklch(1 0 0); --color-accent: oklch(.9 .14 120); --color-accent-content: oklch(.16 .025 265); --color-neutral: oklch(.2 .03 265); --color-neutral-content: oklch(.97 .01 260); --color-info: oklch(.62 .12 240); --color-info-content: oklch(.16 .025 265); --color-success: oklch(.65 .12 155); --color-success-content: oklch(.16 .025 265); --color-warning: oklch(.84 .13 85); --color-warning-content: oklch(.16 .025 265); --color-error: oklch(.68 .16 15); --color-error-content: oklch(.16 .025 265); --radius-selector: .5rem; --radius-field: .5rem; --radius-box: 1rem; --size-selector: .25rem; --size-field: .25rem; --border: 1px; --depth: 0; --noise: 0;
}

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

Ошибка — делать тёмным каждый проект, включая текстовые материалы. Ошибка — снижать контраст подписей, границ и неактивных полей до нечитабельного уровня. Ошибка — использовать неон для каждого элемента и лишать primary-кнопку смысла.

Что дальше

Проверьте, что hero показывает сценарий, а не абстрактное свечение. Для контентной части продукта используйте спокойнее редакционный стиль.