Terminal Industries

Overview

Terminal Industries operates at the intersection of industrial logistics and modern software design. The brand serves fleet operators, yard managers, and logistics coordinators who demand precision, speed, and clarity in their daily operations. The aesthetic is 'Technical Minimalism'—a disciplined fusion of industrial authenticity (heavy trucks, concrete yards, real-world constraints) with contemporary digital clarity. The UI evokes confidence through restraint: a lime-green accent (#abff02) cuts through a neutral palette of deep teals (#052424), grays (#c2c2c2), and whites, signaling actionable intelligence in a no-nonsense environment. The emotional response is one of control and capability: users feel they have mastered complexity, not been overwhelmed by it.

The brand voice is direct, technical, and unadorned. Vocabulary favors operational terms ('throughput', 'integration', 'automation', 'ROI') over marketing flourish. Tone is calm and authoritative—never breathless, never cute. Example sentence in brand voice: 'Reduce dock wait time by 40% with real-time yard visibility and AI-driven gate sequencing.'

Colors

The color system balances industrial authenticity with digital clarity. Primary (#abff02) is a high-saturation lime-green reserved exclusively for call-to-action buttons, active states, and critical alerts—it demands attention without aggression, evoking both industrial safety signage and modern tech energy. On-primary text (#052424) is a deep teal-black, ensuring 7.5:1 contrast for accessibility in high-glare yard environments. Secondary (#2d4446) is a muted teal-gray, used for secondary UI elements, disabled states, and supporting navigation. Tertiary (#7f7f7f) is a neutral gray for tertiary actions and decorative elements. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (#f5f5f5, #e8e8e8, #d4d4d4, #c2c2c2) to support layered card hierarchies and

Typography

The type system employs SuisseIntl (a geometric sans-serif with industrial precision) for all body and heading text, paired with Geist Mono (a technical monospace) exclusively for button labels, form inputs, and data-heavy contexts. This pairing reinforces the brand's dual nature: humanist readability for narrative content, monospace authority for transactional UI. Display (70px, 400 weight, -0.02em tracking) anchors hero sections with calm confidence. Headline-lg (48px) and headline-md (36px) maintain the same weight and negative tracking, creating a unified hierarchy without weight shifts. Body text (16–18px, 400 weight, 24–28px line-height) is set loose for legibility on mobile devices and outdoor screens. Label-md (11px, 600 weight, 0.05em tracking) is applied to all button text and fo

Layout

The layout system uses a 12-column fluid grid with a 1280px container max-width, scaling down to full-width on mobile. The page rhythm is driven by a 40px (lg spacing) section separator, creating breathing room between hero, feature blocks, and call-to-action zones. The gutter (24px) defines horizontal padding on all container edges, ensuring consistent margins on tablet and desktop. Card-based layouts use 24px (md spacing) internal padding, with 12px (sm spacing) between nested elements. The hero section occupies 100vh with a gradient background (warm tan to deep black), positioning the primary CTA ('EXPLORE PRODUCT') at 24px from the top-right, anchored in a semi-transparent navigation bar (rgba(194, 194, 194, 0.7) with 8px blur backdrop-filter). Feature sections below the fold use alter

Elevation & Depth

Depth is achieved through subtle layering and edge definition rather than aggressive shadows. Level 1 (Base): flat surfaces with 1px solid borders in outline-variant (#d1d5db), no shadow. Level 2 (Standard Card): 1px border + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), background: surface-container-lowest (#f0f0f0). Level 3 (Elevated/Modals): 1px border + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), background: surface-container-low (#e8e8e8). The header navigation bar uses a frosted-glass effect: background: rgba(194, 194, 194, 0.7), backdrop-filter: blur(8px), border: 1px solid rgba(255, 255,

Shapes

The shape philosophy is 'Functional Geometry'—rounded corners are applied strategically to soften industrial edges without sacrificing clarity. Buttons and small interactive elements use lg (1rem / 16px) border-radius, creating a modern, approachable feel while remaining distinctly different from full-circle badges. Cards and larger containers use xl (1.5rem / 24px) border-radius, signaling containment and hierarchy. Input fields use DEFAULT (0.5rem / 8px) border-radius for subtle definition without visual noise. The header navigation bar uses lg (16px) radius, matching button styling for visu

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses primary (#abff02) background with on-primary (#052424) text, Geist Mono label-md typography (11px, 600 weight, 0.05em tracking), lg border-radius (16px), and 8px 18.66px padding for a 36px total height. On hover, background shifts to primary-fixed-dim (#8fdb00) with no text change. On focus, apply box-shadow: 0 0 0 3px rgba(171, 255, 2, 0.1). Button-secondary uses surface-container-highest (#c2c2c2) background with a 1px outline-variant border, same typography and dimensions as primary. On hover, background becomes surface-container-high (#d4d4d4). Button-tertiary is transparent with a 1px outline-variant border and on-surface text; on hover, background becomes surface-container-low (#e8e8e8). All button

Do's and Don'ts

**Do**

• Do use primary (#abff02) exclusively for primary CTAs, active states, and critical alerts—it is the brand's signature accent and must remain rare and impactful.
• Do maintain 1px outline-variant borders on all cards and inputs for crisp edge definition in high-glare outdoor environments.
• Do apply lg border-radius (16px) to buttons and sm/DEFAULT radius to inputs to create clear visual distinction between action and data-entry elements.
• Do use Geist Mono exclusively for button labels, form inputs, and data-heavy contexts to reinforce the technical layer of the brand.
• Do apply box-shadow: 0 0 0 3px rgba(171, 255, 2, 0.1) on focus states for accessible keyboard navigation without visual harshness.
• Do use 40px (lg spacing) between major sections and 24px (md spacing) within cards to maintain consistent rhythm and breathing room.

**Don't**

• Don't use primary (#abff02) for body text, backgrounds, or decorative elements—reserve it exclusively for interactive affordances.
• Don't apply drop shadows heavier than 0 4px 12px rgba(0, 0, 0, 0.08); the brand relies on borders and subtle layering, not dramatic depth.
• Don't mix SuisseIntl and Geist Mono in the same text block; use Geist Mono only for labels, buttons, and data, never for body or headline copy.
• Don't use rounded corners smaller than DEFAULT (8px) on interactive elements; the brand requires sufficient softness to feel modern and approachable.
• Don't apply background colors lighter than surface-container-lowest (#f0f0f0) or darker than surface-container-highest (#c2c2c2) in the neutral stack—this range ensures sufficient contrast and visual hierarchy.
• Don't use secondary (#2d4446) or tertiary (#7f7f7f) for primary CTAs or focus states; these colors are reserved for supporting elements and disabled states.