DealerCentives is the offer manager built for the way modern dealers actually work. The brand reflects that: confident type does the talking, surfaces stay quiet so data can speak, and the gradient earns its keep by marking exactly one decisive moment per screen.

We sound like the smart shop manager down the road, not the marketing department. (See §11 for voice.)

All color is defined in OKLCH for perceptual uniformity, then echoed as CSS custom properties. Components never hardcode color — they reference tokens. The brand gradient is the only place we get loud.

3.1 The brand gradient

3.2 Brand anchors

3.3 Surface system (light)

3.4 Light nav vs atmospheric sidebar

3.5 Functional status

Inter is the entire system — UI, body, headlines, numerics. We use a custom 650 weight (between SemiBold and Bold) for display so headlines feel confident without shouting. All headings track at -0.02em; numbers ship with tabular figures wherever they matter.

4.1 Type scale

4.2 Marketing headline composition

The gradient text-clip earns one to two words per headline — never more.

Pick the radius rung that matches the surface size. Use Tailwind's default 4px spacing scale — the dashboard does not customize it.

Shadows are layered (one tight, one diffuse) to feel material without weight. Don't invent new shadows. Don't stack --shadow-card and --shadow-primary on the same element.

One easing curve for the whole system. A premium decel — fast in, slow settle. It feels expensive without being slow. Avoid spring physics, bounce, or anything that draws attention to the motion itself.

Library: Lucide (lucide-react). Already a dependency. Default size: 16px inline · 20px nav · 24px empty-state. Color inherits from text — never tint icons with the brand gradient.

Every component lives in src/components/ui/. They consume tokens from styles.css and never hardcode color, radius, or shadow. The seven custom additions extend the base — they don't replace it.

Built from the same tokens as the dashboard so the marketing site and the product feel like one continuous experience. One brand-loud moment per page — either Hero B or a gradient CTA, never both.

Pattern · Footer

Site footer

Always #050816

The offer manager built for the way modern dealers actually work. Made with care in Boston.

Product

• Inventory matching
• Disclaimers
• Image library
• Integrations

Company

• About
• Customers
• Careers
• Press

Resources

• Docs
• API
• Status
• Help

© 2026 DealerCentives, Inc.Privacy · Terms

DealerCentives talks to dealers in the language they actually use. Direct, specific, no theater. The voice we ship in the product is the voice we use on the marketing site.

11.1 This, not that

11.2 Word swaps

11.3 Casing & punctuation

12.1 The fastest path: drop in tokens.css

The portable token sheet at docs/brand/tokens.css is a flat CSS file with every brand token. No build dependencies.

// app/layout.tsx (Next.js App Router)
import "@/styles/tokens.css" // copy from docs/brand/tokens.css
import "./globals.css"

After import, every CSS variable is available globally. Use them directly:

<button
  className="text-white px-5 py-3 rounded-xl font-semibold"
  style={{ background: "var(--gradient-brand)", boxShadow: "var(--shadow-primary)" }}
>
  Book a demo →
</button>

12.2 With Tailwind v4

Mirror the portal's @theme inline block from dc-dashboard-2026/src/styles.css so utilities like bg-primary, text-foreground, and rounded-2xl resolve to brand tokens. That file is the canonical example to copy.

12.3 With shadcn/ui

Initialize with these components.json settings to keep visual congruence:

{
  "style": "new-york",
  "tailwind": { "baseColor": "slate", "cssVariables": true, "prefix": "" },
  "iconLibrary": "lucide"
}

12.4 Lifting components from the dashboard

The 53 components in src/components/ui/ are MIT-licensed shadcn primitives + 7 custom additions. Safe to copy whole files into the new project. Check imports — only the seven custom files (metric-card, status-dot, page-header, empty-state, kbd, segmented-control, choice-modal-row) reference brand-specific patterns; everything else is stock shadcn restyled.