---
version: alpha
schema: adant-design-v1
name: AdAnt Marketing
description: AdAnt public marketing and editorial design system.
scope: marketing
theme: light
dark-variant: not-published
colors:
  canvas: "#f5f5f5"
  canvas-soft: "#fafafa"
  surface-card: "#ffffff"
  surface-strong: "#f0efed"
  surface-dark: "#0c0a09"
  hairline: "#e7e5e4"
  hairline-strong: "#d6d3d1"
  ink: "#0c0a09"
  ink-soft: "#292524"
  body: "#4e4e4e"
  muted: "#777169"
  muted-soft: "#a8a29e"
  on-primary: "#ffffff"
  clay: "#cd7f5f"
campaign-accents:
  warm: "#fa3d1d"
  cool: "#0358f7"
typography:
  primary-family: "Inter Tight"
  display-family: "EB Garamond"
  mono-family: "JetBrains Mono"
spacing:
  unit: "4px"
  language: "Tailwind spacing utilities"
rounded:
  control: "0.625rem"
components:
  actions: [primary, secondary, text-link]
  surfaces: [card, popover, editorial-section]
  navigation: [marketing-header, resources-menu, mobile-menu]
  content: [hero, feature-section, pricing-card, blog-prose, faq]
---

<!-- Generated by scripts/generate-design-manifests.mjs. Edit the canonical docs or token sources, then run pnpm design:generate. -->

# AdAnt marketing design system

This contract owns public marketing, pricing, blog, booking, authentication,
and legal surfaces. It is intentionally separate from the authenticated Studio
contract in [studio.md](./design.md).

## 1. Visual language

Marketing uses high-contrast editorial layouts, white and warm-neutral surfaces,
Inter Tight for primary UI and hero text, EB Garamond for editorial display
headings, black primary actions, and a warm-red-to-blue accent sweep. Motion is
expressive but must never block reading or navigation.

## 2. Scope and ownership

- `apps/web/src/features/landing` owns marketing composition and choreography.
- `packages/ui/styles/src/themes/dia.css` owns the selected public theme,
  editorial semantics, Dia campaign values, fonts, gradients, effects, and
  generic aliases used by reusable UI primitives.
- `packages/ui/styles/src/themes/default.css` remains the neutral fallback.
- `apps/web/src/features/landing/landing.css` owns landing-only selectors,
  pseudo-elements, responsive composition, and animation.
- Marketing must not override `@repo/ui-studio` variables or reuse a Studio
  component merely because its current appearance is similar.

## 3. Primitive language

New marketing components use Tailwind for layout, spacing, responsive behavior,
typography, surfaces, borders, and ordinary states. Prefer semantic public-theme
utilities such as `bg-background`, `bg-card`, `text-foreground`,
`text-muted-foreground`, `border-border`, and `text-primary`.

Landing-only CSS is appropriate for scroll choreography, animated gradients,
pseudo-elements, editorial prose selectors, and third-party overrides. Repeated
layout declarations or ordinary button/card styling should move into React
components expressed with Tailwind.

## 4. Typography

- primary marketing UI and hero text: Inter Tight
- editorial display headings: EB Garamond
- body copy: Inter Tight or the shared sans stack
- command and numeric data: JetBrains Mono

Headings use compact tracking and deliberate line breaks. Body text maintains a
comfortable reading measure and at least 1.5 line height.

## 5. Color and interaction

The Dia theme is the source of truth for background, foreground, card, popover,
primary, secondary, muted, accent, destructive, border, input, and ring colors.
Campaign-only values use the `--campaign-*` namespace. Raw colors and font stacks do
not belong in React or feature CSS; a repeated visual decision is named in the
theme before use.

Every control has keyboard focus, hover, active, and disabled treatment. Respect
`prefers-reduced-motion`; preserve content and navigation when animation is
disabled. Functional text and controls target WCAG AA contrast.

## 6. Published contract

`/design.marketing.md` is generated from this document and the live public-theme
tokens. It is separate from `/design.md`, which describes the Studio product UI.

## 7. Validation

- `pnpm --filter @repo/web check` verifies the generated contract.
- `pnpm --filter @repo/web test` covers marketing behavior.
- Web production build and the relevant Playwright screenshots validate route,
  responsive, and visual behavior.