Industrial

# Industrial

~~~
<design-system>
# Design Style: Industrial Skeuomorphism

## 1. Design Philosophy

This style transcends simple skeuomorphism into **Industrial Realism**—a celebration of **tactile precision, mechanical reliability, and the soul of physical objects**. In an era of ephemeral flat digital experiences, this aesthetic offers something solid, grounded, and permanent. It doesn't just *look* like a machine; it *feels* like one.

### The Core DNA

**Physicality Through Light**: Every element exists in three-dimensional space defined by consistent top-left lighting. Shadows aren't decorative—they're structural. Highlights reveal form. The interplay of light and shadow creates the illusion of mass, depth, and material.

**Mechanical Authenticity**: Interactions mimic real-world physics. Buttons depress with translation and shadow inversion. Cards elevate on hover. Icons rotate subtly. Every animation reinforces the metaphor of physical manipulation—springs, clicks, and tactile feedback encoded in motion curves.

**Manufacturing Details Matter**: The difference between generic and exceptional lies in the details. Corner screws (rendered as radial gradients), ventilation slots, LED status indicators, scanlines on screens, push-pin shadows, hanging holes on price tags—these are not optional flourishes. They are the **signature elements** that make this style instantly recognizable.

**Material Honesty**: The palette and textures evoke specific materials—matte ABS plastic chassis, brushed aluminum panels, powder-coated steel, and safety-orange injection-molded controls. A subtle noise texture across the background simulates the microscopic imperfections of real plastic surfaces. External texture patterns (carbon fiber, diagmonds) add authenticity to specific components.

### The Vibe

Picture the control panel of a spacecraft, a 1980s Braun synthesizer, or a Teenage Engineering OP-1. It's **functional, organized, precise, and effortlessly cool**.

**Dieter Rams Heritage**: Maximum clarity with minimum ornamentation. Typography is legible and hierarchical. Color is used sparingly—only where necessary for function (the safety-orange accent for interactive triggers and alerts).

**Teenage Engineering Playfulness**: Modular construction. Professional-grade precision with a sense of joy. Components feel like they could be swapped, rearranged, or upgraded.

**Timeless Futurism**: Not retro or nostalgic in a kitschy sense. This is the industrial design aesthetic that transcends trends—equally at home in 1985 or 2035.

### The Physics Engine

The interface obeys immutable physical laws:

1. **Consistent Light Source**: All lighting originates from the **top-left at 45 degrees**. This determines every highlight (top/left edges) and every shadow (bottom/right edges). Deviation breaks the illusion.

2. **Material Conservation**: Elements don't magically appear. They slide from behind panels, lights turn on, drawers open. Animations respect causality.

3. **Elevation Hierarchy**:
   - **Level -1 (Recessed)**: Inputs, screens, slots, grooves. Inner shadows create depth below the surface.
   - **Level 0 (Chassis)**: The base layer—the matte plastic background that everything is mounted to.
   - **Level +1 (Panels)**: Cards, modules, sections. Dual shadows (dark below, light above) create lift.
   - **Level +2 (Floating Controls)**: Buttons, knobs, badges. Enhanced shadows with optional glow for active states.

4. **Interaction Physics**: Active states reverse shadow direction (pressed elements get inner shadows). Hover states increase elevation. Transitions use mechanical easing with subtle bounce—mimicking spring-loaded switches.

## 2. Design Token System (The DNA)

### Colors (Industrial Palette)

The palette is **strictly light mode** and mimics physical materials under diffuse workshop lighting:

-   **Background (Chassis)**: `#e0e5ec` - Cool mid-tone industrial grey. The base "plastic" material everything is mounted to. This is Level 0.
-   **Foreground (Panel)**: `#f0f2f5` - Slightly lighter raised panel surface. Used sparingly for contrast.
-   **Muted (Recessed)**: `#d1d9e6` - Darker grey for sunken areas (input fields, screen bezels, grooves). Creates the "below surface" appearance.
-   **Text (Primary)**: `#2d3436` - Dark charcoal ink. High contrast but softer than pure black for reduced eye strain.
-   **Text Muted (Labels)**: `#4a5568` - Darker slate grey (improved from `#636e72` for WCAG AA compliance). Used for secondary text, labels, and metadata.
-   **Accent (Safety Orange)**: `#ff4757` - High-visibility "Braun Red" / "Safety Orange". Reserved exclusively for:
  - Interactive elements (primary buttons, links, toggles)
  - Status indicators (active LEDs, online badges)
  - Critical alerts or highlights
  This color should appear sparingly—it's the "emergency stop button" of the palette.
