AQuest

Overview

AQuest is a 25-year-old digital innovation and creative experience agency that transforms complex technology into elegant, human-centered digital experiences. The brand embodies 'Architectural Minimalism'—a design philosophy that prioritizes geometric precision, bold primary colors (particularly electric blue #0a2aff), and stark white negative space to create visual clarity and impact. The aesthetic evokes confidence and forward-thinking innovation: clean lines, decisive color blocking, and restrained typography create an atmosphere of professional sophistication paired with creative boldness. Users experience the interface as purposeful and uncluttered, where every element serves a function and nothing distracts from the core message.

The brand voice is direct, articulate, and intellectually grounded. AQuest speaks in the language of digital transformation and creative excellence—precise, never flowery, occasionally technical but always accessible. The tone balances authority with approachability: 'We've spent 25 years crafting experiences where technology and creativity converge.' Vocabulary patterns favor active verbs (innovate, craft, blend, explore) and concrete outcomes over abstract promises. The brand personality is that of a trusted creative partner: confident without arrogance, innovative without pretension, and deeply committed to delivering measurable impact.

Colors

The color system is built on a foundation of pure white (#ffffff) and deep black (#000000), with a single dominant accent: electric blue (#0a2aff). This primary blue is the signature brand color, appearing on all primary CTAs, interactive states, and key focal points. It commands attention through contrast and saturation—rgb(10, 42, 255) is vibrant enough to pop against white but grounded enough to feel professional rather than playful. Secondary accent red (#ef4444) is reserved for error states, alerts, and occasional emphasis. The neutral palette consists of carefully calibrated grays: #e9ecef for surface containers, #6c757d for secondary text and disabled states, #505050 for tertiary text, and #d0d0d0 for borders and dividers. The surface stack uses minimal variation—most UI lives on wh

Typography

The type system pairs two typefaces from the Neue Haas Grotesk family: Neue Haas Grotesk Display (weights 100–700) for headlines and display text, and Neue Haas Grotesk Text (weights 400–600) for body and UI copy. This pairing reinforces the brand's architectural precision—both faces share geometric DNA but are optimized for their respective contexts. Display sizes (72px, 48px, 36px) use tighter line-heights (80px, 56px, 44px) and negative letter-spacing (-0.02em to -0.01em) to create visual compression and impact; body text (18px, 16px) uses generous line-height (28px, 24px) and minimal letter-spacing (0.005em) for legibility. Labels and UI text (14px, 12px) use fontWeight 600 and letter-spacing 0.01em–0.02em to ensure clarity at small sizes. On dense backgrounds or over imagery, apply te

Layout

The layout system uses a 12-column grid with a max-width container of 1280px, centered on the viewport with 24px gutters on desktop and 12px on mobile. The spacing scale is semantic: lg (40px) separates major sections, md (24px) separates components within sections, sm (12px) separates elements within components, and xs (4px) is reserved for micro-spacing (icon-to-text gaps, badge padding). White-space is generous and intentional—sections breathe with 40px+ vertical rhythm, and cards/containers maintain 24px internal padding. The grid is fluid but not responsive in the traditional sense; instead, the layout adapts by collapsing columns and reducing gutter width on smaller screens while maintaining the semantic spacing scale. Hero sections and full-width blocks use the full viewport width w

Elevation & Depth

Depth is conveyed through a restrained shadow system rather than layering or transparency. The elevation scale consists of three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle UI elements like disabled states, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and elevated surfaces. Shadows are always soft and diffuse—no hard edges or high-contrast drop shadows. Interactive elements (buttons, inputs) do not cast shadows in their default state; they gain elevation only on hover or when in a focused/active state. Dropdow

Shapes

The shape philosophy is 'Geometric Precision'—minimal rounding that signals softness without sacrificing the brand's architectural edge. Border-radius values are deliberately small: sm (0.25rem / 4px) for buttons and small interactive elements, DEFAULT (0.5rem / 8px) for inputs and standard cards, md (0.75rem / 12px) for larger cards and containers, lg (1rem / 16px) for modals and elevated surfaces, and full (9999px) for badges and pill-shaped elements. Buttons use sm radius (4px) to maintain a crisp, technical appearance; inputs use DEFAULT (8px) for slightly more approachability. Dropdown pa

Components

Action Elements Buttons are the primary interaction mechanism and use the full primary blue (#0a2aff) background with white text. Primary buttons measure 48px height with 15px vertical and 24px horizontal padding, border-radius 4px, fontWeight 600, and fontSize 15px. On hover, the background darkens to #0018cc over 200ms; on active/pressed, it darkens further to #001099. Secondary buttons use a white background with a 1px border (#666666) and black text, maintaining the same dimensions and transition timing. Both button types use label-md typography (14px, fontWeight 600, lineHeight 20px) for consistency. Disabled buttons use #6c757d text on #e9ecef background with cursor: not-allowed.

Containers & Surfaces Cards are the primary container for grouped content. Standard cards use a

Do's and Don'ts

**Do**

• Do use the primary blue (#0a2aff) exclusively for interactive elements, CTAs, and focus states—never use it for decorative elements or backgrounds.
• Do maintain 24px+ vertical spacing between major sections and 12px between components within sections to preserve the minimalist aesthetic.
• Do apply box-shadow md (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and dropdowns on hover to signal elevation without visual clutter.
• Do use Neue Haas Grotesk Display for headlines (36px+) and Neue Haas Grotesk Text for body copy (18px and below) to maintain typographic hierarchy.
• Do keep border-radius values small (4px–16px range) to reinforce the brand's architectural precision and avoid a rounded, playful appearance.
• Do use white (#ffffff) and near-white (#f5f5f5, #fafafa) as the dominant background colors to maximize clarity and reduce cognitive load.

**Don't**

• Don't use secondary red (#ef4444) for anything other than errors, alerts, or critical warnings—it should never appear on primary CTAs or brand-positive elements.
• Don't apply gradients, blur effects, or glassmorphism—the design system relies on flat colors and precise shadows for clarity and professional appearance.
• Don't use rounded corners larger than 16px (xl) except for badges and pill-shaped elements (full / 9999px)—excessive rounding undermines the architectural aesthetic.
• Don't mix typefaces within a single line or component—use size, weight, and color to create hierarchy instead.
• Don't apply shadows to buttons in their default state; reserve elevation for hover and active states to maintain visual restraint.
• Don't use disabled state styling for anything other than genuinely disabled elements—avoid using gray text and light backgrounds as a design choice for secondary content.