Foundation

Color Palette

The Voice Aura palette is intentionally restrained. Near-black and white dominate, with blue used only for interactive accents.

Core Brand

UI & Text

Semantic

Code

Foundation

Typography

IBM Plex Serif for headings creates authority. IBM Plex Sans for body ensures readability. The pairing produces natural hierarchy.

Code

Foundation

Spacing Scale

Based on an 8px grid. Consistent spacing builds visual rhythm across the interface.

Code

Foundation

Border Radius

Five radius levels provide visual consistency from buttons to hero cards.

Code

Foundation

Shadows & Elevation

Subtle, layered shadows create depth without competing with content.

Code

Components

Buttons

Four button variants cover every interaction pattern. Primary (dark) for main CTAs, accent (blue) for emphasis, secondary for alternatives, ghost for tertiary.

Variants

Sizes

Modifiers

Full Width

Code

Components

Badges & Tags

Small status indicators and category labels used throughout the interface.

Badge Variants

Section Badges

Tags

Code

Components

Cards

Flexible card containers for organizing content. Choose bordered for flat layouts, elevated for floating emphasis.

Code

Components

Forms

Clean form elements with consistent sizing, subtle borders, and blue focus rings.

Code

Toggle Switch

Uses Bootstrap's native .form-check.form-switch pattern, styled via VA variable overrides.

Floating Labels

Uses Bootstrap's .form-floating for labels that animate into the input on focus.

Validation States

Add .is-invalid or .is-valid to .va-form-input for colored borders and focus rings. Use .va-form-error for always-visible error messages.

Components

TTS Input Card

The signature Voice Aura input component — tabs, textarea, category pills, and send button.

Code

Components

Pricing Cards

Three-tier pricing with tab selector, crosshair corner decorations, and featured tier emphasis.

Code

Components

Authentication Forms

Sign up and login forms with social OAuth options.

Code

Layout

Navbar

Clean horizontal navigation with logo, centered links, and right-aligned action buttons.

Code

Layout

Hero Section

The signature landing hero with badge, serif headline, subtitle, dual CTAs, and the TTS input card below.

Code

Compact Variant

Add .va-hero--compact for reduced vertical padding — ideal for inner pages or secondary heroes.

Layout

Feature Section

Two-column layout pattern used for feature blocks. Text and visual side by side.

Code

Reverse Variant

Add .va-feature-row--reverse to swap columns — visual on the left, text on the right.

Dark Visual Panel

Use .va-feature-visual--dark for a dark gradient background — pairs well with product screenshots or light UI mockups.

Components

Blog / Insights Cards

Article cards for the blog section with image, metadata, and read-more link.

Code

Layout

Blog Section Layout

Left-aligned header with title & subtitle on the left, action button on the right, and a 4-column blog card grid. Matches the Behance "Insights & Updates" section.

Code

Discount Badge

Used on pricing pages for promotional offers.

Character Counter

Displays character count in TTS input cards.

Components

Voice Agent Card

Dark card showcasing an AI voice agent with language selector, avatar, and action button. Now supports crosshair corner decorations.

Code

Components

Video Dubbing Card

Dark card for the "FOR LOCALIZER" section — language pill carousel, video player with subtitle overlay, and playback controls.

Code

Component

Client Logos

A greyscale logo row with pipe separators. Used under the hero or auth forms to show trust signals.

Code

Trust Bar (va-trust-bar)

Alternative trust bar component with greyscale logos, hover-to-color effect, and optional separator lines.

Separator Variant

Add .va-trust-bar__logos--separated for vertical dividers between logos.

Dark Variant

Add .va-trust-bar--dark for use on dark backgrounds. Logos are inverted and text is muted white.

Layout

Auth Split Layout

Full-page two-panel auth layout: decorative illustration on the left, form on the right. Collapses to single-column on mobile.

Code

Layout

Grid & Layout Utilities

CSS Grid system with auto-fit responsive grids, fixed-column variants, flex utilities, and VA spacing (8px grid). The --va-grid-min custom property allows per-instance column width control.

Auto-fit Grid

Columns automatically fill available space. Set --va-grid-min to control minimum column width (default: 280px).

Fixed-column Variants

Gap & Spacing Utilities (8px grid)

Code

SCSS source: scss/layout/_grid.scss · Note: VA spacing utilities use the 8px grid ($va-grid-unit). Bootstrap’s .mt-*, .gap-* use Bootstrap’s own spacer scale. Both can be used together.

Visual System

Backgrounds & Patterns

Decorative background patterns, gradient overlays, and abstract visual elements identified from the Behance reference design. All implemented as reusable CSS utility classes.

SVG Pattern Assets

Located in assets/patterns/. These are used as background images by the SCSS utilities or can be embedded inline.

New Pattern Assets

Five additional abstract patterns aligned with the Voice Aura visual language — tech-forward, audio-themed, and minimal.

