AI with Whit

Overview

AI with Whit is a professional enablement platform that transforms corporate AI adoption from scattered experimentation into confident, judgment-driven practice. The brand serves enterprise teams seeking role-specific, responsible AI integration—not just tool access, but strategic capability building. The aesthetic is "Accessible Professionalism": a clean, light-filled interface (cream #f5efe4, cloud #f5f5f7) punctuated by energetic accents (electric blue #1565c0, vivid pink #f38fb2) that signal action, clarity, and forward momentum. The visual language evokes both corporate credibility and approachable innovation—think boardroom meets startup energy.

The brand voice is judgment-first, grounded, and conversational. Whitney speaks with the authority of a strategist who has worked inside corporate systems, but without jargon or breathlessness. Vocabulary favors concrete nouns ("workflow," "guardrails," "real work") over abstract adjectives. The tone is direct, sometimes even slightly provocative ("Your team is already using AI. The opportunity is to help them use it with stronger judgment, clearer guardrails, and real business context."). Example sentence in brand voice: "Teach the judgment. Then the tool."

Colors

The color system balances corporate trust with energetic clarity. Primary (#1565c0, electric blue) anchors all interactive elements—CTAs, links, focus states, and key navigation—establishing a consistent, clickable identity across the platform. Secondary (#f38fb2, vivid pink) is the accent of emphasis and urgency, used sparingly on primary CTAs ("Book Whitney"), statement cards, and status indicators to create visual pop without overwhelming. Tertiary (#42a5f5, sky blue) provides a lighter, more approachable variant of primary for secondary actions and hover states. The surface stack is deliberately light and airy: surface-bright (#fbfbfc) for cards and containers, surface-dim (#e9ecef) for disabled or recessive states, and inverse-surface (#0a1628, midnight) for dark statement cards and h

Typography

DM Sans is the sole typeface, chosen for its geometric clarity and professional warmth—it reads as both corporate and contemporary. The type hierarchy is built on a 4px baseline grid with six distinct levels: display (68px, 700 weight, -0.055em tracking) for hero headlines; headline-lg (48px, 700, -0.04em) for section titles; headline-md (32px, 700, -0.02em) for subsections; title-lg (20px, 700, -0.025em) for card headers; body-lg (18px, 400) for introductory copy; body-md (16px, 400) for standard paragraph text; label-md (14px, 600, 0.01em) for button text and UI labels; and label-sm (12px, 700, 0.08em) for metadata, timestamps, and category tags. Negative letter-spacing (-0.055em to -0.02em) on display and headline sizes creates visual tightness and sophistication; body and label sizes u

Layout

The layout system uses a 12-column grid with a fixed max-width of 1180px, centered with responsive padding (max(22px, calc((100vw - 1180px)/2))). The hero section employs a 2-column asymmetric split (1.22fr / 0.78fr) to balance the headline with supporting copy and CTAs. The main feed grid is a 3-column layout (230px left rail / 480–560px center feed / 290px right rail) with 26px gaps, all sticky-positioned at top: 94px to remain visible during scroll. Container max-width is 1180px; section padding is 54px vertical, 0 horizontal (margin auto for centering). White-space philosophy: generous breathing room between sections (lg spacing, 40px) creates visual rest; card padding is consistently 16px (md spacing) to maintain rhythm. The spacing scale is semantic: xs (4px) for micro-adjustments (i

Elevation & Depth

Depth is conveyed through a three-tier shadow system and strategic use of backdrop-filter blur. Level 1 (Base): the page background with subtle radial and linear gradients (no shadow). Level 2 (Standard Cards): 0 8px 24px rgba(28, 42, 62, 0.06) with 1px solid border at {colors.outline} (#d7dce4); backdrop-filter: blur(0px). Level 3 (Elevated/Modals & Header): 0 8px 30px rgba(23, 37, 58, 0.06) with backdrop-filter: blur(18px) and background: rgba(251, 251, 252, 0.96) for the fixed header. Statement cards and case cards use a darker background (#0a1628) with a larger shadow (0 10px 25px rgba(243

Shapes

The shape philosophy is "Geometric Warmth"—rounded corners are used consistently to soften the corporate aesthetic without sacrificing clarity. Buttons and primary CTAs use 9px (rounded.lg in rem: 1rem) border-radius, creating a friendly, approachable feel while remaining distinctly modern. Cards and containers use 12px (rounded.xl in rem: 1.5rem) for a slightly more generous curve that signals openness and accessibility. Input fields use 23px (rounded.full, 50%) for a pill-shaped appearance that feels inviting and reduces friction. Profile avatars are always 50% (circular). Smaller UI element

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use {colors.primary} (#1565c0) background, {colors.on-primary} (#f5f5f7) text, label-sm typography (12px, 700 weight, 0.08em tracking), 9px border-radius, 15px 18px padding, and 48px height. On hover (button-primary-hover), the background shifts to {colors.primary-fixed-dim} (#42a5f5) with an elevated shadow (0 12px 28px rgba(66, 165, 245, 0.32)) and a 120ms ease transition. Secondary buttons (button-secondary) use transparent background, {colors.primary} text, 1px solid {colors.outline} border, and the same 48px height; on hover, the background becomes {colors.surface-container-high} (#edf1f6) and the border shifts to primary. The pink CTA (button-cta-pink, used for "Book Whitney") is a com