theme

Theme: marketing

A complete token preset for marketing sites: ink-on-white, blue/violet brand pair, layered surfaces, a brand gradient and fluid display type. Light and dark.

npx shadcn add @damon/theme-marketing

Without the @damon alias: npx shadcn add https://damon-ui.pages.dev/r/theme-marketing.json · raw markdown

Preview

background
card
primary
secondary
muted
accent
brand
surface-1
surface-inverse
destructive
success
warning
info

PaidOverduePendingDraft

Ship it once.

text-display scales from 2rem to 3.5rem with the viewport.

Writes CSS variables into your globals.css (:root, .dark and @theme inline). No component files.

When to use

Landing pages, service sites and blogs built with shadcn, where you want a branded look rather than shadcn's neutral grey.
Before adding @damon/page-hero or @damon/cta-band. They use surface-*, brand and text-display / text-hero, which this preset defines.
As a starting point: change --brand and --brand-2 and everything derived from them follows.

When NOT to use

Admin panels, dashboards and back-office tools. Use @damon/theme-admin, which is denser and quieter.
Projects that already have a design system. Add only the tokens you are missing; don't overwrite their palette.
Non-shadcn projects. The variable names follow shadcn's conventions.

API

Tokens added on top of shadcn's standard set (background, primary, muted, border…):

Token	Tailwind utility	Use
`--brand`, `--brand-foreground`	`bg-brand`, `text-brand-foreground`	Brand highlight fills, CTA buttons on dark bands
`--brand-2`	`bg-brand-2`	Second brand colour, gradient end
`--brand-gradient`	`bg-(image:--brand-gradient)`	`linear-gradient(135deg, brand, brand-2)`
`--surface-1`, `--surface-2`	`bg-surface-1`, `bg-surface-2`	Alternating section backgrounds
`--surface-inverse`, `--surface-inverse-foreground`	`bg-surface-inverse`, `text-surface-inverse-foreground`	Dark band on a light page (flips in dark mode)
`--success`, `--warning`, `--info` (+ `-foreground`)	`text-success`, `bg-warning/10`, `bg-info text-info-foreground`	Status tones
`text-display`	`text-display`	`clamp(2rem, 4.5vw, 3.5rem)` section titles
`text-hero`	`text-hero`	`clamp(2.5rem, 7vw, 6rem)` the single page headline

Values: --radius: 0.75rem. Primary is the brand blue (#4363d9), foreground is ink (#0e1a33). Dark mode is deep navy (#0b1020).

Minimal example

npx shadcn add @damon/theme-marketing

<section className="bg-surface-1 py-20">
  <h2 className="text-display font-semibold tracking-tight">Built for tradies</h2>
</section>

Real example

Rebrand by overriding two anchors in globals.css, after the generated block:

:root {
  --brand: #0b6b4f;      /* pounamu */
  --brand-2: #1d4ed8;
  --primary: var(--brand);
  --ring: var(--brand);
}
.dark {
  --brand: #4fcfa1;
  --brand-foreground: #06231a;
  --primary: var(--brand);
  --primary-foreground: var(--brand-foreground);
}

<section className="rounded-2xl bg-surface-inverse p-10 text-surface-inverse-foreground">
  <h2 className="font-heading text-display font-semibold">Ready when you are</h2>
  <Button className="mt-6 bg-brand text-brand-foreground hover:bg-brand/90">Get a quote</Button>
</section>

Constraints

Every text pairing passes WCAG AA (4.5:1) in light and dark. tests/lib/tokens.test.ts enforces it; re-check contrast if you change colours.
accent keeps shadcn's meaning (subtle hover surface). Brand colour is primary / brand, never accent.
Status tones are text-strength. Use bg-success/10 text-success for a tint, bg-success text-success-foreground for a solid fill.
Fonts are not part of the preset. Load a display face with next/font and point --font-heading at it.
Installing a theme overwrites the same variables already in globals.css. Commit before you run it.