Variant

Overview

Variant is an AI-driven design exploration platform that redefines how designers and creators discover visual possibilities. The brand embodies **Architectural Minimalism**—a design philosophy that prioritizes clarity, precision, and structural integrity over ornament. Every interface element serves a functional purpose, arranged with geometric precision and deliberate whitespace. The aesthetic draws from Swiss design principles: a strict grid system (12 columns, 1280px max-width), sans-serif typography hierarchy (Variant Neue Display for headlines, Inter for body), and a restrained color palette anchored by near-black (#1e1e1c) with selective accent colors (blue #4a8fff for secondary actions, coral #df634e for tertiary emphasis). The emotional response is one of calm confidence—users feel they are in control of a powerful, intelligent system that respects their time and attention.

Variant's voice is direct, optimistic, and human-centered. The brand avoids hype and jargon; instead, it speaks in concrete benefits and clear next steps. Vocabulary patterns emphasize agency ("Explore," "Deploy," "Discover") and partnership ("bespoke," "bridge," "collaboration"). The tone is conversational yet authoritative—a trusted guide rather than a salesperson. Example sentence in brand voice: "Deploy bespoke AI automation that bridges the gap between human creativity and cloud-scale computation."

Colors

Variant's color system is rooted in **monochromatic sophistication with strategic accent injection**. The primary color is near-black (#1e1e1c), used for all primary CTAs, navigation, and body text. This is not a true black but a warm charcoal that softens on-screen while maintaining maximum contrast (WCAG AAA compliant at 18.5:1 against white). The surface stack progresses from pure white (#ffffff) through carefully calibrated grays: surface-container-high (#e9ecef) for hover states, surface-container (#eeeeee) for secondary containers, and surface-dim (#f5f5f5) for subtle backgrounds. Secondary color is a vibrant blue (#4a8fff, hsl(217, 100%, 60%)) used sparingly for secondary buttons, links, and informational badges—it provides visual relief without overwhelming the austere palette. Ter

Typography

Variant's type system enforces a clear hierarchy through two custom typeface families: **Variant Neue Display** (700 weight only) for all headlines and display text, and **Variant Neue Text** for titles, with Inter as the system fallback for body and labels. Display (72px, 700, -0.03em letter-spacing) commands attention on hero sections with its geometric, high-contrast letterforms. Headline-lg (48px, 700, -0.02em) anchors major sections; headline-md (32px, 700) supports subsections. Title-lg (20px, 600) bridges headlines and body. Body-lg (18px, 400, 28px line-height) and body-md (16px, 400, 24px line-height) maintain readability at 1.5x line-height ratio, critical for scanning dense content. Label-md (14px, 600, 0.01em) and label-sm (12px, 500, 0.05em) are used for UI labels, buttons, an

Layout

Variant uses a **fluid 12-column grid with fixed 1280px max-width container**, centered on the viewport with 24px gutters on desktop (reducing to 16px on tablet, 12px on mobile). This grid enforces alignment discipline: major sections (hero, feature blocks, footer) span full width or 8/12 columns; sidebar content occupies 4/12. Whitespace is semantic: 64px (xl spacing) separates major sections, 40px (lg spacing) divides subsections, 24px (md spacing) groups related components, and 12px (sm spacing) provides breathing room between inline elements. The container-max-width of 1280px prevents content from becoming unwieldy on ultra-wide displays. Page rhythm follows a 8px unit system: all padding, margin, and height values are multiples of 8px (48px button height = 6 units, 24px padding = 3 un

Elevation & Depth

Depth in Variant is conveyed through **subtle shadow layering and border definition**, not through color darkening or blur effects. The elevation system uses three levels: Level 1 (Base/Surface) has no shadow, only a 1px border in outline-variant (#d0d0d0) to define edges. Level 2 (Standard Card/Hover) applies elevation-md (0 4px 12px rgba(0,0,0,0.1)) with a 1px border, creating a gentle lift that signals interactivity. Level 3 (Active/Focus) adds a focus ring: 0 0 0 3px rgba(30, 30, 28, 0.12) around the element, combined with elevation-md. Buttons in their default state have no shadow; on hov

Shapes

Variant employs **Soft-Technical Geometry**—a shape philosophy that balances precision with approachability. The default border-radius is 6px (rounded.DEFAULT), applied to buttons, inputs, and small components. This radius is neither sharp (0px) nor fully rounded (50%), striking a middle ground that feels contemporary without appearing playful. Larger containers (cards, modals) use 10px (rounded.lg) to create visual distinction and breathing room. Buttons specifically use 6px to maintain compact, clickable targets (48px height × 24px padding). Input fields also use 6px for consistency with but

Components

Action Elements **Buttons** form the primary interaction layer. Button-primary (48px height, 16px vertical × 24px horizontal padding, 6px radius) uses primary color (#1e1e1c) with white text. On hover, the background shifts to primary-container (#3f3f3f) and elevation-md shadow appears (0 4px 12px rgba(0,0,0,0.1)). On active/focus, a 3px focus ring (rgba(30, 30, 28, 0.12)) surrounds the button. All button state transitions use 200ms ease timing. Button-secondary maintains the same dimensions but uses a transparent background with 1px outline-variant border and primary text color; on hover, it receives surface-container-high background. Both button variants use label-md typography (14px, 600 weight, 0.01em letter-spacing) for consistent labeling.

Containers & Surfaces **Cards** (ro

Do's and Don'ts

**Do**

• Do use primary color (#1e1e1c) exclusively for primary CTAs and critical UI elements—it is the brand's signature and must remain rare and impactful.
• Do maintain 24px gutters and 8px unit spacing throughout layouts; this discipline creates visual coherence and simplifies responsive design.
• Do apply 200ms ease transitions to all interactive state changes (hover, focus, active) to signal responsiveness without feeling sluggish.
• Do use Variant Neue Display for all headlines (48px and above) to establish the brand's geometric, high-contrast personality.
• Do include visible focus rings (3px rgba(30, 30, 28, 0.12)) on all interactive elements for WCAG AAA keyboard accessibility compliance.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary colors; Variant uses warm charcoal (#1e1e1c) and off-white (#f5f5f5) for sophistication.
• Don't apply multiple shadows or blur effects; Variant's elevation system uses single, precise shadows (elevation-md = 0 4px 12px rgba(0,0,0,0.1)) to maintain clarity.
• Don't use border-radius values outside the defined scale (sm/DEFAULT/md/lg/xl/full); arbitrary radii fragment the system and dilute the brand's geometric precision.
• Don't override the 12-column grid or 1280px max-width container without explicit design justification; the grid is the foundation of Variant's architectural minimalism.
• Don't mix typeface families within a single component; use Variant Neue Display for headlines, Inter for body, and Variant Neue Text for titles—no exceptions.