DESIGN.md · Analysis

Passionfroot

passionfroot.me · 26 Oct 2026 · 47 colors · new-kansas, Nunito Sans

Passionfroot

Passionfroot is an AI-driven creator marketing operating system that lets B2B growth teams plan, run, pay and measure creator-led campaigns end to end. The interface pairs a deep night-sky hero with a warm cream content canvas.

Colors

surface#fcfcf7

surface-dim#ebeae4

surface-bright#fdfdfa

surface-container-lowest#ffffff

surface-container-low#f7f6f2

surface-container#f0ede0

surface-container-high#eae9e6

surface-container-highest#e2e1dc

on-surface#3a3a38

on-surface-variant#585855

inverse-surface#190922

inverse-on-surface#f5f4ef

outline#8a8985

outline-variant#eae9e6

surface-tint#eb6928

primary#eb6928

on-primary#111111

primary-container#fde3d4

on-primary-container#7a2e0c

inverse-primary#ff9147

secondary#2c91af

on-secondary#111111

secondary-container#d4eef5

on-secondary-container#15495a

tertiary#b036a4

on-tertiary#ffffff

tertiary-container#f5d6f0

on-tertiary-container#5a1950

error#d94141

on-error#ffffff

error-container#fbe0e0

on-error-container#7a1c1c

primary-fixed#fde3d4

primary-fixed-dim#ff9147

on-primary-fixed#3d1605

on-primary-fixed-variant#7a2e0c

secondary-fixed#d4eef5

secondary-fixed-dim#2c91af

on-secondary-fixed#0c2f3c

on-secondary-fixed-variant#15495a

tertiary-fixed#f5d6f0

tertiary-fixed-dim#b036a4

on-tertiary-fixed#2e0b29

on-tertiary-fixed-variant#5a1950

background#fcfcf7

on-background#3a3a38

surface-variant#f0ede0

Typography

display: fontFamily: new-kansas · fontSize: 64px · fontWeight: 500 · lineHeight: 76.8px · letterSpacing: -0.64px
headline-lg: fontFamily: new-kansas · fontSize: 48px · fontWeight: 500 · lineHeight: 57.6px · letterSpacing: -0.013em
headline-md: fontFamily: new-kansas · fontSize: 48px · fontWeight: 500 · lineHeight: 57.6px · letterSpacing: -0.624px
title-lg: fontFamily: Nunito Sans · fontSize: 16px · fontWeight: 700 · lineHeight: 24px
body-lg: fontFamily: Nunito Sans · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
body-md: fontFamily: Nunito Sans · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
label-md: fontFamily: Nunito Sans · fontSize: 16px · fontWeight: 700 · lineHeight: 24px
label-sm: fontFamily: Caveat · fontSize: 16px · fontWeight: 600 · lineHeight: 24px

Design guidance

Overview

