first commit

design/DESIGN.md

@@ -0,0 +1,64 @@
+# 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.