-   **Accent Foreground**: `#ffffff` - White text on accent backgrounds for maximum legibility.
-   **Border (Shadow)**: `#babecc` - The shadow color in neumorphic pairs. Represents the darker half of the lighting equation.
-   **Border Light (Highlight)**: `#ffffff` - The highlight color. The brighter half that creates dimensionality.
-   **Border Dark (Deep Shadow)**: `#a3b1c6` - Used for prominent borders and dividers where extra contrast is needed.

**Dark Accent Surfaces**: For dark technical panels (stats strip, benefits section), use:
- Background: `#2d3436` or `#2c3e50` (charcoal to slate)
- Text: `#ffffff`, `#e0e5ec`, or `#a8b2d1` (graded whites)
- Accent: Same `#ff4757` maintains brand consistency

### Typography

**Font Pairing**:
-   **Primary (Sans-serif)**: **Inter** (weights 400/500/600/700/800) - Humanist sans-serif with excellent legibility. Objective, neutral, and highly functional. Perfect for body text, headings, and UI labels.
-   **Technical (Monospace)**: **JetBrains Mono** or **Roboto Mono** (weights 400/500) - Engineered typeface optimized for code and data. Use exclusively for:
  - All numeric displays (stats, pricing, dates)
  - Technical labels and badges
  - Small uppercase metadata ("SYSTEM OPERATIONAL", "LOG #123")
  - Input fields (simulates terminal/data entry aesthetic)

**Hierarchy & Application**:
-   **Hero Headings**: 5xl–7xl (3rem–4.5rem on desktop), font-weight 800, tight tracking (-0.03em), with white text-shadow for embossed effect: `drop-shadow-[0_1px_1px_#ffffff]`
-   **Section Headings**: 3xl–4xl (2rem–2.5rem), font-weight 700, tight tracking
-   **Body Text**: Base to lg (1rem–1.125rem), font-weight 400–500, normal tracking, optimal line-height 1.6–1.75, **max line length 60-65 characters** for readability
-   **Labels & Metadata**: xs–sm (0.75rem–0.875rem), font-weight 700, uppercase, wide tracking (0.05em–0.08em), monospace. Creates a "stamped" or "printed label" appearance
-   **Buttons**: Uppercase, wide tracking (0.05em), font-weight 700, xs–base depending on button size

**Text Shadows for Depth**:
- Light text on dark backgrounds: `drop-shadow-md` or `drop-shadow-[0_2px_4px_rgba(0,0,0,0.3)]`
- Dark text on light backgrounds: `drop-shadow-[0_1px_0_#ffffff]` (subtle embossed highlight below text)

### Radius & Depth

**Border Radius Scale**:
-   **sm**: `4px` - Tight mechanical edges (small buttons, badges)
-   **md**: `8px` - Standard controls (inputs, small cards)
-   **lg**: `16px` - Large panels (cards, modals)
-   **xl**: `24px` - Hero components (device bezels, major sections)
-   **2xl**: `30px+` - Oversized containers (benefit panels, final CTA)
-   **full**: `9999px` - Perfect circles (icon housings, LEDs, step indicators)

Curves are soft and organic—mimicking injection-molded plastic, not sharp machined metal.

**Neumorphic Shadow System** (The Core Visual Signature):

These dual-shadow combinations create depth through light simulation:

-   **Card (Base Lift)**: `8px 8px 16px #babecc, -8px -8px 16px #ffffff`
  - Standard elevation for panels and cards. Dark shadow bottom-right, light highlight top-left.

-   **Floating (High Elevation)**: `12px 12px 24px #babecc, -12px -12px 24px #ffffff, inset 1px 1px 0 rgba(255,255,255,0.5)`
  - Enhanced lift for interactive elements (buttons, elevated cards). Optional inner highlight rim for extra polish.

-   **Pressed (Active State)**: `inset 6px 6px 12px #babecc, inset -6px -6px 12px #ffffff`
  - Shadow direction reverses—element appears pushed INTO the surface. Critical for button interactions.

-   **Recessed (Inputs/Screens)**: `inset 4px 4px 8px #babecc, inset -4px -4px 8px #ffffff`
  - Subtle inward depth for input fields, grooves, and display panels.

