KuikChat

Overview

KuikChat is a privacy-first, real-time messaging platform that combines enterprise-grade security with AI-powered intelligence. The design system embodies a "Trust-First Minimalism" aesthetic—a dark-mode-first approach that prioritizes clarity, speed, and user confidence. The brand serves teams and individuals who demand both privacy and productivity, transforming complex communication workflows into intuitive, delightful interactions. The visual language is deliberately restrained: a deep charcoal canvas (rgb(17, 28, 34)) anchors the interface, while vibrant accent colors—electric blue (#3b82f6) for primary actions, emerald green (#10b981) for success states, and cyan (#06b6d4) for secondary highlights—guide user attention without overwhelming. The emotional response is one of calm competence: users feel secure, in control, and empowered to communicate freely.

The brand voice is direct, precise, and human-centered. Vocabulary favors action verbs and concrete benefits over marketing hyperbole: "Chat smarter, work faster" rather than "revolutionary communication." Tone is conversational yet professional, never breathless or patronizing. Example sentence in brand voice: "Your messages are encrypted end-to-end—only you and your recipients can read them, and we have zero access to your data."

Colors

The color system is built on a dark-mode-first foundation with a carefully calibrated surface stack that ensures legibility and visual hierarchy without relying on brightness alone. The primary surface (#111c22, rgb(17, 28, 34)) is a deep blue-gray that reduces eye strain during extended use while maintaining sufficient contrast for WCAG AA compliance. The surface container stack (surface-container-lowest through surface-container-highest) provides six distinct elevation levels, ranging from #060e14 to #2a353f, enabling clear visual separation between overlays, modals, and nested components without introducing harsh shadows.

Primary (#3b82f6) is the brand's signature accent—a vivid, saturated blue used exclusively for call-to-action buttons, active states, and key interactive elements. It

Typography

The typography system uses Inter exclusively, a geometric sans-serif that balances warmth with precision—essential for a platform that must convey both human connection and technical reliability. The hierarchy spans eight levels: display (72px, 700 weight, -0.04em letter-spacing) for hero headlines; headline-lg (40px, 600 weight) for section titles; headline-md (28px, 600 weight) for subsections; title-lg (20px, 600 weight) for card headers; body-lg (18px, 400 weight) for hero copy and prominent descriptions; body-md (16px, 400 weight) for standard body text; label-md (14px, 600 weight, 0.02em letter-spacing) for button labels and UI controls; and label-sm (12px, 500 weight, 0.03em letter-spacing) for badges and metadata. Line heights are set generously (84px for display, 48px for headline

Layout

The layout system uses a 12-column grid with a maximum container width of 1400px, enabling flexible responsive design from mobile (single column) through tablet (6 columns) to desktop (12 columns). The spacing scale is semantic and hierarchical: unit (8px) is the baseline; xs (4px) is used for micro-spacing within components; sm (12px) for internal component padding; md (24px) for section gutters and card padding; lg (40px) for major section separation; xl (64px) for hero-to-content transitions. The gutter (24px) is applied consistently to horizontal padding on all container elements, ensuring content never touches the viewport edge. White-space philosophy prioritizes breathing room: sections are separated by lg spacing (40px) minimum, cards within sections by md spacing (24px), and elemen

Elevation & Depth

Depth in KuikChat is achieved through a layered shadow system combined with subtle background color shifts, creating visual hierarchy without relying on bright highlights or harsh contrasts. The elevation scale defines three primary levels: sm (0 1px 2px rgba(0, 0, 0, 0.12)) for subtle separation of interactive elements like buttons and inputs; md (0 4px 12px rgba(0, 0, 0, 0.1)) for standard cards, dropdowns, and modals; lg (0 16px 40px rgba(0, 0, 0, 0.15)) for elevated modals, popovers, and floating action buttons. Each shadow uses a soft, spread blur radius (12px to 40px) and low opacity (0.

Shapes

The shape system follows a "Soft-Technical" philosophy: rounded corners are used strategically to soften the interface's technical nature while maintaining clarity and precision. Buttons use lg (1rem, 16px) border-radius, creating a friendly, approachable appearance that invites interaction; inputs use DEFAULT (0.5rem, 8px) for a more restrained, functional feel; cards use lg (1rem, 16px) to match buttons and create visual cohesion; badges and small UI elements use full (9999px) for a pill-shaped appearance that signals non-interactive status or metadata. The rationale: larger radii (lg, xl) a

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 48px height with 12px vertical and 40px horizontal padding. The button-primary component uses background {colors.primary} (#3b82f6) with text color {colors.on-primary} (#ffffff), label-md typography (14px, 600 weight), and lg border-radius (16px). On hover, the background shifts to #1e40af (primary-container) with an added box-shadow of 0 4px 12px rgba(59, 130, 246, 0.3) to create depth and visual feedback. The button-secondary variant uses a transparent background with a 1px border in {colors.primary} and the same text color, creating a ghost-button effect; on hover, the background becomes rgba(59, 130, 246, 0.1) without shadow, maintaining visual restraint. All buttons use a transition: background-colo

Do's and Don'ts

**Do**

• Do use primary (#3b82f6) exclusively for call-to-action buttons and key interactive elements—never use it for decorative or background purposes.
• Do maintain the 48px button height and 12px/40px padding ratio across all primary actions to ensure consistent touch targets and visual rhythm.
• Do apply md elevation (0 4px 12px rgba(0, 0, 0, 0.1)) to all cards and standard containers; reserve lg elevation for modals and floating elements.
• Do use the surface container stack (surface-container-lowest through surface-container-highest) to create visual hierarchy; never hardcode background colors outside this palette.
• Do apply label-md typography (14px, 600 weight, 0.02em letter-spacing) to all button labels and UI controls for consistency and legibility.
• Do use Inter font exclusively across all text elements; never substitute system fonts or fallback stacks in component definitions.

**Don't**

• Don't use secondary (#10b981) or tertiary (#06b6d4) for primary CTAs—these are reserved for success states and secondary highlights respectively.
• Don't apply shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.15)) on standard components; excessive shadow depth creates visual clutter on dark backgrounds.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break visual consistency.
• Don't apply text-shadow to body-lg or body-md text on solid backgrounds; reserve text-shadow for label-sm elements on photographic backgrounds only.