Source: frameworks/kit-cyp-paid-traffic-page/02-cyp-paid-traffic-page-terminology.md

02 — TERMINOLOGY: CYP Paid Traffic Page

Locked vocabulary for design components, brand elements, and copy conventions used in CYP paid traffic pages.

CYP Brand System

Term	Meaning	NOT This
CYP brand	The Practice Builders / Creating Your Plan visual identity: Fraunces + Montserrat, teal/gold/cream	NOT the AOS brand (Cormorant Garamond + Inter, charcoal/gold/cream)
Teal	`#0f2d3e` — primary dark background color	Not navy. Not charcoal. Teal.
Gold	`#b79d64` — accent color for borders, buttons, labels, highlights	Only on dark backgrounds. On light backgrounds, use accessible gold (#6b5d3e)
Accessible gold	`#6b5d3e` — WCAG-compliant version of gold for light backgrounds	Used instead of #b79d64 when text sits on cream, white, or off-white
Cream	`#f1ede6` — primary light background, also used as text color on dark	The warm neutral. Not white. Not gray.
Off-white	`#f7f5f0` — secondary light background for alternating sections	Slightly warmer than cream. Used to create section rhythm.
Teal accent	`#3e666e` — secondary dark color, used in gradients and "not for you" borders	Not the primary teal. The lighter companion.
Slate	`#334155` — body text on light backgrounds	Standard readable text on cream/white
Fraunces	Serif heading font — weights 400, 600, 700, 800	Headings, quotes, card titles, price displays
Montserrat	Sans-serif body font — weights 300, 400, 500, 600, 700, 800	Body text, buttons, labels, form fields

Design Component Names

Component	What It Is	CSS Signature
Glass card	Semi-transparent card on dark backgrounds	`background: rgba(241,237,230,0.06); border: 1px solid rgba(183,157,100,0.25); border-radius: 6px; padding: 2rem`
Gold top-accent bar	3px gold strip at the top of a card	`position: absolute; top: 0; left: 2rem; right: 2rem; height: 3px; background: #b79d64; border-radius: 0 0 2px 2px`
Meta pill	Rounded badge displaying a key fact	`padding: 0.6rem 1rem; border: 1px solid rgba(183,157,100,0.4); background: rgba(183,157,100,0.15); border-radius: 20px; font-size: 0.8rem; color: #f1ede6; font-weight: 500`
Gold left-border card	White card with gold left accent, used on light backgrounds	`background: white; border-left: 4px solid #b79d64; border-radius: 0 6px 6px 0; padding: 1.5rem 2rem`
Teal left-border card	White card with teal left accent, used for "not for you" or contrast	`background: white; border-left: 4px solid #3e666e; border-radius: 0 6px 6px 0; padding: 1.5rem 2rem`
CTA button	Gold button with hover lift	`background: #b79d64; color: #0f2d3e; border: none; border-radius: 4px; font-weight: 700; font-family: 'Montserrat'` + hover: `background: #c4aa74; transform: translateY(-1px)`
Outcome box	Gold-tinted box inside a card showing what a section produces	`background: rgba(183,157,100,0.1); border-radius: 4px; padding: 0.75rem 1rem`
Section header label	Gold uppercase text introducing a section	`font-size: 0.9rem; color: #b79d64; letter-spacing: 2px; font-weight: 700; text-transform: uppercase`
Angle bracket bullet	Gold `›` marker in lists	`color: #b79d64; font-weight: 700; position: absolute; left: 0`
Hollow bullet	Before-state marker in transformation sections	`width: 8px; height: 8px; border: 2px solid rgba(241,237,230,0.2); border-radius: 50%`
Filled bullet	After-state marker in transformation sections	`width: 8px; height: 8px; background: #b79d64; border-radius: 50%`
Recommended badge	Gold label positioned above a comparison card	`position: absolute; top: -12px; left: 2rem; background: #b79d64; color: #0f2d3e; font-size: 0.7rem; font-weight: 700; padding: 0.3rem 0.75rem; border-radius: 3px; letter-spacing: 1px; text-transform: uppercase`
Sticky form panel	Form that sticks to viewport on scroll (opt-in pages)	`position: sticky; top: 100px` — becomes `position: static` at 968px
Photo-overlay authority	Full-width image with gradient fade, text overlaid on left	Absolute-positioned image + gradient overlay from left (solid → transparent) + z-indexed content
Gold testimonial band	Full-width gold background with centered serif quote	`background: #b79d64; padding: 4rem 5%; text-align: center` — quote text in `#0f2d3e`
Category card	Card displaying a product category with icon and item list	Glass card or white card with gold top-accent bar, emoji icon in heading, gold arrows before items
Mechanism / Shift section	Prose section that explains WHY this approach works — bridges problem to product	Cream or off-white background. Section label + heading + 2-3 paragraphs. Brunson's Story element. Required for cold traffic.
Results-in-Advance section	Shows actual product output before the purchase — not a promise, the result itself	Off-white or cream. Gold left-border cards showing specific deliverable examples. Kern's core principle. Different from testimonial (which is someone else's outcome).
How It Works section	3-step numbered cards showing what the buyer needs to do	Cream background. Numbered cards with gold top-accent bars. Reduces perceived effort (Hormozi's Value Equation denominator). Required for cold traffic when product type is unfamiliar.
Audience temperature	Whether the visitor has a prior relationship with the brand	`warm` = email list, organic, referral (has context). `cold` = Meta ads, paid traffic, no prior exposure (needs mechanism, proof, and effort reduction on the page). Determines section selection.
Countdown timer	JavaScript-driven countdown display	Starts on page load, counts minutes/seconds, persists on scroll
Decline link	Muted text below CTA for users who don't want the offer	`font-size: 0.85rem; color: rgba(241,237,230,0.5)` or `color: #64748b` on light backgrounds

Section Background States

The CYP design system uses 5+ background states in alternating rhythm. No two consecutive sections should use the same background.

State	CSS	When Used
Dark teal	`background: #0f2d3e`	Header, hero (simple), problem sections, footer
Teal gradient	`background: linear-gradient(135deg, #0f2d3e 0%, #3e666e 100%)`	Hero (complex), CTA sections, transformation sections
Cream	`background: #f1ede6`	Feature lists, value stacks, proof sections
Off-white	`background: #f7f5f0`	Alternating light sections, FAQ on light
White	`background: white` or `background: #ffffff`	Authority bio, individual card backgrounds
Mid-teal	`background: #3e666e`	FAQ sections, objection handling
Gold band	`background: #b79d64`	Testimonial pull quotes (rare, max 1 per page)

Responsive Breakpoints

Breakpoint	Name	What Changes
968px	Tablet	Multi-column grids → single column. Sticky form → static. Header CTA may stack. Hero copy-details hidden.
840px	Large mobile	h1: 2.2rem. h2: 1.8rem. Section padding: 4rem 5%.
640px	Mobile	h1: 1.8rem. h2: 1.5rem. Section padding: 3rem 4%. Header wraps. Photo overlay min-height adjusts.

Typography Scale

Element	Font	Size	Weight	Color (dark bg)	Color (light bg)
h1	Fraunces	3.25rem	800	#f1ede6	#0f2d3e
h2	Fraunces	2.5rem	800	#f1ede6	#0f2d3e
h3 (section)	Fraunces	1.5rem	700	#f1ede6	#0f2d3e
h3 (card)	Fraunces	1.15–1.25rem	700	#f1ede6	#0f2d3e
h4 (list heading)	Fraunces	1.05rem	700	#f1ede6	#0f2d3e
Body (large)	Montserrat	1.15rem	400	rgba(241,237,230,0.85)	#334155
Body (standard)	Montserrat	0.95rem	400	rgba(241,237,230,0.8)	#334155
Body (small)	Montserrat	0.85rem	400	rgba(241,237,230,0.6)	#64748b
Label	Montserrat	0.9rem	700	#b79d64	#6b5d3e
Meta pill	Montserrat	0.8rem	500	#f1ede6	—
Disclaimer	Montserrat	0.7rem	400	rgba(241,237,230,0.35)	—
CTA button	Montserrat	0.85–1rem	700	—	#0f2d3e
Price display	Fraunces	2.5rem	800	#b79d64	#b79d64

AI Product Copy Terms

Shared with kit-skill-delivery-page. These are locked.

Term	Meaning	Use When
Download	Getting the .md skill file to your device	Describing acquisition of the skill file
Upload	Adding the skill file to Claude	Describing how to start using the skill. NOT "paste"
Install	One-time setup — uploading and initial configuration	Describing first-use setup
Run	Using the skill with your data to produce output	Describing ongoing use
Paste	Adding YOUR data (emails, notes, transcripts) as input to a skill	User input only. NEVER for describing how skills get into Claude
A paid Claude account	The subscription needed to use skills	Do NOT quote pricing. Do NOT say "Claude Pro" or "$20/month"

Forbidden Terms

Term	Why	Use Instead
Leverage	Banned per voice.md	"Use", "deploy", "apply"
Synergy	Banned per voice.md	Don't replace — cut the sentence
Coaching	Banned per voice.md	"Advisory", "consulting"
Mindset	Banned per voice.md	"Approach", "operating assumption"
Game-changer	Banned per voice.md	Describe the specific outcome
Journey	Banned per voice.md	"Process", "sequence", "build"
Crush it	Banned per voice.md	Don't replace — cut it
Unlock	Banned per skill delivery page terminology	"Get", "access", "download"
Sign up	Banned per skill delivery page terminology	"Get the [asset name]"
Get your free copy	Banned per skill delivery page terminology	"Get the [specific name]"
You'll love	Banned per skill delivery page terminology	Describe the outcome
Paste into Claude	Wrong vernacular	"Upload to Claude"
Claude Pro	Pricing reference	"A paid Claude account"
Projects feature	Incorrect product reference	"Upload the skill, run it with your data"
var()	CSS variables break in embed contexts	Hardcode hex values inline

Footer Disclaimer Types

Disclaimer	When Required	Template
Meta/Facebook	All purchase pages (any sales page may run Meta ads now or later)	"This site is not a part of the Meta website or Meta Platforms, Inc. Additionally, this site is NOT endorsed by Meta in any way. FACEBOOK is a trademark of Meta Platforms, Inc."
Anthropic/Claude	Page sells AI-related products	"This product is not affiliated with, endorsed by, or sponsored by Anthropic, PBC or its Claude product. Claude is a trademark of Anthropic, PBC."
Results/earnings	Page makes outcome claims	Specific to the product — no fabricated statistics, no income promises
Copyright	All pages	"Practice Builders is a brand of Creating Your Plan · [year] · All Rights Reserved"