Visual Elements
C
Brand
Open Google DocOpen Drive folder
01 · Brand

Visual Elements

Colors, type, motifs, motion.

Last synced 2026-04-28

Rawgrowth.ai Visual Elements Reference

Scraped 2026-03-29 from rawgrowth.ai homepage + /offer page.

GLOBAL DESIGN SYSTEM

CSS Variables (Root)

:root {
  --radius: .625rem;
  --background: #060b08;
  --foreground: #ffffffeb;
  --card: #0a1210;
  --card-foreground: #ffffffeb;
  --primary: #0cbf6a;
  --primary-foreground: #fff;
  --secondary: #0a945214;
  --secondary-foreground: #ffffffeb;
  --muted: #ffffff08;
  --muted-foreground: #fff9;
  --accent: #0a94520a;
  --accent-foreground: #ffffffeb;
  --destructive: #ef4444;
  --destructive-foreground: #fff;
  --border: #ffffff0f;
  --input: #ffffff1a;
  --ring: #0cbf6a;
}

Body Background

  • Color: rgb(6, 11, 8) / #060b08 -- very dark green-black
  • No canvas/WebGL backgrounds
  • No background images

Atmosphere Effects (offer page)

.offer-atmosphere { z-index: -1; pointer-events: none; position: fixed; inset: 0px; overflow: hidden; }

.offer-dots {
  z-index: -1;
  background-image: radial-gradient(rgba(12, 191, 106, 0.12) 1px, rgba(0, 0, 0, 0) 1px);
  background-size: 20px 20px;
  position: fixed; inset: 0px;
  mask-image: radial-gradient(50% 40% at 50% 0px, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}

.offer-glow { filter: blur(80px); border-radius: 50%; position: absolute; }
.offer-glow-1 { background: radial-gradient(rgba(12, 191, 106, 0.06), transparent 65%); width: 600px; height: 600px; top: -200px; left: 50%; transform: translate(-50%); }
.offer-glow-2 { background: radial-gradient(rgba(12, 191, 106, 0.03), transparent 65%); width: 800px; height: 400px; top: 40%; right: -200px; }
.offer-glow-3 { background: radial-gradient(rgba(12, 191, 106, 0.04), transparent 65%); width: 600px; height: 600px; bottom: 10%; left: -100px; }

Button Shine Effect

.btn-shine {
  background-image: linear-gradient(rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 40%, rgba(0, 0, 0, 0) 50%);
  position: relative; overflow: hidden;
  box-shadow: rgba(255, 255, 255, 0.2) 0px 1px inset, rgba(12, 191, 106, 0.25) 0px 0px 40px, rgba(0, 0, 0, 0.4) 0px 4px 24px;
}
.btn-shine:hover {
  box-shadow: rgba(255, 255, 255, 0.25) 0px 1px inset, rgba(12, 191, 106, 0.3) 0px 0px 60px, rgba(0, 0, 0, 0.5) 0px 8px 40px;
}
.btn-shine::after { content: ""; border-radius: inherit; pointer-events: none; border: 1px solid; border-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.12) rgba(0, 0, 0, 0); position: absolute; inset: 0px; }
.btn-shine::before { content: ""; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0.15) 0%, transparent 50%); border-radius: 12px; position: absolute; inset: 0px; }

Animations

@keyframes offer-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

Typography

  • Headings: font-serif (serif family, likely a custom serif like Playfair or similar)
  • Italic green accent: font-serif italic text-primary for emphasis words like "AI Talent", "AI department", "one screen"
  • Body: System/sans-serif stack
  • Label text: All-caps, letter-spacing 1-2px, very small (7-9px), rgba(255,255,255,.25)

IMAGE URLs

Logo

  • White: https://rawgrowth.ai/_next/image?url=%2Flogo-white.png&w=640&q=75
  • Green icon: https://rawgrowth.ai/logo-green.png (1952x672)
  • Shield icon (watermark): https://rawgrowth.ai/0.%20Icon%20No%20BG.png (1563x1563)

