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.

5.7 KiB Raw Permalink Blame History Unescape Escape