CuseQ

Overview

CuseQ is a verified B2B sourcing platform built specifically for Indian manufacturers, wholesalers, and procurement teams. It transforms the chaotic, noise-filled experience of industrial sourcing into a structured, transparent workflow where buyers post RFQs, receive quotations from GST-verified suppliers, and compare responses in a single calm workspace. The aesthetic is "Structured Minimalism"—a design philosophy that prioritizes clarity, trust, and efficiency through generous whitespace (surface: #ffffff, surface-dim: #f8f6ff), warm earth-tone accents (primary: #7a5438), and a soft purple gradient hero (linear-gradient(180deg, #f8f6ff 0%, #f3f0fa 50%, #ede8f5 100%)). The UI evokes a sense of professional calm and organized control, rejecting the frenetic energy of typical B2B marketplaces.

The brand voice is direct, reassuring, and grounded in operational reality. CuseQ speaks to procurement professionals who value transparency, verification, and time saved. Vocabulary emphasizes clarity ("structured quotations," "verified manufacturers," "calm workspace"), trust ("GST-verified," "transparent," "easy to explain"), and control ("compare," "manage," "organized"). The tone avoids hype; instead, it acknowledges the friction in sourcing and offers a quieter alternative. Example sentence in brand voice: "Post your requirements once, receive structured quotes from verified suppliers, and make sourcing decisions your team can defend."

Colors

The color system balances trust, professionalism, and warmth. **Primary (#7a5438)** is a warm, earthy brown used exclusively for CTAs ("Post an RFQ", "Get Started"), active states, and brand accents (e.g., the logo, section labels in uppercase tracking-[0.24em]). This color signals reliability and craftsmanship—appropriate for B2B procurement. On-primary is pure white (#ffffff) for maximum contrast on brown buttons. **Primary-container (#f1e4d7)** is a soft, desaturated beige used for hover states and secondary emphasis, creating a gentle transition without jarring the user. **Secondary (#ffffff)** is the dominant surface color, paired with on-secondary (#111827, near-black) for body text and UI elements. This high-contrast pair ensures readability across all text sizes (body-md: 16px, lab

Typography

The type system uses two complementary families: **Inter Tight** (font-weight: 600) for headlines and display text, and **Inter** (font-weight: 400–500) for body and UI labels. Inter Tight's condensed metrics and tight spacing (letter-spacing: -0.02em on display, -0.01em on headline-lg) create visual impact and hierarchy without requiring larger sizes. Display (60px, 600 weight, -0.02em tracking) anchors hero sections and major page titles. Headline-lg (40px, 600 weight) is used for section headers like "A clearer B2B sourcing experience for buyers and suppliers." Headline-md (28px, 600 weight) breaks up content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and long-form descriptions, with generous line-height (1.56) for readability. Body-md (16

Layout

CuseQ uses a **12-column fluid grid** with a max-width of 1280px (container-max: 1280px) and consistent gutter spacing of 24px (gutter: {spacing.md}). On mobile (< 640px), the grid collapses to single-column with 16px horizontal padding (px-4). On tablet and desktop, padding increases to 24px (sm:px-6) and 32px (lg:px-8) respectively. **Section rhythm** follows a predictable cadence: hero (py-16 sm:py-20 lg:py-24), stats cards (py-14 sm:py-16), feature sections (py-16 sm:py-20), and footer (py-12). Whitespace is generous—sections are separated by 40px (lg spacing) minimum, and internal card padding is 24px (md spacing). The hero section uses max-w-4xl (896px) for the text column to maintain comfortable line lengths (~60–70 characters). Cards and containers use max-w-2xl (672px) for body co

Elevation & Depth

Depth in CuseQ is achieved through **subtle layering and soft shadows**, not dramatic contrast. The design rejects dark overlays or harsh shadows; instead, it uses a three-level surface stack with delicate shadows to guide visual hierarchy. **Level 1 (Base):** The page background is pure white (#ffffff) with no shadow. **Level 2 (Cards & Containers):** Cards use a 1px border at rgba(0, 0, 0, 0.1) and a soft shadow: box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04). This shadow is barely perceptible, creating a gentle lift without visual weight. Card backgrounds are rgba(255, 255, 255, 0.75) or rgb

Shapes

CuseQ employs a **"Structured Softness"** philosophy: sharp corners on buttons and inputs (border-radius: 1px or 0.25rem) convey precision and professionalism, while generous rounding on cards and containers (border-radius: 1.5rem or 24px) introduces warmth and approachability. **Buttons** use minimal rounding (rounded-[1px], effectively sharp) to emphasize their functional, clickable nature and align with the industrial B2B context. **Cards** use rounded-2xl (1.5rem / 24px) to soften the container and create visual breathing room. **Inputs** use fully rounded corners (border-radius: 9999px) t

Components

Action Elements **Button-primary** (background: {colors.primary} #7a5438, text: white, height: 48px, padding: 12px 24px, rounded: 1px, font-weight: 500, font-size: 14px) is the primary CTA for high-intent actions ("Post an RFQ", "Get Started"). On hover, the background darkens to #6b4a31 (button-primary-hover) with a smooth transition (transition-colors, duration-300). On active/pressed, apply a subtle inset shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2). **Button-secondary** (background: white, text: #1f2937, border: 1px solid rgba(0, 0, 0, 0.1), height: 48px, padding: 12px 24px, rounded: 1px) is used for secondary actions ("Join as supplier", "Log in") and maintains the same height and padding as primary for visual consistency. On hover, the background shifts to {colors.surface-container

Do's and Don'ts

**Do**

• Do use the primary color (#7a5438) exclusively for CTAs and brand accents—never use it for backgrounds or body text.
• Do maintain 24px (md spacing) as the standard padding inside cards and 40px (lg spacing) between major sections.
• Do apply the soft shadow (0 8px 24px rgba(15, 23, 42, 0.04)) to all cards and elevated surfaces to create subtle depth.
• Do use Inter Tight (600 weight, -0.02em tracking) for all headlines to reinforce the structured, professional aesthetic.
• Do pair button-primary (#7a5438) with white text and minimal rounding (1px) to emphasize precision and trust.
• Do use the full rounded corners (9999px) on inputs and badges to introduce warmth and approachability.
• Do test all interactive elements with a focus ring (0 0 0 3px rgba(122, 84, 56, 0.1)) for accessibility and clarity.

**Don't**

• Don't use the primary color (#7a5438) for body text, backgrounds, or non-interactive elements—it's reserved for CTAs and brand accents only.
• Don't apply harsh shadows (e.g., 0 16px 40px) to cards; keep shadows soft and subtle (0 8px 24px rgba(15, 23, 42, 0.04)) to maintain the calm aesthetic.
• Don't mix rounded corners inconsistently; use 1px for buttons, 24px for cards, and 9999px for inputs/badges.
• Don't use dark overlays or heavy transparency (> 0.3 alpha) on surfaces; keep backgrounds light and airy (rgba(255, 255, 255, 0.75–0.85)).
• Don't apply letter-spacing > 0.05em to body text; reserve wide tracking (0.24em) for small caps and labels only.
• Don't exceed 1280px container width; maintain the max-w-7xl constraint to preserve readability and focus.
• Don't use the secondary color (#ffffff) as a primary accent; it's the default surface, not a brand color.