Claude Training
Contact
ColorsTypographySpacingButtonsCardsBadgeSectionWrapperCopyablePromptTestimonialsAll components

Colors

Brand palette

#C15F3C

terracotta

#A8502F

terracotta-hover

#D4845E

terracotta-light

#C15F3C1A

terracotta-muted

Backgrounds

#FAFAF8

warmbg

#F4F3EE

pampas

#1C1917

warmblack (bg-dark)

#FFFFFF

white (card)

Text & UI

#1C1917

text-primary / warmblack

#57534E

text-secondary

#A8A29E

text-tertiary

#E7E5E4

border

#D6D3D1

border-strong

Typography

H1 hero — font-display, 56px / 36px mobile, tracking-tight, leading-[1.1]

Train your team to actually use Claude

H2 section — font-display, 40px / 28px mobile, tracking-tight, leading-[1.2]

Section heading

H3 card — font-body 600, 24px / 20px mobile, leading-[1.3]

Offer or card title

H4 subsection — font-body 600, 20px / 18px mobile, leading-[1.4]

Subsection or FAQ question

Body large — font-body 400, 18px / 16px mobile, leading-relaxed

Lead paragraph or section intro. Warm, direct, professional.

Body — font-body 400, 16px, leading-relaxed

Body text for card content, list items, and descriptions. Never go below 16px for body copy.

Body small / caption — font-body 400, 14px, text-secondary

Metadata, session times, disclaimers, small-print.

Eyebrow — font-body 500, 12px, uppercase, tracking-[0.05em], terracotta

Claude-specific training

Price display — font-display, 48px, terracotta

$2,997

Stat number — font-display, 56px, white (on dark bg)

94%

adoption rate within 30 days

Spacing & Layout

TokenDesktopMobile
Max content width1200px—
Horizontal paddingpx-20 (80px)px-5 (20px)
Section vertical spacingpy-30 (120px)py-20 (80px)
Between sub-sectionsgap / mb-16 (64px)mb-12 (48px)
Heading → first contentmt-8 (32px)mt-6 (24px)
Card border-radiusrounded-xl (12px)rounded-xl
Card paddingp-8 (32px)p-6 (24px)

Buttons

Get Started

default (hero CTA)

default (no chevron)

secondary

ghost

on dark (bg-warmblack) — override with className

Book a Call

Button spec: font-body 600, 16px, rounded-xl, px-8 py-4, transition 150ms

default

bg-primary → hover:bg-primary/90 (terracotta). withChevron adds animated →.

GetStartedButton wraps this

secondary

border-primary text-primary → hover:bg-primary/10

ghost

no border/bg → hover:underline

Cards

Standard card — Card component

Eyebrow text

Card title

Card content. White bg, warm border, subtle shadow that deepens on hover, translateY(-2px).

Pain point card — left 4px terracotta border, no full border

Pain point title

Variant with left accent border instead of full border. Used on PainPoints section.

Offer card — eyebrow + price + bullets + ghost CTA

Most Popular

Team Activation Sprint

4-Week Team Activation

$4,997

Your team goes from zero to fluent in Claude — with a custom playbook built for your workflows.

  • ✓Custom Claude playbook
  • ✓4 live training sessions
  • ✓30-day adoption plan

Badge

Most Popular

default

Recommended

success green

New

dark

Badge: bg-terracotta, text-white, rounded-full, px-3 py-1, text-xs, font-semibold, uppercase, tracking-wide

SectionWrapper