-   **Sharp (Mechanical Edge)**: `4px 4px 8px rgba(0,0,0,0.15), -1px -1px 1px rgba(255,255,255,0.8)`
  - Harder-edged shadow for specific components (metal tags, borders).

-   **Glow (LED/Status Indicator)**: `0 0 10px 2px rgba(255, 71, 87, 0.6)`
  - Colored bloom for active LEDs, focus states, and alerts. Can adjust color to green (`rgba(34,197,94,1)`) for "online" states.

**Layered Shadows**: On hover, add additional shadows or increase spread to simulate elevation change. Example:
```css
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
hover:shadow-[var(--shadow-floating)]
```

### Textures & Patterns

Textures differentiate this style from flat competitors. Apply strategically:

-   **Noise Overlay (Background)**: SVG-based fractal noise at 20-30% opacity with `mix-blend-overlay`. Simulates the micro-texture of matte plastic. Applied to entire page background via StyleWrapper.

-   **Carbon Fiber Pattern**: External texture URL (`transparenttextures.com/patterns/carbon-fibre.png`) at 10-20% opacity on tech-heavy sections (device bezels, dark panels). Use `mix-blend-overlay` or `mix-blend-multiply`.

-   **Scanlines (CRT Screens)**: Linear gradients simulating old monitor scanlines:
  ```css
  background: linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%);
  background-size: 100% 4px;
  ```
  Overlay on digital displays or "screen" elements.

-   **Grid Patterns (Blueprint/Schematic Backgrounds)**:
  ```css
  background-image: linear-gradient(#636e72 1px, transparent 1px),
                    linear-gradient(90deg, #636e72 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.1;
  ```
  Use for technical documentation sections (product detail).

-   **Radial Gradients (Lighting Hotspots)**: Subtle `radial-gradient` from white/transparent to add dimensionality to flat backgrounds. Place top-left to reinforce lighting direction.

## 3. Component Stylings

### Buttons ("Physical Keys")

Buttons are **tactile 3D objects**, not flat rectangles. They must convey pressability.

**Visual Structure**:
-   **Primary (Accent)**: Background `#ff4757`, white text, uppercase, wide tracking. Border with `rgba(255,255,255,0.2)` for subtle rim. Shadow: `4px 4px 8px rgba(166,50,60,0.4), -4px -4px 8px rgba(255,100,110,0.4)` (neumorphic red-tinted shadows).
-   **Secondary (Chassis)**: Background matches chassis (`#e0e5ec`), dark text, base lift shadow. Hover darkens text to accent color.
-   **Ghost (Flat Label)**: No background initially. Text muted. Hover applies muted background and recessed shadow.

**Interaction Physics (CRITICAL)**:
-   **Hover**: Slight brightness increase (`brightness-110`) or text color change. Shadow remains.
-   **Active (Pressed)**:
  - `translate-y-[2px]` - Button moves down 2px
  - Shadow inverts to `inset 6px 6px 12px #babecc, inset -6px -6px 12px #ffffff`
  - Border may vanish or thin
  - Transition is fast (`150ms`) for immediate tactile feedback
-   **Focus**: Accent-colored ring with offset: `ring-2 ring-[var(--ring)] ring-offset-2`

**Sizing**:
- All buttons have minimum 48px height on mobile (touch-friendly)
- Padding is generous for premium feel
- Border radius: `md` for small, `lg` for default, `xl` for large

### Cards ("Bolted Modules")

Cards are **physical panels bolted onto the chassis background**.

**Construction**:
-   Base shadow: `shadow-[var(--shadow-card)]` (neumorphic dual shadow)
-   Border radius: `lg` (16px)
-   Background: Chassis color (`#e0e5ec`)
-   Optional: `elevated` prop increases shadow to `--shadow-floating`

**Manufacturing Details**:
-   **Corner Screws**: CSS radial gradients simulate screw indentations:
  ```css
  background: radial-gradient(circle at 12px 12px, rgba(0,0,0,0.15) 2px, transparent 3px),
              radial-gradient(circle at calc(100%-12px) 12px, rgba(0,0,0,0.15) 2px, transparent 3px),
              /* repeat for bottom corners */
  ```
  Positioned at exactly 12px from edges.

-   **Vent Slots**: Vertical pill-shaped divs (1px width, 24px height) in top-right corner with `inset` shadows to appear recessed:
  ```tsx
  <div className="h-6 w-1 rounded-full bg-[var(--muted)] shadow-[inset_1px_1px_2px_rgba(0,0,0,0.1)]" />
  ```
  Place 3 in a row with `gap-1`.

