marketing-dark-2 · design book

Dark marketing / product landing · 2026-04-13 · tokens.css — источник истины. → Смотреть рабочий прототип (Volta) · Родственный бук — marketing-dark-1.

1. Цвета

Очень тёмный фон, прозрачные overlays, multi-accent neon палитра.

Фоны

bg-base#08090A
bg-surface#0F1011
overlay-05rgba(255,255,255,.05)
overlay-03rgba(255,255,255,.03)

Текст (grayscale)

text#F7F8F8
text-secondary#D0D6E0
text-tertiary#8A8F98
text-muted#62666D

Multi-accent neon

accent-pink#F79CE0
accent-cyan#55CDFF
accent-orange#FFC47C
accent-indigo#8FA4FF
accent-green#89D196
accent-purple#8B5CF6

2. Типографика

Inter Variable + JetBrains Mono (вместо оригинального Berkeley Mono). Letter-spacing всегда отрицательный.

Hero 64 / 510

H1 Page 48 / 510 / ls −1.056

Section 32 / 510

Card heading 20 / 510

Body 16 / 400 / letter-spacing −0.13. Very compact typography — negative tracking everywhere.

Body small 14 / 400 — navigation, meta, tertiary text.

Micro 13 / 400 — buttons, pill-nav.

3. Радиусы

Острые (2–8px). Pill (22px) применяется редко, только для round-tags.

2px
4px
6px
8px
12px

4. Кнопки

5. Теги / бейджи

Цвет акцент + фон-overlay с alpha 8%. Острый radius 4px.

Beta New In Progress Planned Done

6. Карточки

Track issues

Create, assign, and prioritize tasks across teams. Keep focus on what matters.

Ship products

Plan, build, and launch in weekly cycles. No sprint churn, no context switching.

Align teams

Shared roadmap, clear priorities, transparent progress — a single source of truth.

7. Инпут

8. Pricing cards

Free
$0 / month
  • Up to 10 users
  • Unlimited issues
  • Community support
Business
$16 / user / mo
  • All Free features
  • Admin & permissions
  • Priority support
  • Custom integrations
Enterprise
Custom
  • All Business features
  • SSO / SCIM
  • Dedicated CSM
  • Audit logs & DLP

9. Code block

Berkeley Mono (оригинал) → JetBrains Mono (free). Подсветка — accent-pink/cyan/orange для k/s/n токенов.

// create a new issue const issue = await client.createIssue({ title: 'Fix hover state on pricing card', priority: 2, labels: ['bug', 'ui'], });

10. Алерты

✓Issue created. View
ⓘNew project view available. Try it in Settings.
!Failed to save. Please check your connection.