Chaldal

Overview

Chaldal is a high-velocity e-commerce grocery platform serving Bangladesh with same-day delivery, designed for users who value speed, trust, and visual clarity. The design system embraces a "Vibrant Pragmatism" aesthetic—combining a bold, energetic color palette (deep purple #7533CB as primary, coral-red #ff686e as secondary accent) with clean, utilitarian layouts that prioritize task completion over decoration. The interface evokes warmth and approachability through generous use of white space (background #ffffff, surface-container #f5f5f5), while the accent colors create visual momentum on CTAs and key interactions. The brand personality is direct, helpful, and locally resonant: the tone is conversational yet efficient, avoiding corporate jargon. Example voice: "Fresh vegetables delivered by 6 PM—order now and save 15%."

Colors

The color system is built on a high-contrast, accessible foundation with three distinct roles. Primary (#7533CB, a rich purple) anchors all call-to-action buttons, active states, and brand-critical interactions—it appears on the "Continue" button, navigation highlights, and focus states. Secondary (#ff686e, a warm coral-red) provides energetic contrast for alerts, promotional badges, and secondary CTAs, creating visual urgency without competing with primary. Tertiary (#fdd670, a golden yellow) is reserved for promotional highlights, success states, and accent badges. The surface stack uses near-white neutrals: surface (#ffffff) for main content, surface-container (#f5f5f5) for grouped sections, surface-container-highest (#e6e6e6) for subtle depth, and on-surface (#2b2b2b) for body text. Ou

Typography

The type system uses Segoe UI as the primary font family, with Trebuchet and Helvetica Neue as fallbacks—a pragmatic choice that ensures legibility across Windows, Mac, and mobile devices without requiring web font loading. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines like "Grocery Delivered at your Doorstep." Headline-lg (40px, 600 weight) anchors section titles; headline-md (28px, 600 weight) breaks up category groups. Title-lg (20px, 600 weight) labels product cards and modal headers. Body-lg (18px, 400 weight, 28px line-height) is used for descriptive copy and longer-form content, while body-md (16px, 400 weight, 24px line-height) handles form labels and standard UI text. Label-md (14px, 500 weight, 20px line-height) is applied to button text and sm

Layout

The layout system uses a 12-column responsive grid with a fixed container max-width of 1200px, centered on desktop and fluid on mobile (viewport width minus 24px gutter on each side). The primary spacing unit is 8px, with semantic scales: xs (4px) for micro-spacing between inline elements, sm (12px) for compact grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The gutter (24px) is applied consistently to left/right margins on all major containers. Page rhythm follows a "breathing" pattern: hero sections use lg spacing below, category grids use md spacing between rows, and product cards use sm internal padding. On mobile (viewport < 768px), all spacing scales down by 25% (md becomes 18px, lg becomes 30px)

Elevation & Depth

Depth is conveyed through a three-tier shadow system that reinforces visual hierarchy without introducing darkness. Level 1 (Base/Surface): no shadow; elements sit flush on the white background (#ffffff). Level 2 (Standard Cards & Inputs): box-shadow: 0 1px 5px rgba(204, 204, 204, 1), a soft, warm gray shadow that lifts elements 2–4px above the surface, used on product cards, input fields, and standard buttons. Level 3 (Modals & Elevated Overlays): box-shadow: 0 0 8px rgba(0, 0, 0, 0.6), a darker, more pronounced shadow that creates clear separation for modal dialogs and chat launchers. Hover

Shapes

The shape philosophy is "Soft-Technical Efficiency"—rounded corners are used strategically to soften the utilitarian grid while maintaining clarity and scannability. Buttons use sm radius (3px), a subtle rounding that feels modern without appearing playful. Cards and containers use lg radius (10px), creating a friendly, approachable appearance that encourages interaction. Input fields use DEFAULT radius (5px), a middle ground that signals form-like functionality. Modals and overlays use DEFAULT radius (5px) on the content box, with full radius (9999px) applied only to badge elements (promotion

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses background #7533CB, white text, 36px height, 8px vertical / 16px horizontal padding, 3px border-radius, and uppercase label-md typography (14px, 500 weight). On hover, the background shifts to #723fb5 (a 10% darker purple), with transition: all 250ms ease-in-out applied to all properties. The box-shadow remains 0 1px 5px rgba(204, 204, 204, 1) across states. Disabled buttons use background #e6e6e6 and text color #9a9a9a, with no shadow. Button-secondary uses a transparent background with a 1px solid border in primary color, inverting the text/background relationship; on hover, it fills with primary-container (#e8dff7). The button-outline variant is identical to button-secondary but explicitly

Do's and Don'ts

**Do**

• Do use primary (#7533CB) exclusively for primary CTAs and active states—never apply it to passive elements or backgrounds.
• Do apply md spacing (24px) between major content sections and lg spacing (40px) between hero and body content to create visual breathing room.
• Do use label-md (14px, 500 weight, uppercase) for all button text to ensure consistency and scannability across the platform.
• Do elevate cards on hover with a shadow transition (0 1px 5px → 0 0 8px) and background shift (white → #ececec) to signal interactivity.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active) to create smooth, predictable feedback.
• Do use secondary (#ff686e) sparingly for alerts, promotional badges, and secondary CTAs—overuse dilutes urgency.
• Do maintain 1200px container max-width on desktop and apply 24px gutters on mobile to ensure readability and touch-target sizing.
• Do use Segoe UI as the primary font family with Trebuchet and Helvetica Neue as fallbacks to ensure cross-platform legibility without web font loading.

**Don't**

• Don't use primary color (#7533CB) on body text, backgrounds, or non-interactive elements—reserve it for CTAs and active states only.
• Don't apply shadows exceeding 8px blur radius or use pure black (use rgba(0, 0, 0, 0.6) instead) to maintain the clean, approachable aesthetic.
• Don't mix border-radius values within a single component family (e.g., don't use 3px on one button and 8px on another)—maintain the sm/DEFAULT/md/lg hierarchy.
• Don't use transitions longer than 300ms on interactive elements; anything slower feels sluggish and reduces perceived responsiveness.
• Don't apply tertiary color (#fdd670) to interactive elements or CTAs—it's reserved for promotional highlights and success states only.
• Don't reduce spacing below sm (12px) in standard UI layouts; micro-spacing (xs, 4px) is reserved for inline elements and icon-text pairs.
• Don't use system fonts without fallbacks; always declare the full font-family stack (Segoe UI, Trebuchet, Helvetica Neue, sans-serif) to ensure consistency.
• Don't apply text-shadow to body text or large headlines; use it only on small labels (label-sm) over busy backgrounds to maintain readability.