Client Logos (SVG)

  • Starbucks: https://rawgrowth.ai/logos/starbucks.svg
  • Nike: https://rawgrowth.ai/logos/nike.svg
  • McKinsey: https://rawgrowth.ai/logos/mckinsey.svg
  • Terminix: https://rawgrowth.ai/logos/terminix.svg
  • JD Sports: https://rawgrowth.ai/logos/jd-sports.svg

Client Logos (PNG)

  • Sales Automation Systems: https://rawgrowth.ai/logos/sas.png
  • RemotelyX: https://rawgrowth.ai/logos/remotelyx.png
  • Above Aerosol: https://rawgrowth.ai/logos/3.png
  • Inovate: https://rawgrowth.ai/logos/4.png
  • Serrania: https://rawgrowth.ai/logos/6.png

HOMEPAGE - "THE TRANSFORMATION" SECTION (4 Phases)

Phase Card Container (shared across all 4 phases)

/* Outer card */
.phase-card {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  transition: all 400ms cubic-bezier(.4,0,.2,1);
}
.phase-card:hover {
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 24px 80px rgba(0,0,0,.35);
}

/* Top edge glow line */
.phase-card::before {
  /* pointer-events-none absolute left-0 right-0 top-0 h-px */
  background: linear-gradient(to right, transparent, rgba(255,255,255,.06), transparent);
}

/* Grid layout: alternates mockup left/right */
/* Phases 1,3: lg:grid-cols-[1.1fr_1fr] (mockup left) */
/* Phases 2,4: lg:grid-cols-[1.1fr_1fr] lg:[direction:rtl] (mockup right) */

Phase Number Badge

<span class="flex h-8 w-8 items-center justify-center rounded-lg border border-[rgba(12,191,106,.15)] bg-[rgba(12,191,106,.08)] text-xs font-bold tabular-nums text-primary">01</span>
<span class="text-[11px] font-semibold uppercase tracking-[2px] text-primary">Discovery</span>
<span class="ml-auto rounded-full border border-[rgba(255,255,255,.06)] bg-[rgba(255,255,255,.03)] px-3 py-1 text-[10px] font-medium text-[rgba(255,255,255,.35)]">Week 1-2</span>

Checkmark List Items

<div class="flex items-start gap-3">
  <div class="mt-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-[rgba(12,191,106,.12)] bg-[rgba(12,191,106,.06)]">
    <svg class="h-3 w-3 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
      <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path>
    </svg>
  </div>
  <span class="text-[.9rem] font-light text-[rgba(255,255,255,.5)]">Map all existing tools & systems</span>
</div>

PHASE 1: System Audit Dashboard Mockup

Card shell:

border-radius: 16px;
border: 1px solid rgba(255,255,255,.06);
background: #070B09;
box-shadow: 0 0 80px rgba(12,191,106,.03), 0 2px 40px rgba(0,0,0,.6);

Top bar: macOS traffic lights (red/yellow/green dots), "System Audit" label, green "Complete" status dot

Stats row (4 cols):

  • Scanned: 7/7 (white)
  • AI Score: 62% (white)
  • Bottlenecks: 2 (red rgba(248, 113, 113, 0.9))
  • Opportunities: 2 (green rgba(12, 191, 106, 0.9))

System rows (7 tools): Each has:

  • Tool icon (SVG) in colored circle with matching background
  • Tool name + progress bar + score
  • Department label
  • Hours/week (hidden on mobile)
  • Status badge: BOTTLENECK (red), CONNECTED (neutral), AI READY (green)

Tool icon SVGs (with brand colors):

  • GoHighLevel: Red rgba(248,113,113,.85) -- hexagon path
  • Slack: White rgba(255,255,255,.4) -- Slack logo SVG
  • ClickUp: Green rgba(12,191,106,.85) -- ClickUp checkmark
  • Notion: White rgba(255,255,255,.4) -- Notion N logo
  • Stripe: White rgba(255,255,255,.4) -- Stripe S logo
  • Calendly: Red rgba(248,113,113,.85) -- Calendly gear
  • Zapier: Green rgba(12,191,106,.85) -- Zapier bolt

Progress bars:

/* Container */
height: 4px; width: 80px; overflow: hidden; border-radius: 9999px;
background: rgba(255,255,255,.05);

