Nimbuzz

Overview

Nimbuzz is a global super-app platform that unifies messaging, commerce, live streaming, gaming, and entertainment into a single, culturally vibrant interface. The design system embraces 'Energetic Maximalism'—a philosophy that celebrates bold color contrasts, approachable geometric forms, and a sense of boundless connectivity. The brand serves users across diverse markets who demand speed, reliability, and cultural relevance in their digital tools. The UI evokes optimism and empowerment: every interaction feels responsive and rewarding, whether users are chatting across languages, shopping, or going live to earn.

The voice is direct, youthful, and inclusive—never corporate or distant. Nimbuzz speaks in active verbs and celebrates user agency: 'Go live. Earn. Connect. Shop.' Vocabulary leans toward action and possibility rather than features or specifications. The brand personality is confident yet approachable, energetic yet trustworthy. Example sentence in Nimbuzz voice: 'Chat in any language, shop with confidence, go live and earn—all in one app.'

Colors

The Nimbuzz color palette is rooted in a 'Dual-Accent' strategy: a professional blue primary (#3490dc) anchors trust and navigation, while a vibrant orange tertiary (#ff800a) ignites energy and calls-to-action. The primary blue (#3490dc) is used for navigation bars (background: #37659b for depth), link text, and interactive focus states. The secondary orange (#ff800a) appears on high-priority CTAs ('Web Login', 'Play Store'), badges, and accent highlights. The surface stack is pure white (#ffffff) with carefully calibrated grays for hierarchy: surface-container-low (#f0f2f5) for subtle backgrounds, surface-container (#e9ecef) for cards and panels, and on-surface-variant (#6c757d) for secondary text. Error states use a bold red (#e3342f) for validation feedback. The outline color (#adb5bd)

Typography

The Nimbuzz type system centers on Chakra Petch, a geometric sans-serif that conveys modernity and precision while remaining warm and accessible. Display (64px, 800 weight) anchors hero messaging with commanding presence and -0.02em letter-spacing for tightness. Headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) structure content hierarchy with consistent 1.2 line-height, creating rhythm across sections. Body text (16–18px, 400 weight) maintains legibility at 24px line-height, ensuring comfortable reading on mobile and desktop. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) handle UI labels, button text, and badges with 0.01em letter-spacing for clarity. On small labels over busy backgrounds (e.g., badges on product cards), apply text-shadow: 0 1px 2px rgba(0, 0

Layout

Nimbuzz uses a fluid 12-column grid with a max-width of 1140px (matching Bootstrap's lg breakpoint), ensuring content scales gracefully from mobile (320px) to desktop (1440px+). The gutter is consistently 24px (spacing.md), applied as padding-left and padding-right on all grid columns. Section separation uses lg spacing (40px) for major rhythm breaks (hero to punch-line, punch-line to carousel), creating visual breathing room. Container padding is 15px per side on mobile, scaling to 24px on tablets and above. The hero banner occupies full viewport height with a 50/50 split: left side displays a video (border-radius: 10px, max-height: 80vh), right side contains text and CTAs centered vertically. Carousel sections use 100% width with centered content, allowing images to scale responsively. A

Elevation & Depth

Depth in Nimbuzz is achieved through a three-tier shadow system and strategic use of background color shifts. Level 1 (Base): flat surfaces on white (#ffffff) with no shadow, relying on outline-variant (#ced4da) borders for definition. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) applied to cards, dropdowns, and modals; background-color shifts to surface-container-low (#f0f2f5) to create subtle lift. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) for prominent modals and expanded components; background brightens to surface-container (#e9ecef). Focus

Shapes

Nimbuzz adopts 'Geometric Friendliness'—a shape philosophy that balances precision with approachability. Buttons use full rounded corners (border-radius: 50px) to feel inviting and modern, creating pill-shaped CTAs that stand out against rectangular content. Cards and containers use lg (1rem / 16px) border-radius for a softer, more contemporary feel than sharp corners. Form inputs use DEFAULT (0.5rem / 8px) for subtle rounding that maintains a professional appearance. The navbar and hero section use 0px border-radius to anchor the layout with architectural clarity. Modals and dropdowns use md

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses background: #3490dc, color: white, padding: 12px 30px, border-radius: 50px, font-weight: 700, and font-size: 17.6px (label-md). On hover, background shifts to #1d68a7 with a 150ms transition. button-secondary mirrors the primary structure but uses background: #ff800a for high-energy CTAs like 'Play Store' and 'Web Login'. button-ghost provides a transparent alternative with a 2px solid border in primary color; on hover, it fills with primary-container (#d4e6f7) background. All buttons include box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) for depth and a 48px minimum height for touch accessibility.

Containers & Surfaces Cards use background: #f8f9fa, border-radius: 1rem, padding: 24px, and box-shadow: 0

Do's and Don'ts

**Do**

• Do use primary blue (#3490dc) for navigation, links, and focus states to establish trust and consistency across the platform.
• Do apply orange (#ff800a) exclusively to high-priority CTAs and badges to create visual urgency without overwhelming the interface.
• Do maintain 24px gutter spacing and 40px section breaks to ensure content breathes and hierarchy remains clear.
• Do use Chakra Petch at 700–800 weight for all headings to command attention and reinforce the energetic brand voice.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and modals for consistent depth without excessive darkness.
• Do use 50px border-radius on buttons to signal interactivity and create a friendly, modern aesthetic.

**Don't**

• Don't mix primary blue and orange on the same CTA—use one accent color per button to avoid visual confusion.
• Don't apply shadows darker than 0.15 opacity; Nimbuzz surfaces should feel light and accessible, not heavy.
• Don't use Chakra Petch below 400 weight for body text; lighter weights reduce legibility on small screens.
• Don't exceed 1140px container width; wider layouts dilute the focused, mobile-first design philosophy.
• Don't apply border-radius below 0.5rem to interactive elements; sharp corners feel corporate and reduce affordance.
• Don't use more than two accent colors in a single section; visual restraint strengthens brand recognition.