OfBusiness

Overview

OfBusiness is India's leading B2B raw materials procurement platform, serving manufacturers and traders across metals, chemicals, apparel, and food processing sectors. The design system embodies 'Precision Commerce'—a visual language that combines technical clarity with approachable modernity, reflecting the brand's mission to simplify complex supply-chain transactions. The aesthetic is clean, data-forward, and confidence-driven: a bright, neutral canvas (light grays and whites) anchored by a vibrant primary blue (#006efa) and teal accent (#07cdbe) that signal trust, energy, and forward momentum. The interface prioritizes information density and rapid decision-making, with generous whitespace and a 12-column grid that adapts fluidly across devices.

The brand voice is direct, professional, and solution-oriented—never jargon-heavy, always actionable. OfBusiness speaks to business owners and procurement teams as peers: confident, informed, and results-focused. Tone examples: 'Live prices updated every 5 minutes across 40+ materials' (specificity builds credibility), 'Get working capital in 24 hours' (outcome-driven), 'Discover new revenue streams in your supply chain' (opportunity-focused). The vocabulary favors concrete nouns (prices, materials, units, transactions) over abstractions, and uses active voice to convey agency and control.

Colors

The color system is built on a neutral-first foundation with strategic accent deployment. The surface stack (ranging from #f8fafc to #0f172a) provides visual hierarchy through subtle contrast: light surfaces (#ffffff, #f1f5f9) serve as primary containers, while mid-tone grays (#cbd5e1, #94a3b8) define borders and dividers. Primary blue (#006efa) is the signature accent—used exclusively on CTAs, active states, links, and key interactive elements; it commands attention without overwhelming the interface. Secondary teal (#07cdbe) provides a complementary accent for success states, highlights, and gradient overlays (e.g., the hero gradient: linear-gradient(221.94deg, #006efa 10.178%, #07cdbe 85.248%)). Tertiary orange (#f28900) and green (#4ade80) are reserved for status indicators and data vi

Typography

The type system uses Inter exclusively, a geometric sans-serif that balances technical precision with human warmth—ideal for B2B platforms where clarity and approachability must coexist. The hierarchy spans eight levels: display (60px, 700 weight) for hero headlines, headline-lg (48px, 700) for section titles, headline-md (32px, 600) for subsections, title-lg (20px, 600) for card headers, body-lg (18px, 400) for introductory copy, body-md (16px, 400) for standard body text, label-md (14px, 600) for buttons and form labels, and label-sm (12px, 500) for captions and metadata. Letter-spacing is conservative: -0.04em on display to tighten large text, -0.02em on headlines for elegance, and 0.01em on labels to enhance legibility at small sizes. Line-height is generous (1.4–1.5x font size) to sup

Layout

The layout system uses a 12-column grid with a max-width of 1440px, maintaining a gutter of 32px on desktop and 16px on mobile (< 768px). The page rhythm follows a modular spacing scale: sections are separated by lg spacing (40px), cards within sections use md spacing (24px), and internal card padding uses md (24px) on desktop, sm (12px) on mobile. The hero section spans full-width with a gradient background (linear-gradient(217.51deg, var(--primary-light4) 71.35%, var(--white) 88.39%)) and a minimum height of 450px, containing a left-aligned content column (max 787px) and a right-aligned imagery area. Container insets (padding-inline) are set to var(--container-inset), which adapts: 40px on desktop, 24px on tablet, 16px on mobile. Whitespace is intentional and generous—never cramped. The

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle transforms. Level 1 (base cards and inputs) uses elevation.sm: 0 1px 2px rgba(16, 24, 40, 0.06)—barely perceptible, establishing the card as distinct from the surface. Level 2 (hovered cards, modals) uses elevation.md: 0 4px 6px -2px rgba(16, 24, 40, 0.03), 0 12px 16px -4px rgba(16, 24, 40, 0.08)—a soft, spread shadow that lifts the element 4–8px. Level 3 (floating action buttons, chat widget, top-level modals) uses elevation.lg: 0 8px 32px rgba(0, 0, 0, 0.16)—a pronounced shadow with blur and spread, creating clear separation. Ho

Shapes

The shape philosophy is 'Technical Approachability'—rounded corners that feel modern and friendly without sacrificing clarity. The rounded scale progresses from sm (4px, used on small inputs and tight UI elements) through DEFAULT (6px, standard form inputs), md (10px, most cards and buttons), lg (16px, larger cards and modals), xl (20px, hero sections and prominent containers), and full (9999px, pills and badges). Buttons use md (10px) for a balanced, slightly rounded appearance; cards use lg (16px) for a softer, more inviting feel; search inputs and CTAs use full (9999px) for a pill shape tha

Components

Action Elements Buttons are the primary interaction mechanism and must be highly legible. button-primary uses a solid primary blue (#006efa) background with white text, 12px vertical and 24px horizontal padding, 10px border-radius, and elevation.sm shadow. On hover, the background shifts to #1d4ed8 (primary-dark), shadow elevates to elevation.md, and the element translates up 2px over 0.2s ease-in-out. button-secondary mirrors the primary button's dimensions but uses a white background with primary blue text and a 1px outline in surface-container-high (#cbd5e1); on hover, the background becomes surface-container-low (#f1f5f9) and shadow elevates. The gradient-button-primary (chat widget) uses a linear-gradient(221.94deg, #006efa 10.178%, #07cdbe 85.248%) background, full border-radius

Do's and Don'ts

**Do**

• Do use primary blue (#006efa) exclusively for CTAs, active states, and key interactive elements—it is the signature accent and must not be diluted across secondary UI.
• Do maintain a minimum 44px × 44px touch target for all interactive elements (buttons, inputs, links) to ensure mobile accessibility.
• Do apply elevation.md shadow and a 2–3px upward transform on hover/active states to provide tactile feedback and confirm interactivity.
• Do use Inter font exclusively at 400 weight for body text and 600+ for emphasis; never mix typefaces or use weights outside this binary system.
• Do separate sections with lg spacing (40px) and cards with md spacing (24px) to create clear visual rhythm and breathing room.
• Do use the gradient (linear-gradient(221.94deg, #006efa 10.178%, #07cdbe 85.248%)) for hero sections, app download cards, and high-impact CTAs to signal energy and forward momentum.

**Don't**

• Don't use primary blue for backgrounds, body text, or neutral UI elements—reserve it exclusively for interactive accents and CTAs.
• Don't apply shadows deeper than elevation.lg (0 8px 32px rgba(0, 0, 0, 0.16)) unless the element is a top-level modal or floating action button.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii fragment the system and reduce coherence.
• Don't mix font weights within a single text block; use 400 for body and 600+ for emphasis, never intermediate weights like 500.
• Don't cram content without whitespace; maintain md (24px) padding inside cards and lg (40px) spacing between sections to preserve readability.
• Don't apply text-shadow or complex filters to body text; reserve text-shadow (0 2px 4px rgba(0, 0, 0, 0.08)) only for small labels over busy backgrounds.