Fusion Audio + Video

Overview

Fusion Audio + Video is a premium integrator of custom smart home and commercial audio-visual systems serving the Greenville, Asheville, and Bluffton markets. The brand embodies a 'Technical Confidence' aesthetic—blending architectural precision with warm, approachable design. The UI communicates expertise through clean typography hierarchies (Noto Serif Display for commanding headlines, League Spartan for functional text), a restrained color palette anchored by a bold crimson primary (#c1272d) and deep navy secondary (#2a4562), and generous white space that mirrors the uncluttered, high-end residential and commercial spaces the brand designs. The visual language evokes the calm authority of a luxury tech brand: every element earns its place, every interaction feels deliberate and responsive.

The brand voice is consultative and confident without being pretentious. Fusion speaks to decision-makers (homeowners, facility managers, architects) who value reliability, craftsmanship, and seamless integration. Tone: precise, solution-oriented, never salesy. Example: 'Your system learns your rhythm—automatically adjusting lighting, temperature, and audio as your day unfolds.' The vocabulary favors concrete benefits (performance, reliability, custom-engineered) over abstract marketing language.

Colors

The color system is built on a foundation of clean whites and grays, punctuated by two commanding accent colors that drive user attention and brand recognition. Primary (#c1272d, a deep crimson-red) is reserved for call-to-action buttons, form validation states, and critical interactive elements—it commands attention without aggression, evoking premium electronics and high-end design. Secondary (#2a4562, a sophisticated navy) anchors the navigation, headers, and supporting UI elements, reinforcing the brand's technical authority and trustworthiness. Tertiary (#135d8a, a teal-blue) provides a tertiary accent for secondary actions, status indicators, and accent highlights in data visualizations.

Surface colors follow a strict hierarchy: the base surface is pure white (#ffffff) for maximum c

Typography

The type system pairs two Google Fonts families to create a distinctive visual rhythm: Noto Serif Display (400 weight, 72px, -0.02em letter-spacing) commands hero sections and page titles with serif elegance, while League Spartan (600 weight for headlines, 400 for body) handles all functional text with geometric precision and excellent screen legibility. This pairing—serif for prestige, sans-serif for clarity—mirrors the brand's dual nature: premium craftsmanship meets technical reliability.

The hierarchy is enforced through size and weight: display (72px) for hero statements, headline-lg (40px, 600 weight) for section titles, headline-md (28px, 600 weight) for subsections, body-lg (18px, 400 weight) for introductory paragraphs, body-md (16px, 400 weight) for standard copy, and label-md (

Layout

The layout system uses a 12-column grid with a max-width of 1200px, centered on the viewport with symmetric gutters of 24px. This provides a stable, predictable rhythm across all screen sizes. White space is treated as a first-class design element: section separation uses lg spacing (40px) to create breathing room between major content blocks; card padding is standardized at md (24px) to ensure consistent internal rhythm; and input fields use sm (12px) padding for compact, scannable forms.

Containers are fluid up to 1200px, then fixed, allowing the design to scale gracefully from mobile (single column) to desktop (full grid). The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is used consistently for margins, padding, and gaps—never use arbitrary values. Hero sections spa

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through color darkness. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.1)) for small interactive elements like badges and inline buttons; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, modals, and form inputs; and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for elevated modals, dropdowns, and hero overlays. Shadows are soft and diffuse, never harsh or dark—they suggest light falling from above, reinforcing the brand's clean, modern aesthetic.

Cards use md elevation by default and transition to lg on hover (via

Shapes

The shape language is 'Technical Precision'—favoring sharp, defined corners over organic curves, but softening them just enough to feel approachable. Border-radius follows a strict scale: sm (3px) for small UI elements like badges and inline buttons; DEFAULT (4px) for standard inputs and list items; md (8px) for cards and medium containers; lg (10px) for larger cards and modals; xl (18px) for hero sections and prominent CTAs; and full (9999px) for pill-shaped buttons and circular avatars.

Buttons use full (9999px) radius to create a distinctive pill shape that signals interactivity and premiu

Components

Action Elements Buttons are the primary interaction mechanism and use a pill-shaped design (border-radius: 9999px) to signal premium interactivity. Primary buttons (button-primary) use the brand crimson (#c1272d) background with white text, 40px height, 8px 20px padding, and label-md typography (14px, 600 weight). On hover, the background darkens to #a81f25 with a smooth 200ms transition (transition: background-color 200ms ease-out). Secondary buttons (button-secondary) use a semi-transparent white background (rgba(255, 255, 255, 0.13)) with a 1px border (rgba(255, 255, 255, 0.2)) for use on dark hero backgrounds; on hover, the background opacity increases to 0.2. All buttons include a subtle focus ring (outline: 2px solid {colors.primary}, outline-offset: 2px) for keyboard accessibili

Do's and Don'ts

**Do**

• Do use the crimson primary (#c1272d) exclusively for CTAs, form focus states, and error indicators—it's the brand's signature accent and must remain rare and impactful.
• Do maintain generous white space (lg: 40px) between major sections to create a premium, uncluttered feel that mirrors the high-end spaces Fusion designs.
• Do pair Noto Serif Display (serif) with League Spartan (sans-serif) to create visual hierarchy—serif for prestige, sans-serif for clarity—never mix serif and sans-serif within the same text block.
• Do use the full 12-column grid and enforce the spacing scale (xs/sm/md/lg/xl) consistently—never use arbitrary pixel values for margins or padding.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and lg elevation (0 8px 24px rgba(0, 0, 0, 0.12)) to modals; shadows should be soft and diffuse, never harsh or dark.

**Don't**

• Don't use the navy secondary (#2a4562) as a background for body text—it's reserved for headers and navigation; body text must always use on-surface (#000000) or on-surface-variant (#666666) on white backgrounds.
• Don't create custom border-radius values—use only the defined scale (sm: 3px, DEFAULT: 4px, md: 8px, lg: 10px, xl: 18px, full: 9999px); this maintains visual consistency and brand recognition.
• Don't apply shadows to text or use text-shadow except on small labels over busy backgrounds (use 0 2px 4px rgba(0, 0, 0, 0.15) only)—text should be crisp and readable.
• Don't mix serif and sans-serif fonts in the same component—use Noto Serif Display only for display/headline sizes; use League Spartan for all body, label, and functional text.
• Don't use the error color (#c1272d) for non-critical UI elements—reserve it for validation errors, CTAs, and critical alerts to maintain its signal strength and brand distinctiveness.