---
name: Industrial Integrity
colors:
  surface: '#f9f9f9'
  surface-dim: '#dadada'
  surface-bright: '#f9f9f9'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f3f3f3'
  surface-container: '#eeeeee'
  surface-container-high: '#e8e8e8'
  surface-container-highest: '#e2e2e2'
  on-surface: '#1a1c1c'
  on-surface-variant: '#44474a'
  inverse-surface: '#2f3131'
  inverse-on-surface: '#f1f1f1'
  outline: '#75777a'
  outline-variant: '#c5c6ca'
  surface-tint: '#5d5e61'
  primary: '#000101'
  on-primary: '#ffffff'
  primary-container: '#1a1c1e'
  on-primary-container: '#838486'
  inverse-primary: '#c6c6c9'
  secondary: '#9e4300'
  on-secondary: '#ffffff'
  secondary-container: '#fe7b29'
  on-secondary-container: '#602600'
  tertiary: '#000001'
  on-tertiary: '#ffffff'
  tertiary-container: '#191c20'
  on-tertiary-container: '#818489'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#e2e2e5'
  primary-fixed-dim: '#c6c6c9'
  on-primary-fixed: '#1a1c1e'
  on-primary-fixed-variant: '#454749'
  secondary-fixed: '#ffdbcb'
  secondary-fixed-dim: '#ffb691'
  on-secondary-fixed: '#341100'
  on-secondary-fixed-variant: '#793100'
  tertiary-fixed: '#e0e2e8'
  tertiary-fixed-dim: '#c4c6cc'
  on-tertiary-fixed: '#181c20'
  on-tertiary-fixed-variant: '#44474b'
  background: '#f9f9f9'
  on-background: '#1a1c1c'
  surface-variant: '#e2e2e2'
typography:
  display-lg:
    fontFamily: Inter
    fontSize: 48px
    fontWeight: '700'
    lineHeight: 56px
    letterSpacing: -0.02em
  display-lg-mobile:
    fontFamily: Inter
    fontSize: 32px
    fontWeight: '700'
    lineHeight: 40px
    letterSpacing: -0.01em
  headline-md:
    fontFamily: Inter
    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-sm:
    fontFamily: JetBrains Mono
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
    letterSpacing: 0.05em
rounded:
  sm: 0.125rem
  DEFAULT: 0.25rem
  md: 0.375rem
  lg: 0.5rem
  xl: 0.75rem
  full: 9999px
spacing:
  unit: 8px
  container-max: 1280px
  gutter: 24px
  margin-mobile: 16px
  margin-desktop: 40px
---

## Brand & Style

The design system is engineered for the heavy-duty manufacturing and industrial sector. It reflects the durability of machinery and the precision of high-quality furniture. The aesthetic is **Corporate / Modern** with a slight lean toward **Minimalism**, emphasizing utility over decoration. 

The goal is to evoke a sense of "built-to-last" reliability. Interfaces should feel structural and stable, utilizing clear hierarchies to organize complex technical data and large product catalogs. White space is used not just for elegance, but for clarity and safety in information density.

## Colors

The palette is rooted in the materials of the factory floor and the precision of the drafting table.

- **Primary (Deep Charcoal):** #1A1C1E. Used for text, primary navigation, and structural backgrounds. It provides a grounded, heavy-duty foundation.
- **Secondary (Safety Orange):** #F47321. A high-visibility accent used for primary actions, critical alerts, and the WhatsApp integration. It signals movement and attention.
- **Tertiary (Industrial Silver):** #8E9196. Used for secondary UI elements, icons, and borders. It mimics the sheen of cold-rolled steel.
- **Neutral:** #F1F1F1. A light grey used for page backgrounds and container fills to reduce eye strain compared to pure white.

## Typography

This design system utilizes **Inter** for all primary communication. Its neutral, systematic nature ensures that technical specifications remain legible at all sizes. 

For technical data, model numbers, and equipment specs, **JetBrains Mono** is introduced as a label font. This monospaced choice reinforces the "machined" feel of the brand and ensures that numerical data aligns perfectly in tabular views. All headings should use a tighter letter-spacing to appear more impactful and solid.

## Layout & Spacing

The layout follows a **Fixed Grid** model on desktop, centering content within a 1280px container to maintain readability of wide specification tables. 

A strict 8px spacing scale is enforced to ensure mathematical consistency.
- **Mobile:** 4-column layout with 16px margins.
- **Tablet:** 8-column layout with 24px margins.
- **Desktop:** 12-column layout with 40px margins.

Content reflow prioritizes functional grouping; for instance, product imagery and technical specs should always remain visible above the fold on equipment listings.

## Elevation & Depth

To maintain an industrial feel, this design system avoids soft, floating shadows. Instead, it uses **Tonal Layers** and **Low-Contrast Outlines**. 

- **Surface Levels:** The base background is #F1F1F1. Cards and containers use #FFFFFF with a 1px border of #D1D5DB.
- **Active States:** When an element is interacted with, it does not "lift" with a shadow; instead, the border thickness increases or the color shifts to the Secondary accent.
- **Technical Overlays:** Modals use a heavy backdrop blur (12px) to focus attention, but maintain sharp 1px silver borders.

## Shapes

The shape language is **Soft** (0.25rem). This choice balances the harshness of industrial machinery with the approachability of modern furniture. 

- UI components like buttons and input fields use the base 4px radius.
- Large product cards and primary containers use `rounded-lg` (8px).
- Excessive rounding or "pill" shapes are forbidden, as they conflict with the "robust" brand pillar.

## Components

### Buttons
- **Primary:** Solid #1A1C1E with white text. High-contrast, rectangular with minimal rounding.
- **Action (WhatsApp):** Fixed to the bottom-right. Solid #F47321 with a custom "Request Quote" label. It uses a slightly larger 8px radius to stand out as a utility.

### Equipment Listings (CMS)
- **Data Grids:** Use JetBrains Mono for all numerical data. Alternating row stripes in #F9FAFB for readability.
- **Status Badges:** Small, rectangular tags indicating "In Stock," "Made to Order," or "Industrial Grade" using low-saturation background tints.

### Product Catalogs
- **Cards:** White background, 1px #D1D5DB border. Images should be clipped to the container with no padding. Typography within cards is strictly aligned to a baseline grid.

### Input Fields
- Heavy 2px borders when focused. Labels always remain visible above the field (never just placeholders) to ensure accessibility in high-pressure procurement environments.

### Breadcrumbs
- Clearly visible on all catalog pages to facilitate easy navigation through deep machinery hierarchies.