Khaime

Overview

Khaime is an AI-powered global commerce infrastructure platform designed for modern e-commerce businesses, SaaS platforms, and digital product sellers who need to operate seamlessly across borders. The brand embodies a "Bold-Technical" aesthetic—combining energetic, high-contrast typography (Boldonse for display, Parkinsans for UI) with a vibrant, action-oriented color palette featuring electric blue (#1e97f1), vivid orange-red (#ff5634), and lime-green (#c6f02f) accents. The visual language conveys speed, intelligence, and global reach through dynamic color blocking, generous whitespace, and confident typography that commands attention without sacrificing clarity. The emotional response is one of empowerment: users feel equipped to scale internationally, supported by invisible AI agents handling complexity behind the scenes.

The brand voice is direct, confident, and optimistic—speaking to ambitious entrepreneurs and technical builders with clarity and energy. Vocabulary emphasizes action ("build," "sell," "grow," "automate") and global capability ("worldwide," "localized," "multi-currency"). The tone avoids corporate jargon; instead, it uses conversational, benefit-driven language. Example sentence in brand voice: "Create storefronts in minutes, enable localized checkout experiences, accept global payments, and build commerce experiences designed for the next generation of online buying."

Colors

The Khaime color system is built on a foundation of clean white (#ffffff) surfaces with a sophisticated neutral hierarchy (on-surface: #1f272e, outline: #9ca3af, surface-container-high: #e5e7eb) that ensures legibility and visual calm. Three primary accent colors drive the interface: Primary Blue (#1e97f1) is the signature action color, used exclusively for primary CTAs ("Start Free" button), interactive states, and focus indicators—it communicates trust and technological sophistication. Secondary Orange-Red (#ff5634) is the energetic accent for secondary actions, highlights, and status indicators, adding urgency and visual pop. Tertiary Lime-Green (#c6f02f) serves as the tertiary accent for badges, highlights, and supporting UI elements, reinforcing the brand's forward-thinking, youthful

Typography

The typography system pairs two distinctive Google Fonts: Boldonse (400 weight only) for display-level headlines, delivering bold, geometric impact at 84px with -0.04em letter-spacing to create a confident, modern presence; and Parkinsans (weights 300–800) for all UI, body, and label text, providing a warm, approachable humanist sans-serif that scales gracefully from 12px labels to 40px headlines. The hierarchy is structured around six levels: display (84px, Boldonse, -0.04em) for hero headlines; headline-lg (40px, Parkinsans 600, -0.02em) for major section titles; headline-md (28px, Parkinsans 600, -0.01em) for subsections; title-lg (20px, Parkinsans 600) for card titles; body-lg (18px, Parkinsans 400, 28px line-height) for hero copy and feature descriptions; body-md (16px, Parkinsans 400

Layout

The layout system uses a 12-column fluid grid with a fixed max-width of 1400px, centered with symmetric padding of 24px (gutter) on mobile and tablet, expanding to 40px (lg spacing) on desktop. The page rhythm follows a "breathing" philosophy: major sections are separated by lg spacing (40px) vertically, creating visual rest between content blocks; internal card/component spacing uses md (24px) for padding and sm (12px) for nested elements. The hero section occupies full viewport height with generous whitespace, allowing the bold Boldonse headline and accent graphics (globe, money emoji) to dominate without clutter. Container max-width of 1400px ensures content remains readable on ultra-wide displays while maintaining focus. Horizontal rhythm uses a 24px base unit: buttons are 44–48px tall

Elevation & Depth

Depth in Khaime is achieved through subtle, functional shadows rather than dramatic layering. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle hover states on interactive elements like list items; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, input fields, and dropdown panels, creating a gentle lift from the surface; and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals, elevated cards, and prominent overlays. Shadows use a consistent blur-to-offset ratio (blur: 2–24px, offset: 1–8px) that mimics natural light from above, maintaining visual coherence.

Shapes

The shape philosophy is "Soft-Technical"—combining rounded corners with geometric precision to balance approachability with modern sophistication. The rounded scale uses six values: sm (0.25rem / 4px) for minor UI elements like small badges; DEFAULT (0.5rem / 8px) for input fields and standard components, providing a subtle, professional softness; md (0.75rem / 12px) for list items and secondary containers; lg (1rem / 16px) for cards and prominent surfaces, creating a warm, inviting feel; xl (1.5rem / 24px) for modals and elevated containers, emphasizing hierarchy; and full (9999px) for button

Components

Action Elements Buttons are the primary interactive currency. The button-primary component uses primary blue (#1e97f1) background with white text, Parkinsans 500 at 14px, full border-radius (9999px), and 12px vertical × 26px horizontal padding, resulting in a 44px height. On hover, button-primary-hover shifts to primary-container (#0092ff) with a smooth transition (150ms ease-out recommended). The button-secondary uses secondary orange (#ff5634) with white text, Parkinsans 500 at 16px, full radius, and 16px × 32px padding for a 48px height, escalating visual weight for secondary actions. Active states (button-primary-active) use primary-fixed-dim (#0092ff) with a subtle md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to indicate press. All buttons include a 150ms cubic-bezier(0.4, 0, 0.2, 1)

Do's and Don'ts

**Do**

• Do use primary blue (#1e97f1) exclusively for primary CTAs and focus states—it's the signature action color and must remain reserved for the most important interactions.
• Do apply full border-radius (9999px) to all buttons to maintain the brand's forward-thinking, dynamic energy and instant recognizability as interactive elements.
• Do maintain the 24px gutter spacing on mobile and 40px on desktop—this breathing room is essential to the clean, modern aesthetic and prevents visual clutter.
• Do use Boldonse (400 weight only) for display-level headlines (40px+) to command attention; reserve Parkinsans for all UI, body, and label text for warmth and readability.
• Do layer md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) on cards and standard interactive elements; escalate to lg shadow (0 8px 24px rgba(0, 0, 0, 0.12)) only for modals and elevated surfaces.
• Do use the tertiary lime-green (#c6f02f) sparingly for badges and highlights—its high saturation makes it a powerful accent that loses impact if overused.

**Don't**

• Don't use secondary orange (#ff5634) for primary CTAs or focus states—it's reserved for secondary actions and status indicators; primary blue must remain the signature action color.
• Don't apply border-radius smaller than lg (1rem) to cards; the soft-technical philosophy requires warmth, and sharp corners feel cold and corporate.
• Don't exceed lg shadow (0 8px 24px rgba(0, 0, 0, 0.12)) on standard components—deeper shadows create visual heaviness that contradicts the clean, modern aesthetic.
• Don't mix Boldonse and Parkinsans at the same size level; Boldonse is reserved for display (40px+) to maintain visual hierarchy and prevent visual noise.
• Don't use surface-container-highest (#d1d5db) for interactive elements—it's too dark and reduces contrast; reserve it for dividers and subtle visual separation only.
• Don't apply transitions longer than 200ms on interactive states—the brand's energy demands snappy, responsive feedback; sluggish animations feel dated and slow.