M.V.P. Logistics

Overview

M.V.P. Logistics embodies a **Contemporary Industrial Precision** aesthetic—a design language that merges the reliability of heavy-transport infrastructure with the clarity of modern SaaS interfaces. The brand serves international logistics operators and freight customers who demand both trustworthiness and efficiency. The visual system conveys competence through clean geometry, purposeful color hierarchy, and typography that balances boldness (BebasNeuePro for headlines) with approachable clarity (Inter for body copy). The emotional response is one of confidence: users feel assured that their cargo is in capable hands, supported by 24/7 operations and optimized routing.

The brand voice is direct, professional, and human—never corporate-speak. Sentences are short, active, and outcome-focused. Example: "Your shipment arrives on schedule. We track every mile." The vocabulary avoids jargon; instead, it uses concrete nouns (routes, warehouses, fleet) and action verbs (deliver, track, optimize). Personality traits: reliable, transparent, modern, and slightly bold—willing to make strong visual statements without apology.

Colors

The color system is anchored by a **Vivid Cyan-Blue primary** (#0693e3) that appears on all interactive elements—buttons, links, focus states—signaling actionability and trust. This is paired with a **Warm Orange secondary** (#ff6900) used sparingly for alerts, highlights, and secondary CTAs, creating visual tension that keeps the interface dynamic. A **Vibrant Green tertiary** (#00d084) supports success states and confirmations. The surface stack is deliberately light and neutral: pure white (#ffffff) for the main canvas, with subtle grays (#f4f4f7, #eeeeee, #dddddd) creating depth through container hierarchy. The on-surface text is a deep navy (#1f1f61), chosen for legibility and sophistication—never pure black, which would feel harsh against the white background. Error states use a mute

Typography

The type system employs a **two-family pairing strategy**: BebasNeuePro (bold, geometric, all-caps-friendly) anchors headlines and UI labels, while Inter (humanist, neutral, highly legible) handles body copy and smaller text. This creates visual contrast—headlines command attention with their geometric weight (700 fontWeight, -0.02em letterSpacing), while body text remains approachable and scannable (400 fontWeight, 28px lineHeight for lg variant). The display level (66px, 72px lineHeight) is reserved for hero statements like "We deliver more than cargo — we deliver peace of mind." Headline-md (36px) works for section titles, and body-md (16px, 24px lineHeight) is the workhorse for descriptions and form labels. All small labels (12–14px) use a tighter lineHeight (16–20px) and increased let

Layout

The layout follows a **12-column fluid grid** with a max-width of 1200px, centered on larger viewports. The spacing scale is semantic: **gutter (24px)** defines the horizontal padding inside containers and the gap between grid columns; **lg spacing (40px)** separates major sections (hero, features, testimonials); **md spacing (24px)** is used for card padding and subsection margins; **sm spacing (12px)** handles internal component spacing (button padding, list item gaps). The rhythm is generous—white space is treated as a design element, not wasted real estate. Container padding is consistently 24px on desktop, reducing to 16px on tablets and 12px on mobile. Section breaks use 40px top/bottom margins to create breathing room. The hero section spans full-width with a dark overlay (rgba(0, 0

Elevation & Depth

Depth is conveyed through a **subtle shadow hierarchy** rather than dramatic layering. Level 1 (Base/Surface): no shadow; white background (#ffffff) is the foundation. Level 2 (Cards/Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with border-radius 12px (sm rounded), creating a soft lift. Level 3 (Modals/Popovers): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with border-radius 16px (md rounded), signaling prominence. Hover states on cards transition from Level 2 to Level 3 over 240ms using cubic-bezier(0.2, 0, 0, 1) for a snappy, industrial feel. Input fields on focus receive a 3px inse

Shapes

The shape language is **Geometric Minimalism**—sharp, purposeful, and functional. Border-radius follows a strict scale: **sm (4px)** for buttons, inputs, and small UI elements; **md (12px)** for cards and larger containers; **lg (16px)** for modals and hero overlays; **full (9999px)** for badges and pill-shaped elements. The rationale: small radii (4px) feel technical and precise, aligning with logistics operations; medium radii (12px) soften cards without sacrificing modernity; full radii are reserved for status badges and accent elements. No organic or heavily rounded corners—this is not a p

Components

Action Elements Buttons are the primary interaction pattern. **Button-primary** uses the vivid cyan-blue (#0693e3) background with white text, 48px height, 12px vertical / 40px horizontal padding, and 4px border-radius. On hover, the background shifts to #0575c7 with a 200ms ease-out transition—no scale or shadow change, just color. **Button-secondary** has a transparent background with a 1px outline in outline-variant (#abb8c3), same height and padding, and on hover shifts to surface-container-high (#e8e8eb) with primary text color. Both use BebasNeuePro at 14px, 700 weight, 0.01em letterSpacing for visual weight.

Containers & Surfaces **Card** component uses surface-container-lowest (#eeeeee) background, 24px padding, 12px border-radius, and elevation.sm shadow (0 3px 8px rgba(0

Do's and Don'ts

**Do**

• Do use BebasNeuePro for all headlines and UI labels—its geometric weight reinforces the industrial-precision brand identity.
• Do maintain the 24px gutter consistently across all layouts; it's the rhythm that holds the system together.
• Do apply the primary cyan-blue (#0693e3) to all interactive elements (buttons, links, focus states) so users instantly recognize affordances.
• Do use the 200–240ms ease-out transition timing on all hover and focus states for a snappy, responsive feel.
• Do keep shadows subtle (3px 8px or 8px 24px) and cool-toned (rgba(0, 0, 0, 0.12–0.15)) to maintain the flat, modern aesthetic.
• Do reserve the orange secondary (#ff6900) for alerts, secondary CTAs, and highlights—use it sparingly to avoid visual noise.

**Don't**

• Don't use pure black (#000000) for text; always use the deep navy on-surface (#1f1f61) for sophistication and reduced eye strain.
• Don't apply shadows to buttons; rely on color contrast and typography weight for hierarchy instead.
• Don't mix typefaces beyond BebasNeuePro and Inter; the two-family system is intentional and must be preserved.
• Don't use border-radius values outside the defined scale (sm, md, lg, full); arbitrary radii break the geometric precision.
• Don't animate scale or rotation on hover; keep transitions to color, shadow, and background only for a professional, controlled feel.
• Don't exceed 40px (lg spacing) for section margins; the layout should feel spacious but not wasteful.