United Carriers Design System

Overview

United Carriers presents a cinematic, dark-themed digital experience that positions global freight forwarding as a high-stakes, visually ambitious endeavor. The design language draws heavily from aerospace and mission-control aesthetics—near-black voids, luminous white typography that feels etched into the canvas, and a central hero visualization of Earth rendered as a glowing data artifact. This is not a typical logistics B2B surface; it's an editorial statement about scale, accountability, and technological sophistication.

The brand voltage lives almost entirely in contrast: {colors.body} white against {colors.canvas} near-black, punctuated by the warm orange and cool blue atmospheric glows of the globe visualization (carried as extension shadow tokens rather than palette colors, since they exist only within the illustrative layer). Where most freight sites lean into corporate blues or safety oranges, United Carriers opts for a restrained monochrome foundation, letting the proprietary {typography.display-lg} typeface do the heavy emotional lifting. BT Steinhart is a grotesque sans with geometric construction and substantial weight—at 80px and 700 weight, headlines feel architectural, almost monumental.

The shape vocabulary is aggressively rounded: every interactive element—from the {component.header-btn-work-with-us} pill in the navigation to {component.hero-cta-primary} action buttons—uses {rounded.pill} (9999px radius). This softness creates visual relief against the sharp geometry of the display type and the technical precision of the {typography.mono} labels used for metadata ("NEWS:", "GERMANY", "SITE OF THE DAY"). Cards and containers default to generous rounding ({rounded.xl}, 1440px for extreme cases), suggesting a design philosophy where even structural elements should feel approachable, tactile, almost liquid.

Sub-systems include: the hero dialect (full-bleed dark canvas, asymmetric two-column layout with text-left/globe-right, massive display type with split-line animation), the navigation dialect (transparent overlay on {colors.canvas}, uppercase letter-spaced links, single white CTA pill), the commerce/cart dialect (inverted to white surface with dark ink, maintaining the same pill-shaped buttons), and the loader dialect (full-canvas dark screen with mono type ticker). Each sub-system maintains the core type pairing but shifts surface polarity according to context.

Key Characteristics:

