Quantazone

Overview

Quantazone embodies a 'Tech-Forward Minimalism' aesthetic—a design philosophy that strips away visual noise to expose the precision and clarity of enterprise AI solutions. The brand serves mid-to-large organizations seeking digital transformation, and the UI evokes confidence through a high-contrast dark canvas (rgb(12, 17, 22)) punctuated by a vivid electric blue accent (rgb(0, 101, 255)) that signals action and innovation. Every interface element is intentionally sparse: generous whitespace, geometric sans-serifs (Space Grotesk for headlines, Inter for body), and a restrained color palette that prioritizes legibility and focus. The emotional response is one of technological sophistication without coldness—approachable expertise.

The brand voice is direct, data-driven, and consultative. Quantazone speaks in active, outcome-focused language: 'Transform Your Business with AI-Enabled Solutions' rather than 'Explore Our Services.' Vocabulary leans technical but remains accessible—'digital transformation,' 'structured consulting frameworks,' 'measurable business performance.' The tone is never breathless or hyperbolic; instead, it conveys earned authority. Example sentence in brand voice: 'Our AI-driven consulting aligns your technology stack with business objectives, delivering 40% faster implementation cycles.'

Colors

The color system is built on a dark-first foundation optimized for enterprise software and reducing eye strain during extended use. The primary surface (rgb(12, 17, 22)) serves as the canvas, with a carefully calibrated surface stack providing depth without visual chaos: surface-container-low (rgb(15, 20, 25)) for subtle backgrounds, surface-container (rgb(20, 25, 31)) for cards and panels, and surface-container-high (rgb(31, 36, 41)) for elevated interactive states. This 16px incremental shift in luminance creates tactile hierarchy without relying on shadows alone.

Primary (rgb(0, 101, 255)) is the signature accent—a saturated, cool blue deployed exclusively on CTAs ('Book a Meeting,' 'Let's Talk'), active navigation states, and focus indicators. It commands attention without aggression,

Typography

The type system pairs Space Grotesk (a geometric, high-contrast sans-serif) for headlines with Inter (a humanist sans-serif) for body copy, creating a visual hierarchy that balances technical precision with approachability. Display (54px, 600 weight, -0.02em tracking) anchors hero sections and major page titles, commanding attention through scale rather than decoration. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) break up content sections, while body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) ensure readability at arm's length on desktop and mobile. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, form labels, and navigation items, with letter-spacing preventing the weight from feeling cramped. On sm

Layout

The layout operates on a 12-column fluid grid with a max-width of 1140px, centered on the viewport. This constraint balances readability (line lengths stay between 50–75 characters for body copy) with the ability to showcase rich data visualizations and multi-column content blocks. The spacing scale is semantic: lg (40px) separates major sections (hero to services, services to case studies), md (24px) is used for card padding and inter-component gaps, and sm (12px) governs internal element spacing (icon-to-text, label-to-input). The gutter (24px) is applied consistently to left/right container padding on all breakpoints, ensuring content never touches the viewport edge. Whitespace is treated as a design material—generous vertical rhythm (1.5x line-height multiplier) prevents cognitive over

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic use of the surface-container stack rather than aggressive drop shadows. Level 1 (Base) is the primary surface (rgb(12, 17, 22)) with no shadow. Level 2 (Standard Card) applies surface-container (rgb(20, 25, 31)) with a 1px border in outline-variant (rgb(51, 55, 61)) and a soft shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Modal) uses surface-container-high (rgb(31, 36, 41)) with the same border and a stronger shadow: box-shadow: 0 7px 16px rgba(0, 0, 0, 0.25). Interactive hover states transition cards fro

Shapes

The shape philosophy is 'Precision Geometry'—a balance between sharp technical edges and subtle softness that prevents the interface from feeling cold or austere. Buttons use border-radius: 8px (DEFAULT), creating a gentle corner that feels modern without the playfulness of 12px or 16px. Cards and containers use 12px (md) for a slightly more pronounced roundness that suggests containment and focus. Input fields and form elements use 8px to maintain visual consistency with buttons, ensuring the form layer feels cohesive. Badges and pills use border-radius: 9999px (full) to signal secondary, non

Components

Action Elements Buttons are the primary interaction affordance. The primary button (button-primary) uses backgroundColor: rgb(0, 101, 255), textColor: rgb(247, 247, 247), padding: 8px 16px, height: 40px, and border-radius: 8px. On hover, the background transitions to rgb(0, 82, 204) over 0.2s (transition: background-color 0.2s ease), creating a perceptible but not jarring state change. The secondary button (button-secondary) uses backgroundColor: rgba(0, 0, 0, 0.8) with the same dimensions, allowing it to sit on light or dark backgrounds without visual conflict. Focus states on both buttons apply box-shadow: 0 0 0 3px rgba(0, 101, 255, 0.1) to meet WCAG AAA standards for keyboard navigation. Disabled buttons reduce opacity to 0.5 and remove pointer-events.

Containers & Surfaces Ca

Do's and Don'ts

**Do**

• Do use primary blue (rgb(0, 101, 255)) exclusively on CTAs and active states—never on passive elements or backgrounds.
• Do maintain 24px gutter padding on all container edges; this prevents content from feeling cramped and respects the dark aesthetic.
• Do apply negative letter-spacing (-0.01em to -0.02em) to all Space Grotesk headlines to reinforce the geometric, engineered brand voice.
• Do use the surface-container stack (low/mid/high) to create depth instead of relying on shadows alone; this maintains visual clarity on dark backgrounds.
• Do include 0.2s ease transitions on all interactive state changes (hover, focus, active) to signal interactivity without feeling sluggish.

**Don't**

• Don't use colors outside the defined palette—no arbitrary grays, no accent colors beyond primary/secondary/error, no white text on light backgrounds.
• Don't apply border-radius > 16px to buttons or inputs; this dilutes the precision aesthetic and reads as playful rather than professional.
• Don't stack cards or containers without lg spacing (40px) between them; visual breathing room is essential to the minimalist philosophy.
• Don't use box-shadow values with blur > 16px or spread > 0px; this creates a diffuse, unfocused appearance that conflicts with the sharp, technical brand.
• Don't mix typefaces—Space Grotesk is for headlines only, Inter for all body and label copy. Mixing creates visual chaos and undermines the hierarchy.