Passionfroot - The AI Agent for Creator-led GTM

Design Specification — Passionfroot - The AI Agent for Creator-led GTM

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#FFA466). All type is set in 'Nunito Sans'. Detected font weights: 300, 400, 500, 600, 700, 800. Detected style signatures: gradient-rich / aurora; technical / mono accents.

Logo asset(s): https://res.cloudinary.com/passionfroot/image/upload/dpr_2.0/f_auto/q_auto/v1/workspace-production/Logo%20beehiiv__HcvZ80 · https://res.cloudinary.com/passionfroot/image/upload/dpr_2.0/f_auto/q_auto/c_fill,h_48/v1/website/x

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(in lab,red,red))
• linear-gradient(#000c,#0000000d 20%,#00000012,#000000f2)
• linear-gradient(90deg,#0000,#000 10% 90%,#0000)
• linear-gradient(90deg,#0000,#000 10%,#000 90%,#0000)

> 5 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: Nunito Sans — stack: 'Nunito Sans'

Font stacks (most used first)

• 'Nunito Sans'
• 'Caveat'
• var(--font-mono)
• "new-kansas"
• var(--font-sans)
• var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji")
• var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace)
• Caveat,cursive
• var(--font-body)
• var(--font-heading)!important

Web font sources

• fonts.googleapis.com/css2?family=Caveat:wght@600&family=Nunito+Sans:wght@300;400;500;600;700;800&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 600, 700, 800

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Layout

Container max-width: 768px

Grid columns (largest detected grid): 8

Breakpoints

• 640px
• 768px
• 1024px
• 1280px
• 1440px
• 1920px

Animation & Motion

Easing curves

• cubic-bezier(.4,0,1,1)
• cubic-bezier(0,0,.2,1)
• cubic-bezier(.4,0,.2,1)
• cubic-bezier(.4,0,.6,1)
• cubic-bezier(.4,0,.2,1)
• var(--tw-ease,var(--default-transition-timing-function))
• var(--stamp-ease)
• cubic-bezier(.4,-.1,.2,1)

Keyframes

@keyframes float { 0%,to{transform:translateY(0)}50%{transform:translateY(-20px)} }
@keyframes scroll-left { 0%{transform:translate(0)}to{transform:translate(-50%)} }
@keyframes word-reveal { 0%{opacity:0;filter:blur(10px);transform:translateY(20px)}to{opacity:1;filter:blur();transform:translateY(0)} }
@keyframes card-scatter-in { 0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)} }
@keyframes icon-shake { 0%{transform:rotate(0)}15%{transform:rotate(-12deg)}30%{transform:rotate(10deg)}45%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}to{transform:rotate(0)} }
@keyframes blog-image-shimmer { 0%{background-position:150% 0}to{background-position:-150% 0} }
@keyframes animate-in-up { 0%{opacity:0;transform:translateY(var(--distance,40px))}to{opacity:1;transform:translateY(0)} }
@keyframes animate-in-down { 0%{opacity:0;transform:translateY(calc(var(--distance,40px)*-1))}to{opacity:1;transform:translateY(0)} }
@keyframes animate-in-left { 0%{opacity:0;transform:translate(calc(var(--distance,40px)*-1))}to{opacity:1;transform:translate(0)} }
@keyframes animate-in-right { 0%{opacity:0;transform:translate(var(--distance,40px))}to{opacity:1;transform:translate(0)} }
@keyframes animate-in-scale { 0%{opacity:0;transform:scale(var(--scale,.95))}to{opacity:1;transform:scale(1)} }
@keyframes animate-in-scale-lg { 0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)} }
@keyframes animate-in-blur { 0%{opacity:0;filter:blur(var(--blur,10px))}to{opacity:1;filter:blur()} }
@keyframes animate-in-up-blur { 0%{opacity:.2;transform:translateY(var(--distance,8px));filter:blur(var(--blur,2px))}to{opacity:1;filter:blur();transform:translateY(0)} }
@keyframes animate-slide-down { 0%{transform:translateY(0)}to{transform:translateY(var(--slide-distance,60px))} }
@keyframes animate-in-pop { 0%{opacity:0;transform:translateY(var(--pop-distance,80px))scale(.9);filter:blur(var(--blur,4px))}60%{opacity:1;filter:blur()}to{opacity:1;filter:blur();transform:translateY(0)scale(1)} }
@keyframes animate-in-scale-blur { 0%{opacity:0;transform:scale(var(--scale-from,.8));filter:blur(var(--blur,2px))}to{opacity:1;filter:blur();transform:scale(1)} }
@keyframes animate-in-up-scale { 0%{opacity:0;transform:scale(var(--scale-from,.8))translateY(var(--distance,20px));filter:blur(var(--blur,2px))}to{opacity:1;filter:blur();transform:scale(1)translateY(0)} }

