Skip to content
DesignMunkDesignMunk Submit a site

FunnelKit

funnelkit.com
Boost Profits with Funnels & Automations
Ecommerce Marketing WordPress Homepage Inter
Share Visit site
funnelkit.com DESKTOP · 1440
FunnelKit

AI Breakdown

Design export

---
version: alpha
name: FunnelKit
description: Boost Profits with Funnels & Automations
colors:
  primary: "#404040"
  secondary: "#141444"
  tertiary: "#22a305"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-fantasy-console-sky: "#1cacfc"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: 800
    lineHeight: 1.3
  headline-md:
    fontFamily: Inter
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.67
  headline-sm:
    fontFamily: Inter
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.71
  headline-xs:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.22
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
rounded:
  sm: 8px
  md: 12px
spacing:
  xs: 8px
  sm: 16px
  md: 24px
  lg: 36px
  xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#0074db"
    rounded: "{rounded.md}"
    padding: 14px 44px
    height: 80px
  button-secondary:
    textColor: "#131144"
    rounded: "{rounded.md}"
    padding: 14px 44px
    height: 80px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# FunnelKit: Green CTAs and Navy Headlines for WooCommerce

## Overview

A conversion-led system for WooCommerce merchants. Tone is confident and practical, leaning more serious than playful. Inter provides clean legibility; secondary navy headlines contrast against a white canvas, while green CTAs signal action. Spacing is generous and modular, supporting scannable feature slices and repeated CTA pairs.

## Colors

