Design System
View
Marketing · Library

Components

The atoms. All classes are marketing- prefixed (collision-safe with legacy CSS), read only token values, and recolor themselves inside any color combination. Defined once in src/styles/ds/marketing-components.css — the site, the docs, and future pages all consume the same file.

Button

Flat ink-gold block, hairline edge, arrow nudge — plus one slow champagne light-pass on hover, like light over silk (large sizes only; reduced-motion safe). --ghost adapts to its combo; --inverse uses the combo's action tokens (e.g. navy-on-gold inside .combination-gold).

On light.marketing-btn--gold · --ghost · --sm
Primary action Secondary action Small 
<a class="marketing-btn marketing-btn--gold">Primary action + icon</a>
<a class="marketing-btn marketing-btn--ghost">Secondary action</a>
On dark & gold combossame classes, recolored by context
Primary action Ghost on navy
Inverse on gold Ghost on gold

Section header

Headline first; the lozenge-led eyebrow sets under it as a folio line (CSS order re-seats it — keep markup eyebrow-first), then the solid gold rule stepping into a hairline tail, then the lead. Center variant adds a closing lozenge.

marketing-sechead.marketing-eyebrow · .marketing-sechead__title · .marketing-rule · .marketing-sechead__lead
Practice Areas

Legal matters we handle

A short lead paragraph that frames the section in one or two sentences.

<div class="marketing-sechead"> (or marketing-sechead marketing-sechead--center)
  <span class="marketing-eyebrow">Practice Areas</span>
  <h2 class="marketing-sechead__title">Legal matters we handle</h2>
  <div class="marketing-rule"></div>
  <p class="marketing-sechead__lead">…</p>
</div>

Micro label

Tiny uppercase kicker that sits above a value or meta row (contact channels, call-card kickers, footer contact rows). Quieter than the eyebrow — muted, no dash.

marketing-label
<span class="marketing-label">Call</span>

Form fields

Roomy and legible; the label warms to gold on focus, the caret is gold, the ring is AA-visible. Never restyle the lead-form's field names — only its skin.

marketing-field.marketing-field · --row · --check · select

Badges, ticks & pills

Trust signals: the pulsing live badge, framed tick, star row, and a quiet pill tag.

marketing-badge-live · marketing-tick · marketing-stars · marketing-pill
Attorneys available now Free consultation ★★★★★ Estate Planning

Icon & stat

Bare thin-line glyphs — no frame, card or fill; the hairline stroke is the ornament (CSS pins every icon to the same thin weight). Serif count-up stats — add data-count/data-suffix and the shared script animates on scroll.

marketing-iconframe · marketing-statdata-count="10000" data-suffix="+"
10,000+Families helped
5.0Google reviews

Links, breadcrumbs & pagination

The animated underline link, dot-separated crumbs, and a sharp pager.

marketing-ulink · marketing-crumbs · marketing-pager

Read more about planning for incapacity in our guide.