Aivio

Overview

Aivio is a next-generation AI automation platform designed for enterprises seeking intelligent workflow optimization and data-driven marketing. The design system embodies a "Neon-Tech Minimalism" aesthetic—a fusion of dark, sophisticated surfaces with vibrant, high-contrast accent colors (primary purple #662eff, secondary red #ff0e16, and cyan tertiary #00d9ff) that evoke cutting-edge technology and dynamic energy. The visual language prioritizes clarity and precision: deep navy backgrounds (#0a0e27) provide visual rest, while neon accents guide attention to critical interactions and data insights. The UI conveys confidence, innovation, and forward momentum—users feel they are leveraging the latest AI capabilities.

The brand voice is authoritative yet approachable: direct, data-informed, and action-oriented. Aivio speaks in the language of growth, efficiency, and intelligent automation—never hype, always substance. Example sentence: "Your campaigns now learn and adapt in real time, delivering 3x faster ROI." The tone avoids jargon when possible, favoring clarity over complexity. Typography uses Inter Tight exclusively, a modern geometric sans-serif that reinforces the tech-forward positioning. Every interaction—from button hover states to form validation—communicates precision and responsiveness.

Colors

The Aivio color system is built on a dark-mode-first philosophy with strategic neon accents that create visual hierarchy and guide user attention. **Primary (#662eff)** is the signature purple used for all primary CTAs ("Book A Demo"), active states, focus indicators, and brand-defining interactive elements. It appears frequently on dark backgrounds, creating a 7:1+ contrast ratio for accessibility. **Secondary (#ff0e16)** is a vivid red reserved for alerts, critical actions, and gradient accents; it pairs with primary in hero gradients (linear-gradient(135deg, #ff0e16 0%, #662eff 100%)) to create visual dynamism. **Tertiary (#00d9ff)** is a cyan accent used sparingly for highlights, secondary CTAs, and data visualization elements. The surface stack is anchored in deep navy: surface (#0a0e

Typography

The Aivio type system uses Inter Tight exclusively, a condensed geometric sans-serif that reinforces the tech-forward, efficient brand personality. Display (120px, 600 weight, -0.04em letter-spacing) is reserved for hero headlines and major section titles, commanding attention with its scale and negative letter-spacing. Headline-lg (48px, 600 weight) is used for section headers and prominent CTAs, maintaining visual hierarchy without overwhelming. Body-md (16px, 400 weight, 24px line-height) is the default paragraph text, set with 0.01em letter-spacing to improve readability on dark backgrounds. Label-md (14px, 600 weight, 0.02em letter-spacing) is applied to button text, form labels, and UI microcopy, ensuring crisp legibility at small sizes. All text over busy gradient backgrounds (e.g.,

Layout

Aivio uses a 12-column fluid grid with a max-width of 1280px (container-max-width: 1280px), allowing content to breathe on ultra-wide displays while maintaining focus on smaller screens. The gutter spacing is consistently 24px (md spacing token), applied symmetrically on left and right. Section separation uses lg spacing (40px) for major content blocks (hero, features, testimonials), creating a clear visual rhythm. The hero section spans full viewport height with a dark background and neon gradient overlay, establishing immediate brand presence. Cards and content containers use md spacing (24px) for internal padding, with sm spacing (12px) between nested elements. Form inputs and buttons are sized at 48px height (including padding) to meet touch-target guidelines. The layout philosophy is

Elevation & Depth

Depth in Aivio is achieved through a combination of subtle shadows, layered surfaces, and strategic use of color intensity. The elevation system uses three tiers: **Level 1 (Base)** has no shadow; elements sit flush on the surface (#0a0e27). **Level 2 (Standard Cards)** uses box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), applied to cards, input fields, and default buttons. This shadow is soft and diffuse, suggesting a card floating 4px above the background. **Level 3 (Elevated/Modals)** uses box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2), creating a pronounced lift for modals, popovers, and hover sta

Shapes

Aivio employs a "Precision Curves" philosophy: buttons and interactive elements use full-radius (border-radius: 9999px) to signal action and approachability, while containers and cards use xl radius (1.5rem / 24px) for a modern, refined appearance. Input fields also use full-radius to create a cohesive, friendly interaction model. This contrast—fully rounded buttons against slightly rounded cards—creates visual distinction between actionable and passive elements. Modals and elevated surfaces use lg radius (1rem / 16px) to maintain hierarchy without appearing overly soft. Dividers and subtle UI

Components

Action Elements

Buttons are the primary interaction mechanism. **button-primary** uses {colors.primary} (#662eff) background with white text, full-radius (9999px), and 12px 32px padding for a 48px total height. On hover, the background transitions to {colors.primary-container} (#5520d9) with a 200ms ease-out animation and a glowing box-shadow: 0 8px 24px rgba(102, 46, 255, 0.35). This shadow creates a neon-glow effect, reinforcing the tech aesthetic. Active state darkens to #5520d9 with no shadow. **button-secondary** uses a transparent background with a 2px solid border in primary color and the same text color; on hover, it fills with rgba(102, 46, 255, 0.1) while maintaining the border. **button-ghost** is used for tertiary actions, with rgba(255, 255, 255, 0.08) background and on-s

Do's and Don'ts

**Do**

• Do use primary (#662eff) for all primary CTAs and focus states—it's the brand signature and must be instantly recognizable.
• Do apply the neon glow shadow (0 8px 24px rgba(102, 46, 255, 0.35)) on button hover to reinforce the tech-forward aesthetic.
• Do maintain full-radius (9999px) on all buttons and input fields to signal interactivity and approachability.
• Do use md spacing (24px) consistently for card padding and section gutters to create visual rhythm.
• Do apply text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) to headlines over gradient backgrounds for legibility.
• Do use Inter Tight exclusively—its geometric, condensed form reinforces the tech brand identity.

**Don't**

• Don't use secondary (#ff0e16) for primary CTAs—reserve it for alerts, gradients, and critical actions only.
• Don't apply shadows to flat elements or backgrounds; shadows are reserved for elevated surfaces (cards, buttons, modals).
• Don't mix border-radius values arbitrarily; stick to the defined scale (sm, DEFAULT, md, lg, xl, full) for consistency.
• Don't use system fonts or serif typefaces; Inter Tight is non-negotiable for brand coherence.
• Don't reduce opacity below 0.5 for disabled states—use a desaturated color or explicit disabled styling instead.
• Don't apply multiple shadows to a single element; layer elevation via the defined sm/md/lg system only.