iContainers

Overview

iContainers is a B2B freight forwarding platform that democratizes international shipping through digital-first design and transparent pricing. The brand serves logistics professionals, importers/exporters, and businesses seeking clarity in complex supply chains. The aesthetic is "Professional Clarity"—a design movement that combines corporate trust (deep navy backgrounds, structured layouts) with modern accessibility (bright accent colors, generous whitespace, clear iconography). The UI evokes confidence and control: users feel empowered to make shipping decisions independently, without intermediaries. The brand personality is direct, knowledgeable, and reassuring. Voice is conversational yet authoritative—never jargon-heavy, always solution-focused. Example: "Compare thousands of quotes in seconds. No hidden fees, no surprises."

Colors

The color system is anchored by a deep, professional primary blue (#1a4ec0) used exclusively on CTAs, links, and interactive focus states. This blue conveys trust and authority—essential for a B2B logistics platform where users make high-value decisions. The secondary accent is a vibrant orange (#ff4d00), reserved for highlights, badges, and secondary CTAs to inject energy and urgency without compromising professionalism. Tertiary cyan (#0888c8) supports data visualization and secondary information hierarchy. The surface stack is light and clean: white (#ffffff) for primary surfaces, with subtle grays (#f6f6f8, #e9ecef, #d8d8d8) creating depth through container layers. On-surface text is near-black (#080808) for maximum readability at 16px body size. The outline color (#6c757d) is used for

Typography

The type system pairs Poppins (headings, labels, UI text) with Open Sans (body copy, descriptions). Poppins' geometric, modern character reinforces the digital-forward brand positioning, while Open Sans provides warm, readable body text at 16px with 24px line-height (1.5x multiplier) for comfortable scanning. Display (56px, 700 weight) is reserved for hero headlines and major section breaks; headline-lg (46px, 600 weight) anchors primary content sections; headline-md (32px, 600 weight) is used for subsections and card titles. Body-lg (18px, 400 weight) is used for introductory paragraphs and emphasized descriptions; body-md (16px, 400 weight) is the default paragraph text. Label-md (14px, 600 weight, uppercase) is applied to all button text and form labels, creating visual distinction and

Layout

The layout uses a 12-column fluid grid with a 1200px max-width container, maintaining 24px horizontal gutters on desktop and 15px on tablet (600px+). Page rhythm is structured around 40px section spacing (lg token) for major content blocks, with 24px (md token) for internal card/component spacing. The hero section spans full-width with a 75% content column on desktop (left-aligned text + CTA form), creating asymmetrical visual balance. Form inputs and cards use 12px (sm token) internal padding for compact density. The design favors generous whitespace: sections breathe with 40–64px vertical margins, preventing cognitive overload. Container max-width of 1200px ensures readability without excessive line lengths; body text never exceeds 75 characters per line. Responsive breakpoints are 600px

Elevation & Depth

Depth is conveyed through a three-tier shadow system aligned with Material Design principles. Level 1 (sm): 0px 1px 3px rgba(0, 0, 0, 0.12) is applied to subtle interactive elements like hover states on list items and secondary cards. Level 2 (md): 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12) is the default for primary buttons, input fields, and standard cards—creating clear visual separation from the surface. Level 3 (lg): 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0

Shapes

The shape philosophy is "Soft-Technical"—combining subtle rounding with geometric precision to balance approachability and professionalism. Buttons use 4px (sm/DEFAULT) border-radius, maintaining a slightly squared appearance that feels modern and intentional rather than overly rounded. Cards and modals use 12px (lg) border-radius, softening edges without appearing playful. Input fields use 4px (DEFAULT) to align with button styling, creating visual cohesion in form layouts. The full (9999px) radius is reserved for badges and pill-shaped elements (e.g., status indicators). This graduated scale

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use the brand blue (#1a4ec0) background with white text, 14px Poppins 600 weight, 14px vertical + 22px horizontal padding, and 4px border-radius. The default shadow is md-level (0px 3px 1px -2px rgba(0,0,0,0.2)...). On hover, the shadow elevates to 0px 2px 4px -1px rgba(0,0,0,0.2)... without changing background color. On active/focus, the shadow reaches lg-level (0px 5px 5px -3px...). All transitions occur over 250ms cubic-bezier(0.4, 0, 0.2, 1). Secondary buttons (button-secondary) use transparent backgrounds with primary blue text, smaller padding (8px 11px), and a subtle hover state: background-color: rgba(26, 78, 192, 0.04). Disabled buttons reduce opacity to 0.26 and remove shadows.

##

Do's and Don'ts

**Do**

• Do use primary blue (#1a4ec0) exclusively for CTAs, links, and focus states—never for backgrounds or large surface areas.
• Do maintain 24px gutters and 40px section spacing to ensure content breathes and remains scannable.
• Do apply Poppins 600 weight to all headings and labels to reinforce visual hierarchy and modern professionalism.
• Do use the three-tier shadow system (sm/md/lg) consistently; never create custom shadows outside the defined elevation scale.
• Do test button and input focus states at 16px body text size to ensure 4px border-radius feels intentional, not cramped.

**Don't**

• Don't use secondary orange (#ff4d00) on primary CTAs; reserve it for badges, secondary actions, and highlights only.
• Don't exceed 75 characters per line in body text; use the 1200px container max-width and 24px gutters to enforce readability.
• Don't mix Poppins and Open Sans weights arbitrarily; use Poppins 600 for UI text and Open Sans 400 for body copy exclusively.
• Don't create custom shadows or use drop-shadow filters; all elevation must reference the sm/md/lg shadow tokens with exact rgba values.
• Don't round corners beyond 12px on cards or modals; excessive rounding dilutes the technical, professional aesthetic.