# Design System Strategy: Industrial Precision

## 1. Overview & Creative North Star: "The Kinetic Monolith"
The heavy lifting industry is defined by the intersection of massive scale and surgical precision. This design system moves away from the "cluttered construction" aesthetic, opting instead for **The Kinetic Monolith**. This North Star envisions the UI as a series of heavy, interlocking structural slabs—imposing, stable, and powerful—yet animated with a modern, high-tech fluidity.

To break the "standard corporate template" look, we utilize **Hard-Edge Brutalism** mixed with **Editorial Sophistication**. We embrace zero-radius corners (0px) to mimic the sharp cut of steel beams, and we leverage extreme typographic scales to command authority. This is not just a rental service; it is an engineering power-house.

---

## 2. Colors: High-Contrast Industrialism
Our palette is rooted in the high-visibility world of heavy machinery. We use contrast not just for accessibility, but as a structural tool.

*   **Primary (Industrial Yellow - #FFD700):** This is our "Action Signal." Use `primary_container` (#FFD700) for high-priority CTAs and `primary_fixed_dim` (#E9C400) for interactive states. It represents the crane, the caution, and the energy.
*   **Surface Foundation (Deep Charcoal - #131313):** We avoid pure pitch black in favor of `surface` (#131313) to allow for depth.
*   **The "No-Line" Rule:** Direct intervention: **No 1px solid borders.** To separate a fleet category from a service description, shift the background from `surface` to `surface_container_low`. Boundaries are felt through tonal shifts, not drawn with lines.
*   **Surface Hierarchy & Nesting:** Treat the layout as an assembly line. 
    *   Main Page: `surface`
    *   Structural Sections: `surface_container`
    *   Interactive Cards: `surface_container_high`
*   **Signature Textures:** For hero sections, apply a subtle 10% opacity noise grain or a linear gradient from `surface` to `surface_container_highest` to mimic the matte finish of powder-coated steel.

---

## 3. Typography: The Engineering Scale
We use typography to convey weight. Our choices reflect the blueprint and the brand’s industrial backbone.

*   **Display & Headlines (Space Grotesk):** A geometric sans-serif with a mechanical soul. The wide apertures and "tech" feel of Space Grotesk suggest precision. Use `display-lg` (3.5rem) with tight letter-spacing (-0.02em) for hero headlines to create a "wall of text" effect that feels immovable.
*   **Body & Labels (Inter):** The "Workhorse." Inter provides a neutral, highly legible contrast to the aggressive display type. Use `body-lg` for technical specifications and `label-sm` (uppercase with 0.05em tracking) for metadata like "Crane Capacity" or "Job Site Location."
*   **Visual Hierarchy:** Headlines should always be `on_surface` or `primary`. Body text should utilize `on_surface_variant` (#D0C6AB) to reduce visual noise in long technical descriptions.

---

## 4. Elevation & Depth: Tonal Layering
In a world of 0px border radii, traditional shadows feel out of place. We achieve depth through **Structural Stacking**.

*   **The Layering Principle:** Instead of lifting an object off the page, we "carve" it into the interface. A "Heavy Lift" service card should be `surface_container_lowest` (#0E0E0E) nested within a `surface_container` (#20201F) section. This creates a recessed, high-end "machined" look.
*   **The "Ghost Border" Fallback:** Where separation is critical for accessibility, use `outline_variant` at 15% opacity. It should be felt as a subtle change in light, not a hard edge.
*   **Glassmorphism & Depth:** For navigation bars or floating action menus, use `surface_bright` at 70% opacity with a `40px` backdrop blur. This keeps the "Industrial Yellow" of the primary content visible as it scrolls beneath, maintaining brand energy throughout the journey.

---

## 5. Components: The Machined Toolkit

*   **Buttons:** 
    *   **Primary:** `primary_container` (#FFD700) background, `on_primary` (#3A3000) text. **0px border radius.** Hover state: `primary_fixed_dim`.
    *   **Secondary:** `surface_container_highest` background, `primary` text. This looks like a dark steel plate with yellow engraving.
*   **Heavy Duty Cards:** No dividers. Separate the "Header" of the card from the "Body" by using a `surface_container_high` top section and a `surface_container` bottom section.
*   **Input Fields:** Use `surface_container_lowest` for the field background with a `primary` 2px bottom-only border on focus. This mimics the "underlined" look of technical architectural drawings.
*   **Fleet Status Chips:** Use `tertiary_container` (Cyan/Teal) for "Available" and `error_container` for "In Maintenance." These should be rectangular, sharp, and high-contrast.
*   **The "Load Meter":** A custom component for this industry. A thick horizontal bar using `primary_container` to show crane capacity usage, set against a `surface_container_highest` track.

---

## 6. Do's and Don'ts

### Do:
*   **Do** use intentional asymmetry. Align heavy text blocks to the left and allow large "crane-arm" imagery to break the grid and bleed off the right edge of the screen.
*   **Do** use "Extreme Contrast." Pair a `display-lg` headline with a `label-sm` sub-headline for an editorial, high-end feel.
*   **Do** use `primary` (Yellow) sparingly as a spotlight. If everything is yellow, nothing is important.

### Don't:
*   **Don't** use rounded corners. Everything must be 0px. Softness contradicts the brand’s "Robust and Reliable" personality.
*   **Don't** use standard 1px grey dividers. Use white space or a background color shift of 2–3% to define sections.
*   **Don't** use generic stock photography. Use high-contrast, desaturated imagery of machinery with "Industrial Yellow" accents highlighted.