SelectCursor

Overview

SelectCursor embodies a "Professional Clarity" aesthetic—a design philosophy that prioritizes trust, efficiency, and precision through restrained use of color and deliberate typography hierarchy. The brand serves B2B procurement teams in proptech and fintech, delivering a UI that feels both authoritative and approachable. The visual language combines a deep navy primary (#0066ff, appearing on CTAs and key interactions) with a clean, light surface palette (off-white #fafafa) and strategic accent colors (success green #1ca64f, warning amber #facc15). This creates a sense of stability and professionalism without sacrificing warmth. The emotional response is one of confidence: users feel they are engaging with a vetted, competent partner. Voice: direct, outcome-focused, never jargon-heavy. Example: "Match in under 48 hours. Pre-vetted engineers. No screening delays."

Colors

The color system is anchored by a professional navy primary (#0066ff) used exclusively on primary CTAs ('Book a Call', 'Accept'), focus states, and brand-critical interactive elements. This blue is intentionally vibrant—distinct from near-black—to signal actionability without aggression. Secondary green (#1ca64f) reinforces positive outcomes and status indicators ('Live', 'matched'). Tertiary amber (#facc15) is reserved for warnings and highlights. The surface stack progresses from bright white (#ffffff) for elevated cards through light grays (#e9ecef, #d0d0d0) for container hierarchy, down to a near-white background (#fafafa) that reduces eye strain during extended reading. On-surface text is a deep navy (#141f38, nearly black but not pure black) for legibility and sophistication. Outline

Typography

The type system uses Inter exclusively, a humanist sans-serif that conveys both professionalism and approachability. Display (72px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence; headline-lg (40px, 600 weight) structures major sections; headline-md (28px, 600 weight) introduces subsections. Body text operates at 16px (body-md) with 24px line-height for comfortable reading; larger body-lg (18px, 28px line-height) is used for hero copy and key messaging. Labels (14px, 600 weight, 0.01em letter-spacing) appear on buttons and form fields, with a smaller label-sm (12px, 500 weight) for badges and metadata. All headings use -0.02em to -0.04em negative letter-spacing to tighten visual weight; body text uses 0em spacing for neutrality. Apply text-shadow: 0 1px

Layout

The layout uses a 12-column fluid grid with a 1400px container max-width, centering content on desktop and collapsing to full-width on mobile. The spacing scale is semantic: unit (8px) is the baseline; sm (12px) for compact spacing within components; md (24px) for section gutters and card padding; lg (40px) for major section separation; xl (64px) for hero-to-content transitions. The hero section uses lg spacing (40px) above and below to create breathing room. Cards are padded with md (24px) on all sides. The grid gutter is 24px (md), maintaining rhythm across the layout. White-space is generous—never cramped—to reinforce the 'clarity' aesthetic. Container max-width of 1400px prevents text from becoming uncomfortably wide on ultra-large displays. Mobile breakpoints collapse to single-column

Elevation & Depth

Depth is achieved through a restrained shadow system that avoids the heavy, dark shadows of skeuomorphism. Level 1 (Base): no shadow; surface is flat against the background. Level 2 (Standard Card): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), a soft, diffuse shadow that suggests gentle lift. Level 3 (Elevated/Modals): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), a larger spread shadow for modals and floating panels. Hover states on cards transition from Level 2 to Level 3 over 200ms, creating a subtle depth cue without jarring movement. Buttons use no shadow by default (flat appearance) but ga

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used strategically to soften hard edges without introducing organic or playful aesthetics. Buttons and primary CTAs use lg (1rem / 16px) border-radius, creating a modern, approachable appearance while maintaining professional geometry. Cards and containers use lg (16px) for consistency. Input fields use DEFAULT (0.5rem / 8px) for a tighter, more technical feel. Badges use full (9999px) for a pill-shaped appearance, signaling status or metadata. The cookie banner uses xl (1.5rem / 24px) to distinguish it as a system-level compone

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#0066ff) with white text, lg rounded corners (16px), and 12px 24px padding for a 44px total height. On hover, the background shifts to #0052cc over 200ms, maintaining the same padding and height. Button-secondary uses a white background with a 1px {colors.outline-variant} border (#cccccc), dark text, and the same dimensions; on hover, the background becomes {colors.surface-container-low} (#eeeeee) and the border darkens to {colors.outline} (#9ca3af). Button-ghost has a transparent background with primary text; on hover, it gains a light blue background ({colors.primary-container}, #e8f1ff) over 200ms. All buttons use {typography.label-md} (14px, 600 weight) and apply a 200ms ease transi

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0066ff) exclusively on primary CTAs and focus states—never on secondary elements or decorative accents.
• Do maintain md (24px) spacing between major sections and lg (40px) spacing between hero and content to preserve visual breathing room.
• Do apply 200ms ease transitions on all interactive state changes (hover, focus, active) to signal responsiveness without jarring movement.
• Do use {typography.label-md} (14px, 600 weight) on all buttons and form labels for consistent hierarchy and legibility.
• Do layer shadows progressively: no shadow for base, {elevation.sm} for standard cards, {elevation.lg} for modals and floating panels.
• Do use lg (16px) border-radius on buttons and cards to maintain the 'Geometric Precision' aesthetic—never use sharp corners (0px) on interactive elements.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary text or background—use {colors.on-surface} (#141f38) and {colors.surface} (#fafafa) instead for reduced eye strain.
• Don't apply multiple shadows or gradients to a single element; the system uses flat color + single shadow for clarity.
• Don't use secondary or tertiary colors on primary CTAs—primary blue (#0066ff) is reserved for the most important user actions.
• Don't exceed xl (64px) spacing between sections or use spacing values outside the defined scale (xs, sm, md, lg, xl).
• Don't apply animations longer than 300ms on hover states; keep transitions snappy (200ms ease) to feel responsive.
• Don't use rounded corners smaller than DEFAULT (8px) on interactive elements; the minimum is sm (4px) for very small badges only.