Biizline

Overview

Biizline is India's B2B order management platform designed for agricultural suppliers, industrial distributors, and bulk retailers. The design system embodies "Functional Clarity"—a minimalist aesthetic that prioritizes rapid task completion and information density without sacrificing accessibility. The interface uses a clean white canvas (surface: #ffffff) with strategic accent colors (primary: #1677ff, secondary: #f5222d) to guide users through order placement, inventory tracking, and supplier management. The emotional response is one of confidence and efficiency: users trust the platform to handle complex supply chains with precision.

The brand voice is direct, professional, and action-oriented. Biizline speaks to busy procurement managers and warehouse operators who value speed over decoration. Vocabulary emphasizes clarity: "Enter WhatsApp Number," "Continue," "Log In"—no marketing fluff. The tone is reassuring but never patronizing. Example sentence in brand voice: "Your order is confirmed. We'll send you a code to verify it."

Colors

The color system balances a neutral foundation with purposeful accent colors. The surface stack (surface: #ffffff, surface-dim: #f5f5f5, surface-container: #ebebeb, surface-container-highest: #d9d9d9) creates visual hierarchy through subtle grayscale shifts, enabling users to distinguish interactive zones without jarring contrast. Primary (#1677ff) is the signature action color—used on CTAs like "Continue" buttons, links, and focus states. It conveys trust and authority, essential for B2B transactions. Secondary (#f5222d) is reserved for alerts, errors, and high-priority status indicators (e.g., "Out of Stock"). Tertiary (#fc7100) highlights promotional badges and secondary actions. On-surface text is pure black (#000000) for maximum legibility in fast-paced procurement workflows. The outl

Typography

The type system prioritizes readability and hierarchy using Geist, a geometric sans-serif optimized for screen legibility. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections and major page titles. Headline-lg (40px, 600 weight) introduces key sections. Body-md (16px, 400 weight, 24px line-height) is the workhorse for form labels, product descriptions, and transaction details—chosen for its 1.5x line-height ratio to reduce cognitive load in data-heavy interfaces. Label-md (14px, 500 weight, 0.01em letter-spacing) marks button text and field labels, with slightly increased letter-spacing (0.01em) to improve scannability. For small labels over busy product backgrounds, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) to ensure contrast. Font weights are deliberately limi

Layout

The layout uses a 12-column grid with a 1280px max-width container, optimized for both desktop order management and tablet-based warehouse scanning. The page rhythm is driven by the spacing scale: lg (40px) separates major sections (hero from form, form from product grid), md (24px) creates breathing room between cards and input groups, and sm (12px) provides internal padding within components. The gutter is consistently 24px, creating a 48px margin on each side at full width. White space is intentional: the login form sits in the right half of the viewport with generous left margin, allowing the product carousel to breathe on the left. Container max-width of 1280px prevents line lengths from exceeding 80 characters in body text, maintaining readability. The form inputs use md spacing (24p

Elevation & Depth

Elevation is achieved through a restrained shadow system and subtle background shifts rather than dramatic depth. Level 1 (Base): The white surface (#ffffff) with no shadow, representing the primary interaction plane. Level 2 (Cards & Inputs): 0 2px 0 rgba(0, 0, 0, 0.02)—a hairline shadow that barely lifts elements off the background, used on product cards and input fields to signal they are interactive without creating visual clutter. Level 3 (Modals & Overlays): 0 16px 40px rgba(0, 0, 0, 0.12)—a softer, more diffuse shadow used on modal dialogs and floating panels to create clear separation

Shapes

The shape philosophy is "Approachable Geometry"—rounded corners that feel modern and friendly without sacrificing professional credibility. Buttons use xl radius (16px) to create a soft, inviting appearance that encourages clicks; this is especially important for primary CTAs like "Continue" which must feel low-friction. Input fields use the DEFAULT radius (8px), balancing softness with a more structured, form-like appearance. Cards use lg radius (14px) to sit between buttons and inputs, creating a visual hierarchy of roundness. The full radius (9999px) is reserved for badges and circular icon

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses backgroundColor: {colors.primary} (#1677ff), textColor: {colors.on-primary} (white), rounded: {rounded.xl} (16px), and padding: 14px 20px with a 48px height. The transition property (all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1)) ensures smooth feedback. On hover, the background shifts to #0958d9 (button-primary-hover), and on active/press, it darkens further to #003d99 (button-primary-active). The button-secondary variant uses a white background with a 1px border (outline-variant: #cccccc), suitable for secondary actions like "Log In" or "Help." Ghost buttons (button-ghost) have no background or border, only text color in primary blue, and reveal a surface-container-low background on hover

Do's and Don'ts

**Do**

• Do use primary blue (#1677ff) exclusively for CTAs and interactive elements—never use it for decorative backgrounds or non-actionable text.
• Do maintain the 24px gutter margin on all sides of the container to preserve breathing room and prevent content from feeling cramped.
• Do apply the full 16px border-radius to primary buttons to signal their importance and encourage interaction.
• Do use the md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) on hover states to provide tactile feedback without overwhelming the interface.
• Do keep input field heights at 44px minimum to accommodate touch targets on mobile devices (WCAG 2.5.5 compliance).
• Do use Geist at 16px body-md for all form labels and product descriptions to ensure consistent legibility across devices.

**Don't**

• Don't use secondary red (#f5222d) for anything other than errors, alerts, and high-priority status indicators—overuse dilutes its warning power.
• Don't apply shadows larger than the lg elevation (0 16px 40px rgba(0, 0, 0, 0.12)) on any component; excessive depth creates visual chaos in data-dense interfaces.
• Don't reduce input field height below 44px or padding below 12px 16px; cramped inputs increase error rates in fast-paced procurement workflows.
• Don't use rounded corners smaller than 8px (DEFAULT) on interactive elements; insufficient rounding feels harsh and discourages interaction.
• Don't mix font families; Geist is the sole typeface—avoid Inter, Patrick Hand, or Plus Jakarta Sans in component definitions.
• Don't use outline-variant (#cccccc) for text; reserve it exclusively for borders and dividers—use on-surface (#000000) for all body text.