/* Fill - color matches tool status */
height: 100%; border-radius: 9999px;
/* Red variant: */ background: linear-gradient(90deg, rgba(248,113,113,.7), rgba(248,113,113,.4));
/* Green variant: */ background: linear-gradient(90deg, rgba(12,191,106,.7), rgba(12,191,106,.4));
transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);

Animated scan line:

/* Glowing green horizontal line that scans down the rows */
background: linear-gradient(90deg, transparent 0%, rgba(12,191,106,.5) 30%, rgba(12,191,106,.8) 50%, rgba(12,191,106,.5) 70%, transparent 100%);
box-shadow: rgba(12,191,106,.3) 0px 0px 12px, rgba(12,191,106,.5) 0px 0px 4px;
transition: top 0.4s cubic-bezier(0.4, 0, 0.2, 1);

Left edge indicator (per row, for bottlenecks):

position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
background: transparent; /* becomes red for bottleneck rows */

Bottom stats row:

  • Hrs / Week: 53h (green)
  • Conversion: 2.4% (green)
  • Show Rate: 68% (green)
  • Opportunity Cost: $247K/yr (green)

Hover glow effect (top of card):

position: absolute; top: -20px; left: 50%;
width: 120%; height: 40px;
transform: translateX(-50%);
background: radial-gradient(rgba(12,191,106,.06) 0%, transparent 70%);
opacity: 0; /* fades in on hover */
transition: opacity 0.8s;

PHASE 2: Company Database Mockup

