LTH Logistics

Overview

LTH Logistics is a Vietnamese cross-border e-commerce logistics platform that simplifies purchasing from Chinese marketplaces (Taobao, 1688, Tmall) and manages freight forwarding to Vietnam. The design system embodies "Professional Clarity"—a modern, efficiency-focused aesthetic that combines the trustworthiness of corporate logistics with the accessibility of consumer e-commerce. The UI prioritizes scanability and task completion: bold primary red (#E63946) anchors call-to-action buttons, while a cool neutral palette (navy #0A1F44, warm cream #FAFAF7) creates a stable, professional backdrop. The emotional response is one of confidence and control: users feel they are in capable hands, with clear pathways to accomplish their shipping and purchasing goals.

The brand voice is direct, reassuring, and locally resonant. Tone: professional but not stiff; helpful without being patronizing. Vocabulary emphasizes transparency ("cước phí minh bạch" — transparent fees), speed ("siêu tốc" — ultra-fast), and reliability ("uy tín" — trustworthy). Example sentence in brand voice: "Nhập sỉ số lượng lớn, LTH lo từ A–Z" (Bulk wholesale orders—LTH handles everything from start to finish).

Colors

The color system is anchored by a vibrant primary red (#E63946), used exclusively for high-priority CTAs, status indicators, and brand moments. This red is warm, energetic, and culturally resonant in Vietnamese contexts (associated with prosperity and action). Secondary yellow (#FFD166) provides a complementary accent for highlights, badges, and secondary information layers—it reads as approachable and optimistic without competing with primary red. Tertiary blue (#1E40AF) is reserved for links, informational elements, and trust-building contexts (e.g., security badges, verified status). The surface stack is built on a warm off-white (#FAFAF7) as the base, with white (#FFFFFF) for elevated cards and modals. Text hierarchy is maintained through on-surface (#0A1F44, a deep navy) for primary c

Typography

The type system uses a two-font pairing: Plus Jakarta Sans (geometric, modern, weights 600–800) for headlines and display text, and Be Vietnam Pro (humanist, warm, weights 400–600) for body and UI labels. This combination balances corporate authority with local approachability. Display (56px, 700 weight, -0.03em letter-spacing) is reserved for hero headlines and major section breaks; headline-lg (40px, 700 weight) anchors subsections; headline-md (28px, 600 weight) introduces card groups and feature blocks. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and descriptive copy; body-md (16px, 400 weight, 24px line-height) is the default for form labels, list items, and standard content. Label-md (14px, 600 weight, 20px line-height, 0.01em tracking) is applied

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered on the viewport with symmetric gutters of 24px on desktop (reducing to 16px on tablet, 12px on mobile). The spacing scale follows a modular 8px unit: xs (4px) for micro-adjustments, sm (12px) for compact grouping, md (24px) for standard section padding, lg (40px) for major section separation, and xl (64px) for hero-to-content transitions. Container padding is consistently md (24px) on cards and modals, with internal element spacing using sm (12px) for related items and md (24px) for logical groupings. The hero section spans full-width with a 40px lg spacing buffer above the fold content. Search bars and input fields are full-width within their containers, with a minimum height of 44px to meet touch-target guidelin

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids harsh drop-shadows, instead using soft, diffused shadows to suggest layering. Level 1 (Base/Surface): no shadow; background is {colors.surface} (#FAFAF7) with optional 1px border at {colors.outline-variant}. Level 2 (Standard Card/Input): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a subtle lift with a 3px blur radius and 8px spread. Level 3 (Elevated Card/Modal on Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger spread (24px) and softer blur (8px) to suggest greater distance. Primary buttons add a branded sha

Shapes

The shape philosophy is "Approachable Geometry"—rounded corners are used consistently to soften the interface and reduce visual harshness, while maintaining enough angularity to feel modern and intentional. Buttons use {rounded.full} (9999px) for maximum friendliness and to emphasize their interactive nature; this full-pill shape is a signature of the brand and appears on all primary CTAs. Cards and modals use {rounded.xl} (22px), a generous radius that feels premium without being cartoonish. Input fields and search bars use {rounded.DEFAULT} (10px) or {rounded.lg} (14px) depending on context—

Components

Action Elements Buttons are the primary interaction mechanism and use a consistent 44px height to meet accessibility touch-target guidelines (minimum 44x44px). Primary buttons (button-primary) use {colors.primary} (#E63946) background with white text, {rounded.full} (9999px), and padding of 11px 24px. On hover (button-primary-hover), the background darkens to #D42A36 and the shadow expands from 0 3px 8px to 0 6px 16px with a 0.15s transition. On active/press (button-primary-active), the background further darkens to #C01F2B and the shadow compresses to 0 2px 4px, creating tactile feedback. Secondary buttons (button-secondary) use a white background with a 1px border at {colors.outline-variant}, maintaining the same height and rounded radius but with a more subtle hover state (backgroun

Do's and Don'ts

**Do**

• Do use {colors.primary} (#E63946) exclusively for high-priority CTAs, error states, and brand moments—never dilute its impact by overusing it on secondary elements.
• Do maintain a minimum 44px height for all interactive elements (buttons, inputs, list items) to meet WCAG touch-target guidelines and reduce mobile friction.
• Do apply consistent 24px padding (md spacing) to card and modal interiors, with 12px (sm spacing) between related elements within a card to create visual hierarchy.
• Do use Plus Jakarta Sans (600–700 weight) for all headlines and display text to signal authority and modernity; reserve Be Vietnam Pro for body copy and UI labels.
• Do pair button hover states with a 0.15s–0.2s ease-out transition and a shadow expansion (e.g., 0 3px 8px → 0 6px 16px) to signal interactivity without jarring motion.
• Do use {rounded.full} (9999px) on buttons and chips to create a visual language that clearly distinguishes interactive elements from static containers.
• Do apply a 1px border at {colors.outline-variant} (#C4CDE0) to all cards and inputs to define edges without harsh lines, maintaining visual softness.

**Don't**

• Don't use pure black (#000000) or pure white (#FFFFFF) as primary text or background—use {colors.on-surface} (#0A1F44) and {colors.surface} (#FAFAF7) to reduce eye strain and maintain brand warmth.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) on standard cards; excessive shadow depth creates visual clutter and reduces perceived performance.
• Don't mix rounded radii inconsistently—buttons should always use {rounded.full}, cards {rounded.xl}, inputs {rounded.DEFAULT} or {rounded.lg}—to maintain visual coherence.
• Don't use secondary yellow (#FFD166) or tertiary blue (#1E40AF) on primary CTAs; these colors are reserved for supporting roles (badges, links, highlights) and will dilute brand recognition.
• Don't set button text smaller than 14px (label-md) or larger than 16px (body-md)—this range ensures legibility on all devices without requiring zoom.
• Don't apply focus rings or outlines without a 3px colored ring (e.g., rgba(230, 57, 70, 0.1) for primary red)—bare outlines are invisible on light backgrounds.
• Don't use more than 2–3 font weights in a single view; stick to 400 (body), 600 (labels/headlines), and 700 (display) to avoid visual noise.