AudioConverter AI

Overview

AudioConverter AI is a free, browser-based transcription platform that converts video and audio files into accurate, searchable text using advanced AI models. The brand serves content creators, students, researchers, and professionals who need fast, reliable transcription without signup friction. The aesthetic is **Functional Clarity**—a light, spacious interface that prioritizes task completion over decoration, with a signature cobalt-blue accent (#3c82f5) that signals trust and technical competence. The UI evokes a sense of effortless efficiency: upload, transcribe, export. The emotional response is relief—the user feels their complex media problem has been solved instantly.

The brand voice is direct, confident, and jargon-free. Vocabulary emphasizes speed ('instantly', 'seconds'), accuracy ('99.9%', 'precise'), and inclusivity ('200+ languages', 'no sign-up'). The tone avoids hype; instead, it states capabilities as facts. Example sentence in brand voice: 'Upload any video, get perfect text in seconds—no account needed.'

Colors

The color system is anchored in a clean, light-mode-first palette optimized for readability and accessibility. Primary (#3c82f5) is a medium cobalt blue used exclusively for interactive elements—buttons, links, active states, and focus rings. It appears at 100% opacity on white backgrounds and maintains a 4.5:1 contrast ratio with white text. Secondary (#1f2937) is a near-black gray reserved for body text and structural elements; it provides visual hierarchy without the harshness of pure black. Tertiary (#10b981) is a vibrant emerald green used sparingly for success states, badges, and positive feedback (e.g., 'Upload successful'). The surface stack progresses from pure white (surface, #ffffff) through subtle grays (surface-container-low #eff0f3, surface-container-high #e5e7eb) to light bl

Typography

The type system pairs Inter (headings, UI labels) with Open Sans (body copy), creating a modern yet approachable voice. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major page titles; headline-lg (40px, 700 weight) anchors section headers; headline-md (28px, 600 weight) breaks up content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is used for hero copy and feature descriptions, ensuring comfortable reading at a glance. Body-md (16px, 400 weight, 24px line-height) is the default for form labels, card content, and standard prose. Label-md (14px, 500 weight, 0.01em tracking) is applied to buttons, badges, and UI controls to signal interactivity through weight and tightness. Label-sm (12px, 500 weight) is used for helper text, timesta

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered on the viewport. The left sidebar (240px fixed) houses navigation and is separated from the main content area by a subtle 1px border in outline-variant. The main content area uses a fluid, responsive grid: on desktop, features and cards occupy 3–4 columns each; on tablet (768px–1024px), they stack to 2 columns; on mobile (<768px), they occupy full width with 24px horizontal gutters. Vertical rhythm is maintained through a consistent 8px unit: spacing-sm (12px) for tight groupings, spacing-md (24px) for section separation, spacing-lg (40px) for major section breaks. The hero section uses 64px top/bottom padding (spacing-xl) to create breathing room. Cards and containers use 24px internal padding (spacing-md) with 12px

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than dramatic layering. Level 1 (Base): the white surface (#ffffff) with no shadow, representing the primary interaction plane. Level 2 (Standard Card): background #f3f4f6 with a 1px border in #e8eaed and box-shadow: 0 3px 8px rgba(0,0,0,0.15), creating a gentle lift. Level 3 (Elevated/Modal): background #ffffff with box-shadow: 0 16px 40px rgba(0,0,0,0.12) and a 1px border in #dbeafe, signaling modal prominence. Hover states on cards transition the shadow to 0 6px 16px rgba(0,0,0,0.12) over 200ms (t

Shapes

The shape language is **Geometric Softness**—rounded corners that feel modern and approachable without sacrificing clarity. Buttons use rounded-lg (1rem / 16px) for a friendly, clickable appearance; inputs and form fields use rounded-lg as well to maintain visual consistency. Cards and containers use rounded-lg (16px) for standard layouts and rounded-xl (1.5rem / 24px) for featured or elevated cards (e.g., example transcription cards). The upload drop zone uses rounded-lg (16px) to signal it as a contained interaction area. Badges and small UI elements use rounded-full (9999px) to create pill-

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary component uses background #3c82f5, white text, 44px height, 8px 24px padding, rounded-lg (16px), and label-md typography (14px, 500 weight). On hover, the background darkens to #2563eb and the shadow expands to 0 6px 16px rgba(60,130,245,0.35), creating a lifting effect over 150ms (transition: all 150ms ease-out). On active/press, the background becomes #1d4ed8 and the shadow compresses to 0 2px 4px rgba(60,130,245,0.2), signaling the button has been engaged. The button-secondary variant uses a transparent background with a 1px border in rgba(60,130,245,0.1) and primary text color; on hover, it fills with primary-container (#dbeafe) and the border strengthens to rgba(60,130,245,0.2). All buttons includ

Do's and Don'ts

**Do**

• Do use primary (#3c82f5) exclusively for interactive elements—buttons, links, focus states—to maintain a clear visual hierarchy and signal clickability.
• Do maintain 24px (spacing-md) gutters between major sections and 12px (spacing-sm) between related elements to create breathing room and improve scannability.
• Do apply rounded-lg (16px) to all primary interactive surfaces (buttons, inputs, cards) to create a cohesive, modern aesthetic.
• Do use Open Sans for body copy (16px–18px) with 24–28px line-height to ensure comfortable reading at all screen sizes.
• Do include a 200ms ease-out transition on hover states (background-color, box-shadow, border-color) to provide smooth, tactile feedback.
• Do use the tertiary green (#10b981) sparingly for success states and positive feedback to create a clear, unambiguous signal of completion.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; instead, use on-primary (#ffffff) or on-surface (#111827) to maintain accessibility and reduce eye strain.
• Don't apply shadows larger than 0 16px 40px rgba(0,0,0,0.12) on standard cards; excessive depth flattens the visual hierarchy and creates visual noise.
• Don't mix rounded-xl (24px) and rounded-sm (4px) on the same page without a clear semantic reason; inconsistent border-radius undermines the cohesive design language.
• Don't use secondary (#1f2937) or outline (#c4c7c5) as accent colors; these are structural colors and lack the visual pop needed to signal interactivity.
• Don't set line-height below 24px for body copy; tight line-height reduces readability and creates visual tension, especially on mobile.
• Don't apply more than two font-weights (400 and 600–700) in a single component; excessive weight variation creates visual chaos and dilutes emphasis.