Tracy Harris Co Brand Kit
Four brands (Tracy Harris Co, FFB, FFM, FRESH), one token system, one growing library of brand-agnostic components. Each one works across all four brands via data-brand. Each one has a skill. Click into any component below to see its showcase.
Page composer
Visually pick hero, callout, testimonials, footer. Hand me a JSON recipe.
Index
Every variant in one list or tile grid. Copy a name, say it back to Kira.
The system
Four sub-brands, one token system. Palette, typography, voice.
the system
Moved to /brand/.
Narrative 'why this exists' beat. Editorial (cream canvas, script eyebrow, Tracy-voice prose, Xx Tracy sign-off) or dark (aztek canvas + gold accent) for use between bright sections.
Three outcome promises. Icon row (line icons in cream tiles) or number row (serif italic 01/02/03). Sits between hero and callout on sales pages.
What's-inside contents list. Module stack (8 modules, accordion-expand with full detail) or grid preview (6 tiles with gradient thumbnails and a "Preview module 1 free" link on the first tile).
Scannable 3x2 cards with line-icon + heading + 2-line body. Cream tiles on oatmeal canvas. Breaks up prose on long-landing pages.
Blog index card grid. Editorial (featured post + 3 equal columns) or masonry (mixed heights, column layout). Category tag, serif headline, date + reading time.
Blog article body. Editors Note drop cap, 62ch measure, script pull quote, inline image with caption, Xx Tracy sig, author bio card with photo + socials.
Dedicated text-only hero. Cream canvas, script eyebrow, huge serif headline (52-110px fluid), one-line sub, ghost "Read" link. For Blog, About, Contact.
Two sub-variants for TY / quiz-result pages. Big archetype serif, Jhon Halend script meaning, warm paragraph, single primary CTA. Confirmation version has inbox checklist + whitelist guidance.
Single focused hero for OTO pages. No nav. Offer name, value-promise headline, real deadline, oatmeal pill CTA, one-time legal note. Dark cream canvas.
What's-included rows. Detailed version: icon + benefit + description + inline $value, total tally. Minimal version: terse benefit rows, single CTA.
Editorial version: cream canvas, serif promise headline, Tracy-voice body, Jhon Halend signature. Badge version: dark aztek card with oatmeal seal + legal note.
Results-page reassurance card. Three numbered steps (save URL, open guide, join community). Clean, not pushy. Feeds TY and download pages.
Post-delivery cross-sell. Eyebrow-ruled "You might also love this" plus editorial photo card linking to FFB / FFM. Whisper-quiet, not a hard sell.
Four-zone bento: brand card, big headline, stats + dual CTAs, video thumbnail. Two variants: FFB Mentorship (aztek green) + Elite Coaching (gold).
Bottom-right floating card promoting the next live workshop. Click to open a modal with class replay snippet + Register CTA. Dismiss → Next workshop tab. Session-aware.
Bold stage hero: full-bleed Tracy portrait, sage/aztek wash + scan-line texture, big sans headline bottom-left with pill CTA, inline event widget bottom-right, thin top bar with Tracy wordmark.
Classic 50/50 hero in dark + light variants. Tracy positioned in the right half, horizontal gradient fades cleanly off her face, left half holds text, eyebrow, CTAs. Stacks on mobile.
Environmental portrait full-bleed, script eyebrow ("Peace, Profit, Presence."), uppercase centered "TRACY HARRIS" wordmark, supporting paragraph, Navigate cue bottom. Slow Ken Burns zoom.
Full-screen image background, thin top nav over top, giant serif name at the bottom, uppercase tagline. Full-bleed editorial.
Thin 3-segment top bar + full-screen menu overlay with big serif primary nav, two columns of secondary uppercase links, tagline.
Dark canvas, signature tagline, giant serif brand word, split nav around the mark, minimal legal row.
Above-the-fold opener. textOnly, splitRight, splitLeft, marquee, silk (animated canvas).
Sticky top-bar with mega-menu dropdowns. Mobile drawer with accordion sub-menus.
Logo + editorial paragraph, link columns, right-aligned CTA. Dark variant for FFM.
Three-card pathway block (FRESH → FFB → FFM). Homepage anchor. Two-up version for cross-linking on product pages.
Wall, featured trio, single hero, editorial centered, real-results, columns marquee.
Tabbed categories with accordion, or simple single-list. Smooth expand/collapse.
Split (portrait + form), banner (centered), card (compact accent), accent bg (dark).
Alternating image/text resource cards. Worksheets, downloads, mini-courses.
Bento asymmetric gallery with hover overlays, or masonry natural-height columns.
Three flip cards (FRESH → FFB → FFM). Front: summary. Back: details + CTA. Click to flip.
Mid-page interrupt. Canvas, elevated, accent, dark, ruled. Dual buttons.
Side-by-side payment options, single centered card, FFM dark premium. Checkmark features.
Split (portrait + editorial bio + Jhon Halend signature + facts) or centered circle.
Featured (large, art + details + platform links) and compact (small inline).
Button expands into full-screen form overlay. For quiz entry and FFM applications.
Vanish-input for sales pages. Queries the content brain for personalised answers.
Long-form text block for about pages and blog bodies.