Passionfroot is an agentic marketing operating system for B2B growth teams running creator-led campaigns. The brand uses a quiet 'Warm Editorial Night' aesthetic: a deep indigo-to-violet sky hero (#190922) with glowing, sculpted characters, giving way to a warm cream canvas (#fcfcf7) for the body. The emotional response is playful confidence wrapped in calm operational clarity.

The tone of voice is friendly, direct and slightly whimsical, with short declarative headlines ("Run campaigns at scale, not in spreadsheets.") and conversational sub-copy ("no spreadsheets, no guesswork, no chaos"). Example sentence: "70 creators contacted. 8 confirmed. Budget deployed, no actions needed."

Colors

Primary (#eb6928) is the signature orange-coral used for the highest-intent actions, focus rings and key links; it is the accent that should be read as 'do this'. Its hover companion is primary-fixed-dim (#ff9147) and its tinted surface is primary-container (#fde3d4). Secondary (#2c91af) teal supports status and informational chips (secondary-container #d4eef5). Tertiary (#b036a4) magenta is reserved for creator-facing highlights and the hero glow. Error (#d94141) is reserved for destructive actions only.

Surfaces follow a warm cream stack: page background #fcfcf7, cards #ffffff (surface-container-lowest), inset panels #f0ede0. Dark hero surfaces use inverse-surface #190922 with inverse-on-surface #f5f4ef for text. Hero gradients run from #190922 through deep violet into warm coral at the

Typography

The type system pairs new-kansas, a high-contrast serif used at 64px display and 48px headlines with weight 500 and tight tracking (letter-spacing -0.64px at display), against Nunito Sans for all interface and body copy at 16px / 24px line-height. Caveat (600) is reserved for hand-written annotations and playful labels at 16px. Use weight 700 only for CTA and label-md text; body text stays at 400. Apply letter-spacing -0.013em to headlines larger than 40px and do not track body copy.

Layout

The layout is a fluid, centered container capped at 1160px with 24px gutters and 24px outer margins, rendered on a 12-column grid. Sections are separated by generous vertical rhythm using the 2xl (12px) to xl (10px) steps inside components and larger section gaps for hero-to-content transitions. Spacing tokens are based on a 4px unit: use sm (4px) for icon-label gaps, lg (8px) for chip padding, and gutter (24px) between cards. Content is left-aligned inside cards and centered only in the hero.

Elevation & Depth

Depth is conveyed with two systems. Cards on the cream canvas use a hairline ring plus soft shadow: box-shadow 0 4px 24px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.06). Floating controls and tooltips on dark surfaces use 0 2px 8px rgba(0,0,0,0.2), 0 4px 16px rgba(0,0,0,0.1). Dark-surface controls add a 1px inner ring rgba(255,255,255,0.08). Elevation level 1 is the cream canvas, level 2 is the white card with the hairline ring, level 3 is floating UI with the stronger shadow.

Shapes

The shape philosophy is Soft-Technical: rounded but not bubbly. Primary buttons and nav pills use a 12px radius (rounded.lg), feature cards use 16px (rounded.xl), while inputs and inline chips use 6px (rounded.DEFAULT) and 4px (rounded.sm). Avatars and status dots are fully circular (9999px). The consistent 12px button radius ties primary CTAs to the nav pill and keeps the interface approachable.

Components

Action Elements Primary CTAs on the cream canvas use button-primary: primary-container background with on-surface text, 12px radius, 44px height and 10px 16px padding. On the dark hero, the white 'Start for free' pill is the dominant action and transitions to primary-fixed-dim over 150ms ease. Secondary 'Watch the trailer' sits on a translucent rgba(255,255,255,0.08) ghost with a 1px rgba(255,255,255,0.12) border and lifts to 0.16 alpha on hover in 150ms.

Containers & Surfaces Cards use surface-container-lowest with a 16px radius and the hairline-ring shadow. On hover, card-hover switches to surface-container-high over 200ms cubic-bezier(0.16,1,0.3,1). Glass nav pills use rgba(255,255,255,0.06) with a 1px inner ring and 12px radius.

Inputs & Interaction Input fields sit on su

Do's and Don'ts

**Do**

Use primary #eb6928 only for the single most important action in any section.
Keep the hero on the deep #190922 sky and the body on the #fcfcf7 cream canvas.
Pair new-kansas headlines with Nunito Sans body copy at 16px / 24px.
Use 12px radius on buttons and 16px on feature cards to keep the shape language consistent.

**Don't**

Don't place body text over the saturated coral glow of the hero.
Don't use primary orange for destructive actions; use error #d94141.
Don't mix more than one headline weight (500) across a single section.
Don't add heavy drop shadows to cards; rely on the hairline ring plus the 24px soft shadow.

---
version: alpha
name: Passionfroot
description: >-
  Passionfroot is an AI-driven creator marketing operating system that lets B2B growth teams plan, run, pay and measure
  creator-led campaigns end to end. The interface pairs a deep night-sky hero with a warm cream content canvas.
logo:
  src: https://passionfroot.me/_pfweb/images/apple-touch-icon.png
colors:
  surface: '#fcfcf7'
  surface-dim: '#ebeae4'
  surface-bright: '#fdfdfa'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f7f6f2'
  surface-container: '#f0ede0'
  surface-container-high: '#eae9e6'
  surface-container-highest: '#e2e1dc'
  on-surface: '#3a3a38'
  on-surface-variant: '#585855'
  inverse-surface: '#190922'
  inverse-on-surface: '#f5f4ef'
  outline: '#8a8985'
  outline-variant: '#eae9e6'
  surface-tint: '#eb6928'
  primary: '#eb6928'
  on-primary: '#111111'
  primary-container: '#fde3d4'
  on-primary-container: '#7a2e0c'
  inverse-primary: '#ff9147'
  secondary: '#2c91af'
  on-secondary: '#111111'
  secondary-container: '#d4eef5'
  on-secondary-container: '#15495a'
  tertiary: '#b036a4'
  on-tertiary: '#ffffff'
  tertiary-container: '#f5d6f0'
  on-tertiary-container: '#5a1950'
  error: '#d94141'
  on-error: '#ffffff'
  error-container: '#fbe0e0'
  on-error-container: '#7a1c1c'
  primary-fixed: '#fde3d4'
  primary-fixed-dim: '#ff9147'
  on-primary-fixed: '#3d1605'
  on-primary-fixed-variant: '#7a2e0c'
  secondary-fixed: '#d4eef5'
  secondary-fixed-dim: '#2c91af'
  on-secondary-fixed: '#0c2f3c'
  on-secondary-fixed-variant: '#15495a'
  tertiary-fixed: '#f5d6f0'
  tertiary-fixed-dim: '#b036a4'
  on-tertiary-fixed: '#2e0b29'
  on-tertiary-fixed-variant: '#5a1950'
  background: '#fcfcf7'
  on-background: '#3a3a38'
  surface-variant: '#f0ede0'
typography:
  display:
    fontFamily: new-kansas
    fontSize: 64px
    fontWeight: 500
    lineHeight: 76.8px
    letterSpacing: '-0.64px'
  headline-lg:
    fontFamily: new-kansas
    fontSize: 48px
    fontWeight: '500'
    lineHeight: 57.6px
    letterSpacing: '-0.013em'
  headline-md:
    fontFamily: new-kansas
    fontSize: 48px
    fontWeight: 500
    lineHeight: 57.6px
    letterSpacing: '-0.624px'
  title-lg:
    fontFamily: Nunito Sans
    fontSize: 16px
    fontWeight: '700'
    lineHeight: 24px
  body-lg:
    fontFamily: Nunito Sans
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  body-md:
    fontFamily: Nunito Sans
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  label-md:
    fontFamily: Nunito Sans
    fontSize: 16px
    fontWeight: 700
    lineHeight: 24px
  label-sm:
    fontFamily: Caveat
    fontSize: 16px
    fontWeight: '600'
    lineHeight: 24px
rounded:
  sm: 4px
  DEFAULT: 6px
  md: 6px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  unit: 4px
  xs: 2px
  sm: 4px
  md: 6px
  lg: 8px
  xl: 10px
  2xl: 12px
  gutter: 24px
  margin: 24px
  container-max: 1160px
elevation:
  sm: 0 2px 8px rgba(0, 0, 0, 0.2)
  md: 0 4px 16px rgba(0, 0, 0, 0.1)
  lg: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06)
