Envi Marketplace

Overview

Envi Marketplace is a logistics-first e-commerce enabler serving Central America and the Caribbean, bridging the gap between US retailers and underserved markets. The design philosophy embraces **Functional Maximalism**—a deliberate aesthetic that prioritizes clarity and conversion through bold color blocking, generous whitespace, and confident typography, rather than minimalist restraint. The brand personality is direct, reassuring, and action-oriented: users come to buy, and the interface removes friction without sacrificing trust. The emotional response is one of empowerment—"I can access global brands from my home, easily and affordably."

The voice is conversational yet precise, avoiding corporate jargon in favor of concrete benefits. Tone examples: "Los teléfonos que se lanzan afuera" (The phones that launch overseas) uses aspirational simplicity; "Cotizamos por peso real y te lo mostramos antes de pagar" (We quote real weight and show you before payment) builds confidence through transparency. The brand avoids hype and breathlessness, instead grounding every claim in operational reality. Example sentence in brand voice: "Envío desde $3.00 la libra—sin sorpresas en aduana."

Colors

The color system is built on **high-contrast pragmatism**: a clean white canvas (#ffffff) anchors the interface, while a vibrant golden-amber primary (#ffb100) commands attention on CTAs, hero sections, and key interactive elements. This primary is the brand's signature accent—it appears on the "Ver celulares" button, category badges, and promotional highlights, signaling action and urgency without aggression. Secondary blue (#1a47b8) is reserved for hero sections and category cards, evoking trust and global reach; it pairs with white text (rgb(255, 255, 255)) for maximum legibility at 46px headline scale. Neutral grays form a precise scale: on-surface text is #0b0b0c (near-black, 11, 11, 12 in RGB) for 16px body copy; on-surface-variant (#444444) softens secondary information; outline (#6

Typography

The type system uses Geist (a modern, geometric sans-serif from Vercel) across all scales, establishing visual cohesion and technical credibility. Display (60px, 700 weight, -0.04em tracking) anchors hero moments; headline-lg (46px, 700 weight) powers main section titles like "El último modelo, sin esperar"; headline-md (32px, 600 weight) organizes subsections; title-lg (24px, 600 weight) labels card headers. Body-lg (18px, 400 weight, 28px line-height) carries hero copy and feature descriptions, with generous leading (1.56x) for readability over complex backgrounds. Body-md (16px, 400 weight, 24px line-height) is the default paragraph text, applied to product descriptions and form labels. Label-md (14.5px, 600 weight, 20px line-height) styles button text and small UI labels; label-sm (12p

Layout

The layout follows a 12-column fluid grid with a max-width of 1280px, centering on desktop and collapsing to full-width on mobile (< 768px). The gutter is 24px (md spacing), applied consistently between columns and sections. Hero sections (like the phone carousel at 400px+ min-height) use asymmetric layouts: text occupies 50–60% of the width on the left, imagery 40–50% on the right, with a 40px (lg spacing) gap between. Category cards are arranged in a 4-column grid on desktop, 2-column on tablet, 1-column on mobile. Container max-widths vary by section (820px for narrow content, 1200px for full-width hero, 1400px for edge-to-edge backgrounds), but the primary constraint is 1280px. Whitespace philosophy: section separation uses lg spacing (40px) vertically; card padding is md (24px); butto

Elevation & Depth

Depth is achieved through subtle shadows and strategic layering, avoiding dark overlays in favor of light, diffuse shadows that suggest proximity without drama. Base level (surface, #ffffff) has no shadow. Level 1 (cards, input fields) uses elevation.md: 0 4px 12px rgba(0, 0, 0, 0.1)—a soft, 4px blur with 12px spread, creating gentle separation from the background. Level 2 (modals, dropdowns, hovered cards) uses elevation.lg: 0 8px 32px rgba(0, 0, 0, 0.15)—a deeper, 8px blur with 32px spread, suggesting lifted prominence. The custom select dropdown applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0

Shapes

The shape language is **Soft-Technical**: rounded corners are applied with purpose, balancing approachability with functional clarity. Buttons and small interactive elements use rounded.lg (1rem, 16px), a moderate radius that feels friendly without being bubbly; the rendered primaryCta confirms this at border-radius: 8px (0.5rem). Cards and containers use rounded.xl (1.5rem, 24px), creating a softer, more inviting appearance for product listings and hero sections. Input fields use rounded.DEFAULT (0.5rem, 8px), a tighter radius that signals form-like precision. Badges and pills use rounded.ful

Components

Action Elements Buttons are the primary conversion driver. The button-primary component uses background-color: {colors.primary} (#ffb100), text-color: {colors.on-primary} (#111111), padding: 13px 26px, height: 44px, border-radius: 8px (rounded.lg), and font-weight: 600 (label-md typography). On hover, the background shifts to #ff9500 (inverse-primary) with a 200ms ease transition, providing clear feedback without animation lag. The button-secondary variant uses a transparent background with a 2px solid border in {colors.primary}, maintaining the same padding and height; on hover, it fills with {colors.surface-container-low} (#f1f1f1) while keeping the border, creating a subtle inversion effect. Both variants use Geist at 14.5px, matching the rendered DOM.

Containers & Surfaces Car

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ffb100) exclusively on primary CTAs, hero accents, and key interactive states—never on passive elements or backgrounds.
• Do apply generous whitespace (md: 24px, lg: 40px) between sections to maintain visual breathing room and reduce cognitive load.
• Do pair Geist headline-lg (46px, 700 weight, -0.02em tracking) with body-md (16px, 400 weight, 24px line-height) for optimal readability and hierarchy contrast.
• Do use elevation.md (0 4px 12px rgba(0, 0, 0, 0.1)) for cards and elevation.lg (0 8px 32px rgba(0, 0, 0, 0.15)) for modals to create clear depth without visual clutter.
• Do apply 200ms ease transitions on all interactive state changes (hover, focus, active) to provide smooth, predictable feedback.

**Don't**

• Don't use primary (#ffb100) on body text, borders, or backgrounds—it's reserved for action and accent only.
• Don't apply border-radius > 1.5rem (24px) to buttons or input fields; use rounded.lg (1rem) or rounded.DEFAULT (0.5rem) to maintain functional clarity.
• Don't mix Geist with system fonts or serif typefaces; maintain consistency across all scales and weights.
• Don't use shadows darker than rgba(0, 0, 0, 0.15) or blur values > 32px; the aesthetic requires light, diffuse elevation, not dramatic depth.
• Don't apply animation durations < 150ms or > 400ms on interactive elements; stay within the 150–200ms range for snappy, responsive feedback.