Bold / брутальная типографика: стиль для сильной кампании

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

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

Подход работает для кампаний, культурных проектов, независимых брендов, продуктовых запусков и promo-лендинга, где смелость — часть реального обещания. Для тендера, сложной B2B-услуги или долгого справочного текста он рискует подменить содержание позой. В таких случаях берите корпоративный минимализм.

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

Основа — чёрный текст на тёплом белом, насыщенный красный для действия и кислотный жёлтый для редкой маркировки. Archivo Black и Inter есть в Google Fonts. Крупные заголовки имеют малое число строк, карточки почти плоские, границы чёткие, иллюстрации графичные или документальные. Контраст чёрного с белым и primary-content с красным выше AA; жёлтый не используют для текста малого размера.

Шаблон design.md

---
name: Bold Brutal
description: Контрастная типографическая система для кампаний и смелых брендовых запусков.
colors: { primary: "#E62924", primary-strong: "#B91518", secondary: "#191919", accent: "#F2E94E", text-primary: "#161616", text-secondary: "#4F4F4F", text-on-dark: "#FFFFFF", background: "#FFFDF7", surface: "#FFFFFF", surface-muted: "#F0EDE5", border: "#161616", success: "#2E7D4F", warning: "#9D7100", error: "#B91518", focus-ring: "#245BFF" }
typography:
  h1: { fontFamily: "Archivo Black, sans-serif", fontSize: "clamp(2rem, 4vw, 3.25rem)", fontWeight: 700, lineHeight: 1.1, letterSpacing: "-0.02em" }
  h2: { fontFamily: "Archivo Black, sans-serif", fontSize: "clamp(1.625rem, 3vw, 2.25rem)", fontWeight: 700, lineHeight: 1.15, letterSpacing: "-0.01em" }
  h3: { fontFamily: "Inter, sans-serif", fontSize: "clamp(1.25rem, 2vw, 1.5rem)", fontWeight: 700, 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: 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", radius-md: "0", radius-lg: "0", radius-xl: "0" }
elevation: { none: "none", sm: "3px 3px 0 #161616", md: "6px 6px 0 #161616" }
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.border}", borderRadius: "{layout.radius-md}", padding: "{spacing.sm} {spacing.lg}" }
  button-primary-hover: { backgroundColor: "{colors.primary-strong}", borderColor: "{colors.border}", shadow: "{elevation.md}" }
  button-secondary: { backgroundColor: "{colors.secondary}", textColor: "{colors.text-on-dark}", borderColor: "{colors.border}", borderRadius: "{layout.radius-md}", padding: "{spacing.sm} {spacing.lg}" }
  button-ghost: { backgroundColor: "transparent", textColor: "{colors.text-primary}", borderColor: "{colors.border}", 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}" }
---
# Обзор / Бренд и стиль
- Делайте крупный текст носителем одного главного утверждения.
- Энергия достигается контрастом, а не количеством эффектов.
# Цвета
- Красный — действие; жёлтый — маркер, не мелкий текст.
- Основной текст и кнопки проходят WCAG AA.
# Типографика
- Подключите Archivo Black и Inter из Google Fonts.
- Не используйте display-шрифт для длинных абзацев.
# Лейаут и отступы
- Сохраняйте свободные поля вокруг крупных слов и одну колонку на mobile.
- Прямые углы и границы применяйте последовательно.
# Компоненты
- У элементов есть hover и заметный focus-ring.
- Одна primary-кнопка на группу действий.
# Чего избегать
- Не делайте весь текст капсом, не мигаете и не используйте жёлтый текст на белом.
- Не применяйте этот стиль для обещаний, которым нужна спокойная экспертиза.

Тема daisyUI

Быстрая встроенная альтернатива — wireframe; финальная тема сохраняет контрастный красный акцент.

@plugin "daisyui/theme" { name: "bold-brutal"; default: false; prefersdark: false; color-scheme: light; --color-base-100: oklch(.995 .006 90); --color-base-200: oklch(.95 .014 90); --color-base-300: oklch(.88 .02 90); --color-base-content: oklch(.18 0 0); --color-primary: oklch(.6 .22 30); --color-primary-content: oklch(1 0 0); --color-secondary: oklch(.18 0 0); --color-secondary-content: oklch(1 0 0); --color-accent: oklch(.91 .16 105); --color-accent-content: oklch(.18 0 0); --color-neutral: oklch(.18 0 0); --color-neutral-content: oklch(1 0 0); --color-info: oklch(.55 .2 265); --color-info-content: oklch(1 0 0); --color-success: oklch(.52 .12 150); --color-success-content: oklch(1 0 0); --color-warning: oklch(.72 .15 95); --color-warning-content: oklch(.18 0 0); --color-error: oklch(.5 .2 30); --color-error-content: oklch(1 0 0); --radius-selector: 0; --radius-field: 0; --radius-box: 0; --size-selector: .25rem; --size-field: .25rem; --border: 1px; --depth: 0; --noise: 0; }

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

Не путайте bold со сплошным шумом: если громко всё, не выделяется ничего. Не создавайте мелкий цветной текст, не жертвуйте фокусом клавиатуры и не делайте скролл анимацией ради анимации.

Что дальше

Начните с ясного hero и одного CTA. Если после кампании сайту предстоит стать постоянным источником экспертизы, заведите спокойный редакционный стиль для материалов.