layout:
  containerMaxWidth: 1160px
components:
  button-primary:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: '{spacing.xl}'
    height: 44px
  button-primary-hover:
    backgroundColor: '{colors.primary-fixed-dim}'
    textColor: '{colors.on-primary-fixed}'
  button-secondary:
    backgroundColor: rgba(255, 255, 255, 0.08)
    textColor: '{colors.surface-container-lowest}'
    typography: '{typography.label-md}'
    rounded: '{rounded.lg}'
    padding: 10px 14px
    height: 44px
  button-secondary-hover:
    backgroundColor: rgba(255, 255, 255, 0.16)
  card:
    backgroundColor: '{colors.surface-container-lowest}'
    rounded: '{rounded.xl}'
    padding: '{spacing.2xl}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
  input-field:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.DEFAULT}'
    padding: '{spacing.lg}'
  list-item:
    backgroundColor: transparent
    rounded: '{rounded.md}'
    padding: '{spacing.lg}'
  list-item-hover:
    backgroundColor: '{colors.surface-container-high}'
    textColor: '#111111'
  badge:
    backgroundColor: '{colors.secondary-container}'
    textColor: '{colors.on-secondary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: '{spacing.sm}'
  nav-pill:
    backgroundColor: rgba(255, 255, 255, 0.06)
    rounded: '{rounded.lg}'
    padding: '{spacing.xl}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
Primary CTAs on the cream canvas use button-primary: primary-container background with on-surface text, 12px radius, 44px height and 10px 16px padding. On the dark hero, the white 'Start for free' pill is the dominant action and transitions to primary-fixed-dim over 150ms ease. Secondary 'Watch the trailer' sits on a translucent rgba(255,255,255,0.08) ghost with a 1px rgba(255,255,255,0.12) border and lifts to 0.16 alpha on hover in 150ms.

### Containers & Surfaces
Cards use surface-container-lowest with a 16px radius and the hairline-ring shadow. On hover, card-hover switches to surface-container-high over 200ms cubic-bezier(0.16,1,0.3,1). Glass nav pills use rgba(255,255,255,0.06) with a 1px inner ring and 12px radius.

### Inputs & Interaction
Input fields sit on su

## Do's and Don'ts

**Do**
- Use primary #eb6928 only for the single most important action in any section.
- Keep the hero on the deep #190922 sky and the body on the #fcfcf7 cream canvas.
- Pair new-kansas headlines with Nunito Sans body copy at 16px / 24px.
- Use 12px radius on buttons and 16px on feature cards to keep the shape language consistent.

**Don't**
- Don't place body text over the saturated coral glow of the hero.
- Don't use primary orange for destructive actions; use error #d94141.
- Don't mix more than one headline weight (500) across a single section.
- Don't add heavy drop shadows to cards; rely on the hairline ring plus the 24px soft shadow.

Edit, then copy or download.