• Near-black {colors.canvas} (#111111) serves as the foundational surface across all primary views
• Display typography uses {typography.display-lg} (80px / 700 weight) in BT Steinhart for all hero headlines, never lighter than weight 500
• Body copy renders in {typography.body-md} (23.3333px / 500 weight) Helvetica Neue, creating a distinct weight differential from headings
• All primary CTAs employ {component.button-primary} with {colors.surface-soft} background and {rounded.pill} geometry
• Secondary actions use ghost treatment ({component.button-secondary}) with transparent backgrounds and subtle borders
• Mono labels ({typography.mono} / {typography.label} in BT Steinhart Mono at 13px) tag metadata, locations, and status indicators
• Glass-morphism cards ({component.card-glas}) use {colors.surface-glass} (8% white) on dark backgrounds for layered content
• Motion is expressive: marquee scrolls, split-line reveals, and transform transitions dominate the interaction model

Colors

Brand & Accent

• Primary ({colors.primary} — #111111): The foundational dark value, used as solid fills for checkout buttons, cart backgrounds, and any inverted-surface element requiring maximum contrast.
• Primary Active ({colors.primary-active} — #000000): Pressed/deepened state for primary-colored surfaces.
• Accent ({colors.accent} — #a686e0): Muted lavender appearing sparingly as a decorative overlay tint; not a primary interactive color.

Surface

• Canvas ({colors.canvas} — #111111): The dominant page background—near-black, serving as the void against which all hero content, navigation, and primary sections render.
• Surface Soft ({colors.surface-soft} — #ffffff): Pure white, reserved for inverted contexts: the {component.header-btn-work-with-us} nav CTA, {component.hero-cta-primary} buttons, cart panels, and any card that breaks from the dark theme.
• Surface Strong ({colors.surface-strong} — #373737): Medium-gray used for mid-tone dividers, disabled-state surfaces, or secondary container fills.
• Surface Elevated ({colors.surface-elevated} — rgba(17, 17, 17, 0.72)): Semi-transparent dark overlay at 72% opacity, used for modal backdrops, dropdown surfaces, and elevated panel backgrounds.
• Surface Overlay ({colors.surface-overlay} — rgba(17, 17, 17, 0.16)): Light dark-tint overlay at 16%, used for input field backgrounds, hover state tints, and subtle surface differentiation.
• Surface Glass ({colors.surface-glass} — rgba(255, 255, 255, 0.08)): Barely-visible white glass at 8% opacity, used for floating cards and panels atop {colors.canvas} without full inversion.
• Surface Glass Strong ({colors.surface-glass-strong} — rgba(255, 255, 255, 0.1)): Slightly more visible glass variant at 10% for hover states on glass elements.

Text

• Ink ({colors.ink} — #111111): Dark text color for light-surface contexts (cart, white cards, inverted modals).
• Body ({colors.body} — #ffffff): Pure white, the dominant text color across dark-surface contexts—headlines, nav links, body copy on canvas.
• Muted ({colors.muted} — rgba(255, 255, 255, 0.6)): Reduced-opacity white at 60% for secondary descriptions, helper text, and de-emphasized content on dark backgrounds.
• Muted Medium ({colors.muted-medium} — rgba(255, 255, 255, 0.7)): Slightly stronger mute at 70% for tertiary text needing marginally more visibility than {colors.muted}.
• On Primary ({colors.on-primary} — #ffffff): White text guaranteed readable atop {colors.primary} (#111111), satisfying AA contrast requirements.
• On Dark ({colors.on-dark} — #ffffff): Alias for white-on-any-dark-surface usage.
• On Surface ({colors.on-surface} — #b8b8b8): Medium gray for close/dismiss icons and utility text on light surfaces.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(17, 17, 17, 0.16)): Subtle dark divider at 16% opacity for separating content regions on light surfaces or defining input boundaries.
• Border Strong ({colors.border-strong} — rgba(17, 17, 17, 0.3)): Visible dark border at 30% opacity for outlined buttons ({component.button-outline}) and focused inputs.
• Border Subtle ({colors.border-subtle} — rgba(17, 17, 17, 0.08)): Faintest boundary at 8% for barely-perceptible separation lines.

Semantic

• Error ({colors.error} — #c13515): Reserved red for form validation failures and system alerts.
• Success ({colors.success} — #006400): Reserved green for confirmation states.
• Link ({colors.link} — #ffffff): Default link color matches body text on dark surfaces; differentiated by underline or interaction behavior rather than hue shift.
• Link Active ({colors.link-active} — rgba(255, 255, 255, 0.7)): Link state after interaction or during hover/focus, reducing to 70% opacity.

Signature / Brand-specific

• Badge Blue (hardcoded #2946e0): Used exclusively for the "W. Site of the Day" vertical badge—a non-palette accent tied specifically to the award recognition element.

Typography

Font Family

United Carriers deploys a three-typeface system with strict role segregation. BT Steinhart (proprietary grotesque, served via Webflow CDN subset WOFF2 files) owns all display and heading work: it appears in weights 500 (Medium) and 700 (Bold), and its geometric, high-impact letterforms carry the entire brand voice at large sizes. Helvetica Neue handles body copy and UI micro-copy, available in Roman (400) and Medium (500); its neutrality ensures readability at paragraph scale without competing with the display face. BT Steinhart Mono (monospace variant of the headline family, Regular weight only) provides the technical labeling layer—location tags, metadata stamps, loader tickers, and any data-dense annotation requiring fixed-width alignment.

The fallback stack consistently terminates with Arial, sans-serif, ensuring graceful degradation if the proprietary faces fail to load. Font-display is set to swap throughout, prioritizing content visibility over FOIT avoidance.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 96px | 700 | 1 | -0.02em | Reserved for oversized campaign moments (not visible in current viewport but implied by scaling logic) | | {typography.display-lg} | 80px | 700 | 1.05 | normal | Hero headline ("EVERY LEG OF THE JOURNEY"), major section openers | | {typography.title-md} | 20px | 700 | 1.1 | normal | Section labels ("ONE OPERATOR"), card titles on light surfaces | | {typography.title-sm} | 16px | 500 | 1.3 | normal | Wordmark/logo lockup, small titles | | {typography.body-md} | 23.3333px | 500 | 1.2 | normal | Hero description paragraph, lead-in copy | | {typography.body-sm} | 16px | 400 | 1.5 | normal | Standard body paragraphs, card copy | | {typography.caption} | 13.3333px | 400 | 1.4 | normal | Nav links, legal text, timestamps | | {typography.button} | 13.3333px | 400 | 1.2 | 0.05em | All button labels, typically uppercase via text-transform | | {typography.label} | 13px | 400 | 1.38 | 0 | Metadata tags ("NEWS:", location names) in mono | | {typography.mono} | 13px | 400 | 1.38 | 0 | Loader text, technical annotations, code-like strings | | {typography.nav-link} | 13.3333px | 400 | 1.4 | 0.08em | Navigation menu items, uppercased and tracked out |

Principles

The typographic system trusts weight and scale above all else for establishing hierarchy. BT Steinhart at 80px/700 weight commands immediate attention through mass alone—it needs no color variation, no italic flourish, no decorative underline. When the display type hits this size, letter-spacing remains normal (no artificial expansion), letting the typeface's native proportions breathe. Body copy in Helvetica Neue sits at an unusually large 23.3333px for paragraph text, ensuring legibility against the dark canvas while maintaining comfortable reading measure; the 500 weight prevents it from feeling too light against the absorbing black background.

Uppercase plays a functional role rather than a stylistic one: button labels ({typography.button}) and nav items ({typography.nav-link}) are uppercased via CSS text-transform, with modest letter-spacing (0.05em–0.08em) preventing the tightness that often plagues all-caps sans-serif settings. The mono face ({typography.mono} / {typography.label}) operates at a diminutive 13px but remains fully legible due to its designed-for-small-size proportions and the high-contrast white-on-black rendering context. Italic is absent entirely from the extracted stylesheet—emphasis comes from weight shifts or color opacity changes instead.

A signature typographic moment occurs in the hero: "ONE OPERATOR" renders in {typography.title-md} (20px Bold) sitting directly atop "EVERY LEG OF THE JOURNEY" in {typography.display-lg} (80px Bold), creating a 4:1 size ratio between label and headline that feels confident rather than chaotic. The headline itself is set with color: transparent and a background-clip: text reveal animation (visible in embedded CSS as .split-line-p), meaning characters animate in via background-position manipulation—a technique requiring the type to be treated as a masked graphic element.

Note on Font Substitutes

BT Steinhart is a proprietary commercial typeface not available on Google Fonts. For implementation without licensed access, substitute with Inter (Google Fonts) for the grotesque heading role: Inter shares similar geometric construction, multiple weight availability (400/500/600/700), and excellent screen rendering. For the mono role, replace BT Steinhart Mono with JetBrains Mono or IBM Plex Mono (both Google Fonts), selecting the Regular (400) weight. Helvetica Neue maps cleanly to the system font stack or can be replaced by Inter at 400/500 weights for body text. Define these substitutions as CSS variables:

--font-heading: 'Inter', 'BT Steinhart', Arial, sans-serif;
--font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'BT Steinhart Mono', monospace;

Layout

Spacing System

• Base unit: The system does not follow a strict 4px or 8px base; instead, it employs an empirical scale derived from the viewport-relative root sizing (html { font-size: 0.57870370373vw }) that produces the specific pixel values observed. The densest cluster falls between 3px and 20px.
• Tokens: {spacing.xxs} (2px) for micro-separators, {spacing.xs} (3px) for icon internal padding, {spacing.sm} (5px) for compact gaps, {spacing.base-sm} (7px) for inline element spacing, {spacing.base} (10px) for standard touch-padding increments, {spacing.md} (13px) for common internal component padding, {spacing.lg} (16px) for card padding and section gutters, {spacing.xl} (17px) for nav vertical rhythm, {spacing.xxl} (20px) for block-level margins, {spacing.section-sm} (23px) for subsection gaps, {spacing.section-md} (27px) for content-block spacing, {spacing.section-lg} (33px) for major vertical rhythm, {spacing.section} (112.5px) for hero section vertical padding.
• Section padding (vertical): {spacing.section} (112.5px) — used on the hero <section> element providing top padding before the headline column begins.
• Card internal padding: {component.card-white} uses {spacing.xxl} (20px) horizontal and {spacing.section-lg} (33px) vertical for breathing room around content.
• Gutters: Page-level gutter derives from --page-padding: max((100vw - var(--container--max-width)) / 2, 0px) calculated dynamically; the header constrains to 1440px max-width internally.

Grid & Container

• Max content width: 1440px for the header/navigation container; sections themselves appear to span full viewport width with inner content constrained via the dynamic page-padding calculation.
• Density choice: Editorial-hero density—the layout favors dramatic whitespace and oversized type over information density. This is a landing-page/branding surface, not a dashboard or marketplace.
• Grid behavior at desktop: The hero uses an implicit two-column asymmetric grid (roughly 45% text column / 55% visualization column) with the text left-aligned and the globe visualization right-aligned, bleeding to the viewport edge. No explicit CSS Grid or Flexbox column count was detected in the hero structure—it appears positioned via absolute/fixed placement for the globe layer.
• Hero column splits: Text column contains the label → headline → description → CTA pair stack, vertically centered in the left portion. Visualization column holds the WebGL/canvas globe element with orbit-line graphics overlaid.

Whitespace Philosophy

The system practices aggressive, confidence-driven whitespace. On {colors.canvas}, empty space is not absence—it's atmosphere. The hero headline occupies roughly 40% of the viewport height by itself when accounting for line breaks, yet the surrounding canvas feels expansive rather than cramped because the type is surrounded by ~112.5px of padding above and significant clear space below before any subsequent content would begin. This is anti-marketplace: no card grids, no three-column feature lists, no dense tabular data in the fold.

Header Architecture

|-------------------------------------------------------------------|
| [UNITEDCARRIERS]     ABOUT SERVICES INDUSTRIES INSIGHTS CAREERS    |  ← max-width: 1440px
|                      CONTACT          [WORK WITH US] 🛒           |
|-------------------------------------------------------------------|

Navigation uses a transparent overlay on the dark canvas (class on-dark). Logo flush-left, navigation items center-left with generous inter-item spacing (implied by the horizontal distribution), utilities (CTA button + cart icon) flush-right. The header has minimal vertical padding (~13.3333px top/bottom) keeping it slim and allowing the hero visualization to dominate.

Hero Section

|---------------------------------------------|-----------------------|
|                                             |                       |
|   NEWS: UNITED CARRIERS...                  |                       |
|                                             |    [GLOBE             |
|   ONE OPERATOR                              |     VISUALIZATION]    |
|                                             |     - orange glow     |
|   EVERY                                    |     - blue glow       |
|   LEG OF THE                               |     - orbit lines     |
|   JOURNEY                                  |     - dot grid        |
|                                             |                       |
|   Freight forwarding, land transport,      |      [SITE OF         |
|   and customs brokerage...                  |       THE DAY badge]  |
|                                             |                       |
|   [TALK WITH US]  [OUR SERVICES]            |                       |
|                                             |                       |
|---------------------------------------------|-----------------------|
| 112.5px top pad                     bottom pad extends to 1498.33px|

The hero is the defining layout moment: text column left, globe right, with the globe appearing to break out of any container (likely position: fixed or absolutely positioned with overflow visible). The "Site of the Day" badge hangs off the right edge as a fixed or absolute-positioned vertical ribbon.

Loader Screen Architecture

|---------------------------------------------------|
|                                                   |
|              [LOADER TICKER - MONO TEXT]          |
|              (services, countries cycling)         |
|                                                   |
|---------------------------------------------------|

Full-viewport dark overlay ({component.loader-screen}) with mono text animations showing service names and country destinations in rapid succession, building anticipation before the main content reveals.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 – Flat baseline | No shadow, direct on {colors.canvas} | Header, hero text column, footer | | 1 – Hairline outline | {colors.hairline} (16% dark) or {colors.border-subtle} (8%) | Input fields, subtle separators | | 2 – Soft drop | {extensions.shadows.sm} (0 2px 8px rgba(0,0,0,0.15)) | Floating tooltips, dropdown menus | | 3 – Modal elevation | {extensions.shadows.md} (0 8px 24px rgba(0,0,0,0.25)) | Cart sidebar, modal panels | | 4 – Atmospheric glow | {extensions.shadows.glow-orange} / {extensions.shadows.glow-blue} | Globe visualization aura (decorative only) |

The depth philosophy here is intentionally flattened for UI elements while reserving atmospheric effects for the illustrative layer. Buttons and cards sit flat against their backgrounds—no drop shadows on {component.button-primary} or {component.card-glass}. Elevation is communicated through background opacity shifts instead: {colors.surface-glass} at 8% reads as "above" canvas, {colors.surface-elevated} at 72% reads as "covering" content beneath. This opacity-based layering is more consistent with the dark-theme material design language popularized by modern SaaS dashboards.

Where shadows do appear, they're neutral/black-toned (rgba(0,0,0,...)) rather than inheriting the brand's accent tints. The exception is the decorative globe layer, which carries warm orange and cool blue radial glows—but these are part of the illustration asset, not the UI shadow system.

Decorative Depth

The globe visualization constitutes the primary decorative depth element. It features: a dark sphere with limb lighting creating a crescent highlight, warm amber/orange atmospheric bloom along one edge, cool electric blue along the opposite edge, thin orange arc lines representing shipping routes or orbital paths, and a dot-grid pattern suggesting geographic coordinates or data points. This is likely a WebGL or Canvas-rendered element with post-processing bloom effects, not achievable via pure CSS box-shadows. The glow radii extend 60–80px beyond the sphere bounds.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 4px | Small badges, tag elements, "Site of the Day" corner treatment | | {rounded.DEFAULT} | 8px | Default input fields, small containers | | {rounded.md} | 12px | Glass cards, medium panels | | {rounded.lg} | 16px | Dark surface cards | | {rounded.xl} | 24px | White/inverted cards | | {rounded.pill} | 9999px | All buttons (primary, secondary, outline), nav CTA | | {rounded.full} | 9999px | Avatar circles, icon containers (alias for pill in practice) | | {rounded.circle} | 50% | Perfect circles for icon backgrounds | | extreme | 1440px | Cart panel, mega-radius containers approaching full rectangle |

The shape vocabulary is overwhelmingly biased toward maximum roundness. Of 163+ radius instances detected in the DOM, 149 use 99% (effectively pill), confirming that United Carriers treats roundedness as a core brand signifier—not just a button style but a philosophical stance against sharp corners. Even the cart checkout button uses 1440px (an absurdly large value ensuring full pill shape regardless of element width).

Photography Geometry

No photographic imagery is present in the current viewport—all visual interest comes from the generative globe illustration and typographic composition. If photography were added to other pages (team headshots, facility photos, cargo imagery), the established pattern would suggest: full-bleed treatments with no border radius (letting images fill their containers edge-to-edge), potential dark overlay gradients at {colors.surface-elevated} (72%) to ensure text readability if overlaid, and 16:9 or 4:3 aspect ratios matching the cinematic widescreen proportion implied by the hero layout.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons & CTAs

{component.header-btn-work-with-us} — The primary call-to-action residing in the top navigation bar. Renders as a white pill-shaped button ({colors.surface-soft} background, {colors.ink} text, {rounded.pill} geometry) with approximately 28px horizontal padding. This is the highest-conversion element in the persistent nav, designed to stand out against the transparent/dark header background. Its inverted treatment (light on dark) makes it the visual anchor of the header row.

{component.hero-cta-primary} — "TALK WITH US" button in the hero text column. Uses identical styling to the header CTA: white background, dark text, pill shape, generous padding (18px 32px). Sits beside {component.hero-cta-secondary} as the emphasized action in the primary conversion pair.

{component.hero-cta-secondary} — "OUR SERVICES" ghost button. Transparent background with {colors.body} white text, {rounded.pill} shape, matching padding to the primary sibling. Likely carries a subtle {colors.border-strong} or {colors.hairline} border on hover/focus states (not documented per policy).

{component.button-primary} — Canonical primary button token for reuse across the site. White filled pill, dark ink text, {typography.button} sizing (13.3333px, uppercased, 0.05em letter-spacing). This is the default for any affirmative action (submit, confirm, proceed).

{component.button-secondary} — Canonical ghost/outlined button token. Transparent background, white text, pill shape. Used for dismissive or alternative actions (cancel, learn more, view all).

{component.button-outline} — Outlined variant with explicit border. Transparent fill, {colors.border-strong} border (30% dark), {colors.on-primary} text. Used in the cart checkout flow ({component.sidebar-cart-checkout}) and potentially form contexts.

{component.sidebar-cart-checkout} — Specialized checkout button within the cart sidebar. Solid {colors.primary} background (dark), white text, pill shape at 1440px radius, tighter vertical padding than standard buttons (15.83px/14.17px asymmetry suggesting custom tuning). Uppercase label text at reduced size relative to body buttons.

{component.header-cart-btn} — Cart icon trigger in the header. Transparent background, white icon/text, zero padding, functioning as an icon-only toggle. Opens the {component.sidebar-cart} panel.

Cards & Containers

{component.card-white} — Inverted-surface card for use when content requires a light background (testimonials, feature details on mixed-theme pages). Pure white background ({colors.surface-soft}), dark ink text ({colors.ink}), {typography.body-md} for content, {rounded.xl} (24px) corners, generous internal padding of 20px horizontal / 33px vertical.

{component.card-dark} — Standard content card on dark canvas. Uses {colors.surface-elevated} (72% dark) background creating subtle lift from the base canvas, white body text at {typography.body-sm}, {rounded.lg} (16px) corners, 16px internal padding.

{component.card-glass} — Frosted-glass effect card. Background at {colors.surface-glass} (8% white) allows underlying canvas texture/colors to show through while providing enough contrast for {typography.body-sm} white text. Rounded at {rounded.md} (12px). Ideal for floating overlays, stat widgets, or tooltip-like content panels.

{component.badge-site-of-day} — Vertical ribbon badge affixed to the right viewport edge. Deep blue background (#2946e0, outside the main palette), white text, {typography.title-md} (20px bold), minimal corner rounding ({rounded.sm}). Contains rotated "W." initial and "Site of the Day" text stacked vertically. Fixed or absolutely positioned to maintain visibility during scroll.

{component.badge-label} — Generic label/tag component. Transparent background, body-color text, {typography.label} (mono, 13px). Used for metadata prefixes like "NEWS:" or location identifiers.

{component.loader-screen} — Full-viewport loading overlay. {colors.canvas} background, mono text ({typography.mono}) cycling through service names and countries. Occupies entire screen during initial page load and potentially route transitions.

{component.cursor-custom} — Custom cursor element (class .cursor.active). Small circular indicator (~20px diameter) following pointer position with mix-blend-mode interaction. White fill on dark backgrounds. Part of the expressive interaction layer.

{component.icon-circle} — Circular icon container. {colors.surface-glass} background (8% white), white icon inside, {rounded.circle} (50%) creating perfect circle, 40px fixed dimension. Used for social links, utility actions, or decorative icon presentation.

Navigation

{component.top-nav} — Main navigation header. Transparent background (allowing hero image/globe to show behind), white text for all child elements, {typography.nav-link} (13.3333px, uppercased, 0.08em tracking) for menu items. Height is auto-determined by content (~40px total including padding). Contains logo, nav links row, and utility buttons.

{component.top-nav-on-loader} — Navigation variant displayed during the loader screen phase. Same structure as {component.top-nav} but with on-loader modifier class potentially adjusting opacity or z-index behavior.

{component.logo-wordmark} — "UNITEDCARRIERS" text logo. Transparent background, white text, {typography.title-sm} (16px, 500 weight), all-caps rendering. Positioned flush-left in the header.

{component.nav-menu-item} — Individual navigation link (ABOUT, SERVICES, INDUSTRIES, etc.). Transparent background, white text, {typography.nav-link} styling. Spaced horizontally with implicit gap between items.

{component.nav-menu-open} — Menu toggle button (hamburger/close control). Transparent background, white text/icon, {typography.caption} sizing (13.3333px), with notably asymmetric padding (12.5px top/bottom, 4.17px right, 33.33px left) positioning the icon toward the left edge of its hit area.

Inputs & Forms

{component.text-input} — Standard text input field. Background at {colors.surface-overlay} (16% dark), {colors.ink} text color (for readability on the semi-transparent fill), {typography.body-md} sizing, {rounded.DEFAULT} (8px) corners, 10px vertical / 13px horizontal internal padding. No visible inputs exist in the hero viewport; this token is inferred from the extracted stylesheet patterns and would apply to contact forms, search fields, or newsletter signups.

{component.text-input-focus} — Focus state for text inputs. Maintains the overlay background and rounding, with expected addition of focus ring or border highlight (per platform conventions, not extractable from static screenshot).

Commerce / Cart Sub-system

{component.sidebar-cart} — Slide-out shopping cart panel. Inverted to {colors.surface-soft} (white) background with {colors.ink} text, breaking from the main dark theme to provide familiar e-commerce context. Extreme rounding at 1440px radius. Contains product list, quantities, and checkout action.

{component.sidebar-cart-close} — Close/dismiss button for the cart panel. Transparent background, {colors.on-surface} gray text (lighter than primary text to indicate secondary action), {typography.button} sizing.

Footer & Structural

{component.footer} — Page footer region. {colors.canvas} background maintaining the dark theme continuity, {colors.muted} (60% white) text for lower-emphasis content, {typography.caption} sizing (13.3333px). Padding approximately 20px vertical / 16px horizontal. Would contain copyright, legal links, and contact summary.

Do's and Don'ts

Do

• Do use {typography.display-lg} (80px/700 weight BT Steinhart) for all major section headlines—never reduce below 700 weight for primary headings as the typeface's impact depends on its bold presence.
• Do apply {rounded.pill} (9999px radius) to every button instance; the pill shape is a mandatory brand identifier, not a style option.
• Do reserve {colors.surface-soft} (pure white) exclusively for inverted-surface contexts like {component.header-btn-work-with-us}, {component.hero-cta-primary}, and {component.sidebar-card}—never use white as a general background on dark pages.
• Do leverage {typography.mono} / {typography.label} (BT Steinhart Mono, 13px) for all metadata annotations, location tags, and status indicators to maintain the technical/operational voice.
• Do allow generous vertical spacing (minimum {spacing.section-lg} / 33px) between content blocks in hero and band sections—the design breathes through emptiness.
• Do use opacity variants of {colors.body} (white) for text hierarchy on dark surfaces: {colors.muted} at 60% for secondary text, {colors.muted-medium} at 70% for tertiary, preserving the monochrome purity.
• Do implement the globe visualization as a fixed or absolutely-positioned decorative layer that breaks out of the content container—its edge-bleeding quality is essential to the cinematic effect.
• Do uppercase all button labels and nav links via text-transform with corresponding letter-spacing (0.05em for buttons, 0.08em for nav)—the tracked-out uppercase is a consistent UI voice.
• Do treat {colors.canvas} (#111111) as the true "white" of this system—build your mental model inverted from typical light-theme design.
• Do use the background-clip: text technique with color: transparent for headline reveal animations if replicating the split-line entrance effect observed in the embedded CSS.

Don't

• Don't introduce blue or orange into the UI color palette—the atmospheric glows belong solely to the globe illustration layer and should not become button, link, or alert colors.
• Don't use sharp corners (below {rounded.sm} / 4px) on any interactive element—even close icons and tiny badges should retain visible rounding.
• Don't set body copy below {typography.body-sm} (16px) on dark backgrounds; the 23.3333px hero description size exists for a reason (legibility against absorptive black).
• Don't add drop shadows to buttons or cards on dark surfaces—use background opacity shifts ({colors.surface-glass} vs. {colors.surface-elevated}) to communicate depth instead.
• Don't substitute Inter or Helvetica for BT Steinhart in display roles without adjusting weight upward—the substitute face may need 800 weight to match the visual mass of BT Steinhart at 700.
• Don't crowd the hero headline with surrounding content—the 112.5px top padding and massive bottom clearance are intentional compositional choices, not wasted space.
• Don't use the {colors.accent} lavender (#a686e0) as a primary interactive color; it appears only as a rare decorative tint and lacks sufficient contrast for UI actions.
• Don't remove the font-display: swap property from @font-face declarations—FOIT (invisible text) would be particularly damaging on a dark canvas where users might not realize text is loading.
• Don't apply the cart-panel's 1440px radius to standard content cards—that extreme value is specific to the cart's full-width slab treatment.

Motion & Animation

Transition Tokens

/* Core UI transitions extracted from computed styles */
--transition-all: all ease-out 350ms;
--transition-complex: opacity 0.35s, border-color 0.35s, height 0.35s, background-color 0.35s, width 0.35s;
--transition-opacity: opacity 0.4s ease-out;
--transition-color: color 0.4s ease-out;
--transition-transform: transform 0.45s ease-out;
--transition-bg-transform: background-color 0.4s ease-out, transform 0.4s ease-out;
--transition-grid: grid-template-columns 0.5s cubic-bezier(0.4, 0, 0.2, 1), grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-width-delayed: width 0.45s ease-out 0.3s;

The transition system defaults to 350–450ms durations—slower than the industry-standard 150–200ms—reflecting the cinematic, unhurried brand pace. Easing is consistently ease-out or implicit browser default (linear/ease), with grid transitions using a custom cubic-bezier for smoother column reflow. The width-delayed transition (0.45s duration with 0.3s delay) suggests staggered entrance animations where elements expand after an initial pause.

Keyframe Animations

• spin — Continuous rotation (360deg), likely applied to loader indicators or decorative orbital elements around the globe.
• marquee — Horizontal translation loop (translateX from 0 to 100%), driving the news ticker or service-name carousel visible in the loader and possibly in a footer/news bar.
• wave — Oscillating Y-axis motion, potentially for subtle floating effects on the globe or ambient decoration.
• in-icon / out-icon — Icon entrance and exit sequences, handling the morph or fade of SVG icon paths during menu toggles or hover interactions.
• in-icon-new / out-icon-new / out-icon-new-services — Refined icon animation variants specific to updated icon sets or service-related icon groups.
• spin-wheel — Specialized rotation for a wheel/roulette-style interface element (possibly a loader variant or gamification widget).
• world-wide-dot — Pulsing or scaling animation for the dot-grid pattern on the globe visualization, simulating data-point activation or city highlighting.

Interaction Patterns

• Split-line headline reveal: The hero headline "EVERY LEG OF THE JOURNEY" animates character-by-character or line-by-line via background-clip: text masking, revealing white text against the canvas as a background gradient slides into position (.split-line-p class with --bg-progress CSS variable controlling the wipe).
• Custom cursor tracking: A .cursor-wrap element follows the pointer with .cursor.active state changes, using mix-blend-mode: difference (inferred from pe-mix-blend class) for inverted cursor appearance over varying backgrounds.
• Marquee scrolling: Continuous horizontal scroll of text content (news headlines, service names) at constant velocity, implemented via the marquee keyframe with seamless looping.
• Loader sequence: Full-screen dark overlay ({component.loader-screen}) with mono text cycling through destinations/services using opacity or transform transitions, clearing to reveal the hero content.
• Page transitions: The .trans wrapper with .trans-bg-clippath suggests clip-path or mask-based page transitions (circular reveals or wipes) between routes, using radial-gradient masks with animated --hole-radius.
• Grid reflow: Responsive grid layouts animate their grid-template-columns property during breakpoint transitions, smoothly redistributing columns rather than snapping.
• Cart slide-in: Sidebar cart panel enters from the right with width-animated reveal (0.45s duration, 0.3s delay suggesting choreographed sequence after trigger).
• Globe parallax: While not explicitly coded in extracted transitions, the fixed-position globe visualization strongly implies parallax scrolling behavior where the globe moves at a different rate than the text column.

Imagery Style

• Illustration-led: The hero and primary visual identity rely entirely on a generative 3D/CGI globe visualization rather than photography or flat illustration.
• Cosmic/atmospheric subject: Earth rendered as a dark sphere with limb lighting, suggesting nighttime or space-view perspective, decorated with abstract data visualizations (arc lines, dot grids) representing logistics networks.
• Dual-tone atmospheric lighting: Warm amber/orange glow on one hemisphere, cool electric blue on the opposing side—suggesting day/night terminator line or regional operational zones (APAC emphasis given the business focus).
• Non-photographic: No stock photography, no human subjects, no facility imagery in the primary viewport—the brand communicates through abstraction and type.
• Data-aesthetic ornamentation: Thin orange arcs suggesting flight paths or shipping routes, point-cloud dot grids suggesting port cities or hub locations—imagery that reads as "information visualization" rather than "decoration."
• Dark-mode-native: The illustration is designed specifically for dark backgrounds; it would lose its glow effects and contrast relationship if placed on white.
• Bleed-to-edge: The globe visualization breaks out of any container constraints, extending to the viewport edges (or beyond with overflow visible), creating an immersive, frameless feeling.
• Animation-enhanced: The globe is not static—keyframes for spin, world-wide-dot, and wave suggest continuous subtle motion (rotation, pulsing dots, floating effect) making the illustration feel alive.
• High production value: The lighting complexity (multiple colored light sources, bloom/glow post-processing) indicates WebGL, Three.js, or advanced Canvas rendering—not achievable with CSS gradients or SVG filters alone.

Icon System

• Library: Custom SVG icons (no detected third-party library; class names like w-inline-block suggest Webflow's built-in SVG management or hand-authored icons).
• Specific icons observed: Cart/shopping bag (header utility), menu hamburger/close toggle (nav control), chevron/arrow implied by button affordances, external link or utility icons in the top-right utility area.
• Treatment: Icons render in {colors.body} (white) against dark backgrounds, switching to {colors.ink} (dark) on inverted surfaces like the cart panel. Stroke-based appearance (consistent with line-weight uniformity visible in the cart close icon). Size ranges from 13.3333px (inline with button text) to 20px–24px (standalone utility icons).
• Alignment: Icons center vertically with adjacent text in buttons and nav items; standalone icons (cart) align to the baseline of the header row. Icon-only buttons use square or circular hit areas larger than the icon itself for accessibility.

Recommended Frontend Stack

- Framework:      Next.js 14+ (App Router) or Astro for static/edge delivery
- Styling:        CSS Modules or Tailwind CSS v4 (custom config extending the token system)
- Fonts:          Self-hosted BT Steinhart subsets via WOFF2 (from Webflow CDN or licensed source);
                   Fallback: Inter (headings) + JetBrains Mono (labels) from Google Fonts
- Animation:      GSAP (Timeline/ScrollTrigger) for split-line reveals, page transitions,
                   and orchestrated entrance sequences; CSS keyframes for infinite loops (marquee, spin)
- Icons:          Custom SVG components (React-based) with stroke-configurable props;
                   Lucide React for utility icons if supplementing the custom set
- Component lib:  Radix UI Primitives for accessible cart drawer, dialog, and
                   navigation menu primitives (styled to match design tokens)
- Visualization:  Three.js or React Three Fiber for the WebGL globe;
                   alternative: high-res video loop with alpha channel for simpler impl.

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column hero (headline stacks above collapsed/globe-hidden), hamburger menu replaces horizontal nav, CTA buttons stack vertically, font sizes scale down via vw-based root | | Tablet | 640px–1024px | Two-column hero maintains but with reduced display type size (~48–56px), globe scales down, nav may condense or hide secondary links | | Desktop | 1025px–1440px | Full hero layout restored (80px headlines), complete horizontal nav visible, globe at full bleed scale | | Wide | > 1440px | Container maxes at 1440px with dynamic page-padding filling excess width, globe continues to viewport edge |

The root font-size: 0.57870370373vw declaration means all rem-based values scale proportionally with viewport width—a fluid typography approach where a 1920px display yields larger computed pixels than a 1366px laptop. This reduces the need for discrete breakpoint-driven type resizing.

Touch Targets

• {component.header-btn-work-with-us}: Pill button estimated 44–48px height (meets/exceeds WCAG AAA 44×44px minimum).
• {component.hero-cta-primary} / {component.hero-cta-secondary}: Estimated 52–56px height with generous padding—well above minimum touch target.
• {component.nav-menu-open}: Toggle button with 33.33px left padding creating extended hit area—adequate though tighter than ideal.
• {component.header-cart-btn}: Icon-only trigger; should expand invisible touch area to minimum 44×44px via padding.
• {component.text-input}: 44px effective height (10px padding × 2 + ~24px font) meets minimum.

Collapsing Strategy

• Navigation: Horizontal nav collapses to hamburger menu ({component.nav-menu-open}) triggering a full-screen or slide-out menu overlay below tablet breakpoint. The on-dark and on-loader classes suggest context-aware menu styling.
• Hero columns: Two-column asymmetric layout (text + globe) stacks to single column on mobile with headline first, description second, CTAs third. Globe either hides, scales dramatically down, or moves below the fold to prevent 1498px of dead space.
• CTA pair: Side-by-side "TALK WITH US" + "OUR SERVICES" buttons stack vertically on mobile, maintaining {rounded.pill} shape and full-width or centered width.
• Cart sidebar: Slide-out panel converts to bottom-sheet or full-screen overlay on mobile, preserving the inverted white-surface treatment.
• Globe visualization: May convert to static image fallback or simplified Canvas render on low-power devices; the WebGL dependency suggests a performance-conscious progressive enhancement strategy.
• Typography scale: The vw-based root font-size naturally reduces all type on narrow viewports, but media queries likely intervene to cap the display type at a readable minimum (approximately 36–40px) on phone screens.

Image Behavior

• Hero globe: On desktop, fixed or absolute positioned with overflow visible, occupying roughly 55% of viewport width on the right side. On mobile, likely hidden, converted to a small decorative element below the headline stack, or replaced with a static fallback image to avoid the 1498px bottom padding issue.
• No photographic imagery in viewport: If added to interior pages, responsive images should use srcset with 1x/2x/3x variants, art-directed cropping for mobile (center-focused rather than edge-to-edge detail), and lazy loading below the fold.

Iteration Guide

1. Build a landing page closely mimicking the United Carriers design system using Next.js (or Astro for static) with CSS Modules or Tailwind configured to consume the YAML tokens as design variables. Start with the dark {colors.canvas} foundation before adding any content.

2. Pull every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} reference paths. Convert these to CSS custom properties (:root { --color-canvas: #111111; ... }) or Tailwind config extensions. Never hard-code a hex or pixel value that has a corresponding token.

3. Implement the three-font system as CSS variable references: --font-heading: 'BT Steinhart', sans-serif; --font-body: 'Helvetica Neue', sans-serif; --font-mono: 'BT Steinhart Mono', monospace. Ensure @font-face declarations include the Webflow CDN URLs (or license and self-host) with font-display: swap.

4. Construct the hero section first: dark canvas background, left-aligned text column with label → headline (80px BT Steinhart Bold) → description (23.3333px Helvetica Medium) → dual CTA pills (one filled white, one ghost). Implement the right-side globe as a placeholder div (or Three.js scene if attempting the visualization). Match the 112.5px top padding and extreme bottom clearance.

5. Add state variants (-active, -focus, -disabled) per your stack's conventions for all interactive components; the spec documents Default and Active/Pressed only, so invent -hover states that respect the opacity-shift philosophy (e.g., button hover = slight background opacity change, never a new color).

6. When adding a new component, decide which sub-system it belongs to: hero dialect (dark, display type, cinematic spacing), nav dialect (transparent, tracked uppercase, minimal), commerce dialect (inverted white surface, dark text), or utility dialect (glass cards, mono labels, opacity-based depth).

7. Variants of an existing component live as separate frontmatter entries (button-primary-active, sidebar-cart-close) never nested under a parent—this keeps the token graph flat and linter-friendly.

8. Run npx @google/design.md lint DESIGN.md after edits—broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically. Pay particular attention to {colors.on-primary} contrast checks against {colors.primary}.

9. Implement motion progressively: start with CSS transitions matching the extracted --transition-* tokens (350ms default, ease-out), then add GSAP ScrollTrigger for the headline split-line reveal and page-transition clip-path animations last—they're polish, not structure.

10. For the globe visualization, if a WebGL implementation is out of scope, use a high-quality PNG/WebP with transparent background and CSS filter: drop-shadow() approximating the orange/blue glow effects. Animate a slow CSS rotate() transform on the image wrapper to suggest the spin keyframe behavior.

Font Setup

BT Steinhart is proprietary and served via Webflow's CDN in the original implementation. For reimplementation without a Webflow license:

/* Google Fonts fallback configuration */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400&display=swap');

:root {
  --font-heading: 'Inter', 'BT Steinhart', -apple-system, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'BT Steinhart Mono', monospace;
}

/* If you have licensed BT Steinhart WOFF2 files, add: */
@font-face {
  font-family: 'BT Steinhart';
  src: url('/fonts/BTSteinhart-Bold-subset.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'BT Steinhart';
  src: url('/fonts/BTSteinhart-Medium-subset.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Neue';
  src: url('/fonts/HelveticaNeueMedium-subset.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'BT Steinhart Mono';
  src: url('/fonts/BTSteinhart-RegularMono-subset.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

Known Gaps

• Hover state styling: Not documented per the no-hover policy; all {component.*-hover} variants must be invented at implementation time respecting the opacity-shift convention.
• Loading skeletons / pending states: No skeleton UI or spinner components were detected beyond the full-page {component.loader-screen}; content-loading states within the page (lazy images, async data) need design decisions.
• Form validation states: Beyond {component.text-input-focus}, no error, warning, or success input states were extractable; {colors.error} and {colors.success} tokens exist but lack component applications.
• Dashboard / authenticated flows: The screenshot captures the public landing page only; logged-in user interfaces, booking forms, shipment trackers, and account settings are entirely unknown.
• Mobile navigation panel: The hamburger menu's expanded state (full-screen overlay? Slide-out drawer? Content structure?) cannot be determined from the closed-menu screenshot.
• Interior page templates: Services listing, industries detail, insights/blog article layout, careers board, and contact form pages are not represented in the viewport data.
• Globe visualization technical spec: The exact WebGL/Canvas implementation details (shader code, geometry, animation parameters) are not present in the CSS extraction—only the container positioning and keyframe names are known.
• Cookie consent styling: References to .cky-modal .cky-preference-center in the embedded CSS suggest a third-party cookie banner (CookieYes) whose visual integration with the design system is unexamined.
• Awwwards badge integration: The .awwwards-badge element implies an award widget injection whose responsive behavior and visual treatment on non-home pages is unknown.
• Pixel-exact globe glow colors: The orange (#ff8c32 approximate) and blue (#3264c8 approximate) atmospheric glow colors are carried as extension shadow tokens with estimated hex values; exact values require eyedropper sampling of the rendered WebGL output.