Track Shipment
Track

Crane Design System

Foundations

The Crane visual language should feel precise, global, operational, and trustworthy. These foundations explain the design decisions that should drive tokens, components, templates, and editable content models.

Brand Direction

Precise

Use clear structure, concrete facts, and scannable sections.

Operational

Talk about real freight, compliance, locations, facilities, and response models.

Enterprise

Keep the interface calm, consistent, and credible.

Typography

The final Crane digital font is still a visual decision. This page compares the practical options while the site keeps one stable default font variable.

Font Decision

Crane legacy brand materials reference Acumin Pro. The implementation now loads Nunito Sans, DM Sans, and Plus Jakarta Sans through `next/font` so stakeholders can compare them in context before the final production standard is locked.

Nunito Sans

Current conservative default based on the user's preferred direction.

Your industry. Our expertise.

Friendly, readable, and reliable for body/UI text across long logistics pages.

DM Sans

Demo/reference body and UI option.

Your industry. Our expertise.

Modern digital feel with efficient UI rendering and clear body copy.

Plus Jakarta Sans

Demo/reference display option.

Your industry. Our expertise.

A more editorial display voice for hero and section headings.

Page Title / H1

One per page. Used to identify the entity or page purpose.

Mission-Critical Logistics for Aerospace

Section Title / H2

Major sections within a page template.

Services Built for Your Requirements

Card Title / H3

Reusable cards and smaller content groups.

Time Critical

NFO, on-board courier, and charter support for urgent AOG situations.

Color Tokens

Color supports hierarchy and intent. Green is reserved for primary action and positive emphasis; blue carries brand structure.

Crane Blue
#273473
Crane Green
#01803e
Ink
#111827
Body
#374151
Muted
#6b7280
Alt Surface
#f7f8fa
Border
#e5e7eb
Crane Navy
#091834

Spacing, Layout, and Motion

The platform now uses a wider 1600px marketing container with controlled inner reading widths and CSS-first motion utilities.

Wide Container

Use `.cw-container` for page sections and keep body copy inside `.cw-reading` when needed.

1600px marketing container
Reading-width content inside wide layouts
Card padding

Motion Behavior

Use shared classes like `.motion-card`, `.motion-standard`, and `.reveal`.

Accessibility, SEO, and AI Readiness

Accessibility

  • One H1 per page.
  • Keyboard-visible focus states.
  • Semantic landmarks and breadcrumbs.
  • Readable alternatives for map experiences.

SEO

  • Metadata from structured data.
  • Canonical URLs.
  • Server-rendered JSON-LD.
  • Internal related-content modules.

AI Readiness

  • Fact-rich summaries.
  • Clear entity definitions.
  • Consistent terminology.
  • Structured service, industry, and location relationships.