Coaching · Free

Northstar

A coaching site built like a good coaching session: one clear promise, a path with milestones, proof from real transformations, and a single next step.

Northstar — the coaching design this prompt generates
Fraunces + KarlaDawn gradients, one clear promise
prompt.txt — paste as your first message
You are designing the site of a coach whose clients finish what they start. Build a complete one-page site for a fictional practice called Northstar Coaching ("From stuck to started in 90 days."). Write all copy — warm, specific, outcome-first; no "unlock your potential" mush, no lorem ipsum.

ART DIRECTION — dawn. Warm paper #FBF7F0, deep slate ink #31415A, sunrise accent #D97742 for CTAs and milestone numbers. One large soft dawn gradient (slate → peach → paper) behind the hero, like first light. Rounded 20px cards, soft shadows. Fonts via Google Fonts: "Fraunces" 500 for headlines, "Karla" for body. Small hand-feel inline-SVG marks (a compass star, a path line). Mood: morning pages and a plan.

LAYOUT, top to bottom:
1. Slim nav — wordmark with a tiny compass-star mark, Program / Results anchors, sunrise "Book a discovery call" pill.
2. Hero — over the dawn gradient: the one-line promise as a serif headline, one sentence naming exactly who it's for, the CTA, and a proof line ("47 clients through the program — 41 shipped").
3. The problem, named — a short two-paragraph section that describes the stuck feeling with uncomfortable accuracy, then pivots to the path.
4. The 90-day path — the centerpiece: three milestone cards connected by a drawn SVG path line — Days 1–30 (Clarity), 31–60 (Momentum), 61–90 (Launch) — each with a concrete outcome, not a vibe.
5. What's included — a clean two-column checklist (weekly calls, voice-note access, templates, the deadline that finally sticks).
6. Results — three short transformation quotes: first name, what they shipped, one honest sentence.
7. About — one warm, credible paragraph with a personality detail; gradient portrait circle.
8. Pricing — one clear package with the price stated plainly, what happens on the call, and a "not ready?" newsletter alternative.
9. Booking — labeled form (name, email, what are you building, preferred time) with the sunrise CTA; honest note it needs connecting.
10. Footer — one line of warmth, contact, socials.

MOTION: gentle momentum. The dawn gradient shifts hue very slowly (20s loop); hero fades up with a 70ms stagger; the SVG path line draws as the milestones reveal (once); milestone numbers tick up 1→2→3; cards lift 3px on hover. Respect prefers-reduced-motion: path pre-drawn, simple fades.

RULES: responsive at 375 / 768 / 1280 (milestones stack with the path line vertical). Semantic HTML, labeled form fields, focus states, body contrast at least 7:1. Invented results must stay modest and plausible — no income claims. All art is CSS gradients and inline SVG. Complete without JavaScript.

Why these prompts work

Every template follows the same five-part structure, so the result is consistent every time:

01
Role + output contract

What to build and the quality bar — no lorem ipsum, real copy.

02
Art direction

Exact hex palette, Google-Fonts pairing, and mood keywords.

03
Layout spec

Section by section, top to bottom — nothing left to chance.

04
Motion spec

Entrances, scroll reveals, hovers, and timing curves.

05
Rules

Responsive breakpoints, accessibility, and what the AI must not do.

Works great for

Each industry page carries this style pre-tailored — your services, prices and palette already written in:

More one-shot designs

Keep going