# Design System Specification: Industrial Velocity ## 1. Overview & Creative North Star The Creative North Star for this design system is **"The Kinetic Architect."** In the high-stakes world of logistics and trucking, a load board cannot just be a static database; it must feel like a command center in motion. We are moving away from the "generic SaaS" look of thin lines and flat boxes. Instead, we embrace a high-end editorial approach that combines **Industrial Brutalism** (heavy type, structural stability) with **Tech-Forward Fluidity** (glassmorphism, tonal depth). The system breaks the standard grid through intentional asymmetry—using heavy headlines to anchor the eye while content "floats" on layered surfaces. This creates a sense of "Efficient Energy": it is professional and trustworthy because it feels solid, but it is high-energy because it feels fast. --- ## 2. Colors: Tonal Architecture We utilize a sophisticated hierarchy where color is used to define space, not just decoration. ### The Palette - **Primary (Deep Navy):** `#00113a` — The anchor of trust. Used for high-level navigation and "The Kinetic Architect" headlines. - **Secondary (Vibrant Orange):** `#a04100` — The engine of energy. Reserved for critical CTAs and "Live" status indicators. - **Tertiary (Electric Blue):** `#001333` — Used for interactive accents and high-priority data visualization. ### The "No-Line" Rule **Strict Mandate:** Designers are prohibited from using 1px solid borders to section off content. Structure is achieved through **Surface Hierarchy**: * A page begins on `surface` (`#fbf8fe`). * Section containers use `surface-container-low` (`#f6f2f8`). * Nested cards within those sections use `surface-container-lowest` (`#ffffff`). This creates a natural "stepped" depth that feels high-end and custom, avoiding the cluttered "table" look common in logistics software. ### The "Glass & Gradient" Rule To inject "Visual Soul," hero sections and floating action panels must utilize glassmorphism. Use semi-transparent `surface` colors with a `backdrop-blur` of 12px-20px. For main CTAs, apply a subtle linear gradient from `primary` (`#00113a`) to `primary_container` (`#002366`) at a 135-degree angle to provide a metallic, industrial sheen. --- ## 3. Typography: Editorial Authority We use a pairing of **Plus Jakarta Sans** for headlines and **Inter** for data-heavy UI. This creates a "Modern Industrial" vibe—readable but with a distinct personality. * **Display (Plus Jakarta Sans):** Heavy weights (Bold/ExtraBold). Used for high-impact numbers (e.g., "Available Loads") to create a sense of scale. * **Headline (Plus Jakarta Sans):** Used for section titles. These should be tight-tracked (-0.02em) to feel authoritative and "locked in." * **Body & Labels (Inter):** Optimized for the rapid scanning of load details, VIN numbers, and timestamps. * **Visual Hierarchy:** Large `display-lg` typography should occasionally overlap background elements or containers to break the "boxed-in" feel, suggesting a system that is too dynamic to be contained. --- ## 4. Elevation & Depth: Tonal Layering In this design system, shadows are a last resort, and lines are forbidden. We build depth through "Physicality." * **The Layering Principle:** Stack `surface-container` tiers. A `surface-container-highest` (`#e4e1e7`) sidebar sitting against a `surface` background creates a clear functional boundary without a single line of "ink." * **Ambient Shadows:** For floating elements like Modals or Tooltips, use an ultra-diffused shadow: `box-shadow: 0 24px 48px -12px rgba(0, 17, 58, 0.08)`. Note the tint—the shadow is a low-opacity version of the `primary` navy, not grey. * **The "Ghost Border" Fallback:** If a border is required for accessibility (e.g., in a high-density data grid), use `outline-variant` (`#c5c6d2`) at **15% opacity**. It should be felt, not seen. --- ## 5. Components: Precision Tools ### Buttons (The Kinetic Trigger) * **Primary:** A solid `secondary` (`#a04100`) fill with `on-secondary` (`#ffffff`) text. Apply a `md` (0.375rem) corner radius. * **Tertiary (Ghost):** No background, `primary` text. Use a subtle `surface-variant` background shift on hover. ### Cards & Lists (The Load Row) * **Rule:** Forbid divider lines. * **Implementation:** Use a vertical spacing of `8` (1.75rem) from the spacing scale between items. Each "Load Card" should use `surface-container-lowest` with a "Ghost Border" on hover to indicate interactivity. * **Typography in Cards:** Use `label-md` for metadata (Weight, Rate per Mile) in a slightly muted `on-surface-variant` to ensure the `title-lg` (Destination) remains the hero. ### Input Fields * **Style:** Filled inputs using `surface-container-high`. No bottom line. A 2px `primary` indicator appears only on focus. This mimics the "heavy-duty" feel of industrial hardware. ### Signature Component: The "Status Pulse" For live load updates, use a `secondary` (orange) chip with a semi-transparent `secondary_container` background. This high-energy contrast ensures the most volatile information is seen first. --- ## 6. Do’s and Don’ts ### Do: * **Do** use asymmetrical spacing. A wider left margin than right margin can create a sophisticated, editorial "magazine" feel for dashboard layouts. * **Do** use `primary_fixed_dim` for "read-only" data states to maintain a high-end tech aesthetic. * **Do** embrace white space. Logistics software is usually cramped; this system wins by giving the user's eyes room to breathe (the "Executive" look). ### Don't: * **Don't** use 100% black. Use `on-surface` (`#1b1b1f`) for text to keep the interface feeling premium and modern. * **Don't** use "Rounded Full" pill shapes for everything. Stick to the `md` (0.375rem) or `lg` (0.5rem) roundedness scale to maintain an industrial, structured edge. * **Don't** use standard "Alert Red" for everything urgent. Try layering `error_container` with `on_error_container` text to keep the palette sophisticated even in high-stress states.