No-Code UI/UX Design for Business Site
Budget: $15 – $25 CAD
I'm seeking a talented no-code UI/UX designer and Framer specialist to create a professional and engaging website. The site will primarily serve to provide business information.
No-code UI/UX Designer & Framer Specialist” with deliverables:
• Emotion wheel SVG + style guide
• Two-page Framer site (Homepage + Partner page) with provided brand tokens and copy
• Embedded Airtable forms and anchor navigation
1. Project Overview
• Goal: Two-page Framer site to capture AI-buyer and Rights-Holder leads
• Pages:
1. Homepage (AI Companies) with single CTA “Request a Sample”
2. Partner Page (Theatre & Podcast Rights Holders) with “Apply to Partner” CTA
• Deadline: 7 calendar days from kickoff
• Deliverables:
• Fully responsive Framer site, published to your custom domain
• Embedded Airtable forms for both CTAs
• SEO tags, analytics snippet (Google Analytics / Segment)
⸻
2. Branding & Style Guide
Color Palette
• Off-White (Bg): #F5F4F3
• Charcoal (Text): #121212
• Slate Gray (Subtext): #5A5A5A
• Cobalt Blue (Primary CTA): #3366FF
• Soft Gold (Accent 2): #D4B16A
Typography (Google Fonts – Inter)
• H1–H3: Inter Bold
• Subheads & Buttons: Inter Medium
• Body Copy: Inter Regular
• Line-heights: Headlines 1.2; Body 1.5
Layout & Spacing
• Container: Max width 1200px, centered
• Grid: 12-col, 24px gutter, 8px baseline
• Section Padding: 80px top & bottom
⸻
3. Assets to Supply
1. Logo (lowercase “causation ai”) in SVG + PNG
2. Emotion Wheel SVG (600×600px) as spec’d
3. Hero Background stills or video loop (faded diverse faces)
4. Icon Set (line-art in Cobalt Blue) for “What We Do” & bullets
5. Brand Board PDF (colors, fonts, spacing examples)
⸻
4. Copy & Section-by-Section Spec
A. Homepage (AI Buyers)
1. Hero
• Headline (H1): Train AI to Feel.
• Subhead: Emotion-rich training data from live performance—ethically licensed & expertly annotated.
• CTA Button: Request a Sample (scroll to form)
2. What We Do
• Title (H2): What We Do
• 3 Cards (icon + title + body)
1. Licensed Content: Source live performances, fully rights-cleared.
2. Clip & Annotate: AI-powered plus human-verified emotion tags.
3. Deploy & Tune: Integrate precise emotion data via API or download.
3. Our Emotion Dataset
• Title (H2): Our Emotion Dataset
• Caption: 98 signals • 48 emotion states • 6 families • 3 intensities • 3 arcs
• Embed: SVG wheel centered
4. Why Emotion Matters
• Title (H2): Why Emotion Matters
• Bullets (icon + text):
• Alignment & Safety: Models that “feel” avoid tone-deaf responses.
• Natural Dialogue: Unlock believable chatbots & NPCs.
• Creative AI: Script scenes with genuine emotional depth.
• Multimodal Insight: Voice, face & context trained together.
• Domain Tuning: From therapy bots to gaming, tune with precision.
5. Our Data Difference
• Title (H2): Our Data Difference
• 2-Column Grid:
• Left (Causation AI): bullet list in #121212
• Right (Generic Data): bullet list in #5A5A5A
6. Request a Sample
• Title (H2): Request a Sample
• Form Embed: Airtable form (see details below)
• Form Fields:
• Name (text)
• Email (email)
• Company / Lab (text)
• Use Case (dropdown: LLM, Voice Agent, Gaming NPC, Therapeutic AI, Other)
• Desired Emotions / Volume (text)
7. Footer
• Logo + nav (Home • Partner With Us) + contact email in Inter Regular 14px #5A5A5A
⸻
B. Partner Page (Rights Holders)
1. Hero
• Headline (H1): Partner with Causation AI
• Subhead: Monetize your performance archives—share in the upside of emotion-first AI.
• CTA Button: Apply to Partner (scroll to form)
2. How It Works
• Title (H2): How It Works
• 3 Steps (icon + text):
1. License your content
2. We clip & annotate with scientific rigor
3. You earn a transparent revenue share
3. Benefits
• Title (H2): Benefits
• Bullet List: No cloning risk • Transparent revenue tracking • New scalable income
4. Apply to Partner
• Title (H2): Apply to Partner
• Form Embed: Airtable form
• Form Fields:
• Name, Email, Organization
• Content Type (dropdown: Live Theatre, Podcast, Other)
• Archive Size (hours)
• Interest (dropdown: Pilot, Licensing, Demo)
5. Footer
• Same as Homepage
⸻
5. Forms & CMS Integration
• Airtable Base:
• Tables: Sample Requests, Partner Inquiries
• Fields match form fields above + Timestamp
• Form Embeds:
• Copy embed code from Airtable → paste into Framer’s HTML embed block
• On submit → show inline “Thank you” message
• Notifications:
• Set up a Zapier zap: New Record → Email/Slack notification
⸻
6. Technical & SEO
• Custom Domain: www.causation.ai
• SSL: auto-provisioned by Framer
• SEO Meta:
• Title (Home): Causation AI | Train AI to Feel
• Description: Emotion-rich training data from live performance—ethically licensed & expertly annotated.
• Title (Partner): Partner with Causation AI
• Description: Monetize your archives—share in the upside of emotion-first AI datasets.
• Analytics Snippet: Paste Google Analytics (or Segment) script in site header
For the Emotion Wheel
1. Artboard & Geometry
• Canvas: 600 × 600 px
• Center: (300 px, 300 px)
• Rings (from center):
• Inner radius: 80 px
• Middle radius: 180 px
• Outer radius: 280 px
• Slices: 6 equal wedges (60° each)
2. Taxonomy
Slice (Primary Family)
Sub-Emotion States (Outer Ring, Clockwise)
Joy
happiness • serenity • ecstasy • cheerfulness • relief • optimism • pride • amusement
Trust
admiration • acceptance • devotion • respect • appreciation • reliance • sincerity • comfort
Fear
terror • apprehension • anxiety • dread • panic • horror • worry • unease
Surprise
amazement • shock • astonishment • wonder • curiosity • startle • intrigue • bewilderment
Sadness
sorrow • grief • nostalgia • despair • gloom • disappointment • loneliness • regret
Disgust
revulsion • contempt • disdain • loathing • aversion • irritation • resentment • distaste
⸻
3. Intensity Bands & Arc Profiles
• Intensity Rings:
• 0–80 px “Soft”
• 80–180 px “Steady”
• 180–280 px “Soaring”
• Arc Icons: placed at inner ring, center of each slice:
• Burst: ▲
• Sustain: ▬
• Fade: ▼
⸻
4. Color & Typography
• Slice Fill:
• Base hue Cobalt Blue #3366FF
• “Soft” band = 20 % opacity
• “Steady” band = 50 % opacity
• “Soaring” band = 100 % opacity
• Arc Icons: Soft Gold #D4B16A
• Text:
• Core Labels (Middle Ring): Inter Bold, 18 px, #121212
• Sub-Emotion Labels: Inter Regular, 12 px, #5A5A5A
⸻
5. Layering & Naming
• Group: EmotionWheel
• Rings: Ring-Inner, Ring-Middle, Ring-Outer
• Slices: Slice-Joy, Slice-Trust, … Slice-Disgust
• Within each Slice:
• Band-Soft, Band-Steady, Band-Soaring
• CoreLabel (the family name)
• SubLabels (each of the 8 states as Sub-joy-happiness, etc.)
• Arc-Burst / Arc-Sustain / Arc-Fade
⸻
6. Export Instructions
• Format: SVG (with viewBox="0 0 600 600")
• Text: either as <text> elements or converted to outlines—if text remains selectable, ensure each has a clear class or id.
• IDs / Classes: assign id="slice-joy", class="core-label", etc., so Framer can target or animate later.
• Optimization: strip metadata, keep paths and groups only.
⸻
Hand-off checklist for your designer:
• Figma/Illustrator file with named layers
• Exported, optimized SVG
• PNG fallback (600 × 600 px)
No-code UI/UX Designer & Framer Specialist” with deliverables:
• Emotion wheel SVG + style guide
• Two-page Framer site (Homepage + Partner page) with provided brand tokens and copy
• Embedded Airtable forms and anchor navigation
1. Project Overview
• Goal: Two-page Framer site to capture AI-buyer and Rights-Holder leads
• Pages:
1. Homepage (AI Companies) with single CTA “Request a Sample”
2. Partner Page (Theatre & Podcast Rights Holders) with “Apply to Partner” CTA
• Deadline: 7 calendar days from kickoff
• Deliverables:
• Fully responsive Framer site, published to your custom domain
• Embedded Airtable forms for both CTAs
• SEO tags, analytics snippet (Google Analytics / Segment)
⸻
2. Branding & Style Guide
Color Palette
• Off-White (Bg): #F5F4F3
• Charcoal (Text): #121212
• Slate Gray (Subtext): #5A5A5A
• Cobalt Blue (Primary CTA): #3366FF
• Soft Gold (Accent 2): #D4B16A
Typography (Google Fonts – Inter)
• H1–H3: Inter Bold
• Subheads & Buttons: Inter Medium
• Body Copy: Inter Regular
• Line-heights: Headlines 1.2; Body 1.5
Layout & Spacing
• Container: Max width 1200px, centered
• Grid: 12-col, 24px gutter, 8px baseline
• Section Padding: 80px top & bottom
⸻
3. Assets to Supply
1. Logo (lowercase “causation ai”) in SVG + PNG
2. Emotion Wheel SVG (600×600px) as spec’d
3. Hero Background stills or video loop (faded diverse faces)
4. Icon Set (line-art in Cobalt Blue) for “What We Do” & bullets
5. Brand Board PDF (colors, fonts, spacing examples)
⸻
4. Copy & Section-by-Section Spec
A. Homepage (AI Buyers)
1. Hero
• Headline (H1): Train AI to Feel.
• Subhead: Emotion-rich training data from live performance—ethically licensed & expertly annotated.
• CTA Button: Request a Sample (scroll to form)
2. What We Do
• Title (H2): What We Do
• 3 Cards (icon + title + body)
1. Licensed Content: Source live performances, fully rights-cleared.
2. Clip & Annotate: AI-powered plus human-verified emotion tags.
3. Deploy & Tune: Integrate precise emotion data via API or download.
3. Our Emotion Dataset
• Title (H2): Our Emotion Dataset
• Caption: 98 signals • 48 emotion states • 6 families • 3 intensities • 3 arcs
• Embed: SVG wheel centered
4. Why Emotion Matters
• Title (H2): Why Emotion Matters
• Bullets (icon + text):
• Alignment & Safety: Models that “feel” avoid tone-deaf responses.
• Natural Dialogue: Unlock believable chatbots & NPCs.
• Creative AI: Script scenes with genuine emotional depth.
• Multimodal Insight: Voice, face & context trained together.
• Domain Tuning: From therapy bots to gaming, tune with precision.
5. Our Data Difference
• Title (H2): Our Data Difference
• 2-Column Grid:
• Left (Causation AI): bullet list in #121212
• Right (Generic Data): bullet list in #5A5A5A
6. Request a Sample
• Title (H2): Request a Sample
• Form Embed: Airtable form (see details below)
• Form Fields:
• Name (text)
• Email (email)
• Company / Lab (text)
• Use Case (dropdown: LLM, Voice Agent, Gaming NPC, Therapeutic AI, Other)
• Desired Emotions / Volume (text)
7. Footer
• Logo + nav (Home • Partner With Us) + contact email in Inter Regular 14px #5A5A5A
⸻
B. Partner Page (Rights Holders)
1. Hero
• Headline (H1): Partner with Causation AI
• Subhead: Monetize your performance archives—share in the upside of emotion-first AI.
• CTA Button: Apply to Partner (scroll to form)
2. How It Works
• Title (H2): How It Works
• 3 Steps (icon + text):
1. License your content
2. We clip & annotate with scientific rigor
3. You earn a transparent revenue share
3. Benefits
• Title (H2): Benefits
• Bullet List: No cloning risk • Transparent revenue tracking • New scalable income
4. Apply to Partner
• Title (H2): Apply to Partner
• Form Embed: Airtable form
• Form Fields:
• Name, Email, Organization
• Content Type (dropdown: Live Theatre, Podcast, Other)
• Archive Size (hours)
• Interest (dropdown: Pilot, Licensing, Demo)
5. Footer
• Same as Homepage
⸻
5. Forms & CMS Integration
• Airtable Base:
• Tables: Sample Requests, Partner Inquiries
• Fields match form fields above + Timestamp
• Form Embeds:
• Copy embed code from Airtable → paste into Framer’s HTML embed block
• On submit → show inline “Thank you” message
• Notifications:
• Set up a Zapier zap: New Record → Email/Slack notification
⸻
6. Technical & SEO
• Custom Domain: www.causation.ai
• SSL: auto-provisioned by Framer
• SEO Meta:
• Title (Home): Causation AI | Train AI to Feel
• Description: Emotion-rich training data from live performance—ethically licensed & expertly annotated.
• Title (Partner): Partner with Causation AI
• Description: Monetize your archives—share in the upside of emotion-first AI datasets.
• Analytics Snippet: Paste Google Analytics (or Segment) script in site header
For the Emotion Wheel
1. Artboard & Geometry
• Canvas: 600 × 600 px
• Center: (300 px, 300 px)
• Rings (from center):
• Inner radius: 80 px
• Middle radius: 180 px
• Outer radius: 280 px
• Slices: 6 equal wedges (60° each)
2. Taxonomy
Slice (Primary Family)
Sub-Emotion States (Outer Ring, Clockwise)
Joy
happiness • serenity • ecstasy • cheerfulness • relief • optimism • pride • amusement
Trust
admiration • acceptance • devotion • respect • appreciation • reliance • sincerity • comfort
Fear
terror • apprehension • anxiety • dread • panic • horror • worry • unease
Surprise
amazement • shock • astonishment • wonder • curiosity • startle • intrigue • bewilderment
Sadness
sorrow • grief • nostalgia • despair • gloom • disappointment • loneliness • regret
Disgust
revulsion • contempt • disdain • loathing • aversion • irritation • resentment • distaste
⸻
3. Intensity Bands & Arc Profiles
• Intensity Rings:
• 0–80 px “Soft”
• 80–180 px “Steady”
• 180–280 px “Soaring”
• Arc Icons: placed at inner ring, center of each slice:
• Burst: ▲
• Sustain: ▬
• Fade: ▼
⸻
4. Color & Typography
• Slice Fill:
• Base hue Cobalt Blue #3366FF
• “Soft” band = 20 % opacity
• “Steady” band = 50 % opacity
• “Soaring” band = 100 % opacity
• Arc Icons: Soft Gold #D4B16A
• Text:
• Core Labels (Middle Ring): Inter Bold, 18 px, #121212
• Sub-Emotion Labels: Inter Regular, 12 px, #5A5A5A
⸻
5. Layering & Naming
• Group: EmotionWheel
• Rings: Ring-Inner, Ring-Middle, Ring-Outer
• Slices: Slice-Joy, Slice-Trust, … Slice-Disgust
• Within each Slice:
• Band-Soft, Band-Steady, Band-Soaring
• CoreLabel (the family name)
• SubLabels (each of the 8 states as Sub-joy-happiness, etc.)
• Arc-Burst / Arc-Sustain / Arc-Fade
⸻
6. Export Instructions
• Format: SVG (with viewBox="0 0 600 600")
• Text: either as <text> elements or converted to outlines—if text remains selectable, ensure each has a clear class or id.
• IDs / Classes: assign id="slice-joy", class="core-label", etc., so Framer can target or animate later.
• Optimization: strip metadata, keep paths and groups only.
⸻
Hand-off checklist for your designer:
• Figma/Illustrator file with named layers
• Exported, optimized SVG
• PNG fallback (600 × 600 px)