Skip to content
DesignMunkDesignMunk Submit a site

Kajabi

kajabi.com
The all-in-one platform that turns what you know into what you earn
Software Technology Webflow Homepage Haffer
Share Visit site
kajabi.com DESKTOP · 1440
Kajabi

AI Breakdown

Design export

---
version: alpha
name: Kajabi
description: The all-in-one platform that turns what you know into what you earn
colors:
  primary: "#0a0a0a"
  secondary: "#7c7c7c"
  neutral: "#ffffff"
  border: "#e5e7eb"
  brand-shisha-coal: "#3c3c3c"
  brand-smoky-tone: "#9e9e9d"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Haffer
    fontSize: 49px
    fontWeight: 600
    lineHeight: 1.11
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Haffer
    fontSize: 42px
    fontWeight: 600
    lineHeight: 1.19
    letterSpacing: -0.017em
  headline-sm:
    fontFamily: Haffer
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.19
    letterSpacing: -0.015em
  headline-xs:
    fontFamily: Haffer
    fontSize: 31px
    fontWeight: 600
    lineHeight: 1.19
  body-md:
    fontFamily: Haffer
    fontSize: 26.2px
    fontWeight: 600
    lineHeight: 1.49
    letterSpacing: -0.02em
rounded:
  sm: 2px
  md: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 64px
  xl: 76px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: 42px
  button-secondary:
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 12px 24px
    height: 42px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Kajabi: Heavy Black Headlines and Inverted Feature Bands

## Overview

Kajabi's interface is a confident, monochrome system aimed at experts and creators. The tone is direct, sales-ready, and businesslike rather than playful. Layouts are spacious in the hero and denser in product sections, so information can stack without feeling heavy. When tokens don't cover a case, default to clear contrast, high legibility, and minimal ornament.

## Colors