**Hover Interaction**:
- Cards lift on hover: `hover:-translate-y-1` with shadow transition to `--shadow-floating`
- Duration 300ms with ease-out
- Group child elements (icons) can rotate or scale on card hover using Tailwind group utilities

### Inputs ("Data Slots")

Inputs are **recessed wells** machined into the chassis surface.

**Visual Treatment**:
-   Deeply inset shadow: `shadow-[var(--shadow-recessed)]`
-   No visible border (border-none) - depth is communicated through shadow alone
-   Background: Chassis color (matches surface level for subtle integration)
-   Border radius: `md` (8px)
-   Monospace font for technical data entry feel
-   Placeholder: Muted text at 50% opacity

**States**:
-   **Focus**: Accent-colored glow appears: `focus-visible:shadow-[var(--shadow-recessed),0_0_0_2px_var(--accent)]`
  - Simulates LED backlight activating behind input
-   **Disabled**: Reduced opacity (50%), cursor-not-allowed

**Sizing**: Minimum 56px height (14 in Tailwind) for comfortable typing. Generous padding (24px horizontal).

## 4. Layout Strategy

**Container System**:
-   Max width: `72rem` (1152px) for primary content
-   Horizontal padding: `px-6` (24px) mobile, `px-12` (48px) desktop
-   Vertical spacing between sections: `space-y-24` (96px)

**Grid Discipline**:
- Use precise Tailwind grid classes: `grid-cols-2`, `grid-cols-3`, `md:grid-cols-4`
- Gap consistency: `gap-6` (24px) for tight layouts, `gap-8` (32px) for breathing room
- Alignment is critical—elements should feel "mounted" to an invisible grid structure

**Asymmetry & Balance**:
- Hero is asymmetric (60/40 split on desktop, stacked on mobile)
- Alternate left/right image placement in multi-column sections
- Testimonial cards have intentional slight rotation (±1deg) for realism
- Use `order-1/order-2` with responsive modifiers to control stacking order

## 5. Non-Genericness (Signature Elements)

These details separate this style from generic neumorphic templates:

**The Hero "Device" Visualization**:
- Not a simple image—construct a **3D device mockup** entirely in CSS
- Components:
  - Outer bezel: Dark border (4px), rounded corners, carbon fiber texture overlay
  - Inner screen: Black background with `inset` shadow, CRT scanline overlay
  - Hardware details: Physical buttons on side edges, power LED in corner
  - Screen content: Abstract dashboard with glowing elements, spinning loaders, status bars
  - Hover effect: Slight scale increase for interactivity

**LED Status Indicators**:
- Small circular divs (8-12px) with:
  - Solid color fill (green for online, red for alert, yellow for warning)
  - `animate-pulse` for breathing effect
  - Glow shadow: `shadow-[0_0_10px_rgba(color,1)]`
- Place on: Navbar, hero badge, footer, device visualization
- Always pair with monospace label ("SYSTEM OPERATIONAL", "PWR", "ONLINE")

**Physical Connectors & Pipes**:
- "How It Works" uses horizontal cylindrical pipe connecting step nodes
- CSS: `h-3 w-full rounded-full bg-[#d1d9e6] shadow-[inset_0_1px_3px_rgba(0,0,0,0.2)]`
- Hidden on mobile (`hidden md:block`)

**Masking Tape & Stickers**:
- For metadata overlays (blog dates, testimonial labels)
- Skewed yellow/white rectangles with `backdrop-blur-sm`
- Example: `<div className="skew-x-12 bg-[rgba(255,230,0,0.3)] backdrop-blur-sm" />`

**Push Pins & Hanging Holes**:
- Testimonials: Red circular push-pin at top center with highlight shine
- Pricing cards: Circular hole at top with inner shadow to simulate punched metal

**Screw Heads & Vent Slots** (detailed in Cards section):
- Never omit these—they're the DNA of the style
- Place consistently in same positions across all cards

**Grayscale-to-Color Image Treatment**:
- Blog and testimonial images start grayscale: `grayscale`
- Transition to color on hover: `group-hover:grayscale-0 transition-all duration-500`
- Adds subtle interactivity while maintaining industrial monotone baseline

## 6. Effects & Animation

**Motion Philosophy**: Mechanical spring physics with subtle bounce—mimicking real physical switches and buttons.

