Marvin

Overview

Marvin is an AI-native customer insights platform designed for modern research teams who need to centralize, synthesize, and activate customer knowledge at scale. The design system embodies 'Approachable Technical Precision'—a movement that marries the rigor of enterprise software with the warmth and accessibility of consumer products. The aesthetic combines a vibrant hot-pink primary accent (#fb3569) with a soft, cloud-inspired gradient background (transitioning through #f9faff, #ecf0fb, and pastel blues), creating an environment that feels both professional and inviting. Users experience clarity through generous whitespace, precise typography hierarchy (Libre Baskerville for headlines, Inter for body), and a carefully calibrated color stack that guides attention without overwhelming.

The brand voice is conversational yet authoritative: direct, jargon-light, and grounded in user outcomes rather than feature lists. Marvin speaks to researchers as peers, acknowledging the complexity of their work while celebrating the insights they uncover. Example sentence: 'Your customers just told you something important—let's make sure the whole team hears it.' The personality avoids corporate stiffness and marketing hyperbole, instead favoring clarity, specificity, and a hint of optimism about what good research can accomplish.

Colors

The color system is built on a 'Vibrant Minimalist' philosophy: a predominantly white and light-blue surface stack provides calm, focused space, while a bold hot-pink primary (#fb3569) acts as the brand's signature accent, reserved exclusively for high-priority CTAs, interactive states, and brand moments. This creates a high-contrast, attention-directing hierarchy without visual noise.

**Primary Role (#fb3569):** Used on all primary call-to-action buttons ('Get a demo', 'Sign up for free'), active tab underlines, focus states on interactive elements, and brand-defining moments. The inverse variant (#e5195d) is applied on hover to provide tactile feedback; the darker shade (#d11355) is used for active/pressed states. The container variant (#ffe1eb) provides a soft background for secondary

Typography

The type system uses a two-family pairing: Libre Baskerville (serif, 600 weight) for headlines and display text, and Inter (sans-serif, 400–700 weights) for body, labels, and UI copy. This combination signals 'editorial authority meets technical clarity'—the serif headlines evoke research rigor and credibility, while the sans-serif body ensures legibility at small sizes and on screens. Display (60px, 600 weight, -0.04em letter-spacing) is used sparingly for hero headlines; headline-lg (40px, 600 weight) anchors major sections; headline-md (28px, 600 weight) breaks up content. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and feature descriptions; body-md (16px, 400 weight, 24px line-height) is the default for body copy and form labels. Label-md (14px, 600

Layout

The page layout uses a 12-column grid with a max-width of 1280px (1440px on ultra-wide displays), centered with auto margins. The design favors a fluid, breathing approach: sections are separated by lg spacing (40px on desktop, 24px on tablet, 12px on mobile) to create visual rhythm and prevent cognitive overload. The gutter (24px) is applied consistently to all container edges, ensuring content never touches the viewport edge. Hero sections use full-width backgrounds (often with gradient overlays) but constrain text and CTAs to the container max-width for readability. Cards and content blocks use md spacing (24px) for internal padding, with sm spacing (12px) between nested elements. The spacing scale is semantic: xs (4px) for micro-interactions and icon spacing, sm (12px) for component in

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than dramatic layering. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle card lifts and hover states on small components; md (0 3px 8px rgba(0, 0, 0, 0.15)) for primary cards, modals, and interactive elements at rest; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements like dropdowns and tooltips. Primary buttons receive an additional color-specific shadow (0 3px 8px rgba(251, 53, 105, 0.25)) that intensifies on hover (0 6px 16px rgba(251, 53, 105, 0.35)) to

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are used generously to soften the precision of data-driven interfaces, but never so much that the design feels whimsical or loses its professional edge. Buttons use full radius (9999px / border-radius: 50vh) to create pill-shaped affordances that feel friendly and clickable; this applies to all primary, secondary, and tertiary buttons. Input fields also use full radius (24.5px computed, ~1.5rem) to match button styling and create visual cohesion in forms. Cards and content containers use lg radius (1rem / 16px) for a balanced, modern app

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent height of 48px with padding of 8px 32px (label-md typography, 14px / 600 weight). Primary buttons (#fb3569 background, white text) are used for high-priority CTAs ('Get a demo', 'Sign up for free') and receive a pink-tinted shadow (0 3px 8px rgba(251, 53, 105, 0.25)) at rest. On hover, the background shifts to #e5195d with an intensified shadow (0 6px 16px rgba(251, 53, 105, 0.35)); on active/press, the background becomes #d11355 with a reduced shadow (0 2px 4px rgba(251, 53, 105, 0.2)). All state transitions use a 200ms cubic-bezier(0.4, 0, 0.2, 1) easing curve. Secondary buttons use a transparent background with a 2px solid border in primary color (#fb3569), white text, and the same hover/active state