Avalúos Callejas

Overview

Avalúos Callejas embodies a **Technical Confidence** aesthetic—a design language that merges professional authority with approachable clarity. The brand serves vehicle and machinery appraisers, corporate clients, and individual buyers seeking precise valuations in El Salvador's competitive market. The visual identity leverages a bold red accent (#e74c3c) against a clean, dark-to-light hero composition, evoking both precision and trustworthiness. The UI communicates expertise through restrained typography, generous whitespace, and a deliberate color hierarchy that guides users toward action without overwhelming them.

The brand voice is direct, technical yet accessible, and solution-focused. Avalúos Callejas speaks in the language of certainty: "Más de 25 años de experiencia avaluando vehículos en El Salvador. Te brindamos la certeza técnica que necesitas para comprar con seguridad." The tone avoids jargon-heavy language while maintaining professional credibility. Every sentence prioritizes the user's need for security and precision. Example: "Tu inversión merece la evaluación de expertos acreditados por la SSF."

Colors

The color system is anchored by a vibrant, action-oriented red (#e74c3c) that serves as the primary accent—deployed on all call-to-action buttons, key links, and the SSF accreditation badge. This red is not merely decorative; it signals urgency and trust simultaneously, critical for a financial services brand. The surface stack is built on pure white (#ffffff) for maximum clarity and professional polish, with a carefully calibrated gray hierarchy (from #f5f5f5 surface-dim to #101214 on-surface) that ensures readability without introducing visual noise. Secondary grays (#505050, #6c757d) provide mid-tone support for body text and secondary UI elements, while the outline color (#90949a) creates subtle borders that define structure without distraction. The error state uses a deeper red (#d32f

Typography

The typography system is built entirely on Outfit, a geometric sans-serif that conveys modernity and technical precision. Display (72px, 800 weight) anchors hero sections with commanding presence, while headline-lg (48px, 700 weight) and headline-md (32px, 600 weight) establish clear information hierarchy across page sections. Body text operates at 16px (body-md) with a 24px line-height (1.5x), ensuring comfortable reading on both desktop and mobile contexts. Labels are set at 14px (label-md) with 0.02em letter-spacing to add subtle visual breathing room in dense UI areas. All headline levels employ negative letter-spacing (-0.02em to -0.01em) to tighten the letterforms and reinforce authority. For small labels over busy backgrounds (such as the SSF badge or stat callouts), apply text-shad

Layout

The layout follows a 12-column grid system with a max-width of 1280px, ensuring content remains scannable on ultra-wide displays while maintaining focus on mobile. The hero section uses a full-bleed dark background (transitioning from #101214 to a subtle red gradient) paired with left-aligned text and a right-aligned vehicle image, creating a dynamic asymmetry that draws the eye. Spacing is semantic: lg (40px) separates major sections (hero, services, testimonials), md (24px) groups related content blocks, and sm (12px) provides breathing room within cards and list items. The gutter (24px) is applied consistently to left/right margins on desktop, collapsing to 16px on tablet and 12px on mobile. All section padding uses multiples of the 8px unit scale, creating a rhythmic visual cadence. Co

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the heavy drop-shadows common in consumer apps. Level 1 (Base): no shadow; surfaces sit flush on the background. Level 2 (Cards, inputs): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), creating a subtle lift that suggests interactivity without visual heaviness. Level 3 (Modals, popovers, hover states): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), a more pronounced separation that indicates modal priority. Focus states on interactive elements receive an additional ring: box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1), using the primary co

Shapes

The shape language is **Geometric Precision**—a philosophy that balances approachability with technical authority. Buttons and inputs use a 6px border-radius (DEFAULT), a subtle rounding that feels modern without appearing playful or overly soft. Cards and larger containers step up to 8px (md), reinforcing their role as content containers. The SSF accreditation badge employs full rounding (9999px) to create a pill shape, a micro-design choice that signals certification and trust. All interactive elements (buttons, inputs, badges) maintain consistent rounding across states; hover and active sta

Components

Action Elements Buttons are the primary driver of user intent. The primary button (button-primary) uses the brand red (#e74c3c) with white text, 40px height, 8px vertical / 12px horizontal padding, and 6px border-radius. On hover, the background shifts to #d63c2d (a 10% darkening) with a 200ms ease transition—no scale transform, no shadow change, just a color shift that feels responsive. On active/click, the background darkens further to #c23a2a and receives an inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.2)) to create a pressed effect. Secondary buttons (button-secondary) are transparent with a 1px outline in the outline color (#90949a), preserving the red text color. On hover, the background fills with surface-container-low (#f0f0f0), creating a subtle containment effect. Both butto

Do's and Don'ts

**Do**

• Do use the primary red (#e74c3c) exclusively on CTAs, focus states, and high-priority indicators—never on backgrounds or secondary UI.
• Do maintain 24px gutter spacing on desktop and collapse to 16px on tablet; never allow content to touch viewport edges.
• Do apply negative letter-spacing (-0.02em) to all display and headline text to reinforce technical authority and visual tightness.
• Do use the 6px border-radius as the default for buttons and inputs; reserve 8px for cards and 9999px for badges only.
• Do transition all interactive states (hover, focus, active) over 200ms with ease timing; avoid instant color changes.
• Do layer shadows progressively: no shadow for base, 0 4px 12px for cards, 0 8px 24px for elevated surfaces.
• Do use Outfit at 800 weight for display text (72px+) to maximize impact; never exceed 700 weight for body text.

**Don't**

• Don't use the primary red on non-interactive elements or backgrounds; it dilutes the signal-to-noise ratio and confuses users about what is clickable.
• Don't apply rounded corners exceeding 8px on primary UI components; it reads as playful rather than professional.
• Don't mix border-radius values within a single component family (e.g., 6px on some buttons and 8px on others); consistency is critical for visual coherence.
• Don't use system fonts or fallback stacks; always load Outfit via @font-face or Google Fonts to maintain brand consistency.
• Don't add scale transforms or rotation effects on hover; the brand requires restraint and clarity, not motion.
• Don't exceed 1280px container width; ultra-wide layouts dilute focus and increase cognitive load.
• Don't use opacity shifts below 0.8 for interactive states; the change must be perceptible without appearing broken or disabled.