Quix

Overview

Quix is a digital business card platform that reimagines professional networking through vibrant, gradient-driven design. The brand serves modern professionals and enterprises seeking to elevate their networking presence beyond traditional paper cards. The aesthetic movement is "Energetic Minimalism"—a fusion of bold, saturated color gradients (vivid orange #ff6900 transitioning to soft pink #f78da7) with clean, spacious layouts and geometric precision. The UI evokes confidence, innovation, and approachability: users feel empowered to create something distinctly theirs, yet the interface remains intuitive and uncluttered. The emotional response is one of forward momentum and creative possibility.

Quix's voice is conversational yet authoritative, speaking directly to the user's ambitions without corporate jargon. Vocabulary patterns favor action-oriented language ("Discover," "Revolutionize," "Experience") paired with concrete benefits. The brand personality is optimistic, tech-savvy, and human-centered. Example sentence in Quix's voice: "Your digital business card is your first impression—make it unforgettable."

Colors

Quix employs a bold, gradient-forward color system anchored by a near-black primary (#0c0c0c) for stability and a vivid orange secondary (#ff6900) as the signature accent. The primary color (#0c0c0c, rgb(12, 12, 12)) is reserved for buttons, navigation, and foundational UI elements, ensuring legibility and authority. The secondary orange (#ff6900) appears on CTAs, highlights, and interactive states, commanding attention and driving user action. A supporting tertiary pink (#f78da7) softens the palette and is used in gradients, badges, and secondary accents. The surface stack is anchored in clean white (#ffffff) with carefully calibrated grays for depth: surface-container (#eeeeee, rgb(238, 238, 238)) for subtle backgrounds, surface-container-high (#e9ecef, rgb(233, 236, 239)) for elevated c

Typography

Quix uses a two-typeface system: Urbanist (a geometric sans-serif) for headlines and CTAs, and Inter (a humanist sans-serif) for body copy and UI labels. This pairing communicates modernity and accessibility—Urbanist's bold, slightly condensed letterforms (used at 61px for display, 48px for headlines) convey confidence and forward momentum, while Inter's neutral proportions (16px for body, 14px for labels) ensure readability across all screen sizes. The type hierarchy is pronounced: display text uses 700 weight at -0.02em letter-spacing to create visual impact, while body text remains at 400 weight with 0em spacing for clarity. On small labels over busy backgrounds (e.g., badges on gradient cards), apply a subtle text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) to ensure contrast. Headline weight

Layout

Quix uses a fluid, 12-column grid system with a maximum container width of 1140px, allowing content to breathe on desktop while remaining responsive on mobile. The page rhythm is driven by consistent 24px (md spacing) gaps between major sections, with 40px (lg spacing) reserved for hero-to-content transitions. White-space is generous—the hero section uses 64px (xl spacing) top and bottom padding to create breathing room around the gradient "Networking" headline. The spacing scale is semantic: use sm (12px) for tight component grouping (button + label), md (24px) for section separation, and lg (40px) for major layout breaks. Container padding follows a 24px gutter on desktop, reducing to 16px on tablet and 12px on mobile. The layout philosophy prioritizes content clarity over density—never

Elevation & Depth

Depth in Quix is achieved through subtle shadows and strategic color layering rather than dramatic depth effects. The elevation system uses three levels: Level 1 (Base) has no shadow—flat surfaces like the white background and card backgrounds sit flush. Level 2 (Standard Card) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift for cards, modals, and secondary containers. Level 3 (Elevated/Hover) uses box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5), 0 1px 10px 0 rgba(0, 0, 0, 0.15), adding a crisp outline and deeper shadow for interactive hover states and prominent modals. Shadow

Shapes

Quix embraces a philosophy called "Geometric Warmth"—sharp, precise corners softened by selective rounding to create approachability without sacrificing modernity. Buttons use full rounding (border-radius: 9999px) to feel inviting and clickable, particularly the primary CTA "Get Started" (48px height, 12px 24px padding, 30px border-radius in computed styles). Secondary buttons and form inputs use moderate rounding (border-radius: 5-6px, or 0.375rem) to maintain structure while avoiding harshness. Cards and containers default to 0.75rem (12px) rounding, striking a balance between contemporary a

Components

Action Elements Primary buttons use {colors.primary} (#0c0c0c) with {colors.on-primary} text, 48px height, 12px 24px padding, and full rounding (border-radius: 9999px). On hover, transition to {colors.primary-container} (#404145) over 150ms. The "Get Started" CTA is a special variant: it uses a 90° linear gradient from #ff6900 to #f78da7, maintains the same 48px height and padding, and on hover, darkens both gradient stops by 15% (to #e55a00 and #e06b8a). All button text uses {typography.label-md} (Urbanist, 20px, 600 weight) for prominence. Secondary buttons use {colors.primary-container} background with white text, 40px height, 10px 16px padding, and 6px border-radius; on hover, darken to #505050 over 150ms.

Containers & Surfaces Cards use {colors.surface} (#ffffff) background w

Do's and Don'ts

**Do**

• Do use the orange-to-pink gradient (#ff6900 → #f78da7) exclusively on primary CTAs and hero accents to maintain brand recognition and visual hierarchy.
• Do apply full rounding (border-radius: 9999px) to all primary action buttons; it signals interactivity and reduces perceived friction.
• Do maintain 24px minimum spacing between interactive elements and 40px between major content sections to ensure clarity and prevent accidental clicks.
• Do use Urbanist for all headlines and CTAs (48px–61px, 600–700 weight) and Inter for body copy and labels (14px–18px, 400–500 weight) to maintain the two-typeface hierarchy.
• Do apply subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and containers; never use harsh or dark shadows that contradict the clean aesthetic.

**Don't**

• Don't use the secondary orange (#ff6900) on non-interactive elements or backgrounds; reserve it exclusively for CTAs, focus states, and accent highlights.
• Don't apply rounding greater than 12px to cards or containers; it dilutes the geometric precision and makes the interface feel overly soft.
• Don't mix typefaces within a single headline or CTA; Urbanist and Inter are paired at the component level, not mixed within a single text element.
• Don't use more than two gradient colors in any single UI element; the brand's signature gradient is orange-to-pink only.
• Don't apply shadows to input fields or form elements; use only a 1px border and focus-ring styling to indicate interactivity.