Design System Specification: Industrial Precision

1. Overview & Creative North Star: "The Architectural Blueprint"

This design system is built to move the plumbing CRM away from the "utility app" aesthetic and toward a high-end, architectural experience. The Creative North Star is The Architectural Blueprint: a philosophy that emphasizes structural integrity, expansive negative space, and a refined industrial grit.

We reject the "boxed-in" look of traditional CRMs. Instead of rigid grids and heavy borders, we use Tonal Layering and Intentional Asymmetry. Imagine a master plumber’s workspace: clean, organized, high-quality materials, and built to last. The UI should feel as sturdy as a brass fitting but as sophisticated as a modern architectural firm’s portfolio.

2. Colors & The Surface Philosophy

The palette is rooted in deep, authoritative blues (primary) and charcoal tones, punctuated by a high-energy "Safety Orange" (tertiary_container) that demands action without feeling "cheap."

The "No-Line" Rule

To achieve a premium, custom feel, 1px solid borders are strictly prohibited for sectioning. We define boundaries through background shifts.

• Use surface as your base.
• Use surface_container_low to define secondary work areas.
• Use surface_container_highest for sidebars or navigation drawers.
• Transition between these tones to create natural, borderless containment.

Surface Hierarchy & Nesting

Treat the UI as a series of physical layers.

• Layer 1 (Bottom): surface or surface_container_lowest (the "workbench").
• Layer 2 (Middle): surface_container for content groupings.
• Layer 3 (Top): surface_bright for interactive cards or floating modals.

The Glass & Gradient Rule

For high-level dashboard elements or mobile overlays, use Glassmorphism. Combine surface_container_lowest at 80% opacity with a backdrop-blur of 12px.

• Signature Textures: For primary CTAs (e.g., "Create Work Order"), apply a subtle linear gradient from primary (#002046) to primary_container (#1b365d) at a 135-degree angle. This adds a "machined metal" depth that flat color cannot replicate.

3. Typography: Editorial Authority

We pair Manrope (Display/Headlines) with Inter (Body/Labels) to balance industrial strength with digital clarity.

• Display (Manrope): Use display-lg (3.5rem) sparingly for high-impact data points like "Monthly Revenue" or "Active Fleet." Its geometric nature feels engineered.
• Headlines (Manrope): headline-md (1.75rem) should be used for page titles. It provides an "editorial" feel that makes the CRM feel like a high-end dashboard.
• Body (Inter): body-lg (1rem) is the workhorse. We prioritize line height (1.6) to ensure legibility when technicians are reading service notes on-site.
• Labels (Inter): label-md (0.75rem) in on_surface_variant is used for metadata. It should always be uppercase with a 0.05rem letter-spacing to mimic technical drawings.

4. Elevation & Depth

We eschew the standard "shadow-on-white" look for a more sophisticated Ambient Depth model.

• The Layering Principle: Depth is achieved by stacking. A surface_container_lowest card placed on a surface_container_low background provides a soft, natural lift.
• Ambient Shadows: If a floating action button (FAB) or modal requires a shadow, use a diffuse spread.
• Spec: 0px 12px 32px rgba(0, 27, 61, 0.08). Notice the shadow is tinted with the on_primary_fixed blue, not black, to simulate natural light.
• The Ghost Border: If a boundary is required for accessibility (e.g., in a high-density data table), use outline_variant at 15% opacity. It should be felt, not seen.

5. Components: Sturdy & Functional

Buttons (The "Industrial Tool" Style)

• Primary: Gradient primary to primary_container. md (0.375rem) rounded corners.
• Secondary: secondary_container background with on_secondary_container text. No border.
• Tertiary (Alert/Action): tertiary_container (#5f2400) with on_tertiary_container (#ff7726) text. This is reserved for urgent dispatches or leaks.

Input Fields

• Avoid "box" inputs. Use a surface_container_high background with a sm (0.125rem) bottom-only accent in primary when focused. This mimics the clean lines of a ledger.

Cards & Lists (The "Anti-Divider" Rule)

• Cards: Forbid the use of divider lines within cards. Separate content using the Spacing Scale (e.g., 8 (1.75rem) vertical gap between header and body).
• Service Lists: Use alternating tonal shifts (zebra-striping) using surface and surface_container_low instead of horizontal lines.

Custom CRM Components

• The "Pipe-Flow" Status Tracker: Instead of a standard stepper, use a continuous bar with primary and tertiary segments that flow into each other, representing the lifecycle of a plumbing job.
• Inventory Chips: Use secondary_fixed_dim for "In-Stock" items, providing a muted, professional look that doesn't distract from active tasks.

6. Do’s and Don’ts

Do:

• Use "Mega-Margins": Use 16 (3.5rem) or 20 (4.5rem) spacing for outer page margins to create a high-end, spacious feel.
• Embrace Asymmetry: Align primary stats to the left and secondary actions to the far right with significant whitespace between them.
• Use Micro-Interactions: Buttons should subtly scale down (0.98x) on click to feel like a physical "click" of a tool.

Don't:

• Don't use pure black: Use primary or inverse_surface for high-contrast text. Pure black (#000) feels "default" and unrefined.
• Don't use 1px dividers: They clutter the interface. Use vertical whitespace (spacing.6) to separate sections.
• Don't use "Round" corners: Stick to sm and md (0.125rem - 0.375rem). Circular corners feel too consumer-soft; we want industrial-sturdy.