- **primary (#404040):** Default text and body copy for high contrast on white.
- **secondary (#141444):** Display headlines, key numerals, and emphasis text.
- **tertiary (#22a305):** Primary action fill for buttons and CTA bands.
- **neutral (#ffffff):** Base canvas for pages and cards.
- **border (#e5e7eb):** Subtle dividers, card outlines, and input borders.
- **brand-fantasy-console-sky (#1cacfc):** Accent for badges, icons, and ratings.
- **surface ({colors.neutral} → #ffffff):** Alias of neutral for component backgrounds.
- **on-surface ({colors.primary} → #404040):** Alias of primary for text on white.

## Typography

Inter is the only family across headings and body.
- Headline LG (Inter 48px/1.3, 800): page hero and major section intros.
- Headline MD (Inter 36px/1.67, 600): section headers within feature bands.
- Headline SM (Inter 28px/1.71, 600): sub-section titles and card leads.
- Headline XS (Inter 18px/1.22, 600): overlines, chips, and small card headings.
- Body MD (Inter 16px, 400): all paragraph copy and list items.
Availability: Inter is a Google font and can be loaded directly. If a hosted font is not desired, use system stacks with similar metrics: Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif.

## Layout

An 8px-based scale keeps rhythm: 8, 16, 24, 36, 96. Use 96px vertical padding for major sections, 36px for inner bands, and 24px for card gutters. A standard 12-column grid works well for the two-column feature pattern used throughout. Lists and icon grids use 24px–36px row gaps; compact controls and chips use 8px–16px spacing.

## Elevation & Depth

Hierarchy relies on whitespace, soft borders (#e5e7eb), and restrained shadows. Use md shadow (rgba(0,0,0,0.2) 0 2px 5px 0) for hover states or compact cards; use lg (rgba(41,71,113,0.1) 0 4px 44px 0) for modals or standout cards. Large surfaces typically remain flat (no shadow) on white.

## Shapes

Rounded corners communicate role: 12px for interactive elements (primary/secondary buttons, inputs), 8px for passive containers (cards). Link-style buttons are square (0px) to read as text. Maintain consistency within a section—mixing 8px and 12px in one row weakens hierarchy.

## Components

Button variants and card (from tokens):
- Primary Button: background #22a305, text #0074db, radius 12px, padding 14px 44px, height 80px. Use for main CTAs.
- Secondary Button: text #131144, radius 12px, padding 14px 44px, height 80px. Use for "Learn more" or low-friction actions.
- Link Button: text #404040, radius 0px. Inline, lightweight actions.
- Card: background #ffffff, text #404040, radius 8px, padding 16px, optional border #e5e7eb.

### Top Navigation Bar
- Background #ffffff with body text #404040 and a standout "Get Started" using the primary button. Horizontal spacing 16px–24px; align links baseline with Inter 16px/400.

### Hero Headline Block
- H1 set in Inter 48px/800, color #141444; supporting copy Body MD 16px/400 in #404040. Primary CTA uses the primary button spec; include a small trust chip using #1cacfc as accent. Section padding top/bottom 96px.

### Feature Icon Grid
- Eight compact tiles. Use Card spec (8px radius, 16px padding), border #e5e7eb. Title in Headline XS 18px/600, description in Body MD 16px. Grid gap 24px.

### Logo Strip
- Single row of grayscale logos on #ffffff. Constrain height via padding 24px–36px; separate with a top border #e5e7eb.

### Two-Column Feature Section
- Left text (Headline MD 36px/600 + Body MD 16px), right media. Section padding 96px with 36px internal spacing. Include the CTA pair: primary then secondary link.

### Sliding Cart Feature List
- One-column description with a bulleted capability list. Use Headline SM 28px/600 for the heading; bullets in Body MD 16px with check icons accented by #1cacfc.

### Testimonial Cards
- Cards using 8px radius, 16px padding, md shadow on hover. Quote lead in Headline XS 18px/600 and body in 16px. Ratings and chips may use #1cacfc for stars/badges.

### FAQ Accordion
- Each item is a bordered block (#e5e7eb), radius 8px, 16px padding. Question in 18px/600; answer in 16px/400. Stack with 16px gaps.

### Footer Mega Menu
- Multi-column lists on #ffffff. Headings in 18px/600, links in 16px/400. Use borders #e5e7eb to separate sections and 36px vertical padding.

## Do's and Don'ts

Do
- Use #141444 for display headlines and #404040 for body to maintain contrast.
- Pair every feature slice with the consistent CTA duo; primary first, secondary second.
- Keep section padding to 96px top/bottom for clear scanning.
- Use 8px radius for cards and 12px for interactive controls.

Don't
- Mix more than two accent colors in a section; prefer #22a305 and #1cacfc only.
- Add heavy shadows to large surfaces—reserve lg shadow for overlays or hero cards.
- Place secondary actions before the primary or equalize their emphasis.
- Collapse vertical rhythm below 24px; the system relies on generous spacing.

## Agent Prompt Guide

Quick color reference
- Text: #404040
- Headline accent: #141444
- Background: #ffffff
- Border: #e5e7eb
- Primary accent (CTA): #22a305
- Badge accent: #1cacfc

1) Build the hero
- Background #ffffff. H1: Inter 800 48px, color #141444, line-height 1.3. Body: Inter 400 16px, color #404040, max-width comfortable for readability. Primary CTA button: background #22a305, text #0074db, radius 12px, padding 14px 44px, fixed height 80px. Add a small rating chip using #1cacfc. Section padding: 96px top/bottom.

2) Create a 4x2 feature icon grid
- Use cards: background #ffffff, border 1px #e5e7eb, radius 8px, padding 16px. Item title: Inter 600 18px (#141444). Item text: Inter 400 16px (#404040). Grid gap 24px; outer padding 36px.

3) Two-column feature with CTA pair
- Container padding 96px. Left column text: heading Inter 600 36px color #141444; body Inter 400 16px color #404040, 24px spacing to bullets. Primary button spec: #22a305 / #0074db, radius 12px, 14px 44px, height 80px. Secondary button: text #131144, radius 12px, 14px 44px, height 80px. Right column holds imagery.

4) FAQ accordion
- Each item: background #ffffff, border 1px #e5e7eb, radius 8px, padding 16px, gap 16px between items. Question: Inter 600 18px (#141444). Answer: Inter 400 16px (#404040). Use md shadow (rgba(0, 0, 0, 0.2) 0px 2px 5px 0px) on hover.

## Similar Brands

- WooCommerce: similar white canvas, navy headings, and plugin-first storytelling; Woo's palette is more purple and relies less on green CTAs.
- ClickFunnels: heavy on social proof and repeated CTAs; their typography runs bolder and more promotional.
- Shopify: crisp Inter-based type with generous spacing; Shopify's accent is emerald and uses more product UI screenshots.
- Mailchimp: conversion-focused sections with badges and testimonials; Mailchimp leans into illustration and warmer yellows instead of navy/green.
- Leadpages: repeated CTA pairs and card-heavy feature grids; their palette is bluer and gradients are more prominent.

More like this

Browse Ecommerce →
lev8.com
Lev8 AI
Lev8
Turn the live web into people and business intelligence.
Homepage · 21 hours ago
sendr.ai
Sendr AI
Sendr
Personalised outreach, powered by signals.
Homepage · 2 days ago
understory.io
Understory Marketing
Understory
More bookings, less admin—bookings and ads that grow your experiences.
Homepage · 2 days ago
wizcommerce.com
WizCommerce AI
WizCommerce
Built for Wholesale. Powered by AI.
Homepage · 2 days ago