LeadManager

Overview

LeadManager is a construction intelligence platform that empowers sales teams to identify and pursue high-value project opportunities with precision and speed. The design system embodies "Authoritative Clarity"—a movement that combines professional gravitas with warm, human-centered approachability. The visual language uses a striking red accent (#ff0000) against a soft, neutral warm-gray palette (#f7f7f7 background, #321432 plum for typography) to create urgency and trust simultaneously. Users should feel confident that they're accessing premium, vetted data while remaining comfortable exploring the interface.

The brand voice is direct, data-driven, and conversational—never jargon-heavy, always actionable. Tone examples: "Find the projects that matter to your business" (not "Leverage construction intelligence solutions"). "Your next lead is here" (not "Maximize pipeline velocity"). The personality balances the precision of a CRM with the warmth of a trusted advisor, speaking to construction professionals who value their time and expect results.

Colors

The color system is anchored by a bold, high-saturation red primary (#ff0000) used exclusively for call-to-action buttons, links, and interactive focus states. This red commands attention without aggression—it's the color of opportunity, not alarm. Secondary colors include a deep plum (#321432) for body text and headers, providing sophisticated contrast against the warm-gray surface (#f7f7f7), and a supporting orange tertiary (#ff6900) for secondary highlights and accent elements. The surface stack progresses from bright white (#ffffff) for elevated cards through soft grays (#f7f7f7 base, #e8e8e8 dim, #efefef container-high) to create subtle depth without darkness. On-surface text is always the plum (#321432) for legibility and brand consistency. Error states use a muted red (#cf2e2e) to d

Typography

The type system uses Bauziet as the primary typeface across all scales, creating a cohesive, modern aesthetic that feels both technical and approachable. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 600 weight) structures primary page sections; Headline-md (28px, 600 weight) breaks content into digestible chunks; Title-lg (20px, 600 weight) labels cards and subsections. Body-lg (18px, 400 weight, 28px line-height) is reserved for introductory paragraphs and key messaging, while Body-md (16px, 400 weight, 24px line-height) serves as the default paragraph text. Label-md (14px, 600 weight, 0.02em tracking) is used for button text, form labels, and UI controls; Label-sm (12px, 500 weight, 0.03em tracking) handles captions, metad

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, providing flexibility for both desktop and tablet experiences. The base spacing unit is 8px, with semantic scales: xs (4px) for micro-interactions, sm (12px) for component padding, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero spacing. White-space is generous but purposeful—the warm-gray background (#f7f7f7) breathes between content blocks, with lg spacing (40px) separating hero from features, and md spacing (24px) between cards within a grid. Container max-width is 1280px to prevent line-length bloat on ultra-wide displays. Margins follow a consistent rhythm: section-to-section uses lg (40px), card-to-card uses md (24px), and internal component

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids darkness while maintaining clear visual hierarchy. Level 1 (Base Surface) has no shadow—the warm-gray background (#f7f7f7) is the foundation. Level 2 (Standard Cards) uses a soft shadow of 0 4px 12px rgba(0, 0, 0, 0.08), lifting cards subtly from the background without creating visual separation anxiety. Level 3 (Elevated/Modals) uses 0 16px 40px rgba(0, 0, 0, 0.12), reserved for modals, dropdowns, and primary CTAs. Interactive elements (buttons) add a stronger shadow on hover: 0 6px 12px rgba(0, 0, 0, 0.15), signaling clickabili

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used strategically to soften the precision of data-driven interfaces without sacrificing professionalism. Buttons use the full radius (9999px / {rounded.full}) to create pill-shaped CTAs that feel inviting and modern, particularly the primary red button which uses this radius to maximize visual impact. Cards and containers use md (12px) or lg (16px) radius to balance approachability with structure—not so rounded as to feel playful, not so sharp as to feel cold. Input fields use the DEFAULT radius (8px) for a neutral, functional appea

Components

Action Elements Buttons are the primary interaction mechanism and must be visually unmistakable. The primary CTA button uses the full red (#ff0000) with plum text (#321432), full radius (9999px), and a strong shadow (0 4px 9px rgba(0, 0, 0, 0.75)) to command attention. On hover, the background darkens to #e60000 and the shadow increases to 0 6px 12px rgba(0, 0, 0, 0.15), creating a subtle lift effect. On active/pressed state, the background becomes #cc0000 with an inset shadow (inset 0 3px 0 0 #a71000) to simulate depression. Secondary buttons use a white background with a 1px outline in outline-variant (#cac8c8), allowing them to recede visually while remaining accessible. All button text uses label-md typography (14px, 600 weight, 0.02em tracking) with a minimum height of 48px to mee