| name | clip2earn-brand |
| description | Brand guidelines, voice, and design system for Clip2Earn — EMEA creator program infrastructure (sub-brand of Bakchich). Use when creating ANY content or UI for Clip2Earn — pitch decks, presentations, blog posts, ad copy, social captions, video scripts, creative briefs, landing pages, email campaigns, web app screens, or component code. Covers both audiences (creators + brands/SaaS founders), two distinct voice calibrations, the full HeroUI-based color system, Chakra Petch/Inter/Fira Code typography, shadows, radii, and iconography. Trigger this skill whenever the user mentions Clip2Earn, clip2earn.money, or asks to write content / build UI for an underground UGC marketplace OR a B2B creator-program infrastructure pitch. |
Clip2Earn Brand & Design System
Identity
Name: Clip2Earn (wordmark: CLIP2EARN all caps, bold, tracking-tight — reserved for navbar/footer)
URL: clip2earn.money
Parent: Bakchich (footer only on B2B front-facing assets)
Geography: EMEA — MENA, Francophone Africa, Europe
Archetype: The Outlaw (quiet for B2B, loud for creators)
Default theme: DARK
Positioning (single source of truth):
We help startups and SaaS companies launch and scale creator programs — unlike Bounty (Shopify-locked, US-only) and Whop (marketplace-only, no brand tools) — by giving them the full infrastructure: recruit, manage, and pay creators at scale, under their own brand.
Tagline: "We sell you the engine, not the ride."
Two audiences, one truth:
- CREATORS → Clip. Get paid per 1K real views. Raw content welcome. No approval needed.
- BRANDS / FOUNDERS → Launch your own creator program. Recruit, manage, pay at scale. Under your brand. No agency.
Core Belief & Worldview
Attention moved. Influencers don't have it anymore. Random creators do. We built the infrastructure for what's already happening.
Old World vs New World
| OLD WORLD | NEW WORLD |
|---|
| Brands waste $50K on polished ads nobody watches | Random creators make raw clips that go nuclear viral |
| Influencers fake their lives for brand deals | Creators paid on real organic performance |
| Commission-hungry marketplaces lock you in | Brands own their program — full white-label stack |
| Fake views, opaque metrics, black-box payouts | Fraud detection, escrow, view tracking — every dinar / euro accountable |
The Enemy
Polished influencers. Wasted ad budgets. $50K campaigns that get 47 views. Commission-hungry marketplaces. Platforms locked to one country or one store.
The Hero
Raw creators making clips that perform. Founders who want to own their growth engine instead of renting it.
Core Values
- Infrastructure over service. We sell the engine, not the ride. Brands own the program.
- Radical transparency. Fraud detection, escrow, view tracking. No black boxes.
- Earn what you make. Creators paid on real organic performance. No fake metrics.
- Built for the margins. EMEA-first. That's not a niche, it's a head start.
Voice — TWO CALIBRATIONS, ONE WORLDVIEW
Universal rules (apply to both audiences)
- Sentence case always. ALL CAPS is reserved for the
CLIP2EARN wordmark.
- No exclamation marks. Ever.
- No emoji in body copy. Exceptions: mobile icon-buttons (
📅, 👤), quick hero ornamentation (🎉), AI-prompt help blocks (🎯, 📋, ⚠️).
- Pronouns: "We" for Clip2Earn, "You" for the reader. Never "users." Say "creators" or "brands" explicitly.
- Numbers over adjectives. Never "10× your growth." Always "€2.50 / 1K views", "24–72h approval SLA", "10% platform fee", "1,500+ verified creators".
- Cite a unit every time you cite a feature. "Funds are locked until deliverables are approved" beats "peace of mind."
- Outlaw framing, never trash-talk. Name the model we break. Precise contrast, not insults.
- Multi-lingual discipline. Every string short, literal, idiom-free — EN / FR / AR with RTL.
Voice A — CREATORS (loud Outlaw)
- Bold. Underground. Cold truth. Anti-establishment.
- Calm and cold, not hype. Matter-of-fact. Like someone who already knows they won.
- Short sentences. Fragments preferred.
- CTAs = warnings WITHOUT exclamation: "Start clipping. Or get clipped."
- "Raw" over "authentic". "Clips" over "content". "Perform" over "engagement".
- "Broken → Fixed" structure. "That's broken. We fixed it." as universal closer.
- "Kids" allowed in ad/social short only — never in LP, blog, deck, email, or app UI.
Voice B — BRANDS / FOUNDERS (quiet Outlaw)
- Precise. Underground. Uncompromising. Proof over promise.
- We don't shout. We let results speak. Founder Slack, not startup-awards stage.
- Every claim specific, backed by a unit.
- Declarative CTAs. No warnings, no dares. Founders want demos, not threats.
- Named infrastructure: fraud detection, escrow, view tracking, white-label, full stack, KYC.
Tone Calibration Matrix
| Content Type | Audience | Dial | Notes |
|---|
| Ad copy / social short | Creators | Max edge | Fragments, warning CTA, "kids" OK |
| Landing page creator-side | Creators | Bold + clear | Underground, stats hit hard, arrow CTAs |
| Video scripts | Creators | Cold & certain | VO calm. Silence > hype. Hard cuts. |
| Landing page brand-side | Brands | Precise + confident | Features by name. Infrastructure claims. |
| App UI / operational copy | Both | Utilitarian | "You have no campaigns yet." "Minimum amount is {x} {currency}." |
| Blog / long-form | Both | Confident insider | Why old model is dead. No corporate. |
| Pitch deck / investor | Brands | Controlled fire | Outlaw worldview, data-backed |
| Cold email B2B | Brands | Direct, no-BS | 3–5 sentences. Specific unit. Declarative CTA. |
| Cold email creators | Creators | Direct + edge | Hook on payout, not "opportunity" |
Do / Don't
| Do | Don't |
|---|
| "Recruit, manage, and pay creators at scale — under your own brand." | "Supercharge your creator marketing with our cutting-edge platform!" |
| "Funds are locked until deliverables are approved." | "Your money is super safe with us, don't worry." |
| "We take a 10% escrow & platform fee per completed payout." | "Simple, affordable pricing for every team." |
| "Built for the margins: MENA, Francophone Africa, Europe." | "Global-first platform for creators everywhere." |
| "Fraud detection runs on every submission." | "Peace of mind with industry-leading security." |
BANNED WORDS (everywhere)
"Authentic" / "Authenticity", "Partnership" / "Partner with", "Engagement rate", "Brand Ambassador", "Influencer Marketing", "Leverage", "Synergy", "Ecosystem", "Excited to announce", "We're thrilled", "10× your growth", "Users" (say "creators" or "brands"), "Supercharge", "Peace of mind", "Industry-leading", "Cutting-edge".
NOW ALLOWED (B2B infrastructure context)
"Creator program", "Infrastructure", "Full stack", "White-label", "Creator economy", "Escrow", "View tracking", "Fraud detection", "SLA", "KYC-verified".
Taglines & CTAs
Primary
| Audience | Primary | Alt |
|---|
| Creators | "Start clipping. Or get clipped." | "Raw wins." |
| Brands | "Build your army of creators." | "Build your creator program without hassle." |
CTA format
- Arrow-terminated, plain verbs.
"I'm a creator →", "Launch a campaign →", "Request €223.50 →"
- No exclamation marks.
- Creator warning-style CTAs still end with a period, not a bang: "Start clipping. Or get clipped."
- Brand declarative CTAs: "See the infrastructure →", "Run your own creator program →"
CTA bank
Creators: "Start clipping. Or get clipped." · "Raw wins." · "Underground only." · "Pay per view. Not per post."
Brands: "Build your army of creators." · "Build your creator program without hassle." · "See the infrastructure." · "Run your own creator program." · "Own the engine. Not the agency." · "Performance or nothing."
Shared: "That's broken. We fixed it." · "Your customers become your marketing team." · "No followers needed. Just clips that perform."
Competitive Grid
Use in pitch decks, brand-side LPs, cold emails.
| Platform | Gap | Our edge |
|---|
| Bounty | Shopify-only, US/Canada only | Any brand, any market |
| Whop | Marketplace only, no brand tools | Full white-label stack |
| Geniepot | Morocco only, no fraud detection | MENA + Europe + real fraud tech |
Stats Bank
Pick by context. Never dump all at once.
| Stat | Use for |
|---|
| $1M+ paid out | Both audiences. Primary social proof. |
| 1,500+ verified creators | Creator-side social, brand-side supply proof |
| 127 campaigns | Brand-side trust — volume proof |
| CPM model (€2.50 / 1K views typical) | Both — pricing clarity |
| 10% escrow & platform fee | Brand-side — pricing transparency |
| 24–72h approval SLA | Brand-side — operational trust |
| Fraud detection / Escrow / View tracking | Brand-side only — infra credibility |
| KYC-verified creators | Brand-side — trust |
Number format
- Currency:
$1M+, €1,500.00, TND 4.00
- Large numbers:
400K+ views, 1,500+ creators
- Rates:
€2.50 / 1K (CPM format)
- Percentages:
10% (no space)
Visual System — THIS PALETTE PREVAILS
The design system is HeroUI-based, dark by default. Full token file: references/colors_and_type.css. Raw tokens: references/design.json.
Color — Semantic (dark default)
| Token | Value | Use |
|---|
--background | #000000 | Page background |
--foreground | #ECEDEE | Primary text |
--surface-1 | #0B0B0E | Main surface (cards, nav) |
--surface-2 | #0A0A0D | Deeper surface |
--surface-3 | #18181b | Tertiary (zinc-900) |
--divider | rgba(255,255,255,0.15) | Hairline dividers |
--border-soft | rgba(255,255,255,0.10) | Card borders |
--primary | #006FEE | Links, focus rings, FAQ, Pro tags |
--secondary | #9353d3 | HeroUI purple-400 (dark override) |
--success | #17c964 | Success states |
--warning | #fbbf24 | Warning (dark override) |
--danger | #f87171 | Error (dark override) |
--text-1 | #FFFFFF | Emphasis text |
--text-2 | rgba(255,255,255,0.65) | Body |
--text-3 | #A8A8A8 | Muted |
--text-muted | rgba(255,255,255,0.50) | Very muted |
Color — Light theme (for admin / marketing sub-sections)
--background: #FFFFFF · --foreground: #11181C · --primary: #006FEE · --secondary: #7828c8 · --warning: #f5a524 · --danger: #f31260 · text scale #11181C → #52525b → #71717a → #a1a1aa.
Signature gradients
| Gradient | Value | Use |
|---|
| Brand CTA | linear-gradient(90deg, #7828c8 0%, #d946ef 100%) | Primary CTAs, gradient-clipped Chakra Petch display words |
| Violet | linear-gradient(180deg, #FF1CF7 0%, #b249f8 100%) | Accent |
| Blue | linear-gradient(180deg, #5EA2EF 0%, #0072F5 100%) | Alt heading clip |
| Foreground | linear-gradient(180deg, #FFFFFF 0%, #4B4B4B 100%) | Subtle text dim |
| FAQ bubble | linear-gradient(180deg, #3B82F6 0%, #3F53FF 100%) | FAQ blue bubble |
Accents
| Token | Value | Use |
|---|
--accent-red | #E64030 | Announcement red — single punctuation accent on hero badge |
HeroUI scales (tool use only — prefer semantic tokens)
Blue #e6f1fe → #001731 (500 #006FEE). Purple #f2eafa → #180828 (500 #7828c8). Green #e8faf0 → #052814 (500 #17c964). Yellow #fefce8 → #312107 (500 #f5a524). Red #fee7ef → #310413 (500 #f31260). Pink #ffedfa → #331029 (500 #ff4ecd). Cyan #F0FCFF → #053B48 (500 #7EE7FC). Zinc #fafafa → #18181b (500 #71717a).
Dark overrides: --danger-dark-500: #ef4444, --warning-dark-500: #f59e0b.
Typography
Families
| Font | Weights | Use |
|---|
| Chakra Petch | 400/500/600/700 | Hero & display headings ONLY — gradient-clipped on emphasis words |
| Inter | 400/500/600/700/800 | h2/h3, body, UI, everything else |
| Fira Code | 400/500/600 | Code, IBANs, tabular figures |
| Plus Jakarta Sans | 400–700 | --font-general-sans fallback |
Scale
--text-xs 0.75rem · sm 0.875 · base 1rem · lg 1.125 · xl 1.25 · 2xl 1.5 · 3xl 1.875 · 4xl 2.25 · 5xl 3 · 6xl 3.75
Headings
h1 { font-family: Chakra Petch; font-weight: 700; font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.1; letter-spacing: -0.02em; }
h2 { font-family: Inter; font-weight: 600; font-size: clamp(1.875rem, 3.5vw, 2.375rem); line-height: 1.3; letter-spacing: -0.015em; }
h3 { font-family: Inter; font-weight: 600; font-size: 1.25rem; line-height: 1.3; }
.display { font-family: Chakra Petch; font-size: clamp(2.25rem, 6vw, 3.75rem); letter-spacing: -0.025em; }
.gradient-text { background: var(--brand-gradient); -webkit-background-clip: text; color: transparent; }
.eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
Headline pattern
Gradient-clip on emphasis words (violet→fuchsia), plain foreground on the frame. Terminal word is the gradient-clip target. Rotating noun pattern: "The marketplace that turns your views into {revenue | cash | growth}."
Borders, Radii, Shadows
Radii
--radius-sm 6px · md 10px · lg 14px (testimonials) · xl 20px (most cards) · 2xl 24px · pill 9999px
Borders
border-black/10 / border-white/10. Dividers rgba(0,0,0,.15) / rgba(255,255,255,.15).
Shadows
| Token | Value |
|---|
--shadow-card (light) | 0 10px 30px -12px rgba(0,0,0,0.25) |
--shadow-card-dk | 0 10px 30px -12px rgba(0,0,0,0.60) |
--shadow-cta | 0 2px 8px rgba(84,96,233,0.35) |
--shadow-cta-dk | 0 2px 10px rgba(84,96,233,0.45) |
--shadow-popover | 0 20px 40px -16px rgba(0,0,0,0.35) |
--shadow-indigo | 0 6px 16px -8px rgba(99,102,241,0.60) |
--shadow-bubble | 0 10px 30px -12px rgba(63,83,255,0.55) |
Transparency + blur
Navbar, popovers, testimonial cards, hero announcement → backdrop-blur + bg-white/90 or bg-[#0B0B0E]/80.
Layout & Motion
Container & spacing
- Marketing container:
max-w-7xl (1280px), px-4 → md:px-8
- Sections:
py-28 / py-32 on desktop
- Grid cards:
gap-6 / gap-8. Chip rows: gap-2 / gap-3
- Responsive: stack mobile → 2-up at
md → 3–4-up at lg
Spacing tokens
--sp-1 4px · 2 8 · 3 12 · 4 16 · 5 20 · 6 24 · 8 32 · 10 40 · 12 48 · 16 64 · 20 80 · 24 96
Motion (Framer Motion)
- Hero reveal:
y: 25 → 0, opacity: 0 → 1, duration: 1.25, ease: "easeInOut", stagger 0.25 / 0.5 / 0.75 / 1
- FAQ bubble:
spring stiffness: 240, damping: 22
- Carousels:
easeInOut 0.6s
- Typing headline: 90ms type, 50ms delete, 1400ms pause at word boundary
- Respect
useReducedMotion everywhere
- No bounces. No elastic springs on heavy objects. Outlaw restraint applies to motion.
Hover / press
- Nav:
text-zinc-500 → text-white, bg rgba(255,255,255,0.05)
- CTAs:
hover:brightness-110, -translate-y-[2px]
- Press:
active:translate-y-0, no color shift
- Hero announcement:
hover:-rotate-1 (only permitted playful microinteraction)
Backgrounds
- Animated grid behind hero — subtle, violet-tinted, faded with gradient mask
- Brand callout pattern — lavender-tinted cell with
--brand-purple left-accent border (signature)
- Giant background word trick (e.g., faint
"FAQ" at text-[22vw] behind bubbles)
- No stock photography. Only illustrated assets: scissors-mustache mark +
make_money.svg
Iconography
Sources (in order of preference)
@heroicons/react v2 (outline) — app & landing UIreact-icons — FaInstagram (footer), FiChevronRight (FAQ)- Custom SVGs —
components/icons.tsx: Logo, LogoTransparent, Discord, Twitter, Github, Moon/Sun, Heart, Search, Flag
Rules
- Default size 20–24px.
h-4 w-4 inline in text. h-5 w-5 for primary actions.
- Stroke 1.5–2px, outline style. Never mix outline + filled in same row.
currentColor for fill/stroke — inherits theme.- Flags = stylized circles with country code text.
- Logo mark = "scissors + mustache" face.
assets/logos/logo-icon.png (filled bg), assets/logos/logo-transparent.png (white on transparent). Pairs with CLIP2EARN wordmark (bold, tracking-tight).
Emoji policy
Body copy = no emoji. Allowed only: mobile icon-buttons, hero ornamentation, AI-prompt help blocks. Never hero headline, section heads, CTAs.
Component Patterns (HeroUI / Tailwind)
<Button className="bg-gradient-to-r from-[#7828c8] to-[#d946ef] text-white rounded-full px-6 hover:brightness-110 active:translate-y-0 hover:-translate-y-[2px] shadow-[0_2px_10px_rgba(84,96,233,0.45)]">
Launch a campaign →
</Button>
<Button variant="outline" className="border-white/20 text-white hover:bg-white/10 rounded-full">
// Card (dark default)
<Card className="bg-[#0B0B0E] border border-white/10 rounded-2xl shadow-[0_10px_30px_-12px_rgba(0,0,0,0.60)] hover:border-white/20">
// Stats display (Chakra Petch numbers, gradient-clipped)
<div className="font-[Chakra_Petch] font-bold text-5xl bg-gradient-to-b from-white to-[#4B4B4B] bg-clip-text text-transparent">$1M+</div>
<div className="text-[#A8A8A8] text-sm">Paid out to creators</div>
// Pill / badge
<span className="bg-white/10 text-white text-xs px-3.5 py-1.5 rounded-full font-medium">
KYC-verified
</span>
// Gradient-clipped headline word
<h1 className="font-[Chakra_Petch] font-bold text-6xl tracking-tight">
Turn your views into <span className="bg-gradient-to-r from-[#7828c8] to-[#d946ef] bg-clip-text text-transparent">revenue</span>.
</h1>
// Announcement pill
<div className="inline-flex items-center gap-2 bg-[#E64030]/10 border border-[#E64030]/30 rounded-full px-4 py-1.5 text-sm hover:-rotate-1 transition">
<span>🎉</span>
<span>$1M+ paid out</span>
</div>
Canonical Content Snippets (from repo)
- Hero:
"The marketplace that turns your views into revenue."
- Sub:
"We connect ambitious brands with bold creators: real ROI for brands, real cash for creators."
- FAQ Q:
"How does escrow protect both sides?"
- FAQ A:
"Funds are locked until deliverables are approved, reducing counterparty risk."
- Pricing:
"We take a 10% escrow & platform fee per completed payout."
- Empty state:
"You have no campaigns yet"
- Error:
"Failed to load analytics"
- CTA brand:
"Launch a campaign →", "Build your army of creators →"
- CTA creator:
"I'm a creator →", "Start clipping →"
- Payout:
"Request €223.50 →"
Usage by Context
Pitch Deck / Investor
- Voice B, Controlled fire. Dark slides (
#000 / #0B0B0E), white text.
- Chakra Petch display headings, gradient-clipped on one emphasis word.
- Include competitor grid (Bounty / Whop / Geniepot).
- Lead stat: $1M+ paid out.
- Old World / New World for problem slide.
Brand-Side Landing Page
- Voice B. Precise. Infrastructure-forward.
- Hero: Chakra Petch headline with gradient-clipped "creators" or "program", declarative CTA.
- Features section: fraud detection, escrow, view tracking named.
- Competitor grid differentiator section.
- Stats bar: $1M+ paid, 127 campaigns, 1,500+ verified creators.
Creator-Side Landing Page
- Voice A. Underground, warning CTA (no bang).
- Hero: black bg, white headline, one CTA ("Start clipping →").
- Old World / New World problem block.
- Stats: $1M+ paid out, CPM rate, 1,500+ creators.
App UI / Product
- Dark default.
#000 bg, #0B0B0E surfaces, #ECEDEE text.
- Utilitarian copy. Every string in
i18n/locales/{en,fr,ar}/common.json.
- Operational strings: cite units, rejection reasons, SLAs openly.
- Buttons: rounded-full, arrow CTAs, no exclamation.
- Trust-first: escrow, KYC, fees visible.
Ad Copy / Social
- Creator → Voice A. "kids" OK. Warning CTA. Dark visual.
- Brand → Voice B. Proof-led.
"Build your creator program without hassle."
- Never exclamation marks. One CTA per asset.
Video Scripts
- Voice A for creator-facing, Voice B for brand explainer.
- Structure: Pattern interrupt → Problem → Twist → Solution → CTA
- VO: calm, cold, matter-of-fact. Silence is a tool.
- Hard cuts only. Hold uncomfortable moments. Zero transitions.
- Contrast raw vs polished in footage itself.
Cold Email
- B2B → Voice B. 3–5 sentences. One specific unit (e.g.,
"$1M+ paid out via escrow across EMEA"). Declarative CTA: "See how it runs →".
- Creator → Voice A. Hook on payout. No fluff intros.
- Never: "excited to announce", "thrilled", exclamation marks.
Blog / Long-Form
- Insider explaining why the old model is dead.
- Short paragraphs. Fragments. Contrast pairs.
- Stats and real examples > theory.
- Never corporate. Never "we're excited to announce".
Customer Profile (B2B)
Who: Startup founder or growth lead, 25–40, EMEA. Already running creator or affiliate activity — manually, expensively, chaotically.
They want: A creator program that runs itself. Real data. Clean payouts. Zero agency dependency.
They fear: Fake views. Losing control of brand voice. Platform lock-in.
Decision driver: Proof the infrastructure is real — fraud detection, escrow, localized EMEA payouts. They pay for trust, not promises.
Relationship to Bakchich
Sub-brand. Visibility rules:
- Creator-facing assets: "Powered by Bakchich" footer OK
- Brand-facing / B2B assets: Bakchich footer only. Standalone in narrative.
- Internal / investor decks: relationship explicit (cap table, shared team)
Assets
assets/logos/
logo.svg — scissors-mustache primary logologo-transparent.png — white on transparentlogo-icon.png — filled mark (dark bg)logo-icon-large.png — high-resfavicon-32.pngmake_money.svg — hand-drawn hero illustration
References
references/colors_and_type.css — drop-in CSS variables (complete token set, both themes)references/design.json — verbatim HeroUI + brand tokens from production repo- Production stack: Next.js 15.3.1, HeroUI (NextUI fork), Tailwind CSS 4.1, Framer Motion, Clerk, Payload CMS, Prisma, Stripe
- i18n:
i18n/locales/{en,fr,ar}/common.json — every string lives here, RTL-ready
When building UI, import references/colors_and_type.css as the source of truth rather than redeclaring tokens.
