Xideral

Overview

Xideral is a software development and talent management consultancy that transforms complex enterprise challenges into streamlined digital solutions. Serving Fortune 500 clients across Latin America and beyond, the brand embodies "Professional Optimism"—a design philosophy that balances corporate authority with energetic forward momentum. The aesthetic is rooted in clean, geometric modernism: sharp lines, bold color blocking, and purposeful whitespace create an environment where expertise feels accessible and innovation feels inevitable. The visual language evokes confidence without coldness, ambition without arrogance.

The brand voice is direct, bilingual (Spanish/English), and solution-oriented. Xideral speaks in active verbs and concrete outcomes: not "we explore possibilities" but "we deliver results." The tone avoids jargon-heavy corporate speak; instead, it uses clear, human language grounded in 20+ years of delivery. Example sentence in brand voice: "Más de 20 años de experiencia en gestión y desarrollo de software y talento—transformamos desafíos en soluciones."

Colors

The Xideral color system is built on three strategic pillars: **Primary Blue (#046bd2)** is the signature accent, deployed on CTAs, links, active states, and brand-critical UI elements. It conveys trust, technical competence, and corporate reliability. **Secondary Yellow (#ffdd00)** acts as an energetic counterpoint—used for accent bars, highlights, and visual punctuation that signals innovation and forward momentum. The yellow appears most prominently in hero sections and as a 8px vertical accent bar alongside dark navy elements, creating visual tension that communicates dynamism. **Tertiary Navy (#1e293b)** grounds the system, used for primary text, headings, and deep background containers when needed. The surface stack ranges from pure white (#ffffff) for primary content areas through c

Typography

The type system pairs **Lato** (headlines, display) with **system fonts** (body, UI) to balance personality with performance. Lato's geometric warmth at 600–700 weight conveys approachability in headlines (40px h1, 32px h2, 26px h3), while the system stack (-apple-system, BlinkMacSystemFont, Segoe UI, Roboto…) ensures crisp, fast-loading body text at 16px/1.6em for optimal readability. Display sizes (60px) use -0.04em letter-spacing to tighten the visual mass; headlines use -0.02em to -0.01em. Body and label text remain at 0em or +0.01em spacing to maintain legibility. All interactive labels (buttons, inputs) use 600 fontWeight at 14–16px with 20px line-height. When placing small labels (12px) over busy backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to ensure contrast. Headi

Layout

Xideral uses a **fixed 12-column grid** with a max-width of 1240px, centered on screen. Desktop padding is 3em (48px) per side; tablet/mobile drops to 2em (32px) at 921px breakpoint and 1.8em (28.8px) below 544px. The spacing scale is semantic: **lg (40px)** separates major sections (hero to services, services to footer); **md (24px)** creates breathing room between cards and content blocks; **sm (12px)** handles internal component padding. Container widths vary by context—hero sections often stretch full-width with internal content constrained to 1240px, while card grids use 3–4 columns on desktop, 2 on tablet, 1 on mobile. The gutter between grid items is consistently 24px. Whitespace is generous: never collapse vertical rhythm below 40px between major sections. The yellow accent bar (8p

Elevation & Depth

Depth in Xideral is achieved through **subtle shadows and color layering**, not dramatic blur or glassmorphism. The elevation system uses three tiers: **Level 1 (Base)** has no shadow—pure white or surface-container backgrounds. **Level 2 (Cards, Inputs)** applies `box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)` for a soft, readable lift. **Level 3 (Modals, Dropdowns)** uses `box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2)` for stronger separation. Hover states on cards transition the shadow from Level 2 to Level 3 over 200ms (transition: box-shadow 0.2s ease-out). Inputs use a 1px solid border at #cbd5e1

Shapes

The shape philosophy is **"Architectural Precision"**—minimal, geometric, and functional. Border-radius values are deliberately small: **sm (2px)** for buttons and tight UI elements, **DEFAULT (3px)** for most cards and containers, **lg (6px)** for input fields and larger touch targets, **full (9999px)** for badges and circular elements only. The 2–3px radius creates a subtle softness without sacrificing the sharp, professional aesthetic. Buttons use 2px radius; cards use 3px; inputs use 6px to signal interactivity. The yellow accent bar has 0px radius—it is a pure rectangle, reinforcing its r

Components

Action Elements **Buttons** come in two primary variants. Primary buttons use #046bd2 background, white text, 16px/500 weight, 15px vertical padding, 30px horizontal padding, 2px border-radius, and no border. On hover, the background shifts to #b3d4f0 (primary-fixed-dim) over 150ms. On focus, add a 3px outline at rgba(4, 107, 210, 0.2). Secondary buttons are transparent with a 1px solid #046bd2 border, primary-blue text, and identical padding; on hover, the background becomes #d4e4f7 (primary-container). Both button types use `font-family: inherit` to inherit system fonts from the parent context.

Containers & Surfaces **Cards** use white background (#ffffff), 3px border-radius, 24px padding, and `box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)`. On hover, the shadow elevates to `0 4px 8

Do's and Don'ts

**Do**

• Do use the primary blue (#046bd2) exclusively for interactive elements (buttons, links, focus states) and never for body text or backgrounds.
• Do apply the yellow secondary (#ffdd00) as accent bars, badges, and highlights—never as a background for large content areas or body text.
• Do maintain 40px minimum vertical spacing (lg) between major sections; use md (24px) for card-to-card rhythm and sm (12px) for internal component padding.
• Do use Lato at 600–700 weight for all headings (h1–h6); reserve 400 weight for body text only.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and Level 2 surfaces; use 0 4px 8px rgba(0, 0, 0, 0.2) for modals and elevated content.
• Do keep border-radius ≤ 6px on primary UI components (buttons, inputs, cards) to maintain professional authority.

**Don't**

• Don't use the yellow secondary for body text, large backgrounds, or any element requiring sustained reading; it lacks sufficient contrast at small sizes.
• Don't apply border-radius > 8px to buttons or cards; excessive rounding dilutes the brand's architectural precision.
• Don't add borders to cards; use shadow elevation exclusively for depth separation.
• Don't use system fonts (Helvetica, Arial, sans-serif) for headings; always use Lato at 600+ weight.
• Don't collapse vertical spacing below 40px between major sections; whitespace is a core brand asset.
• Don't apply drop-shadows to text; rely on color contrast and typography weight for readability instead.