Card shell: Same as Phase 1 but bg-[#080D0B]

Top bar: Dim traffic lights (gray), "rawgrowth -- company database", green "Ingesting..." pulse

Data source tags (8 total):

  • Green (active, 5 ingested): Instagram Content, Best Performing Ads, SOPs, Emails, Sales Calls
  • Gray (pending, 3 remaining): SDR Conversations, UTM Tracking, Clients

Tag styles:

/* Active tag */
background: rgba(12,191,106,.08);
border: 1px solid rgba(12,191,106,.2);
color: rgba(12,191,106,.9);

/* Active + glowing (currently ingesting) */
box-shadow: rgba(12,191,106,.15) 0px 0px 12px;

/* Pending tag */
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
color: rgba(255,255,255,.3);

Animated Network Graph SVG (data flowing to database):

<svg viewBox="0 0 400 120" preserveAspectRatio="xMidYMid meet">
  <!-- 8 curved paths from source tags down to a central database point -->
  <!-- Active paths (5): stroke="rgba(12,191,106,.12)" with animated dots -->
  <!-- Inactive paths (3): stroke="rgba(255,255,255,.03)" no animation -->

  <!-- Animated dots on active paths: -->
  <circle r="2.5" fill="rgba(12,191,106,.7)">
    <animateMotion dur="1.8s" repeatCount="indefinite" path="M30,5 C30,50 200,70 200,115"/>
  </circle>
  <circle r="1.5" fill="rgba(12,191,106,.4)">
    <animateMotion dur="2.2s" repeatCount="indefinite" begin="0.9s" path="M30,5 C30,50 200,70 200,115"/>
  </circle>

  <!-- Central database target point -->
  <circle cx="200" cy="115" r="6" fill="none" stroke="rgba(12,191,106,.2)" stroke-width="1"/>
</svg>

Dot grid background:

background-image: radial-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
background-size: 20px 20px;
opacity: 0.3;

Database stats card:

  • Database icon SVG (ellipse + cylinder paths)
  • Company Database label + 6/8 counter
  • Records: 119,094 (green)
  • Sources: 6 (white)
  • Latency: -- (white)

Bottom progress bar: 6/8 streams, "Ingesting data..." text

PHASE 3: Agent Board Mockup

Card shell: Same bg-[#080D0B]

Top bar: "rawgrowth -- agent board", "4 Active" green pulse

Agent toast notification (slides in):

position: absolute; right: 16px; top: 48px; z-index: 20;
background: rgba(10, 14, 12, 0.92);
border: 1px solid rgba(255,255,255,.06);
backdrop-filter: blur(4px); /* backdrop-blur-sm */
opacity: 0; transform: translateY(-8px); /* animates in */
transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1);

Content: Slack icon (pink) + "Agent Update" + "Sales Agent moved $84K deal to Proposal stage"

Agent avatars (colored circles):

  • SA (Sales): background: rgba(99,102,241,.7) (indigo)
  • CA (Content): background: rgba(244,114,182,.7) (pink)
  • OA (Ops): background: rgba(251,191,36,.7) (amber)
  • AA (Analytics): background: rgba(56,189,248,.7) (sky blue)

Kanban board (3 columns):

  • To Do (white dot): Tasks with agent avatar + "queued" status
  • In Progress (amber dot): Tasks with progress bar + "working" status
  • Done (green): Completed tasks with checkmarks

Task card:

border-radius: 8px;
border: 1px solid rgba(255,255,255,.05);
background: rgba(255,255,255,.02);
padding: 8px;

Bottom bar: "7 completed today" + "24/7 autonomous"

PHASE 4: AI Department Console Mockup

Layout: Split panel -- sidebar + main work area

Sidebar:

  • Logo + "Rawgrowth AI Department" header
  • "+ New task" button
  • Active agents list (EA, Content Strategist, Sales Ops Lead, Ops, CFO)
  • User avatar "JD" (green circle) + "Jake D."

Work area:

  • Header: agent name + green "Active" pulse + shield icon
  • Watermark: Shield icon at 3% opacity, centered
  • Agent output bubble:
background: rgba(12,191,106,.12);
border: 1px solid rgba(12,191,106,.15);
border-radius: 16px;
border-top-right-radius: 4px; /* rounded-tr-sm */
  • Typing cursor: animate-pulse green bar (2px wide, h-3)
  • Delegate input field with green send arrow button

HOMEPAGE - "THE SHIFT" COMPARISON SECTION

Container

Two columns at md breakpoint, centered max-width 1200-1400px.

Section badge

<span class="mb-6 inline-flex items-center gap-2 rounded-full border border-[rgba(10,148,82,.2)] bg-[rgba(12,191,106,.08)] px-4 py-1.5 text-xs font-semibold uppercase tracking-[1.5px] text-primary">
  The Shift
</span>

"Old Way" Card

border-radius: 20px; /* xl: 24px */
border: 1px solid rgba(255,255,255,.06);
background: rgba(255,255,255,.015);
padding: 40px; /* xl: 56px */
  • Title: text-[rgba(255,255,255,.35)] (dimmed)
  • List bullets: before:bg-[rgba(255,255,255,.08)] (dim gray circles)
  • List text: text-[rgba(255,255,255,.35)] (dim)

"In-House AI Department" Card

border-radius: 20px; /* xl: 24px */
border: 1px solid rgba(10,148,82,.2); /* green border */
background: rgba(12,191,106,.03); /* slight green tint */
padding: 40px; /* xl: 56px */
  • Title: text-primary (bright green)
  • List bullets: green circles
  • List text: brighter white

Scroll-triggered fade-in animation

opacity: 0;
transform: translateY(24px);
transition: opacity 600ms cubic-bezier(.16,1,.3,1), transform 600ms cubic-bezier(.16,1,.3,1);
will-change: opacity, transform;
/* Staggered delays: 0ms, 100ms, 250ms */

OFFER PAGE (/offer) - "WHAT YOU GET" TAB

System Cards (4 systems, tab-switched)

/* Card container */
width: 100%;
max-width: 700px;
border-radius: 20px;
border: 1px solid rgba(255,255,255,.06);
background: #0A1210;
padding: 32px;

System icon badge

width: 44px; height: 44px;
border-radius: 12px;
border: 1px solid rgba(10,148,82,.2);
background: rgba(12,191,106,.08);
color: var(--primary);

Tab buttons (top row)

/* Active */
border: 1px solid var(--primary);
background: rgba(12,191,106,.1);
color: var(--primary);

/* Inactive */
border: 1px solid rgba(255,255,255,.06);
color: rgba(255,255,255,.45);

Card Data for Each System

Content Automation:

  • Icon: Checkmark in box SVG
  • Stats: 67 Pieces/Week, 4+ Platforms, 92% On-Brand
  • Replaces: $150-250K/yr marketing director

Sales Pipeline Intelligence:

  • Icon: Trend line SVG
  • Stats: 34% Close Rate, 1.2h Avg Response, 97% Follow-up Rate
  • Replaces: $10-20K/mo agency retainer

Customizable Dashboard:

  • Icon: Grid/dashboard SVG
  • Stats: $347K Revenue Tracked, 89% Margin Visibility, 142 Leads Monitored
  • Replaces: $70-100K/yr data analyst

AI Department (EA + Content + Sales Ops):

  • Icon: Globe SVG
  • Stats: 24/7 Uptime, 20h+ Saved/Week, Trained on Your Business
  • Replaces: $295K/yr in headcount (EA + Content Strategist + Sales Ops Lead)

Tab Icon SVGs

<!-- Content Automation (checkmark in box) -->
<svg viewBox="0 0 24 24" class="h-4 w-4 fill-current"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 14l-5-5 1.41-1.41L12 14.17l7.59-7.59L21 8l-9 9z"></path></svg>

<!-- Sales Pipeline Intelligence (trend line) -->
<svg viewBox="0 0 24 24" class="h-4 w-4 fill-current"><path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"></path></svg>

<!-- Company Hub Dashboard (grid) -->
<svg viewBox="0 0 24 24" class="h-4 w-4 fill-current"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"></path></svg>

<!-- AI Agent Team (globe) -->
<svg viewBox="0 0 24 24" class="h-4 w-4 fill-current"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"></path></svg>

OFFER PAGE - "THE DASHBOARD" TAB

Dashboard mockup container

max-width: 1000px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,.06);
background: #0A1210;
box-shadow: 0 20px 60px rgba(0,0,0,.4);

