Every pattern, in financial-coaching voice.

header

Sticky top bar. Brand lockup left, primary nav right. CSS-only burger toggle for mobile via a checkbox label pair.

hero-light

Top-of-homepage opener on the white canvas. One eyebrow, one headline, one lead, two CTAs. Yellow primary CTA, blue secondary.

hero-navy

Same composition as hero-light on a navy ground. Yellow eyebrow, white headline, yellow primary CTA. Used for executive palette builds or for landing pages that need a heavier opener.

buttons

Primary is yellow on charcoal text. Blue is the spine in solid form. Ghost for tertiary. Light ghost reverses on the blue background.

service-cards

Three-up card row. Plain, filled, and primary variants together signal the rough tier hierarchy without committing to a price ladder. Used on homepage and on coaching page.

step-list

The signature methodology pattern. Numbered blue badges, one-sentence body per step. Three, five, or seven steps. This is the spine of any plan or process page.

outcome-stats

Specific-dollar proof. Navy panel, yellow figures, tabular numerals. Four-up grid by default, collapses to two-up below 720 and one-up below 480.

testimonial-quote

Real people, specific dollars, specific timelines. Always attribute with first names + last initial + city. Money line in mono on a yellow underline.

pricing-plans

Three-tier plan grid. Featured tier reads "Coaching" by default; left rail is the free starter call, right rail is the class. Prices visible. "Contact for pricing" is forbidden.

cta-banner

Mid-page or end-of-page closer. Blue ground, white headline, one-line proof, yellow CTA. Stacks to a single column below 720.

before-after

Two-column compare block. Red money on the before side, yellow money on the after side. Real households only. No "look how rich they got" framing.

coach-bio-grid

Three-up coach grid. Photo tile, name, role, two-sentence bio. Photo tile renders the role label until a real headshot is sprinkled in at build time.

tool-calculator

Free-tool banner. Dashed blue border reads visibly free vs. paid. Dollar-sign icon, two-line copy, single blue CTA. Used on home and on the resources page.

two-col-image-text

Image one side, copy plus CTA the other. Used for "how it works," methodology callouts, and program intros. Reverses with .dr-two-col--reverse.

press-credentials

Featured-in strip. Wordmarks set in type, not logos, so the row reads consistent regardless of which outlets the client lists. Real outlet names replace these at build time.

podcast-card

For coaches or ministries that publish a show. Cover tile uses the accent-gradient pattern. Platform links use the blue podcast-card chip style.

book-cover

Pure-CSS cover for workbooks, downloadable guides, and self-published books. Title is the resource name, sub is the format or audience tag. Pairs with a short pitch and a buy button.

newsletter-signup

Lead-magnet form. Email plus first name only. Privacy line is required. Never SSN, account numbers, or income on a marketing form.

contact-form

The book-a-call intake. Two-column row for name, single rows for email, phone, message. Privacy line and a yellow submit button.

map-address

For practices with a physical office. Striped map placeholder ships until a real embed lands. Address fields are bracketed placeholders so a fake one cannot ship.

faith-disclosure

Optional. Shown only when data-faith is on. Plain-language disclosure that the practice frames money work through a faith lens. Stewardship microcopy paired with one specific next step. No bait-and-switch.

faq

Native details and summary. CSS-only. Plus icon flips to minus when open. Three to seven questions. Answer the actual concerns clients call about, not theoretical objections.

footer

Navy ground, white body text, yellow link hover. Three or four columns: practice, services, resources, contact. Legal line includes the "not an investment advisor" disclosure when applicable.