Amplemarket

Overview

Amplemarket is an AI Sales Copilot platform designed for B2B sales teams seeking to amplify human intuition with machine intelligence. The design system embraces a "Vibrant Minimalism" aesthetic: a warm, energetic background gradient (featuring organic blends of coral #ff885c, lavender #9999fe, and soft yellows #fbc768) provides visual energy and personality, while the interface elements maintain crisp, functional clarity through a light neutral palette (surface #f6f5f3, text #111111). This juxtaposition—exuberant abstraction meets disciplined UI—communicates that Amplemarket is both cutting-edge and grounded, making complex AI-driven sales workflows feel approachable and human-centered.

The brand voice is confident, direct, and pragmatic. Amplemarket speaks to sales professionals as peers, not novices: sentences are active and outcome-focused ("Empower reps, uncover opportunities, and grow revenue"), vocabulary avoids hype in favor of specificity ("intent signals," "multichannel engagement," "deliverability optimization"), and tone is encouraging without being breathless. Example: "I wake up to a list of highly relevant signals and accounts, saving me hours on research and personalization every day."

Colors

The color system is built on a high-contrast foundation: a warm, off-white surface (#f6f5f3) anchors the interface, paired with near-black text (#111111) for maximum legibility and authority. Primary (#000000) is the dominant action color—used on CTAs, critical buttons, and brand moments—conveying decisiveness and trust. Secondary (#328efa, a vivid sky blue) serves as the accent for interactive states, links, and secondary CTAs, providing visual relief and signaling interactivity. Tertiary (#00bbff, a brighter cyan) is reserved for highlights, status indicators, and accent badges. Error (#e8400d, a warm orange-red) communicates warnings and destructive actions with urgency. The surface stack progresses from #fefdfb (container-lowest, for elevated cards) through #ebe9e7 (container, for stan

Typography

The type system uses Labil Grotesk Variable as the sole typeface family, a modern variable font that supports weights from 100 to 900, enabling flexible hierarchy without font-switching overhead. Display (60px, weight 700, line-height 68px, letter-spacing -0.04em) anchors hero sections and major announcements with commanding presence. Headline-lg (48px, weight 600, -0.02em) is used for primary page titles and section headers. Headline-md (32px, weight 600) steps down for subsections and card titles. Title-lg (24px, weight 600) marks component-level headings. Body-lg (18px, weight 400, line-height 28px) is the primary reading size for long-form content and descriptions. Body-md (16px, weight 400, line-height 24px) is the default for UI text, form labels, and secondary content. Label-md (14p

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, enabling responsive scaling from mobile (single column) through tablet (6 columns) to desktop (12 columns). The page rhythm is built on a semantic spacing scale: xs (4px) for micro-adjustments, sm (12px) for component-internal spacing, md (24px) for gutter and standard padding, lg (40px) for section separation, and xl (64px) for major layout breaks. The surface background (#f6f5f3) is intentionally warm and slightly off-white, reducing eye strain while maintaining contrast with text. White space is generous—sections are separated by lg spacing (40px), and cards use md padding (24px) internally, creating visual breathing room that emphasizes content hierarchy. The hero section breaks this pattern intentionally

Elevation & Depth

Depth is conveyed through a subtle shadow system rather than color shifts or borders alone. Level 1 (Base/Surface): no shadow; the surface (#f6f5f3) is the foundation. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and standard containers—this soft, close shadow creates gentle separation from the background. Level 3 (Elevated/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), applied on card-hover and modal states—the larger blur radius and spread create a more pronounced lift, signaling interactive elevation. Modals and overlays may use a

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are present but restrained, avoiding the overly organic feel of large radii while rejecting harsh 90° angles. The rounded scale progresses: sm (0.25rem / 4px) for small, tight elements like inline badges and micro-buttons; DEFAULT (0.5rem / 8px) for inputs and standard components; md (0.75rem / 12px) for cards and medium containers; lg (1rem / 16px) for larger cards and modals; xl (1.5rem / 24px) for hero sections and prominent containers; full (9999px) for pills and fully rounded elements. Buttons use md (12px) to signal interactivity w

Components

Action Elements Buttons are the primary interaction primitive. Button-primary (background #000000, text #111111, height 48px, padding 12px 24px, rounded md) is the dominant CTA, used for sign-ups, form submissions, and critical actions. On hover, background shifts to primary-fixed (#2a2a2a) with a smooth 200ms transition, providing tactile feedback. Button-secondary (background surface-container-high #e5e3e1, text on-surface #111111, border 1px solid outline-variant #d0d0d0, height 48px, rounded md) is used for alternative actions and navigation. On hover, background lightens to surface-container-highest (#dfddd9) and text shifts to primary (#000000), emphasizing the action. Button-ghost (background transparent, text secondary #328efa, no border) is used for tertiary actions and links;

Do's and Don'ts

**Do**

• Do use primary (#000000) exclusively for CTAs and critical interactive moments—it commands attention and builds brand recognition.
• Do apply md (12px) border-radius to buttons and inputs to maintain the soft-technical aesthetic and ensure visual consistency.
• Do use the surface stack (surface-container-low through surface-container-highest) to create subtle depth without introducing new colors.
• Do pair headline-lg (48px, weight 600) with body-md (16px, weight 400) for optimal readability and visual hierarchy in long-form content.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and elevated surfaces to create gentle, professional depth.
• Do use secondary (#328efa) for links, secondary CTAs, and interactive state indicators to create visual consistency and guide user attention.

**Don't**

• Don't use primary (#000000) for body text or backgrounds—it reduces contrast and readability. Reserve it for CTAs and accents.
• Don't mix typefaces; Labil Grotesk Variable is the sole font family. Use weight and size variation instead to create hierarchy.
• Don't apply rounded-full (9999px) to buttons or standard cards—it feels playful and undermines the technical credibility of the platform.
• Don't use color alone to convey status or meaning; always pair with icons, text, or borders to ensure accessibility for color-blind users.
• Don't exceed container-max (1280px) on desktop; wider layouts reduce readability and create poor visual balance.
• Don't apply shadows larger than lg (0 8px 24px rgba(0, 0, 0, 0.12)) to UI elements—excessive shadow depth creates visual clutter and reduces the light, airy aesthetic.