Profound

Overview

Profound is an AI Answer Engine Optimization (AEO) platform designed for B2B SaaS and enterprise brands competing in the zero-click search landscape. The brand embodies a 'Technical Minimalism' aesthetic—combining deep charcoal and near-black surfaces (#0a0a0a, #1b1b1b) with precise accent colors (electric blue #5dabff for interactive elements, neutral grays #505050–#737373 for secondary actions) to convey technical sophistication without visual clutter. The UI evokes a sense of control and clarity: users are navigating complex AI visibility data, so every element must feel purposeful and responsive. The emotional response is one of confidence—the platform makes the invisible (AI-generated answers) visible and actionable.

The brand voice is direct, data-driven, and conversational without being casual. Profound speaks to marketing leaders and product teams who understand the stakes of AI search visibility. Vocabulary patterns include 'visibility,' 'optimization,' 'presence,' 'competitive advantage,' and 'zero-click world'—language that frames AI search as a strategic business challenge, not a technical novelty. The tone avoids hype; instead, it grounds claims in measurable outcomes. Example sentence in brand voice: 'Your brand appears in 12% of Gemini answers for your category—here's how to reach 25%.'

Colors

The color system is built on a dark-first, high-contrast foundation optimized for data visualization and focus. Surface colors range from near-black (#0a0a0a for base) through mid-grays (#1b1b1b for containers, #505050 for elevated surfaces) to create visual hierarchy without brightness shifts. On-surface text is a warm off-white (#edd2f5) that reduces eye strain during extended data review sessions while maintaining WCAG AAA contrast (18:1 ratio) against dark backgrounds.

Primary accent is a neutral dark gray (#333333) used sparingly on primary buttons and key interactive states—this creates a 'quiet confidence' aesthetic where the interface doesn't shout. Secondary accent is electric blue (#5dabff), reserved for links, focus states, and data highlights (e.g., 'Prompt Volumes' metrics).

Typography

The typography system uses Inter Variable exclusively, a modern geometric sans-serif that conveys technical precision while remaining approachable. Display (56px, 500 weight, -0.02em tracking) is reserved for hero headlines like 'Marketing agents to win in Gemini'—the lighter weight (500 vs. 700) and negative tracking create an elegant, confident presence. Headline-lg (40px, 600 weight) is used for section titles and major CTAs; headline-md (28px, 600 weight) for subsections. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for hero copy and feature descriptions, with generous line-height (1.56x) to support scanning. Body-md (16px, 400 weight, 24px line-height) is the default for UI labels, form text, and card content. Label-md (14px, 500 weight, 0.01em tracking) is

Layout

The layout follows a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The design uses a 'breathing room' philosophy: lg spacing (40px) separates major sections (hero, features, pricing), md spacing (24px) divides cards and content blocks, and sm spacing (12px) provides breathing room within components. The gutter is consistently 24px on desktop, reducing to 16px on tablets and 12px on mobile. Container max-widths vary by section (800px–950px observed) to create visual rhythm and prevent text from becoming too wide for comfortable reading. The hero section uses full-width imagery with centered text overlay, establishing visual dominance. Feature sections employ a card-based layout with 2–3 columns on desktop, stacking to 1 column below 768px. Whitespace is treated

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background-color shifts rather than aggressive drop shadows. Level 1 (Base): the surface layer (#0a0a0a) with no shadow, establishing the visual foundation. Level 2 (Standard Card): surface-container (#1b1b1b) with a 1px border in outline-variant (#6c6c75) and box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift without visual heaviness. Level 3 (Elevated/Modal): surface-container-high (#252525) with box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.15), reinforcing hierarchy. Hover states on cards transition to surface-cont

Shapes

The shape philosophy is 'Functional Precision'—rounded corners are used strategically to soften hard edges without introducing organic or playful aesthetics. Buttons and primary interactive elements use lg radius (1rem / 16px), creating a modern, approachable feel while maintaining clear clickability. Cards and containers use lg radius (1rem) for consistency with buttons, establishing a cohesive component language. Input fields use DEFAULT radius (0.5rem / 8px), slightly tighter than buttons to signal their passive role in the interface. Chips and badges use full radius (9999px), emphasizing t

Components

Action Elements Buttons follow a three-tier system: primary (dark gray #333333 background, off-white text, 1px border in outline-variant), secondary (transparent background, off-white text, 1px border in outline), and ghost (transparent background, blue text #5dabff, no border). All buttons are 44px tall with 12px vertical and 24px horizontal padding, using label-md typography (14px, 500 weight). Primary buttons transition to primary-container (#505050) on hover with a 200ms cubic-bezier(0.2, 0, 0, 1) ease. Secondary buttons transition to surface-container-high (#252525) background on hover. Ghost buttons transition to rgba(93, 171, 255, 0.08) background on hover, maintaining the blue text color. Focus states on all buttons apply a 3px outline in secondary (#5dabff) with 4px offset, en

Do's and Don'ts

**Do**

• Do use dark surfaces (#0a0a0a–#1b1b1b) as the default, reserving lighter grays (#505050+) for elevated or interactive states to maintain visual hierarchy.
• Do apply blue (#5dabff) exclusively to interactive elements (links, focus states, data highlights) to create a consistent, scannable accent language.
• Do use Inter Variable at all sizes, maintaining consistent weight (400 for body, 500–600 for labels/headlines) and tracking (-0.02em to 0.02em) to preserve the technical aesthetic.
• Do apply 200ms cubic-bezier(0.2, 0, 0, 1) transitions to all interactive state changes (hover, focus, active) for a snappy, predictable feel.
• Do use lg radius (1rem) for buttons and cards, DEFAULT radius (0.5rem) for inputs, and full radius (9999px) for badges to create a clear component hierarchy.
• Do maintain 1px borders in outline-variant (#6c6c75) on cards and inputs to add definition without visual heaviness.
• Do reserve shadows for elevation only: md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, lg shadow (0px 2px 15px 0px rgba(0, 0, 0, 0.15)) for modals.

**Don't**

• Don't use primary color (#333333) for body text or large text blocks—reserve it for buttons and interactive elements only; use on-surface (#edd2f5) for all reading content.
• Don't apply blue (#5dabff) to non-interactive elements like labels, badges, or decorative text; use on-surface-variant (#b8b8b8) for secondary information.
• Don't exceed 2 levels of elevation (standard card + modal); avoid nested shadows or multiple box-shadow layers that create visual confusion.
• Don't use rounded corners smaller than DEFAULT (0.5rem) on interactive elements; sharp corners reduce perceived clickability and feel unfinished.
• Don't apply text-shadow to body text on light backgrounds; reserve text-shadow (0 2px 4px rgba(0, 0, 0, 0.3)) for text over busy images or dark overlays only.
• Don't mix font weights within a single line of body text; use consistent weight (400) for reading content and reserve 500–600 weights for labels and headlines.
• Don't use transitions longer than 200ms for interactive state changes; slower transitions feel sluggish and reduce perceived responsiveness on a data-heavy platform.