bg='primary' — warmbg (#FAFAF8)

Content area — py-20 md:py-30, max-w-[1200px] mx-auto, px-5 md:px-10 lg:px-20

bg='secondary' — pampas (#F4F3EE)

Content area — py-20 md:py-30, max-w-[1200px] mx-auto, px-5 md:px-10 lg:px-20

bg='dark' — warmblack (#1C1917)

Content area — py-20 md:py-30, max-w-[1200px] mx-auto, px-5 md:px-10 lg:px-20

CopyablePrompt

theme="dark" (default) — with label row

Prompt

You are a Claude training assistant for [Company].
Always respond in plain language. When in doubt, ask a clarifying question.

theme="dark" — no label (floating copy button)

npm run dev

theme="light" — with label row

Example

Summarize this meeting transcript in bullet points. Focus on decisions made and open questions.

Props: code (required), label?, language=prompt|bash, theme=dark|light

Testimonials

2-column grid (default when 2+ items)

What clients say

Real results, real teams

“Nicole made Claude feel approachable for the whole team. Within a week everyone had their own working system.”

Sarah K.

VP of Operations

“I thought we'd need a technical co-founder to implement AI. The Quick Start showed me I was wrong.”

Marcus T.

Founder, consulting firm

Single testimonial (centered, max-w-2xl)

“Best $2,500 I've spent on the business this year. The custom workshop paid for itself in the first month.”

Workshop participant

Props: testimonials[] (required), eyebrow?, heading?, bg=primary|secondary|dark

All components

components/ui/

Button

variant=default|secondary|ghost|link. Accepts href for Link rendering. withChevron prop available.

Card

White bg, warm border, hover shadow + lift. className override.

Badge

Pill label. Default terracotta. Override className for color.

SectionWrapper

Layout shell. bg=primary|secondary|dark. id for anchor links.

CopyablePrompt

Code/prompt block with copy button. theme=dark|light, language=prompt|bash.

get-started-button

Convenience wrapper: primary Button with chevron. No props.

EmailCaptureConvertKit

Email form → /api/subscribe → ConvertKit. tagId required. showName, downloadUrl, successMessage optional.

components/brand/

Logo

variant=default|inverse|icon. SVG starburst + text. default=light bg, inverse=dark bg.

components/layout/

Header

Sticky nav. Logo + links + CTA button. Hamburger on mobile.

Footer

Dark (warmblack). Logo inverse + nav + contact.

TravelBanner

Fixed terracotta banner at top. Renders only when isTravelBannerActive() → true (lib/travel-banner.ts).

PageTransition

Full-screen curtain animation on route change. Framer Motion. 4-column stagger.

components/home/

Hero

H1 + subhead + primary CTA. bg-warmbg.

PainPoints

Pain point cards with left terracotta border.

StatsBar

Dark section. 3 stats from lib/stats.ts. font-display numbers.

OfferCards

Workshop offer cards from lib/offers.ts. Hover wave effect.

AboutBrief

2-col: photo + bio. Pampas bg.

FreeTools

Resource/tools section.

FinalCTA

Dark CTA section. White button override.

RecentWorkshops

NYTW Hackathon 2026 photo gallery with event stats.

CaseStudySection

Featured case study card — logo, metrics, pull quote, link.

RolloutJourney

4-stage rollout cards: Foundations → Custom → Clarity → Partnership.

LiveWorkshopSection

Embedded video player with mute control and custom player chrome.

components/shared/

CTA

Reusable dark CTA block. heading/subheading/buttonText/buttonHref props. Optional fallbackButtonHref/Text.

AboutNicole

Nicole bio block. Reused across offer pages. compact prop available.

Testimonials

Quote grid. testimonials[] required. eyebrow, heading, bg props. Single item → centered max-w-2xl.

JsonLd

Schema.org structured data. Supports Organization, Service, FAQ, Person, Article schemas.

components/offers/

OfferHero

Hero for individual offer pages. eyebrow/title/tagline/price/dual-CTAs. fallbackCtaHref prop for Stripe fallback.

DeliverableStack

Deliverable list with checkmark icons, descriptions, and value breakdown.

ProcessSteps

Numbered how-it-works section. 3 or 4 column grid.

FAQ

Accordion FAQ. items prop from offer data.

components/intake/

ParticipantIntakeForm

4-section pre-session form (About You, Where You Are, What Would Help, Pre-Session Try). Progress bar.

ClientPrepForm

5-section client intake (Basics, Claude Status, Business, Tools, Session). ConvertKit subscribe on success.

components/contact/

ContactContent

Full contact page — email-gated Calendly embed + Formspree contact form + ConvertKit opt-in.

Colors: globals.css @theme · Fonts: DM Serif Display (display) + DM Sans (body)