---
name: Precision & Power
colors:
  surface: '#fcf8f8'
  surface-dim: '#ddd9d9'
  surface-bright: '#fcf8f8'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f6f3f2'
  surface-container: '#f1edec'
  surface-container-high: '#ebe7e7'
  surface-container-highest: '#e5e2e1'
  on-surface: '#1c1b1b'
  on-surface-variant: '#444748'
  inverse-surface: '#313030'
  inverse-on-surface: '#f4f0ef'
  outline: '#747878'
  outline-variant: '#c4c7c8'
  surface-tint: '#5d5f5f'
  primary: '#5d5f5f'
  on-primary: '#ffffff'
  primary-container: '#ffffff'
  on-primary-container: '#747676'
  inverse-primary: '#c6c6c7'
  secondary: '#5f5e5e'
  on-secondary: '#ffffff'
  secondary-container: '#e5e2e1'
  on-secondary-container: '#656464'
  tertiary: '#5d5f5f'
  on-tertiary: '#ffffff'
  tertiary-container: '#ffffff'
  on-tertiary-container: '#747676'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#e2e2e2'
  primary-fixed-dim: '#c6c6c7'
  on-primary-fixed: '#1a1c1c'
  on-primary-fixed-variant: '#454747'
  secondary-fixed: '#e5e2e1'
  secondary-fixed-dim: '#c8c6c5'
  on-secondary-fixed: '#1c1b1b'
  on-secondary-fixed-variant: '#474646'
  tertiary-fixed: '#e2e2e2'
  tertiary-fixed-dim: '#c6c6c7'
  on-tertiary-fixed: '#1a1c1c'
  on-tertiary-fixed-variant: '#454747'
  background: '#fcf8f8'
  on-background: '#1c1b1b'
  surface-variant: '#e5e2e1'
  mamba-charcoal: '#1A1A1A'
  savanna-gold: '#E3A008'
  slate-silver: '#71717A'
  growth-green: '#15803D'
typography:
  display-lg:
    fontFamily: Montserrat
    fontSize: 48px
    fontWeight: '700'
    lineHeight: 56px
    letterSpacing: -0.02em
  display-lg-mobile:
    fontFamily: Montserrat
    fontSize: 36px
    fontWeight: '700'
    lineHeight: 42px
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Montserrat
    fontSize: 32px
    fontWeight: '600'
    lineHeight: 40px
  headline-sm:
    fontFamily: Montserrat
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '400'
    lineHeight: 28px
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  label-bold:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '600'
    lineHeight: 20px
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
spacing:
  grid-margin: 2rem
  gutter: 1.5rem
  section-padding: 6rem
  stack-unit: 0.5rem
---

## Brand & Style

The design system is engineered to reflect the duality of the "White Mamba"—lethal precision combined with an understated, powerful elegance. It serves a multi-disciplinary industrial giant, demanding a visual language that communicates reliability in construction, hygiene in catering, and efficiency in waste management.

The aesthetic follows a **Modern Corporate** direction with **Minimalist** sensibilities. It prioritizes high-contrast layouts and "sharp" visual nodes to evoke a sense of architectural accuracy. The target audience includes government entities, large-scale developers, and corporate partners who value B-BBEE compliance and operational excellence. 

Every interface element should feel intentional and sturdy, utilizing generous negative space to allow the high-quality industrial imagery to speak to the scale of the operations. The overall mood is authoritative, local, and immovable.

## Colors

This design system utilizes a high-contrast monochromatic base, punctuated by strategic, high-visibility accents. The palette is designed to function effectively in both digital and high-visibility industrial environments.

- **Primary & Secondary:** Pure White and Mamba Charcoal form the "White Mamba" core. Use White for expansive surfaces and Charcoal for primary text and structural containers to create a "reverse-depth" effect.
- **Slate Silver:** Used for secondary information, borders, and disabled states, bridging the gap between the extremes of the palette.
- **Savanna Gold:** This is the "Strike" color. It is reserved exclusively for primary Calls to Action (CTAs), critical alerts, and the Level 1 B-BBEE status indicator. 
- **Growth Green:** An auxiliary accent used specifically for sustainability messaging and waste management service sectors to signify environmental responsibility.

