GoKwik

Overview

GoKwik is a WhatsApp-first customer engagement platform built for D2C brands seeking to maximize customer lifetime value through conversational commerce. The design system embodies 'Warm Minimalism'—a philosophy that pairs clean, spacious layouts with vibrant orange accents and human-centered interactions. The aesthetic communicates approachability and trust: the interface feels like a helpful business partner, not a corporate tool. The brand personality is conversational, data-driven, and action-oriented. Voice example: 'Your customers are already on WhatsApp. Let's turn conversations into revenue.'

Colors

The color palette is anchored by a bold, energetic primary orange (#FF8000) that dominates CTAs, highlights, and key interactive moments—this is the brand's signature accent and the color users instinctively click. Secondary blue (#0779FF) provides contrast for secondary actions and informational elements, creating visual rhythm without competing for attention. Tertiary gold (#BD9964) and warm orange (#F09819) are reserved for badges, milestones, and accent highlights in data visualizations. The surface stack ranges from pure white (#FFFFFF) for the main canvas down through warm creams (#FEF1DE, #F2F1EA) for containers and cards, grounding the design in a soft, approachable palette. Text hierarchy is maintained through on-surface (#000000 for primary text, #696969 for secondary), ensuring

Typography

The type system pairs BDO Grotesk (headings and accent text) with PP Neue Montreal (body copy), creating a distinctive contrast between geometric precision and organic warmth. Display and headline scales (52–64px) use BDO Grotesk at 600–700 weight with tight line-height (1.2–1.25) and negative letter-spacing (-0.015em to -0.02em) to create visual impact and brand recognition. Body text (16–20px) uses PP Neue Montreal at 400 weight with relaxed line-height (1.5) and neutral letter-spacing (0em) for comfortable reading. Labels and CTAs (12–14px) return to BDO Grotesk at 600 weight with 0.01–0.02em letter-spacing to maintain crispness at small sizes. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) on body text over light backgrounds to enhance legibility; use font-weight: 600 with letter-spa

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fluid 96vw container on mobile and tablet. Section spacing follows a semantic scale: lg (40px) for major section breaks, md (24px) for component grouping, and sm (12px) for internal element spacing. The hero section uses asymmetric layout—large headline (52–64px) on the left, product imagery on the right—to create visual tension and guide the eye. Cards and containers use 24px padding (md) with 12px internal gaps (sm) to establish rhythm. Gutter width is consistently 24px between grid columns. White-space is generous: the design favors breathing room over density, with minimum 40px vertical separation between major content blocks. This rhythm communicates confidence and clarity, essential for a B2B SaaS platf

Elevation & Depth

Depth is conveyed through a restrained shadow system that emphasizes clarity over drama. Base cards use a soft shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to separate from the surface without creating visual noise. Elevated states (hover, active) increase to 0 10px 15px rgba(0, 0, 0, 0.1), creating a subtle lift. Interactive elements like buttons add a warm-tinted shadow (0 3px 8px rgba(255, 128, 0, 0.2)) to reinforce the primary brand color and create a sense of approachability. No element uses a shadow darker than rgba(0, 0, 0, 0.25) to maintain the light, open aesthetic. Modals and overlays use

Shapes

The shape philosophy is 'Approachable Geometry'—rounded corners are generous but not organic, signaling friendliness without sacrificing professionalism. Buttons and primary CTAs use full-pill rounding (border-radius: 9999px) to create a soft, inviting target. Cards and containers use 20px (lg) or 12px (md) radius depending on context: larger radius for hero cards and featured content, tighter radius for list items and data tables. Input fields use 8px (DEFAULT) radius for a clean, functional appearance. The rationale: full-pill buttons feel conversational and modern (aligned with WhatsApp's a

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (BOOK A DEMO, SIGN UP) use full-pill rounding (9999px), 48px height, 12px 32px padding, and the primary orange (#FF8000) background with white text. On hover, the background shifts to the darker primary-fixed-dim (#E67300) and the shadow deepens to 0 6px 16px rgba(230, 115, 0, 0.25), creating a tactile sense of engagement. Active state applies a subtle scale transform (0.98) to signal press. Secondary buttons (LTV CALCULATOR) use transparent background with a 2px primary orange border, maintaining the same rounding and height. All buttons use label-md typography (14px, 600 weight, 0.01em letter-spacing) for crispness and scannability.

Containers & Surfaces Cards are the primary content container. Standa

Do's and Don'ts

**Do**

• Do use the primary orange (#FF8000) exclusively for primary CTAs and key interactive moments—reserve it for actions that drive business value (Book Demo, Sign Up, Start Free Trial).
• Do maintain 24px (md) spacing between major content sections and 12px (sm) spacing within component groups to create visual rhythm and prevent cognitive overload.
• Do apply full-pill rounding (9999px) to all primary buttons and interactive pills to signal approachability and align with the WhatsApp-first brand positioning.
• Do use BDO Grotesk for all headlines and accent text (52px+) with negative letter-spacing (-0.015em to -0.02em) to create visual impact and brand distinctiveness.
• Do pair the primary orange with white text (on-primary: #FFFFFF) on all CTAs to maximize contrast and ensure accessibility (WCAG AA minimum 4.5:1 ratio).

**Don't**

• Don't use the primary orange for secondary actions, backgrounds, or non-interactive elements—reserve it for moments that demand user attention and drive conversion.
• Don't apply shadows darker than rgba(0, 0, 0, 0.25) or use multiple shadow layers; the design favors clarity and flatness over dramatic depth.
• Don't mix BDO Grotesk and PP Neue Montreal in the same line or component; maintain clear separation: BDO for headings/labels, PP for body copy.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 8px, md: 12px, lg: 20px, xl: 24px, full: 9999px)—consistency prevents visual fragmentation.
• Don't reduce padding below 12px (sm) or increase it beyond 32px without explicit design rationale; the spacing scale is calibrated for rhythm and scannability.