OhMyAI

Overview

OhMyAI is a strategic AI consulting platform that transforms complex artificial intelligence capabilities into clear, actionable business intelligence for ambitious organizations. The brand embodies 'Precision Minimalism'—a design philosophy that combines the clarity of Swiss-style typography with the approachability of modern tech interfaces. The visual language prioritizes information hierarchy, breathing space, and a single accent color (primary blue #407cff) that draws attention to key actions without overwhelming the user. The emotional response is one of confidence and clarity: users feel guided, not confused; empowered, not intimidated.

The brand voice is direct, strategic, and grounded in expertise. OhMyAI speaks in the language of business outcomes, not technical jargon—sentences are active and purposeful, avoiding breathless marketing speak. Example: 'We develop AI strategies and roadmaps tailored to your workflows, then train your team to implement them with confidence.' The vocabulary emphasizes partnership ('strategic partner'), capability ('AI workflows'), and tangible results ('implementation', 'efficiency'). The tone is professional yet warm, reflecting a consultancy that understands both the technical depth and human impact of AI adoption.

Colors

The color system is built on a neutral-first foundation with a single, high-contrast accent. The surface stack (ranging from #f9fafa to #26262a) provides depth through subtle tonal shifts rather than dramatic contrast, creating a calm, focused environment. Primary (#407cff) is the brand's signature accent—used exclusively on call-to-action buttons, active states, and key interactive elements. This blue is derived from the brand's core identity and appears sparingly to maximize impact: a user's eye is drawn to it immediately. Secondary (#f26d0f, a warm orange) supports data visualization and status indicators, while tertiary (#004f80, a deep teal) is reserved for secondary actions and supporting UI elements.

Usage rules: Apply primary (#407cff) to all primary buttons, link text, and focus

Typography

The type system uses two primary families: Urbanist for display-level headings (72px, 600 weight, -0.02em letter-spacing) to establish brand presence, and Funnel Sans for secondary headlines (40px–28px range) to maintain visual warmth. Body copy uses Inter (16px–18px, 400 weight, 24–28px line-height) for optimal readability and professional tone. The hierarchy is strict: display for hero sections, headline-lg for section titles, headline-md for subsections, and body-md for all running text. Label-md (14px, 600 weight, 0.01em tracking) is applied to buttons and form labels to ensure clarity and visual distinction from body text.

When type appears over complex backgrounds (e.g., the hero gradient), apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to maintain legibility. All interactive text

Layout

The layout follows a 12-column grid system with a maximum container width of 1280px, ensuring content remains readable on all screen sizes. The page uses a fluid, centered approach: sections are separated by lg spacing (40px) on desktop, reducing to md spacing (24px) on tablets and sm spacing (12px) on mobile. The gutter (24px) is applied consistently to all horizontal padding, creating a rhythm that feels both spacious and intentional.

Whitespace is treated as a design element, not a void: sections breathe, cards have md padding (24px), and form fields use sm padding (12px) with 44px minimum height for touch accessibility. The container-max (1280px) prevents content from stretching excessively on ultra-wide displays. Responsive breakpoints are 1920px (desktop), 1280px–1919px (desktop), 8

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic contrast. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle separators and borders, md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and interactive elements, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and floating elements. Cards use md elevation by default and transition to lg on hover (transition: all 200ms cubic-bezier(0.2, 0, 0, 1)), creating a tactile sense of lift without distraction.

Buttons use md elevation to distinguish them from the background, while input fields rema

Shapes

The shape philosophy is 'Architectural Clarity'—rounded corners are used strategically to soften the interface without sacrificing precision. Buttons and primary interactive elements use lg radius (1rem / 16px), creating a modern, approachable feel while maintaining clear affordance. Cards and containers use lg radius (1rem) for consistency. Input fields and secondary elements use DEFAULT radius (0.5rem / 8px) to signal their supporting role. Badges and pills use full radius (9999px) to create visual distinction and draw attention to status indicators.

This tiered approach ensures that the mo

Components

Action Elements Buttons are the primary call-to-action mechanism. Primary buttons use {colors.primary} (#407cff) background with {colors.on-primary} (white) text, lg radius (16px), and md padding (24px horizontal, 12px vertical) for a 48px total height. On hover, the background transitions to #2b63b4 (inverse-primary) over 200ms using cubic-bezier(0.2, 0, 0, 1). Active state uses #1f4a8a for tactile feedback. All buttons include {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to lift them from the background. Secondary buttons use transparent background with {colors.primary} text and a 1px {colors.outline} border, maintaining the same padding and radius. Links use {colors.primary} text with no underline by default; on hover, they transition to #2b63b4 and gain an underline, signaling in

Do's and Don'ts

**Do**

• Do use {colors.primary} (#407cff) exclusively for primary CTAs, focus states, and active navigation—this creates a clear visual hierarchy and trains users to recognize actionable elements.
• Do maintain minimum 44px touch targets for all interactive elements (buttons, inputs, list items) to ensure accessibility on mobile devices.
• Do apply {elevation.md} (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and floating elements to create subtle depth without visual clutter.
• Do use Urbanist (72px, 600 weight) for hero headlines and Funnel Sans (40px, 600 weight) for section titles to establish clear visual hierarchy.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) when type appears over complex backgrounds to ensure 4.5:1 contrast ratio for accessibility.
• Do use lg spacing (40px) between major sections and md spacing (24px) between subsections to create breathing room and guide the eye.

**Don't**

• Don't use secondary (#f26d0f) or tertiary (#004f80) as primary button colors—these are reserved for data visualization and supporting UI only.
• Don't apply shadows larger than {elevation.lg} (0 8px 24px rgba(0, 0, 0, 0.12)) on standard components; reserve this for modals and critical overlays.
• Don't mix typefaces within a single component (e.g., don't use Inter for a headline that should use Urbanist)—this breaks the visual hierarchy.
• Don't reduce border-radius below sm (4px) on standard components; this creates a harsh, uninviting appearance that conflicts with the Precision Minimalism aesthetic.
• Don't use color alone to convey status or meaning—always pair color with text labels, icons, or patterns for accessibility (WCAG 2.1 criterion 1.4.1).
• Don't apply transitions longer than 200ms on hover states; this creates perceived lag and reduces perceived responsiveness.