Kajabi

Kajabi's design system is a high-contrast, modern aesthetic pairing deep, commanding neutrals with crisp white surfaces. Typography is the primary visual driver, featuring compact, confident sans-serif headlines and functional body text. Components are minimalist and structured, emphasizing clear information hierarchy over decorative flourishes, with sharp edges and subtle radius rounding maintaining a serious, professional tone. Prioritize Haffer typography for all text elements, maintaining negative letter-spacing for larger sizes to achieve a compact aesthetic. Use Midnight Ink (#0a0a0a) for primary text and dark backgrounds, and Canvas White (#ffffff) for page backgrounds and light surfaces, establishing the strong monochrome base. Apply a 2px border-radius consistently to all interactive elements and contained components like buttons and image frames. Establish clear visual hierarchy using distinct solid borders, defaulting to 1px wide lines using Silver Border (#e0dedc) for subtle separation. Maintain generous section and element spacing to provide ample breathing room, adhering to 4px increments; use Element Gap (8px) for individual elements and Card Padding (20px) for internal card content. Utilize Charcoal Surface (#1f1f1e) for elevated cards or distinct sections to create depth without relying on shadows. Avoid decorative gradients or strong chromatic colors; restrict accents to Green Accent (#405b50) in specific, minimal use cases. Do not deviate from the Haffer font family; custom system fonts are not part of this brand's identity. Do not use box-shadows for elevation; rely on background color changes or borders to differentiate layers. Never create rounded corners greater than 2px on interactive elements unless designing specific pill-shaped components at 15984px. Avoid dense, information-heavy blocks; always ensure ample white space around content and within components. Do not use generic system UI elements; all components should map to the specified visual tokens.