- **primary (#0a0a0a):** Core ink for headlines, body text, and inverted section backgrounds.
- **secondary (#7c7c7c):** Supportive copy, meta labels, and subdued UI text.
- **neutral (#ffffff):** Primary surface for pages and cards.
- **border (#e5e7eb):** Hairline dividers, input borders, table rules, and card outlines.
- **brand-shisha-coal (#3c3c3c):** Dark UI elements, captions over imagery, and muted fills.
- **brand-smoky-tone (#9e9e9d):** Quiet accents and secondary text on dark backgrounds.
- **surface ({colors.neutral} → #ffffff):** Default background for content areas.
- **on-surface ({colors.primary} → #0a0a0a):** Default text color when placed on the surface.

## Typography

- Family: Haffer (custom/self-hosted). It carries all headline and body roles in this system.
- Roles:
  - headline-lg 49px/1.11, 600, tight tracking for the homepage h1 and marquee claims.
  - headline-md 42px/1.19, 600 for section intros and inverted band headings.
  - headline-sm 36px/1.19, 600 for sub-section titles and large stats.
  - headline-xs 31px/1.19, 600 for FAQs and card titles.
  - body-md 26.2px/1.49, 600 for hero lead lines, descriptive copy, and longer sentences.
- Availability: Haffer is not a Google font; it's self-hosted. When an agent cannot load it, substitute with Inter, Manrope, or Plus Jakarta Sans for similar modern, low-contrast grotesk characteristics and wide language support.

## Layout

Spacing runs on an 8px base: xs 8, sm 16, md 32, lg 64, xl 76. Use lg–xl for section padding and md between stacked elements within a section. Heroes and feature rows favor a two-column split with generous white space; product lists tighten to md spacing for density. Maintain consistent gutters and rely on the spacing scale rather than ad-hoc values for rhythm.

## Elevation & Depth

Shadows are minimal; only a soft sm shadow is measured and used sparingly for media or spotlight cards. Most hierarchy is delivered through contrast, whitespace, and the border token #e5e7eb. Inversions (primary background with neutral text) establish strong section breaks without adding depth. Use borders to separate FAQ items, lists, and inputs instead of heavier shadows.

## Shapes

Two radii communicate hierarchy: sm at 2px for buttons and small controls, md at 8px for cards, inputs, and larger containers. Keep corners consistent within a component; do not mix 2px and 8px on the same element. Straight edges (0px) are reserved for link-style buttons.

## Components

Buttons and card variants
- Primary button: background #0a0a0a, text #ffffff, 2px radius, 12px×24px padding, 42px height.
- Secondary button: text #ffffff, 2px radius, 12px×24px padding, 42px height (use on dark backgrounds or as a ghost/outline action).
- Link button: text #0a0a0a, square corners.
- Card: background #ffffff, text #0a0a0a, 8px radius, 16px padding.

### Split Hero with Email Capture
- Left column uses headline-lg (49px) plus body-md (26.2px) for the supporting line. Input fields use border #e5e7eb; pair with a primary button at 42px height. Space elements with md (32px) and the section with lg (64px).

### Creator Spotlight Card
- Right-side media with an overlaid caption. Use the card token (8px radius) and the sm shadow for lift. Caption text stays #ffffff on a brand-shisha-coal (#3c3c3c) strip.

### Stat Trio
- Three items under the hero: numbers in headline-sm (36px), labels in secondary #7c7c7c. Keep md spacing between number and label and sm between columns on narrow screens.

### Product Tabs Strip
- A horizontal selector for Courses, Coaching, Communities, Memberships, Newsletters, Podcasts. Treat each tab as a chip with 8px radius. Active state: background #0a0a0a, text #ffffff; inactive: transparent with border #e5e7eb and text #0a0a0a.

### Inverted Feature Band
- Full-width section with background #0a0a0a and text #ffffff. Headline uses headline-md (42px); bullets use body-md. Choose the secondary button style to avoid a heavy black-on-black block.

### "What's New" Product List
- A vertical or grid list (Backstage, Amplify, MCP, Expert Agents). Each item uses card token styles with headline-xs for the title and a button-link for "Learn More".

### FAQ Accordion
- Each question row is divided by a #e5e7eb border. Questions set in headline-xs (31px); answers in body-md. Use md spacing inside items and lg between groups.

### Promo Bar
- A site-wide announcement with neutral background and #0a0a0a text. Use button-link for the CTA so it doesn't compete with primary actions.

## Do's and Don'ts

- Do use #0a0a0a for all core text and switch to an inverted section (primary background, neutral text) only for major breaks.
- Do keep buttons at 42px height with 12px×24px padding; mixing ad-hoc sizes reduces consistency.
- Do separate dense lists and FAQs with #e5e7eb borders instead of extra shadows.
- Don't mix 2px and 8px radii inside the same component; reserve 8px for containers and 2px for buttons/controls.
- Don't introduce new grays; use secondary (#7c7c7c) for subdued copy and brand-smoky-tone (#9e9e9d) for lighter accents on dark backgrounds.
- Don't run colored backgrounds behind the hero; the system relies on a white surface and black type for impact.

## Agent Prompt Guide

Quick reference — use these defaults
- Text: #0a0a0a
- Background: #ffffff
- Border: #e5e7eb
- Accent (dark UI): #3c3c3c

1) Split hero with form and image
"Create a two-column hero on #ffffff. Left: Haffer (or Inter/Manrope) h1 at 49px/600 in #0a0a0a, supporting copy at 26.2px/1.49. Add an email input with a #e5e7eb border and a primary button #0a0a0a on #ffffff at 42px tall with 12px×24px padding and 2px radius. Right: a card container with 8px radius and a subtle sm shadow for a portrait/caption. Section padding: 64px."

2) Inverted feature band with bullets
"Add a full-width section with background #0a0a0a and text #ffffff. Heading at 42px/600, bullets at 26.2px/1.49. Use a secondary button (text #ffffff, 42px tall) to avoid heavy fills. Spacing: 32px between blocks, 64px section padding."

3) Product tabs strip
"Under a 42px heading, render a horizontal tab list: Courses, Coaching, Communities, Memberships, Newsletters, Podcasts. Each chip has 8px radius. Active tab: background #0a0a0a, text #ffffff. Inactive: transparent with 1px border #e5e7eb and text #0a0a0a. Gaps: 16px."

4) Stats row
"Create three equal columns on #ffffff. Numbers in 36px/600 #0a0a0a; labels in #7c7c7c. Use 16px gap inside each item and 32px between columns; align to center."

5) FAQ accordion
"Build an accordion on #ffffff with 1px dividers in #e5e7eb. Questions set in 31px/600 #0a0a0a; answers in 26.2px/1.49. Item padding: 32px; section padding: 64px. Icons and chevrons inherit #0a0a0a."

## Similar Brands

- Teachable — Also leans on monochrome type and simple sections; Teachable introduces more brand color accents where Kajabi stays neutral.
- Thinkific — Similar course-builder audience and proof-driven sections; lighter typography and more imagery than Kajabi's dense headlines.
- Podia — Clean, friendly marketing with restrained color; uses softer radii and more illustrations than Kajabi.
- Notion — Black-and-white, text-first marketing with pill controls; more minimal and editorial compared to Kajabi's sales-oriented layout.

More like this

Browse Software →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 49 minutes ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 49 minutes ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 12 hours ago
polymer.co
Polymer HR & Recruiting
Polymer
Attract and hire great people with a powerful ATS and job board
Homepage · 14 hours ago