skills/tocbien-ui-ux/references/styles/industrial.md

# Industrial (`industrial`)

Xám máy móc, nút đỏ và các khối chìm nổi

- Hợp với: Hợp khi đang dùng AI để dựng website cho gara và xưởng kỹ thuật cần thao tác có cảm giác vật lý, dữ liệu rõ.
- Ngành minh hoạ: Gara, xưởng cơ khí, kho vận
- Trang minh hoạ làm việc gì: Bàn kiểm tra bốn hạng mục ô tô và phiếu bàn giao
- Thang (1–10): biến tấu bố cục 6 · chuyển động 3 · mật độ 6
- Xem mẫu: https://tocbien.cloud/phong-cach/industrial/

## Đặc tả

Industrial: nền chassis #E0E5EC, panel cùng màu, chữ #2D3436, nhấn đỏ #FF4757. Inter và JetBrains Mono; nút cơ khí, ốc vít, khe thông gió, bóng nổi/lõm hai hướng, màn chẩn đoán tối với LED và tiến độ. Bo 8–24px, kết nối dạng ống và trạng thái nhấn chìm.

**Chi tiết cần giữ:** Bóng nổi và bóng lõm dùng cùng một hướng sáng. Chữ xám trên bề mặt xám cần đo tương phản; nút đỏ phải có nhãn và trạng thái nhấn rõ.

**Lưu ý khi áp dụng:** Đừng dùng cho ngành chăm sóc con người. Tông này đọc ra là máy móc, không phải ân cần.

## Đặc tả gốc chi tiết (giữ đầy đủ)

# 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)

## Đặc tả áp dụng chi tiết

CÁCH ÁP DỤNG PHONG CÁCH INDUSTRIAL
Bố cục và nhận diện: Industrial Skeuomorphism đúng nguồn: chassis #e0e5ec, panel #f0f2f5, recess #d1d9e6, accent #ff4757. Các nút có cơ chế nhấn, bevel và module bắt vít; không rút style thành brutalist.

## 3. Nội dung mở đầu

**H1:** Kiểm tra rõ. Sửa đúng việc.

**Lời dẫn:** Một phiếu kiểm tra mẫu giúp bạn thấy tình trạng xe trước khi quyết định hạng mục sửa.

**Hành động chính:** Xem phiếu kiểm tra mẫu

## 4. Đặc tả từng vùng nội dung và tác vụ

### 1. Bàn kiểm tra

**Bố cục và hành vi:** Hero như bảng thiết bị: tiêu đề, trạng thái và sơ đồ 4 hệ thống xe.

**Nội dung và đầu ra:** Gara 47 minh họa; không bịa kết quả kiểm tra xe thật.

### 2. Chọn hạng mục

**Bố cục và hành vi:** Bốn module Lốp/Phanh/Đèn/Ắc quy; nút chọn vật lý có nhãn.

**Nội dung và đầu ra:** Mỗi module có tình trạng mẫu, mô tả và ảnh chi tiết.

### 3. Phiếu chi tiết

**Bố cục và hành vi:** Khung recessed hiện Quan sát/Ảnh/Gợi ý bước tiếp; đèn trạng thái kèm chữ.

**Nội dung và đầu ra:** Không kết luận an toàn xe với dữ liệu giả; ghi kết quả mẫu.

### 4. So hạng mục

**Bố cục và hành vi:** Danh sách những mục đã xem và mục cần trao đổi, check box nhận biết.

**Nội dung và đầu ra:** Chọn mục đưa vào phiếu tóm tắt, không tự thêm dịch vụ.

### 5. Phiếu bàn giao

**Bố cục và hành vi:** Xuất bản xem trước nội dung có thời điểm phiên thử.

**Nội dung và đầu ra:** Không hóa đơn hoặc báo sửa đã thực hiện.

## 5. Dữ liệu và trạng thái tương tác

selectedSystem và includedItems; khóa nút xuất khi chưa chọn và nói lý do. Toggle trạng thái vật lý phải đồng bộ aria-pressed, không chỉ shadow.

Phân biệt rõ dữ liệu dựng sẵn với hành động thực: chức năng thử trong mẫu không gửi tin, tạo đơn, đặt lịch hoặc thực thi workflow bên ngoài. Nếu phiên bản khách sau này kết nối dịch vụ thật, đó là phần tích hợp riêng cần quyền và kiểm lỗi phù hợp.

## 6. Responsive và thứ tự đọc

768 px: 2 module mỗi hàng; 390 px: 1 cột, schematic có chỉ mục liên kết. Texture nhỏ không thành moiré, panel rộng đủ cho 16 px body.

Kiểm thêm 320 px và 1280×720 để phát hiện cắt chữ/đáy panel. Thứ tự DOM phải theo việc người xem cần làm, không chỉ sắp lại bằng CSS rồi khiến Tab đi lộn. Bảng/log dài cuộn bên trong vùng có nhãn.

## 7. Chuyển động và phản hồi

Nút nhấn translateY 2 px và shadow inset trong 100 ms; indicator chuyển 150 ms; không rung/tiếng máy tự phát.

Không để motion làm chậm thao tác hoặc che lỗi. Lưu trạng thái pause trong phiên khi có vòng lặp; reduced-motion phải giữ toàn bộ thông tin và thứ tự nội dung.

## 8. Art direction và ảnh đại diện

**Tài sản nội dung:** Ảnh AI dụng cụ và thao tác kỹ thuật, không logo xe/khẳng định chứng nhận.

**Cover:** Một module vật liệu thật, nút đỏ và vít/bevel rõ; thêm một phiếu đọc được. Không chỉ sọc vàng đen.

**Bộ xuất:** cover 1200×750; cover dọc 900×1200; OG 1200×630; screenshot QA riêng ở viewport thực. Chụp/compose từ đúng phiên bản đã dựng, không ảnh hero hứa một thiết kế khác trang thật.

## 9. Trường hợp nghiệm thu riêng

1. Nút đang chọn nhận ra khi tắt màu.
2. Phiếu tóm tắt khớp các mục đã chọn.
3. Ở mobile texture không làm chữ mờ.

Ngoài ba trường hợp này, chạy bộ kiểm chung của kế hoạch: tải ảnh/font lỗi, focus, reduced-motion, zoom200%, trạng thái trống và quay lại/reset. Không ghi đạt nếu chưa có bằng chứng.

Các tên, ngành và tác vụ ở trên là ví dụ có thể chuyển sang dự án của người dùng. Giữ ngôn ngữ thị giác gốc; không ép dự án thật thành nội dung của trang minh họa.