Relate

Overview

Relate is a modern B2B sales CRM platform designed for teams that demand clarity, collaboration, and control over their customer relationships. The design system embodies "Accessible Professionalism"—a movement that rejects both sterile corporate aesthetics and overly playful interfaces in favor of a grounded, human-centered approach. The visual language combines a bright, clean white canvas (#fcfcfc) with a vibrant primary blue (#0099ff) that signals action and trust. Every interaction is designed to feel responsive and purposeful, never cluttered. The brand personality is direct, competent, and slightly warm: it speaks to sales professionals who value their time and expect tools that work as hard as they do. Voice example: "Your pipeline is clear. Close more deals."

Colors

The color system is built on a light, accessible foundation with strategic accent deployment. Primary (#0099ff) is the signature brand color—used exclusively for CTAs, active states, and key interactive elements. It appears on the hero section's gradient backdrop and the prominent "Get started free" button, creating visual momentum. Secondary (#145aff) provides a deeper blue for hover states and secondary actions, while tertiary (#f26052) is reserved for error states and critical alerts. The surface stack ranges from #fcfcfc (main background) through #f9fafb (container-lowest) to #d1d5db (container-highest), providing subtle depth without visual noise. On-surface text is #111827 (near-black for readability at 16px+ sizes), with on-surface-variant at #6b7280 for secondary copy and metadata.

Typography

The type system pairs Inter (display/headlines) with Roboto (body) and Archivo (labels), creating a hierarchy that balances personality with legibility. Display (80px, 600 weight, -0.04em tracking) commands attention on hero sections; headline-lg (40px, 600 weight) anchors major sections; body-md (16px, 400 weight, 24px line-height) is the workhorse for all body copy, set at 1.5 line-height for comfortable reading. Label-md (14px, 500 weight, Archivo) is used for button text, badges, and UI labels—the 500 weight provides emphasis without bulk. Letter-spacing is tightened on large display text (-0.04em) to create visual cohesion, while body text uses +0.01em to improve readability. All type is rendered with -webkit-font-smoothing: antialiased for crisp rendering. On small labels over busy b

Layout

The layout system uses a 12-column grid with a maximum container width of 1400px, providing flexibility for both desktop and tablet layouts. The spacing scale is semantic: unit (8px) is the base increment, with sm (12px), md (24px), lg (40px), and xl (64px) used for progressive separation. Section separation uses lg spacing (40px) to create breathing room; card padding uses md (24px); and gutter margins are consistently 24px on desktop. The hero section spans full-width with rounded corners (1.5rem) and a gradient background, creating a contained focal point. White-space is generous—never cramped—reflecting the brand's confidence and the target audience's preference for clarity over density. Container max-width of 1400px ensures text remains readable (optimal line length ~65–75 characters

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through color darkening. The elevation system defines three levels: sm (0 1px 2px rgba(0,0,0,0.04)) for cards and subtle containers, md (0 4px 12px rgba(0,0,0,0.08)) for hover states and elevated cards, and lg (0 16px 40px rgba(0,0,0,0.12)) for modals and overlays. The hero section uses a gradient background (linear-gradient(135deg, #dbeafe 0%, #bfdbfe 50%, #93c5fd 100%)) with rounded corners (1.5rem) to create visual separation from the page background without relying on shadows. Interactive elements (buttons, inputs) gain a subtle

Shapes

The shape philosophy is "Soft Precision"—rounded corners that feel approachable without sacrificing professional clarity. Buttons use full rounding (9999px border-radius) to signal primary actions and create a friendly, modern feel. Cards and containers use lg (1rem / 16px) rounding for a balanced, contemporary aesthetic. Inputs use md (0.75rem / 12px) rounding, slightly tighter than cards to differentiate them as functional elements. The hero section uses xl (1.5rem / 24px) rounding to create a contained, framed experience. This graduated approach—full > xl > lg > md—creates visual hierarchy

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses #0099ff background with white text, 48px height, 14px 32px padding, and full rounding (9999px). On hover, the background shifts to #0080cc with a 0 4px 12px rgba(0,153,255,0.2) shadow, creating a subtle lift effect. On active/pressed, the background darkens to #0066aa. The button-secondary variant uses a transparent background with a 1px outline border and primary text color, allowing for secondary actions without visual dominance. Transitions use 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth, responsive feedback.

Containers & Surfaces Cards are the primary container component: 1rem rounded corners, 24px padding, white background (#ffffff), and sm elevation (0 1px 2px rgba(0,0,0,0.04))

Do's and Don'ts

**Do**

• Do use primary blue (#0099ff) exclusively for CTAs, active states, and key interactive elements—it's the brand's signature accent and should never be diluted.
• Do maintain generous white-space (lg spacing: 40px) between sections to reflect the brand's confidence and the target audience's preference for clarity.
• Do apply full rounding (9999px) to primary buttons and lg rounding (1rem) to cards to maintain the soft-precision aesthetic across all components.
• Do use Inter for headlines and display text to create visual hierarchy; reserve Roboto for body copy to ensure readability at smaller sizes.
• Do test all interactive elements with a 150–200ms transition timing to provide responsive, smooth feedback without feeling sluggish.

**Don't**

• Don't use primary blue for backgrounds or large surface areas—it's an accent color, not a canvas. Reserve it for interactive elements and CTAs.
• Don't apply shadows heavier than lg (0 16px 40px rgba(0,0,0,0.12)) to avoid a dated, skeuomorphic appearance that conflicts with the modern aesthetic.
• Don't mix rounded and sharp corners in the same component—maintain consistency with the soft-precision philosophy (minimum 0.75rem rounding for all interactive elements).
• Don't reduce line-height below 1.5 for body text (16px font = 24px line-height minimum) to maintain readability and accessibility for long-form content.