Agent

Overview

Agent is a search-driven in-app guidance system that replaces static product tours with dynamic, contextual navigation. The brand embodies 'Directional Minimalism'—a design philosophy that prioritizes clarity and purposeful action over decorative complexity. The UI evokes a sense of calm competence: soft, light surfaces (rgb(238, 243, 243)) paired with a decisive dark accent (rgb(12, 19, 25)) create visual hierarchy without aggression. The emotional response is one of relief—users feel guided, not lectured. The brand personality is precise, conversational, and action-oriented: it speaks to product builders who are tired of static tours that go stale the moment the UI changes. Voice example: 'Your visitors know what they want. Agent just points them there.'

Colors

The color system is anchored in a serene, high-luminance palette designed to feel approachable and trustworthy. Primary (#0c1319, rgb(12, 19, 25)) is the decisive dark used for CTAs, navigation, and interactive focus states—it commands attention without harshness. On-primary (#eef3f3, rgb(238, 243, 243)) is the light background, creating maximum contrast for accessibility and legibility. Secondary (#3f6883, rgb(63, 104, 131)) is a muted blue-grey that supports secondary actions and data visualization; tertiary (#7298b0, rgb(114, 152, 176)) is a lighter blue used for accents and highlights. The surface stack uses a luminous light theme: surface (#eef3f3) is the default canvas, surface-container-high (#e8eef1) is used for hover and elevated states, and surface-container-lowest (#f8fbfc) for

Typography

The type system uses Outfit as the primary typeface, chosen for its geometric clarity and light weight (300–500 range) that reinforces the brand's minimalist aesthetic. Display (72px, 300 weight, -0.02em tracking) is reserved for hero headlines and sets the tone of calm authority. Headline-lg (48px, 300 weight) and headline-md (36px, 400 weight) are used for section titles and create visual rhythm through weight variation rather than size jumps. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) are the workhorses for copy and descriptions, with generous line-height (1.5–1.75) to ensure readability on light backgrounds. Label-md (14px, 500 weight, 0.01em tracking) is applied to buttons and form labels, while label-sm (12px, 500 weight, 0.05em trac

Layout

The layout follows a fluid, mobile-first grid with a max-width of 1280px (container-max) and 12-column structure. The hero section uses full-viewport height (min-h-svh) with centered content and a background image scaled at 1.15x to create depth. Sections are separated by lg spacing (40px) on mobile, scaling to 64px on desktop, creating a breathing rhythm that guides the eye. The gutter (20px) is applied consistently to all horizontal padding, ensuring content never touches viewport edges. Cards and containers use md spacing (24px) for internal padding, with rounded corners at 10px (md radius) for a friendly, approachable feel. Input fields use full radius (9999px) to signal interactivity and reduce cognitive load. The sticky header (top-0, z-50) uses backdrop-blur-lg (16px blur) with a se

Elevation & Depth

Depth is achieved through subtle shadows and layering rather than dramatic z-index stacking. Level 1 (Base): the light background (rgb(238, 243, 243)) with no shadow, establishing the canvas. Level 2 (Cards & Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with 1px solid border at rgba(191, 212, 218, 1) creates gentle separation from the background. Level 3 (Modals & Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with backdrop-filter: blur(16px) and background: rgba(238, 243, 243, 0.95) creates a frosted-glass effect. The sticky header uses backdrop-blur-lg (16px) with background: rg

Shapes

The shape philosophy is 'Friendly Precision'—rounded corners are used strategically to signal interactivity and reduce visual harshness, but never so aggressively as to feel playful or casual. Buttons use full radius (9999px, border-radius: 9999px) to create pill-shaped affordances that feel inviting and clickable. Cards and containers use md radius (10px) to soften edges without sacrificing a professional appearance. Input fields also use full radius (9999px) to match button styling and create a cohesive interaction language. Navigation links and list items use lg radius (12px) for hover back

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses background: rgb(12, 19, 25), color: rgb(238, 243, 243), padding: 8px 16px, height: 40px, border-radius: 9999px, and font-weight: 500 (label-md). On hover, background shifts to #1a2633 with transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1). Button-secondary uses transparent background with 1px border at outline-variant (#bfd4da), same padding and height, and text-color: primary. On hover, background becomes surface-container-high (#e8eef1). Both buttons use cursor: pointer and are disabled with opacity: 0.5 and cursor: not-allowed. The 'Join waitlist' CTA is button-primary with a subtle scale(1.02) transform on hover to reinforce clickability.

Containers & Surfaces Cards use background: s

Do's and Don'ts

**Do**

• Do use primary (#0c1319) for all CTAs and interactive focus states—it's the only color that should command immediate attention.
• Do maintain lg spacing (40px) between major sections to create visual breathing room and guide the eye through the page hierarchy.
• Do apply full radius (9999px) consistently to buttons and input fields to create a unified interaction language.
• Do use Outfit at 300–400 weight for headlines to maintain the calm, minimalist aesthetic—avoid bold weights except for labels.
• Do pair light backgrounds (surface, #eef3f3) with dark text (on-surface, #0c1319) to maximize contrast and accessibility.
• Do use backdrop-filter: blur(16px) on floating elements (header, modals) to create depth without heavy shadows.

**Don't**

• Don't use secondary (#3f6883) or tertiary (#7298b0) for primary CTAs—they are supporting accents only.
• Don't apply border-radius: 0px anywhere; even structural elements should have at least sm radius (4px).
• Don't exceed box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) for any element—deeper shadows contradict the light, airy aesthetic.
• Don't use font-weight: 700 or higher in body copy; reserve bold (600–700) for labels and emphasis only.
• Don't apply transitions longer than 150ms for interactive states—the brand feels responsive and immediate, not sluggish.
• Don't mix Outfit and Inter in the same text block; use Inter only for data tables and technical content (mono-md).