Maintain a minimum contrast ratio of 7:1 for all functional text to ensure accessibility and professional clarity.

## Typography

The typography strategy focuses on "Industrial Strength." **Montserrat** provides a geometric, bold foundation for headings that mirrors architectural blueprints and construction signage. **Inter** is used for body copy to ensure maximum legibility across complex technical data and service descriptions.

- **Headlines:** Use Montserrat Bold or SemiBold. Tighten letter-spacing slightly on larger display sizes to create a "compacted" and "solid" visual feel.
- **Body:** Standardize on Inter Regular. For technical specifications or waste management tables, use Inter Medium to ensure clarity against charcoal backgrounds.
- **Labels:** Labels and B-BBEE indicators should be uppercase with a slight letter-spacing increase to mimic professional certification stamps.

## Layout & Spacing

The layout system is a **Fixed 12-Column Grid** for desktop environments (max-width: 1280px), transitioning to a **4-Column Fluid Grid** for mobile devices. 

- **Precision Rhythm:** Use an 8px (0.5rem) base unit for all padding and margins. 
- **Section Breathing Room:** Given the heavy nature of industrial imagery, use generous `section-padding` (96px+) to prevent the interface from feeling cluttered.
- **Reflow Rules:** In mobile views, service cards should stack vertically, while the Level 1 B-BBEE badge remains pinned or prominently displayed at the top of the information hierarchy.
- **Margins:** Maintain a safe area of 32px on desktop and 16px on mobile to ensure content never feels "trapped" by the screen edges.

## Elevation & Depth

To maintain the "Precision" theme, the design system avoids heavy shadows and skeuomorphism. Depth is conveyed through **Structural Tiering** and **High-Contrast Outlines**.

- **Tonal Layers:** Surfaces are primarily White. Secondary information or code-blocks use a very light Silver or a deep Mamba Charcoal to create distinct "zones" of information.
- **Outlines:** Instead of shadows, use 1px solid borders in `#1A1A1A` (on white) or `#FFFFFF` (on charcoal) to define containers.
- **Focus States:** Use the Savanna Gold as a high-contrast border for active inputs or focused elements, signifying the "strike" of the user's attention.
- **Imagery Overlays:** When text is placed over photography (e.g., construction sites), use a 40-60% opacity Mamba Charcoal scrim to ensure typography remains the dominant element.

## Shapes

The shape language is strictly **Sharp (0px)**. 

Curvature is avoided to maintain a "Built" aesthetic. Every button, input field, card, and image container should feature 90-degree angles. This reflects the precision of engineering and the hard edges of the construction and waste management industries. The only exception to this rule is the use of circular icons if required by standard iconography libraries, though these should be encased in square containers.

## Components

### Buttons
- **Primary:** Mamba Charcoal background, White text, sharp edges. No shadow. On hover, background shifts to Savanna Gold.
- **Secondary:** White background, 1px Mamba Charcoal border, Charcoal text. 
- **CTA:** Savanna Gold background, Charcoal text. Use sparingly for "Request a Quote" or "Emergency Services."

### B-BBEE Trust Badge
- A dedicated, high-contrast component. Features the "Level 1 B-BBEE" text in `label-bold`. This component should be styled as a "Certification Stamp"—bordered, uppercase, and positioned as a floating anchor or a primary header element.

### Service Cards
- Sharp-edged containers with a top-weighted image ratio (16:9). 
- Use a "Slate Silver" 1px border. 
- Headlines within cards should be Montserrat SemiBold.

### Input Fields
- Underlined or fully boxed with a 1px border. 
- Placeholder text in Slate Silver. 
- Sharp corners on all focus states.

### Lists
- Use Savanna Gold square bullets instead of circles. 
- Vertical spacing between list items should follow the `stack-unit` (16px) for maximum readability in service lists.