SGS Logistics

Overview

SGS Logistics embodies a "Professional Heritage" aesthetic—a design language that honors 150+ years of accumulated operational expertise while projecting contemporary confidence and reliability. The brand serves Australian businesses requiring sophisticated logistics solutions, and the visual system reflects this through a refined palette of warm golds (#b09238), sophisticated charcoals (#404041), and clean whites (#fdfdfd). The UI evokes precision, trustworthiness, and operational excellence: every element is purposeful, every interaction predictable, every surface communicates competence.

The brand voice is direct, knowledgeable, and reassuring—never casual, never breathless. SGS speaks with the authority of seasoned logistics professionals who have solved complex supply-chain problems for decades. Vocabulary favors concrete nouns ("chain of responsibility," "solution design," "strategic account management") over marketing abstractions. Example sentence in brand voice: "Our operations team brings 150+ years of direct industry experience to every shipment—your cargo moves with precision, not promises."

Colors

The color system centers on a warm, authoritative gold (#b09238) as the primary accent—used exclusively on CTAs, active navigation states, and key interactive elements. This gold communicates premium service and industry leadership without the coldness of corporate blues. The secondary palette pairs this with a sophisticated charcoal (#404041) for typography and structural elements, creating high contrast (WCAG AAA compliant at 10.2:1 ratio) that ensures legibility across all contexts.

Surface colors follow a light, minimal aesthetic: the base surface is near-white (#fdfdfd), with container variants stepping down through #f8f8f8, #eeeeee, and #e8e8e8 to create subtle visual hierarchy without introducing gray monotony. The accent gold (#b09238) is reserved for primary CTAs and hover states

Typography

The type system pairs Montserrat (headings: display, headline-lg, headline-md, title-lg) with Poppins (body and labels), creating a clear hierarchy between structural content and supporting information. Montserrat's geometric precision reinforces the brand's operational competence, while Poppins's approachability softens the interface and improves readability at smaller sizes. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major page titles; headline-lg (40px, 700 weight) introduces key sections; body-md (16px, 400 weight, 24px line-height) maintains comfortable reading rhythm at 14-18px viewport widths. All body text uses 0.01em letter-spacing to prevent the Poppins letterforms from feeling cramped. On small labels (12px) over busy backgrounds, apply text-shadow: 0

Layout

The page layout uses a 12-column grid with a 1200px max-width container, maintaining generous side margins (24px gutter) that scale down to 12px on tablets and 8px on mobile. The spacing scale is semantic: lg (40px) separates major sections (hero to content, content to footer), md (24px) creates breathing room within card groups and form fields, sm (12px) provides internal padding for buttons and list items. The hero section spans full-width with a 480px minimum height and 64px vertical padding, establishing visual weight before transitioning to the content grid. White-space philosophy prioritizes clarity over density: cards are never packed tighter than 24px apart, and text blocks maintain 28px line-height (1.75x multiplier) to support scanning and comprehension. Container max-width of 12

Elevation & Depth

Depth in this system is achieved through subtle shadows and layered surfaces rather than dramatic drop-shadows. The elevation scale defines three levels: sm (0 1px 3px rgba(0, 0, 0, 0.08)) for interactive elements like buttons and input fields, md (0 4px 12px rgba(0, 0, 0, 0.12)) for cards and modals, and lg (0 12px 32px rgba(0, 0, 0, 0.16)) for elevated overlays and hover states. Buttons use md-level shadows by default, escalating to lg on hover to signal interactivity. Cards sit at sm level, rising to md on hover or focus. The hero section uses a semi-transparent dark overlay (rgba(64, 64, 6

Shapes

The shape philosophy is "Refined Pragmatism"—rounded corners are used strategically to soften the interface without sacrificing the professional, structured aesthetic. Buttons and primary CTAs use 15px border-radius (rounded.lg), creating a slightly rounded rectangle that feels modern without appearing playful. Cards and containers use 10px (rounded.md), maintaining visual consistency with buttons while allowing for denser layouts. Input fields use 8px (rounded.DEFAULT), a subtle curve that distinguishes them from flat surfaces without drawing attention. Navigation elements and small badges us

Components

Action Elements Buttons follow a two-tier system: primary (gold background, white text, 48px height, 12px 32px padding, 15px radius) for main CTAs like "Get Started" and "Contact"; secondary (transparent background, charcoal text, 2px charcoal border) for alternative actions. Primary buttons use md-level shadows (0 4px 12px rgba(0, 0, 0, 0.12)) and escalate to lg on hover with a 200ms ease-out transition. Hover state darkens the gold to #9d7d2e and increases shadow depth, signaling state change without color shift that might confuse colorblind users. Active state uses #8b7d2e. Secondary buttons gain a light gray background (surface-container-high) on hover, maintaining the outline style while providing visual feedback.

Containers & Surfaces Cards use a 1px solid border (outline-va

Do's and Don'ts

**Do**

• Do use the primary gold (#b09238) exclusively for CTAs, active states, and key interactive moments—never for body text or decorative elements.
• Do maintain 24px gutter spacing on desktop and scale down proportionally on mobile to preserve the clean, uncluttered aesthetic.
• Do apply 200ms ease-out transitions to all hover and focus state changes to signal interactivity without feeling sluggish.
• Do pair Montserrat headings with Poppins body text to create clear visual hierarchy between structural and supporting content.
• Do use the full-radius (9999px) treatment only for badges and supplementary status indicators, never for primary containers.
• Do ensure all text over the hero overlay maintains at least 7:1 contrast ratio by using white (#ffffff) text against the dark gradient.

**Don't**

• Don't use the primary gold (#b09238) for backgrounds or large surface areas—reserve it for interactive elements and accents only.
• Don't apply shadows deeper than lg-level (0 12px 32px rgba(0, 0, 0, 0.16)) as the system relies on subtle depth, not dramatic drop-shadows.
• Don't mix Montserrat and Poppins within the same heading or body paragraph—maintain clear separation between heading and body typefaces.
• Don't use border-radius values outside the defined scale (sm: 4px, DEFAULT: 8px, md: 10px, lg: 15px, xl: 20px, full: 9999px) as this breaks visual consistency.
• Don't apply color transitions longer than 200ms or shorter than 150ms—slower feels unresponsive, faster feels jarring.
• Don't reduce the gutter spacing below 12px on mobile or the layout will feel cramped and text will become difficult to scan.