Animations

• var(--animate-pulse)
• word-reveal var(--word-duration,.8s)cubic-bezier(.19,1,.22,1)both
• .5s cubic-bezier(.25,.46,.45,.94) icon-shake
• none
• none!important

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “For Brands”

button-secondary — sample text: “Get access”

navigation-link

badge

Source Design Tokens (CSS custom properties)

:root {
  --container-scale: 0.78;
  --container-translate-y: 10%;
  --left-card-left: -3%;
  --left-card-top: 35%;
  --left-card-rotate: -12deg;
  --center-card-left: 50%;
  --center-card-top: 10%;
  --right-card-right: -3%;
  --right-card-top: 32%;
  --right-card-rotate: 8deg;
  --font-sans: ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --color-orange-50: oklch(98% .016 73.684);
  --color-orange-100: oklch(95.4% .038 75.164);
  --color-orange-200: oklch(90.1% .076 70.697);
  --color-orange-300: oklch(83.7% .128 66.29);
  --color-orange-400: oklch(75% .183 55.934);
  --color-orange-500: oklch(70.5% .213 47.604);
  --color-orange-600: oklch(64.6% .222 41.116);
  --color-orange-700: oklch(55.3% .195 38.402);
  --color-green-50: oklch(98.2% .018 155.826);
  --color-green-100: oklch(96.2% .044 156.743);
  --color-green-200: oklch(92.5% .084 155.995);
  --color-green-300: oklch(87.1% .15 154.449);
  --color-green-600: oklch(62.7% .194 149.214);
  --color-green-700: oklch(52.7% .154 150.069);
  --color-emerald-50: oklch(97.9% .021 166.113);
  --color-emerald-200: oklch(90.5% .093 164.15);
  --color-emerald-600: oklch(59.6% .145 163.225);
  --color-emerald-700: oklch(50.8% .118 165.612);
  --color-sky-600: oklch(58.8% .158 241.966);
  --color-blue-500: oklch(62.3% .214 259.815);
  --color-blue-600: oklch(54.6% .245 262.881);
  --color-blue-700: oklch(48.8% .243 264.376);
  --color-purple-50: oklch(97.7% .014 308.299);
  --color-purple-100: oklch(94.6% .033 307.174);
  --color-purple-200: oklch(90.2% .063 306.703);
  --color-purple-300: oklch(82.7% .119 306.383);
  --color-purple-700: oklch(49.6% .265 301.924);
  --color-gray-100: oklch(96.7% .003 264.542);
  --color-gray-300: oklch(87.2% .01 258.338);
  --color-gray-400: oklch(70.7% .022 261.325);
  --color-gray-500: oklch(55.1% .027 264.364);
  --color-gray-600: oklch(44.6% .03 256.802);
  --color-gray-700: oklch(37.3% .034 259.733);
  --color-gray-800: oklch(27.8% .033 256.848);
  --color-gray-900: oklch(21% .034 264.665);
  --color-black: #000;
  --color-white: #fff;
  --spacing: .25rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-5xl: 64rem;
  --text-xs: .75rem;
  --text-xs--line-height: calc(1/.75);
  --text-sm: .875rem;
  --text-sm--line-height: calc(1.25/.875);
  --text-base: 1rem;
  --text-base--line-height: 1.5;
  --text-lg: 1.125rem;
}

Do's and Don'ts

Do

• Do reserve the accent #FFA466 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 300, 400, 500, 600, 700, 800.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-primary: #EB6927;
  --color-accent: #FFA466;
  --color-background: #FFFFFF;
  --color-surface: #FDFDFA;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #E5E5E5;
  --color-border: #3B4254;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #000000;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F0EDE0;
  --color-surface-container: #EFECE1;
  --color-surface-container-high: #EDEAE4;
  --color-surface-container-highest: #E5E5E5;
  --font-sans: 'Nunito Sans';
  --font-size-display: 48px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 28px;
  --font-size-title-lg: 22px;
  --font-size-body-lg: 17.6px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14.1px;
  --font-size-label-sm: 12.8px;
  --radius-sm: 1px;
  --radius-md: 7.04px;
  --radius-lg: 24px;
  --space-xs: 2px;
  --space-sm: 13.6px;
  --tracking-display: -.01em;
  --tracking-label: .05em;
  --container-max: 768px;
}