**Easing Curve**:
- Primary: `cubic-bezier(0.175, 0.885, 0.32, 1.275)` - Slight overshoot/bounce
- Fast interactions: `duration-150` to `duration-200`
- Smooth transitions: `duration-300`
- Image/scale effects: `duration-500`

**Framer Motion Integration**:
- Hero section uses staggered entrance animations
- Mechanical easing constant: `[0.175, 0.885, 0.32, 1.275]`
- Variants: `slideUp` (opacity + y-translate), `stagger` (staggerChildren)

**Key Micro-interactions**:
- **Button Press**: `active:translate-y-[2px]` + shadow inversion (150ms)
- **Card Hover**: `-translate-y-1` elevation with shadow upgrade (300ms)
- **Icon Hover**: `group-hover:scale-110` + `group-hover:rotate-12` (200ms)
- **Image Hover**: Grayscale to color (500ms)
- **LED Pulse**: `animate-pulse` (Tailwind default, ~2s cycle)
- **Loading Spinner**: `animate-spin` on border technique (1s linear)

**Advanced Animations**:
- Radar sweep in benefits: `animate-spin` with `conic-gradient` and long duration (4s)
- Device screen scanlines: Static background pattern (no animation needed)
- Mobile menu: Slide down with opacity fade (200ms ease-out)

## 7. Iconography & Icon Integration

**Icon Library**: `lucide-react` exclusively

**Styling Rules**:
-   **Stroke Width**: 1.5px standard, 1px for thin/delicate icons, 2-4px for bold/emphasis
-   **Size**: 20-24px for UI elements, 28-32px for feature icons, 16-18px for inline text icons
-   **Color**: Match text color or use accent color for interactive/highlighted icons

**Integration Patterns** (never leave icons floating):

1. **Recessed Icon Housing** (Feature cards):
   ```tsx
   <div className="flex h-14 w-14 items-center justify-center rounded-full
                   bg-[var(--background)] shadow-[var(--shadow-floating)]">
     <Icon className="text-[var(--accent)]" size={28} />
   </div>
   ```

2. **Inline with Text** (Metadata, labels):
   ```tsx
   <Zap className="inline h-4 w-4 text-[var(--accent)]" />
   ```

3. **Navigation Icons** (Social links):
   ```tsx
   <Twitter className="h-5 w-5 transition-all hover:text-[var(--accent)]" />
   ```

4. **LED-style Indicators**:
   - Solid fill instead of stroke
   - Pair with glow shadow
   - Small size (12-16px)

## 8. Responsive Strategy

The physical metaphor **must persist** across all breakpoints—no sudden shifts to "generic mobile design."

**Breakpoint System**:
-   **Mobile-first**: Base styles assume narrow viewports
-   **Tablet**: `md:` prefix (768px+)
-   **Desktop**: `lg:` and `xl:` (1024px+, 1280px+)

**Adaptations**:

**Navigation**:
- Desktop: Horizontal menu with ghost buttons
- Mobile: Hamburger menu button (neumorphic) reveals vertical drawer

**Hero**:
- Desktop: Side-by-side (lg:grid-cols-2)
- Mobile: Stacked (text first, device second). Device aspect ratio shifts to reduce height.

**Grids**:
- Features: 3 cols desktop → 1 col mobile
- Stats: 4 cols desktop → 2 cols mobile
- Pricing: 3 cols → 1 col stack
- Testimonials: 3 cols → 1 col

**Images & Devices**:
- Device graphic scales proportionally but may adjust aspect-ratio (aspect-square on mobile, aspect-video on desktop)
- Blog/testimonial images maintain aspect ratios

**Touch Targets**:
- **Minimum 48px height** for all interactive elements on mobile
- Buttons expand to full width on mobile: `w-full sm:w-auto`
- Increased padding on mobile CTAs for easier tapping

**Typography**:
- Hero heading reduces from 7xl → 5xl on mobile
- Body text remains lg for readability (don't shrink below 16px)

**Spacing**:
- Section gaps reduce from 96px → 64px on mobile
- Card padding reduces from 32px → 24px

**Hidden Elements**:
- Physical connector pipes between steps: `hidden md:block`
- Desktop-only navigation labels
- Some decorative screws/vents can hide on small screens if needed

**Performance**:
- External texture images are small and cached
- Animations use `transform` and `opacity` for GPU acceleration
- Neumorphic shadows are CSS-only (no JS calculations)
</design-system>
~~~