WeEvolveIT

Overview

WeEvolveIT is an AI-driven technology transformation partner headquartered in Monterrey with presence in Dubai, serving 17 countries. The design system embodies **Technical Minimalism with Neon Precision**—a dark, monospace-forward aesthetic that channels the rigor of engineering and data science while maintaining approachable warmth through strategic magenta accents. The UI prioritizes clarity and speed: every interaction feels deliberate, every color choice purposeful. The brand personality is confident yet collaborative, speaking in the language of technologists without sacrificing accessibility. Voice: direct, data-informed, never hype-driven. Example: "Our five-phase method—Discover, Diagnose, Design, Deliver, Evolve—transforms how your business runs on technology."

Colors

The color system is anchored in a near-black canvas (#171717) paired with a cool, high-contrast foreground (#f0f0f8). Primary accent is vivid magenta (#e4007c), deployed exclusively on CTAs, active states, and brand-critical interactions—this is the signature color that signals action and brand presence. Secondary accent is warm gold (#f5b90a), used sparingly for highlights, badges, and status indicators. Tertiary purple (#7c5bff) supports data visualization and secondary actions. The surface stack uses precise increments: surface-container-low (#1c1c1c) for elevated cards, surface-container-high (#282828) for hover states, creating a subtle but navigable depth hierarchy. All borders use rgba(255, 255, 255, 0.1) to #ffffff26 depending on emphasis—soft, technical, never harsh. Error states

Typography

The type system pairs Geist Mono for display and headlines (weights 700–800, tracking -0.04em to -0.01em) with JetBrains Mono for body and UI labels (weights 400–600, tracking 0em to 0.12em). This monospace-only approach reinforces the technical brand identity while maintaining legibility through careful weight and size hierarchy. Display sizes (108.8px) are reserved for hero statements; headline-lg (56px) for section titles; body-md (16px) for standard copy. Label-md (14px, 0.12em tracking) is used for buttons and nav items, creating visual rhythm through letter-spacing rather than size alone. On small labels over busy backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to ensure legibility. Line heights are generous (1.5–1.75x) to accommodate the monospace aesthetic and improve

Layout

The layout uses a 12-column grid with a max-width of 1200px, centered with 24px gutters on desktop and 16px on mobile. Page rhythm is driven by lg spacing (40px) between major sections, creating breathing room without excess. The hero section occupies the full viewport height with a 3D globe visualization and overlaid text; subsequent sections use md spacing (24px) for internal padding and lg spacing for section separation. Container max-widths are enforced at 1200px to prevent line-length bloat. White-space is treated as a design element: negative space around the magenta accent buttons makes them pop; generous padding inside cards (24px) prevents visual clutter. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is used consistently across all components to maintain visu

Elevation & Depth

Depth is conveyed through layered shadows and subtle background shifts rather than dramatic drop-shadows. Level 1 (Base): surface (#171717) with no shadow. Level 2 (Standard Card): surface-container-low (#1c1c1c) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 1px solid border at rgba(255, 255, 255, 0.1). Level 3 (Elevated/Modal): surface-container-high (#282828) with box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 1px solid border at rgba(255, 255, 255, 0.26). Hover states transition smoothly (200ms cubic-bezier(0.16, 1, 0.3, 1)) between levels. The header uses a frosted-glass effect: backdrop-bl

Shapes

The shape philosophy is **Technical Precision with Approachable Softness**. Buttons and primary CTAs use rounded.lg (1rem / 16px) for a balanced, modern feel—sharp enough to signal technology, rounded enough to feel inviting. Cards and containers use rounded.DEFAULT (0.5rem / 8px) for a tighter, more technical appearance. Input fields use rounded.sm (0.25rem / 4px) to emphasize their functional, data-entry nature. Badges and pills use rounded.full (9999px) to create visual distinction from structural elements. The header nav uses rounded.xl (1.5rem / 24px) to soften the top-level container and

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses backgroundColor: {colors.primary} (#e4007c), textColor: {colors.on-primary} (#f0f0f8), padding: 12px 24px, height: 48px, rounded: {rounded.lg}. On hover, transition to button-primary-hover (backgroundColor: {colors.primary-container} #ff1493) with transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1). Secondary buttons use a transparent background with 1px border at {colors.outline}, maintaining the same height and padding for consistency. The WhatsApp CTA in the header uses a green accent (#25d366) as an exception, signaling external platform integration.

Containers & Surfaces Cards are the primary content container: backgroundColor: {colors.surface-container-low} (#1c1c1c), rounded: {rounded.lg}, pa

Do's and Don'ts

**Do**

• Do use magenta (#e4007c) exclusively for primary CTAs, active states, and brand-critical interactions—it is the signature accent and must remain distinctive.
• Do maintain the monospace type system (Geist Mono + JetBrains Mono) across all UI; it is core to the technical brand identity.
• Do apply the 200ms cubic-bezier(0.16, 1, 0.3, 1) easing to all interactive transitions for a consistent, snappy feel.
• Do use the surface-container stack (low/high/highest) to create subtle depth without relying on heavy shadows.
• Do respect the 24px gutter and lg spacing (40px) for section separation to maintain visual rhythm and breathing room.

**Don't**

• Don't use magenta for non-interactive elements or backgrounds—it dilutes the accent's impact and confuses interaction hierarchy.
• Don't mix serif or sans-serif typefaces into the monospace system; the technical aesthetic depends on consistent font family.
• Don't apply shadows heavier than 0 18px 44px rgba(0, 0, 0, 0.5); the dark background already provides depth, and excessive shadows flatten the design.
• Don't use rounded.full (9999px) for buttons or cards—reserve it for badges and pills to maintain functional clarity.
• Don't reduce contrast below 14:1 for body text on the dark background; accessibility is non-negotiable in a tech-forward brand.