Background Pattern Classes

Background Colour & Gradient Utilities

Live Demos

Background Composition Guide

Patterns can be layered to create rich visual depth. Use the .va-bg-layer helper for additional overlays when a section already uses ::before / ::after for a pattern.

<section class="va-section va-bg-glow va-pattern-noise va-section-morph">
  <div class="va-bg-layer va-bg-layer--circuit"></div>
  <div class="va-container">
    ...content...
  </div>
</section>

Motion

Animations & Transitions

A complete motion system for entrance animations, interaction states, responsive layout transitions, and scroll-triggered reveals. All animations respect prefers-reduced-motion.

Entrance Animations

Apply directly to elements. Plays once on mount. Chain with .va-animate--delay-N for staggering.

Interaction Animations

Hover over these cards to see the effect:

Transition Presets

Scroll-Triggered Animations

Elements start hidden and animate in when they enter the viewport. Requires a lightweight JS IntersectionObserver (included in the sample page).

const observer = new IntersectionObserver((entries) => {
  entries.forEach(e => e.isIntersecting && e.target.classList.add('is-visible'));
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });

document.querySelectorAll('[class*="va-scroll-"]').forEach(el => observer.observe(el));

Responsive Visibility Transitions

Instead of abrupt show/hide at breakpoints, these classes fade elements in/out smoothly.

Responsive Layout Smoothing

Add to grid/flex containers so breakpoint changes animate smoothly (device rotation, browser resize).

Responsive Entrance Animations

Direction-adaptive entrance animations that switch axis on mobile. On desktop they slide horizontally; on mobile they slide vertically for better narrow-screen UX.

Auto-Stagger Groups

Add .va-stagger-group to a parent to auto-stagger children with increasing delays. Delay reduces on mobile for faster perceived load.

Component-Level Responsive Transitions

Apply to individual components for smooth layout adaptation at breakpoints.

<section class="va-section va-section-morph va-bg-glow">
  <div class="va-container va-container-smooth">
    <h2 class="va-responsive-fade-left">Feature Title</h2>
    <div class="va-scroll-stagger ref-grid ref-grid--3">
      <div class="va-card va-card-reflow">...</div>
      <div class="va-card va-card-reflow">...</div>
      <div class="va-card va-card-reflow">...</div>
    </div>
  </div>
</section>

Demo

Sample Landing Page

A pixel-perfect sample landing page combining all components into a complete Voice Aura homepage.

Integration

Bootstrap Alignment Guide

Voice Aura is built on top of Bootstrap 5. Many custom .va-* classes have Bootstrap equivalents that work identically thanks to Sass variable overrides. Prefer Bootstrap's native classes in new code to keep the codebase simple and scalable.

Sass Variable Overrides

These Bootstrap variables are overridden in _variables.scss, so Bootstrap's built-in classes automatically produce Voice Aura–consistent output:

VA ↔ Bootstrap Class Equivalences

Where a VA class duplicates Bootstrap functionality, the Bootstrap class produces equivalent output. Both are available; prefer Bootstrap's in new code.

VA-Only Classes (No Bootstrap Equivalent)

These classes are unique to the Voice Aura design system and must use .va-* naming:

When to Use Which

Layout

Footer

Multi-column footer with brand, link groups, and copyright bar.

Code

Architecture

File Structure

voice-aura-design-system/
├── scss/
│   ├── abstracts/
│   │   ├── _variables.scss       // Design tokens, Bootstrap overrides
│   │   ├── _functions.scss       // Sass utility functions
│   │   └── _mixins.scss          // Reusable mixins
│   ├── base/
│   │   ├── _reset.scss           // CSS reset / normalize
│   │   └── _typography.scss      // Type system, font imports
│   ├── components/
│   │   ├── _buttons.scss         // Button variants
│   │   ├── _cards.scss           // Card variants
│   │   ├── _pricing.scss         // Pricing cards
│   │   ├── _forms.scss           // Forms + TTS input card
│   │   ├── _badges.scss          // Badges, pills, tags
│   │   ├── _blog-card.scss       // Blog / article cards
│   │   ├── _voice-agent.scss     // Voice agent card
│   │   └── _auth.scss            // Auth forms
│   ├── layout/
│   │   ├── _navbar.scss          // Navigation bar
│   │   ├── _hero.scss            // Hero section
│   │   ├── _section.scss         // Section layouts
│   │   ├── _footer.scss          // Footer
│   │   └── _grid.scss            // Grid extensions
│   ├── vendors/
│   │   └── _bootstrap.scss       // Bootstrap 5 selective import
│   └── voice-aura.scss           // Main entry point
├── dist/css/
│   ├── voice-aura.css            // Compiled (295 KB)
│   └── voice-aura.min.css        // Minified (242 KB)
├── site/
│   └── components.html           // This file
├── package.json
└── DESIGN_SYSTEM.md              // Full documentation