Top bar with macOS dots + "Live" indicator

Traffic light dots: 10px circles, full color (red #ff5f57, yellow #febc2e, green #28c840)

KPI cards (4-col grid)

Revenue (MTD): $347,200 +18.4%, Pipeline: $892,500 +24.1%, Content: 67 pieces +12 this week, Active Leads: 142 +31 new

Revenue bar chart

.offer-chart { align-items: flex-end; gap: 6px; height: 100px; display: flex; }
.offer-chart-bar { opacity: 0.7; background: rgb(12, 191, 106); border-radius: 3px 3px 0 0; width: 100%; min-height: 3px; transition: 0.3s; }
.offer-chart-bar:hover { opacity: 1; }

Agent Activity feed

Color-coded agent initials:

  • Q (Quilly/Content): rgb(12, 191, 106) green
  • L (Larry/Sales): rgb(59, 130, 246) blue
  • O (Ovi/Research): rgb(168, 85, 247) purple
  • A (Ali/Code): rgb(251, 146, 60) orange
  • C (Cleo/Client): rgb(244, 114, 182) pink

KEY VISUAL PATTERNS SUMMARY

  1. No external images/illustrations -- Everything is built with HTML/CSS/SVG. Zero stock photos, zero illustrations, zero imported graphics.

  2. Dashboard mockups ARE the visual -- Each phase uses a fully-coded fake UI as the hero visual. These are interactive HTML components, not screenshots.

  3. Color system is minimal: Primary green (#0cbf6a), red for warnings (rgba(248,113,113)), dark backgrounds (#060b08, #070B09, #080D0B, #0A1210), white at various opacities.

  4. Micro-interactions everywhere:

    • Animated SVG data flow (Phase 2 network graph)
    • Scanning line animation (Phase 1)
    • Pulse animations on status dots
    • Hover glow effects on cards
    • Scroll-triggered fade-in with stagger
    • Toast notifications sliding in (Phase 3)
    • Typing cursor animation (Phase 4)

  5. Consistent UI chrome: macOS-style window chrome (traffic light dots), title bars, status indicators create a "real software" feel.

  6. Transparency layering: Everything uses rgba values rather than solid colors, creating depth through layered transparencies on the dark background.