Keap

Overview

Keap is a business automation and CRM platform designed for small business owners and entrepreneurs who need to reclaim time from repetitive sales and marketing tasks. The brand embodies a philosophy of "Practical Empowerment"—combining the precision of enterprise software with the accessibility and warmth of a trusted business partner. The visual identity is clean, confident, and action-oriented: a bright, energetic green (#36A635) serves as the signature accent against a crisp white canvas, with supporting blues and oranges adding dimension to the interface. The emotional response is one of clarity and momentum—users feel enabled, not overwhelmed, by the platform's capabilities.

Keap's voice is direct, optimistic, and grounded in real business outcomes. The tone avoids hype and jargon; instead, it speaks in concrete benefits and measurable results. Vocabulary emphasizes growth, automation, and freedom—words that resonate with small business owners seeking to scale without burnout. Example sentence in Keap's voice: "Automate your follow-ups today, close more deals tomorrow—no credit card required."

Colors

The Keap color system is built on a foundation of trust and energy. Primary (#36A635) is the brand's signature green—a vibrant, growth-oriented accent used exclusively on call-to-action buttons, active states, and key interactive elements. It conveys growth, health, and forward momentum. Secondary (#FF5000), a warm orange, is reserved for secondary actions and highlights, adding visual variety without competing for attention. Tertiary (#0563D1), a professional blue, supports data visualization, links, and informational elements.

The surface stack is anchored in white (#FFFFFF) for maximum clarity and accessibility. Surface-container-highest (#D8D8D8) and surface-container-high (#E8E8E8) provide subtle visual separation for cards and panels without introducing visual noise. On-surface text

Typography

Keap's type system pairs GT Walsheim—a geometric, confident sans-serif—for headlines and display text with Sul Sans for body and UI text. This pairing creates visual hierarchy through personality rather than weight alone. Display (60px, 700 weight, -0.04em tracking) commands attention on hero sections; Headline-lg (40px, 700 weight) anchors major section titles; Headline-md (28px, 700 weight) breaks up content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and prominent descriptions, while Body-md (16px, 400 weight, 24px line-height) serves as the default paragraph text. Label-md (14px, 500 weight, 20px line-height) is applied to button text and form labels. On small labels over busy backgrounds or within data-dense tables, apply text-shadow: 0 2

Layout

Keap uses a 12-column fluid grid with a maximum container width of 1280px, allowing the design to breathe on large screens while maintaining focus on content. The page rhythm is built on a semantic spacing scale: lg (40px) separates major sections, md (24px) creates breathing room between cards and components, and sm (12px) provides micro-spacing within components. The hero section uses full-width white background with centered content, establishing a clean entry point. Card-based layouts dominate the mid-page sections, each card using 20px padding (md spacing) and 20px border-radius for a modern, approachable feel. Gutter spacing (24px) is applied consistently between grid columns and section edges, ensuring no content feels cramped. The design favors generous whitespace—at least 40px (lg

Elevation & Depth

Keap's elevation system is subtle and functional, avoiding heavy shadows that would feel corporate or dated. The base layer (surface, #FFFFFF) has no shadow. Level 1 cards and panels use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft, close shadow that suggests a card sitting just above the page. Level 2 (elevated cards, modals, and hover states) use box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger spread that creates clear separation from the background. Interactive elements—buttons and inputs—do not use shadows; instead, they rely on color contrast and border definition. On hover, car

Shapes

Keap's shape language is "Approachable Precision"—combining soft, rounded corners with clean, geometric proportions. Buttons use full rounded corners (border-radius: 100px or 9999px), creating a pill-shaped form that feels friendly and clickable. Cards use 20px border-radius (1.25rem), a moderate curve that balances softness with professionalism. Input fields use 50px border-radius, matching the button aesthetic to create a cohesive interaction family. Smaller UI elements—badges, tags, and toggles—use 0.75rem (12px) or full rounding depending on context. This consistent application of rounded

Components

Action Elements Buttons are the primary driver of conversion on Keap's interface. Primary buttons (button-primary) use #36A635 background with white text, 15px vertical and 40px horizontal padding, and full rounding (border-radius: 100px). Font weight is 500 (medium), set in Sul Sans at 14px. On hover, the background transitions to #65B965 (primary-fixed-dim) with a 150ms ease transition. Secondary buttons (button-secondary) have a transparent background with a 2px solid border in #36A635 and matching text color; on hover, the background fills with #EBF6EB (primary-container). Tertiary buttons (button-tertiary) are used for secondary actions like "See demo" and use #FF5000 (secondary) text on transparent background with 100px border-radius; they measure 8px vertical by 25px horizontal

Do's and Don'ts

**Do**

• Do use primary green (#36A635) exclusively on CTAs and high-priority interactive elements—it's the brand's signature and loses impact if overused.
• Do maintain at least 40px (lg spacing) between major sections to give the interface room to breathe and guide users through the conversion funnel.
• Do apply full rounding (border-radius: 100px) to all buttons and primary inputs to reinforce the approachable, human-centered brand personality.
• Do use GT Walsheim for all headlines and display text to establish visual hierarchy and confidence; reserve Sul Sans for body and UI text.
• Do pair primary buttons with secondary or tertiary buttons in call-to-action groups, never two primary buttons side by side.

**Don't**

• Don't use shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12)—Keap's aesthetic is clean and modern, not layered or skeuomorphic.
• Don't apply the secondary orange (#FF5000) to primary CTAs or dominant UI elements; it's a supporting accent, not a replacement for primary green.
• Don't set body text smaller than 16px or use line-height less than 24px—readability and accessibility are non-negotiable for a business platform.
• Don't mix rounded and sharp corners within a single component family (e.g., don't use 4px radius on one button and 100px on another in the same group).
• Don't use near-black text (#0F0F0F) on colored backgrounds; always pair it with white or very light surfaces to maintain contrast and legibility.