Paper White
#ffffffPage canvas, card surfaces, button text on dark backgrounds, inverse text in dark sections
Kajabi
kajabi.comWebsite preview
The design language
Kajabi runs a monochrome editorial system: pure white canvas, near-black type, and no chromatic brand color anywhere. The page surrenders all color to the content — full-bleed expert portraits, warm lifestyle video, photography — so the interface recedes and the humans do the selling. Type does the heavy lifting through scale and tight tracking rather than color or weight, with Haffer rendering at display sizes up to 60px in near-black #0a0a0a. Surfaces are flat, corners are sharp at 2px (not the modern SaaS 8-12px), and buttons are solid black rectangles. The contrast between this strict achromatic UI and the rich, warm photography creates the brand's signature tension: a clinical framework housing emotional content.
Color palette
neutral
Ink Black
#0a0a0aPrimary text, filled CTA buttons, navigation, footer — the only action color in the entire system, near-black not pure #000
Charcoal
#1f1f1eDark section backgrounds (category bands, video frame borders), elevated dark surfaces
Stone
#535250Secondary body text, muted helper text, subdued list/border accents
Driftwood
#949189Tertiary text, icon strokes, subtle borders — warm gray that hints at the brand's earthy content tone
Sand
#bcb9aeLink borders at rest, muted borders, decorative dividers — warmest neutral, signals hover-to-reveal interaction
Mist
#e9e8e7Light surface tint, input field backgrounds, secondary card surfaces, subtle washes
Ash
#e0dedcHairline borders, card outlines, divider lines between content blocks
Graphite
#d4d3ceStronger borders for form fields, table separators, more visible structural dividers
Smoke
#333333Input text, focused form field borders, higher-emphasis text variant
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
60px · 600 · 1 · -1.8px trackingThe quick brown fox jumps
text-48
48px · 500 · 1The quick brown fox jumps
heading-lg
40px · 600 · 1.1 · -0.8px trackingThe quick brown fox jumps
heading
32px · 500 · 1.2 · -0.64px trackingThe quick brown fox jumps
text-28
28px · 600 · 1.2The quick brown fox jumps
heading-sm
24px · 500 · 1.3 · -0.4px trackingThe quick brown fox jumps
subheading
20px · 400 · 1.4The quick brown fox jumps
body
16px · 400 · 1.5The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Haffer
- Weights
- 400, 500, 600
- Sizes
- 12, 14, 16, 20, 24, 28, 32, 40, 48, 60
- Line height
- 1.0–1.5 (1.0 for display, 1.43–1.5 for body)
- Letter spacing
- -0.02em to -0.03em at display sizes (40px+), normal at body sizes
- Fallback
- Inter, Söhne, or General Sans
Single typeface across the entire system. Custom sans with humanist warmth in the letterforms that counterbalances the achromatic palette. Weight 400 handles body and most UI; weight 500 for subheadings and emphasis; weight 600 reserved for statistics and numerical display. Display sizes (48–60px) at weight 400 with tight tracking carry all emotional weight — bold weight is rarely used because scale does the work instead.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1280px
- Section gap
- 64-80px
- Card padding
- 20px
- Element gap
- 12-24px
Border radius
cards
2pxpills
9999pximages
2pxinputs
2pxbuttons
2pxSpacing scale
4px8px12px16px20px24px32px40px44px64px65px68px71px120px121pxGuidelines
Do
- Use #0a0a0a for all filled buttons and primary text — never #000000 pure black
- Set corner radius to 2px on all rectangular UI elements (buttons, inputs, cards, images)
- Use 9999px radius exclusively for pill-shaped category tabs and tag elements
- Let photography and video carry all color — keep UI elements strictly achromatic
- Apply tight tracking (-0.02em to -0.03em) at display sizes 40px and above; use normal tracking at body sizes
- Maintain 64-80px vertical breathing room between major sections
- Use Haffer weight 400 for headlines and rely on scale (not bold weight) for hierarchy
Don’t
- Don't introduce any chromatic brand color — the system is deliberately 100% achromatic
- Don't use 8px or 12px border radius on buttons, cards, or inputs — the sharp 2px is signature
- Don't use bold weight (600+) for marketing headlines — let size do the work instead
- Don't add drop shadows to buttons, inputs, or standard cards — surfaces stay flat
- Don't break the white page with a colored section background — only invert to #1f1f1 for dark bands
- Don't use icon outlines thinner than 1.5px or thicker than 2px — the weight should feel precise
- Don't letter-space body text — tight tracking is reserved for display sizes 40px+
Components
Primary Filled Button
Main call-to-action across the siteSolid #0a0a0a background, #ffffff text, Haffer 16px weight 500, 2px corner radius, 12px vertical × 24px horizontal padding. No drop shadow. The button is a pure black rectangle — it gains authority from contrast against white, not from color or depth.
Secondary Outlined Button
Secondary actions in nav and formsTransparent background, 1px #0a0a0a border, #0a0a0a text, Haffer 16px weight 500, 2px radius, 12px × 20px padding. Sits next to the filled button as a quieter alternative.
Email Input with Inline CTA
Newsletter signup, trial start, lead captureWhite background, 1px #e0dedc border, 2px radius, Haffer 16px weight 400, placeholder in #949189. The filled black CTA button is attached or sits immediately right with no gap, forming a single horizontal unit. Height ~48px.
Top Navigation Bar
Persistent site navigationWhite background, logo + brand wordmark left, center links (Product, Cofounder, Pricing) in Haffer 14px weight 500 #0a0a0a, right side has Login text link and filled black 'Start Free Trial' button. ~64-72px tall, 1px #e9e8e7 bottom border or shadowless.
Expert Portrait Card
Social proof — featured creators/expertsFull-bleed portrait photograph with no border radius, overlaid with a dark #0a0a0a semi-transparent gradient at the bottom containing name (Haffer 16px weight 600 white) and title (Haffer 14px weight 400 white). Arranged in a horizontal row with no gaps between cards, creating a continuous strip of faces.
Category Tab Pill
Content type filter in the 'Choose how you turn expertise into income' section9999px border radius, 8px × 16px padding, Haffer 14px weight 500, #0a0a0a text on #e9e8e7 background (active) or transparent (inactive). Active state inverts to black background with white text. Arranged in a horizontal row with 8px gaps.
Stats Display
Social proof metricsLarge numerical value in Haffer 48px weight 400 #0a0a0a, tight tracking. Label below in Haffer 16px weight 400 #535250. Centered alignment, three-column row on desktop.
Video Hero Frame
Product demonstration showcaseDark #1f1f1 section background wrapping a video player with 2px border radius. Video occupies most of the width, with a floating course content card overlaid on the right showing lesson list. Centered play button in white circle on the video.
Course Content Card (Overlay)
Product UI preview floating over videoWhite surface, 8px radius, ~24px padding, contains thumbnail + title rows for course lessons. Haffer 16px weight 600 for title, 14px weight 400 for subtitle. Slight shadow to lift it from the video below.
Dark Section Band
Section break and content framingFull-width #1f1f1 background, ~80px vertical padding. Headline centered in Haffer 40px weight 400 white. Creates the only chromatic (well, achromatic-inverted) break in the white-page rhythm.
Two-Column Text + Form
Newsletter / insights signup near page bottomLeft column: headline (Haffer 28-32px weight 400 #0a0a0a) + description (Haffer 16px #535250). Right column: email input + filled button in the same component. Light #ffffff background, ~40px section gap above.
Logo Lockup
Brand identifier in nav and footerSmall abstract mark (dark square with white cut) + 'kajabi' wordmark in Haffer 20px weight 600 #0a0a0a. Mark and text sit on a shared baseline with 8px gap.
Surfaces & elevation
Level 1
Paper
#ffffffDefault page canvas — the gallery wall
Level 2
Mist
#e9e8e7Subtle surface tint for form fields and quiet card variations
Level 3
Charcoal
#1f1f1Dark band sections that break the white rhythm and frame video/content showcases
Layout & imagery
Layout
Centered max-width container at ~1280px. Hero is centered text stack (headline → subtext → email+CTA) occupying upper viewport with no image. Below the hero, a full-bleed horizontal strip of expert portrait cards with zero gaps between them creates a continuous human band. Stats row is a centered 3-column grid. Dark section band breaks the white rhythm with centered headline + horizontal tab pills + a card grid. Video hero is near-full-width within the dark band with an overlay content card. Newsletter section returns to white, two-column (text left, form right) with centered max-width. Navigation is a thin white top bar, non-sticky, with the logo left and CTA right.
Imagery
Photography is the entire color system: full-bleed expert portraits (tightly cropped head-and-shoulders against plain backgrounds), warm lifestyle video (yoga, coaching sessions, workspaces), and creator photography with natural skin tones and earthy environments. Images receive no filters, no duotone treatment, no color overlays — they sit raw on the white canvas, which is precisely why the achromatic UI works. Icons are minimal 1.5-2px stroke line icons in #0a0a0a, used sparingly for navigation and category affordances. No illustrations, no 3D renders, no abstract graphics.
Design notes
Agent Guide
**Quick Color Reference** - text: #0a0a0a - background: #ffffff - border: #e0dedc - muted text: #535250 - icon stroke: #949189 - primary action: #0a0a0a (filled action) **Example Component Prompts** 1. **Centered hero block**: White #ffffff background. Headline 'Turn what you know into what you're known for' at 60px Haffer weight 400, color #0a0a0a, letter-spacing -1.8px, line-height 1.0. Subtext below at 20px Haffer weight 400, color #535250, centered, max-width 600px. Email input + filled black button row centered below at 48px tall. 2. **Filled primary button**: #0a0a0a background, white #ffffff text, Haffer 16px weight 500, 2px border-radius, 12px vertical × 24px horizontal padding, no shadow. Text 'Start Free Trial'. 3. **Expert portrait card strip**: Horizontal row of 5+ full-bleed portrait photos, 2px radius, no gaps between cards. Each card has a bottom gradient overlay (#0a0a0a at ~60% opacity) with name in Haffer 16px weight 600 white and title in Haffer 14px weight 400 white, both left-aligned with 20px padding. 4. **Category tab pill row**: Horizontal row of pills on a #1f1f1e dark section background. Each pill: 9999px radius, 8px × 16px padding, Haffer 14px weight 500. Active state: #0a0a0a background, #ffffff text. Inactive: transparent background, #ffffff text at 60% opacity. 8px gap between pills. 5. **Stats row**: Three centered columns. Each shows a large number at 48px Haffer weight 400 #0a0a0a (e.g. '100K+') with a label below at 16px Haffer weight 400 #535250. 64px gap between number and label, 80px+ gap between columns.
Similar brands
Medium
Same monochrome editorial approach with a single custom serif/sans typeface carrying all hierarchy, and content (stories/photos) replacing brand color
Squarespace
Shared achromatic framework that lets portfolio-quality photography and video dominate, with sharp rectangular UI and generous whitespace
Substack
Near-identical philosophy of pure white canvas, near-black type, and no chromatic brand color — content creators are the visual identity
Apple (editorial sections)
Same confidence in letting product photography and video breathe on a stark white stage with minimal UI chrome
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
