Preview size

Industrial manufacturing solutions

Turn complex manufacturing capability into clear buying evidence

Place process, quality, and delivery information where decision-makers can evaluate it quickly.

Explore capabilities Submit project brief

Quality system 01

Applications

04 05

01 Applications

02 04

03 05

Precision Manufacturing Blueprint

Build procurement confidence with restrained engineering blue, a clear grid, and verifiable capability evidence.

B2B Industrial Manufacturing Precision Blueprint

DESIGN-industrial-precision-grid.md Download DESIGN.md

# Precision Manufacturing Blueprint — DESIGN.md

> Audience: B2B business
> Industry: Industrial Manufacturing
> Theme: Precision Blueprint
> Layout: Evidence-led split grid

This file is an implementation contract, not marketing copy. An AI must complete the Material Replacement Checklist and Implementation Gate before writing code.

## 1. Visual intent

Treat the page as a carefully designed capability statement: accurate, restrained, and clearly layered. Use fine rules, numbering, and a warm accent for key actions instead of decorative technology effects.

Homepage objective: Build procurement confidence with restrained engineering blue, a clear grid, and verifiable capability evidence.

- Eyebrow: Industrial manufacturing solutions
- Headline: Turn complex manufacturing capability into clear buying evidence
- Supporting copy: Place process, quality, and delivery information where decision-makers can evaluate it quickly.
- Action hierarchy: primary “Explore capabilities”, secondary “Submit project brief”

### Benchmark research (method reference only)

Official research page: [Protolabs — Online Manufacturing Services](https://www.protolabs.com/Services/) (checked 2026-09-12)

Transferable layout and interaction patterns:

- Lead with one manufacturing value proposition and a clear quote path instead of promoting every capability at once.
- Create stable capability families for molding, machining, 3D printing, sheet metal, and related processes.
- Keep materials, quality, design guidance, and industry applications inside the buyer evaluation path.
- Support different buying stages through service, material, industry, and resource routes.

Do-not-copy boundary: Borrow only the procurement hierarchy and task paths. Do not reuse the Protolabs name, marks, quoting UI, NASA case, process copy, imagery, certifications, or delivery figures.

Implement only the information architecture, visual hierarchy, and interaction principles. Do not download, hotlink, scrape, or closely reproduce the reference site's brand assets, copy, images, video, data, or distinctive visual expression.

## 2. Design tokens

```css
:root {
  --ds-color-background: #F4F7F8;
  --ds-color-surface: #FFFFFF;
  --ds-color-accent: #1261A0;
  --ds-color-accent-secondary: #E36F2D;
  --ds-color-text: #10212B;
  --ds-color-muted: #63737D;
  --ds-font-heading: ui-sans-serif, system-ui, sans-serif;
  --ds-font-body: ui-sans-serif, system-ui, sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ds-radius: 4px;
  --ds-dark-mode-supported: 0;

  /* Template layout values plus shared touch-target and acceptance breakpoints. */
  --ds-content-max: 1280px;
  --ds-page-gutter: 24px;
  --ds-hero-height: clamp(560px, 76vh, 760px);
  --ds-touch-target: 44px;
  --ds-breakpoint-phone: 360px;
  --ds-breakpoint-tablet: 768px;
  --ds-breakpoint-desktop: 1440px;

  /* Derived 50–900 ramps. These are generated values, not reference-brand tokens. */
  --ds-color-brand-900: #07253D;
  --ds-color-brand-900-ink: #FFFFFF;
  --ds-color-brand-800: #0A3456;
  --ds-color-brand-800-ink: #FFFFFF;
  --ds-color-brand-700: #0D436F;
  --ds-color-brand-700-ink: #FFFFFF;
  --ds-color-brand-600: #0F5287;
  --ds-color-brand-600-ink: #FFFFFF;
  --ds-color-brand-500: #1261A0;
  --ds-color-brand-500-ink: #FFFFFF;
  --ds-color-brand-400: #3C7DB1;
  --ds-color-brand-400-ink: #000000;
  --ds-color-brand-300: #6699C2;
  --ds-color-brand-300-ink: #000000;
  --ds-color-brand-200: #8FB4D2;
  --ds-color-brand-200-ink: #000000;
  --ds-color-brand-100: #B9D0E3;
  --ds-color-brand-100-ink: #000000;
  --ds-color-brand-50: #E3ECF4;
  --ds-color-brand-50-ink: #000000;
  --ds-color-background-900: #363637;
  --ds-color-background-900-ink: #FFFFFF;
  --ds-color-background-800: #666667;
  --ds-color-background-800-ink: #FFFFFF;
  --ds-color-background-700: #959798;
  --ds-color-background-700-ink: #000000;
  --ds-color-background-600: #C5C7C8;
  --ds-color-background-600-ink: #000000;
  --ds-color-background-500: #F4F7F8;
  --ds-color-background-500-ink: #000000;
  --ds-color-background-400: #F6F9F9;
  --ds-color-background-400-ink: #000000;
  --ds-color-background-300: #F8FAFB;
  --ds-color-background-300-ink: #000000;
  --ds-color-background-200: #FBFCFC;
  --ds-color-background-200-ink: #000000;
  --ds-color-background-100: #FDFDFE;
  --ds-color-background-100-ink: #000000;
  --ds-color-background-50: #FFFFFF;
  --ds-color-background-50-ink: #000000;
  --ds-color-text-900: #10212B;
  --ds-color-text-900-ink: #FFFFFF;
  --ds-color-text-800: #253640;
  --ds-color-text-800-ink: #FFFFFF;
  --ds-color-text-700: #3A4A54;
  --ds-color-text-700-ink: #FFFFFF;
  --ds-color-text-600: #4E5F69;
  --ds-color-text-600-ink: #FFFFFF;
  --ds-color-text-500: #63737D;
  --ds-color-text-500-ink: #FFFFFF;
  --ds-color-text-400: #7D8A93;
  --ds-color-text-400-ink: #000000;
  --ds-color-text-300: #96A1A8;
  --ds-color-text-300-ink: #000000;
  --ds-color-text-200: #B0B9BE;
  --ds-color-text-200-ink: #000000;
  --ds-color-text-100: #C9D0D3;
  --ds-color-text-100-ink: #000000;
  --ds-color-text-50: #E3E7E9;
  --ds-color-text-50-ink: #000000;
  --ds-color-icon-900: #1F303A;
  --ds-color-icon-900-ink: #FFFFFF;
  --ds-color-icon-800: #293A44;
  --ds-color-icon-800-ink: #FFFFFF;
  --ds-color-icon-700: #34454F;
  --ds-color-icon-700-ink: #FFFFFF;
  --ds-color-icon-600: #3E4F59;
  --ds-color-icon-600-ink: #FFFFFF;
  --ds-color-icon-500: #485963;
  --ds-color-icon-500-ink: #FFFFFF;
  --ds-color-icon-400: #66747D;
  --ds-color-icon-400-ink: #FFFFFF;
  --ds-color-icon-300: #849097;
  --ds-color-icon-300-ink: #000000;
  --ds-color-icon-200: #A1ABB0;
  --ds-color-icon-200-ink: #000000;
  --ds-color-icon-100: #BFC7CA;
  --ds-color-icon-100-ink: #000000;
  --ds-color-icon-50: #DDE2E4;
  --ds-color-icon-50-ink: #000000;

  /* Semantic, functional, inverse, and chart roles. */
  --ds-color-background: #F4F7F8;
  --ds-color-background-ink: #000000;
  --ds-color-surface: #FFFFFF;
  --ds-color-surface-ink: #000000;
  --ds-color-foreground: #10212B;
  --ds-color-foreground-ink: #FFFFFF;
  --ds-color-muted-foreground: #63737D;
  --ds-color-muted-foreground-ink: #FFFFFF;
  --ds-color-surface-foreground: #10212B;
  --ds-color-surface-foreground-ink: #FFFFFF;
  --ds-color-surface-muted-foreground: #63737D;
  --ds-color-surface-muted-foreground-ink: #FFFFFF;
  --ds-color-link: #1261A0;
  --ds-color-link-ink: #FFFFFF;
  --ds-color-surface-link: #1261A0;
  --ds-color-surface-link-ink: #FFFFFF;
  --ds-color-white-foreground: #10212B;
  --ds-color-white-foreground-ink: #FFFFFF;
  --ds-color-white-link: #1261A0;
  --ds-color-white-link-ink: #FFFFFF;
  --ds-color-primary: #1261A0;
  --ds-color-primary-ink: #FFFFFF;
  --ds-color-secondary: #E36F2D;
  --ds-color-secondary-ink: #000000;
  --ds-color-border: #63737D;
  --ds-color-border-ink: #FFFFFF;
  --ds-color-input: #63737D;
  --ds-color-input-ink: #FFFFFF;
  --ds-color-ring: #1261A0;
  --ds-color-ring-ink: #FFFFFF;
  --ds-color-success: #18794E;
  --ds-color-success-ink: #FFFFFF;
  --ds-color-success-surface: #DAE8E4;
  --ds-color-success-surface-ink: #000000;
  --ds-color-error: #B42318;
  --ds-color-error-ink: #FFFFFF;
  --ds-color-error-surface: #ECDEDD;
  --ds-color-error-surface-ink: #000000;
  --ds-color-inverse-background: #363637;
  --ds-color-inverse-background-ink: #FFFFFF;
  --ds-color-inverse-surface: #666667;
  --ds-color-inverse-surface-ink: #FFFFFF;
  --ds-color-inverse-foreground: #FFFFFF;
  --ds-color-inverse-foreground-ink: #000000;
  --ds-color-inverse-primary: #3C7DB1;
  --ds-color-inverse-primary-ink: #000000;
  --ds-color-chart-1: #1261A0;
  --ds-color-chart-1-ink: #FFFFFF;
  --ds-color-chart-2: #E36F2D;
  --ds-color-chart-2-ink: #000000;
  --ds-color-chart-3: #18794E;
  --ds-color-chart-3-ink: #FFFFFF;
  --ds-color-chart-4: #B42318;
  --ds-color-chart-4-ink: #FFFFFF;
  --ds-color-chart-5: #7B6867;
  --ds-color-chart-5-ink: #FFFFFF;

  /* Shared typography contract used by the visual spec and this file. */
  --ds-type-display-1: 80px;
  --ds-type-display-1-weight: 600;
  --ds-type-display-1-line-height: 1.05;
  --ds-type-display-1-tracking: -0.015em;
  --ds-type-display-2: 56px;
  --ds-type-display-2-weight: 600;
  --ds-type-display-2-line-height: 1.07;
  --ds-type-display-2-tracking: -0.005em;
  --ds-type-display-3: 40px;
  --ds-type-display-3-weight: 600;
  --ds-type-display-3-line-height: 1.1;
  --ds-type-display-3-tracking: 0em;
  --ds-type-headline: 28px;
  --ds-type-headline-weight: 600;
  --ds-type-headline-line-height: 1.14;
  --ds-type-headline-tracking: 0.007em;
  --ds-type-copy: 21px;
  --ds-type-copy-weight: 400;
  --ds-type-copy-line-height: 1.19;
  --ds-type-copy-tracking: 0.011em;
  --ds-type-body: 17px;
  --ds-type-body-weight: 400;
  --ds-type-body-line-height: 1.47059;
  --ds-type-body-tracking: -0.022em;
  --ds-type-supporting: 14px;
  --ds-type-supporting-weight: 400;
  --ds-type-supporting-line-height: 1.43;
  --ds-type-supporting-tracking: -0.016em;
  --ds-type-footer: 12px;
  --ds-type-footer-weight: 400;
  --ds-type-footer-line-height: 1.33;
  --ds-type-footer-tracking: -0.01em;
  --ds-type-caption: 12px;
  --ds-type-caption-weight: 600;
  --ds-type-caption-line-height: 1.2;
  --ds-type-caption-tracking: 0.12em;
  --ds-type-label: 12px;
  --ds-type-label-weight: 700;
  --ds-type-label-line-height: 1.2;
  --ds-type-label-tracking: 0.08em;
  --ds-font-weight-400: 400;
  --ds-font-weight-500: 500;
  --ds-font-weight-600: 600;
  --ds-font-weight-700: 700;

  /* Shared spacing scale. */
  --ds-space-4: 4px;
  --ds-space-8: 8px;
  --ds-space-12: 12px;
  --ds-space-16: 16px;
  --ds-space-24: 24px;
  --ds-space-32: 32px;
  --ds-space-48: 48px;
  --ds-space-64: 64px;
  --ds-space-96: 96px;
  --ds-space-128: 128px;

  /* Template radius plus derived/shared radius roles. */
  --ds-radius-none: 0px;
  --ds-radius-sm: 2px;
  --ds-radius-md: 4px;
  --ds-radius-lg: 6px;
  --ds-radius-xl: 8px;
  --ds-radius-full: 999px;

  /* Shared elevation contract. */
  --ds-shadow-2xs: 0 1px 2px -1px rgb(0 0 0 / 4%);
  --ds-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 4%);
  --ds-shadow-sm: 0 1px 2px rgb(0 0 0 / 5%), 0 1px 3px -1px rgb(0 0 0 / 5%);
  --ds-shadow: 0 2px 4px -1px rgb(0 0 0 / 6%), 0 1px 2px -1px rgb(0 0 0 / 5%);
  --ds-shadow-md: 0 4px 8px -2px rgb(0 0 0 / 6%), 0 2px 4px -2px rgb(0 0 0 / 5%);
  --ds-shadow-lg: 0 8px 24px -8px rgb(0 0 0 / 8%), 0 4px 8px -4px rgb(0 0 0 / 5%);
  --ds-shadow-xl: 0 16px 40px -10px rgb(0 0 0 / 10%), 0 8px 16px -8px rgb(0 0 0 / 6%);
  --ds-shadow-2xl: 0 24px 64px -12px rgb(0 0 0 / 12%);

  /* Borders and focus treatment derived from the template palette. */
  --ds-border-structural: 1px solid #63737D;
  --ds-border-input: 1px solid #63737D;
  --ds-focus-ring: 0 0 0 2px #1261A0;

  /* Shared motion contract. */
  --ds-motion-fast: 160ms;
  --ds-motion-standard: 240ms;
  --ds-motion-narrative: 400ms;
  --ds-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Shared icon sizes and strokes. */
  --ds-icon-size-16: 16px;
  --ds-icon-size-20: 20px;
  --ds-icon-size-24: 24px;
  --ds-icon-size-32: 32px;
  --ds-icon-stroke-regular: 1.5px;
  --ds-icon-stroke-strong: 2px;
}

/* Responsive type values come from the same display spec as the visual guide. */
@media (max-width: 768px) {
  :root {
    --ds-type-display-1: 56px;
    --ds-type-display-2: 40px;
    --ds-type-display-3: 32px;
    --ds-type-headline: 28px;
    --ds-type-copy: 19px;
    --ds-type-body: 17px;
    --ds-type-supporting: 14px;
    --ds-type-footer: 12px;
    --ds-type-caption: 12px;
    --ds-type-label: 12px;
  }
}

@media (max-width: 480px) {
  :root {
    --ds-type-display-1: 44px;
    --ds-type-display-2: 32px;
    --ds-type-display-3: 26px;
    --ds-type-headline: 24px;
    --ds-type-copy: 17px;
    --ds-type-body: 16px;
    --ds-type-supporting: 14px;
    --ds-type-footer: 12px;
    --ds-type-caption: 12px;
    --ds-type-label: 12px;
  }
}
```

Source rule: base colors, font families, container, gutter, primary radius, and hero height are template-defined values; 50–900 ramps, semantic mappings, sm/lg/xl radii generated around the primary radius, borders, and the focus ring are derived values; radius-none/full, type sizes, weights, spacing, shadows, touch target, breakpoints, iconography, and baseline motion are shared library rules. Motion recipes are implementation constraints derived from the template layout. None of these values are official tokens from the benchmark brand.

Semantic rule: background is reserved for the page foundation and surface for content panels. The original accent remains the fill for primary actions and current states; accent-secondary is a limited supporting fill. Text and links must use a contrast-safe foreground role paired with the actual surface in the table below; do not use accent directly as body text. Every 50–900 scale token also includes a paired `-ink` foreground token, which must be used for text or icons on that swatch.

| Foreground role | Value | Place on | Contrast | Usage |
|---|---|---|---:|---|
| `foreground` | `#10212B` | `background` | 15.31:1 | Accessible text on the page background |
| `muted-foreground` | `#63737D` | `background` | 4.56:1 | Accessible supporting text on the page background |
| `surface-foreground` | `#10212B` | `surface` | 16.48:1 | Accessible primary text on the template surface |
| `surface-muted-foreground` | `#63737D` | `surface` | 4.91:1 | Accessible supporting text on the template surface |
| `link` | `#1261A0` | `background` | 6.01:1 | Accessible link on the page background |
| `surface-link` | `#1261A0` | `surface` | 6.48:1 | Accessible link on the template surface |
| `white-foreground` | `#10212B` | `white` | 16.48:1 | Accessible text on a white surface |
| `white-link` | `#1261A0` | `white` | 6.48:1 | Accessible link on a white surface |
| `inverse-foreground` | `#FFFFFF` | `inverse-background` | 12.07:1 | Text on the inverse background |

Dark mode: `supported = false`. This template does not define a complete dark mode. Inverse tokens are only for scoped inverse sections and must not be treated as a site-wide dark theme.

## 3. Typography and hierarchy

- Heading family: `ui-sans-serif, system-ui, sans-serif`; body family: `ui-sans-serif, system-ui, sans-serif`.
- The table below is the single exact type-size contract. Desktop values are the root values; the CSS media rules override those same variables for Tablet and Mobile.
- Caption and Label must never drop below 12px when used in product UI.
- Keep reading lines near 45–75 characters. Never put required copy only inside an image; price, specifications, compliance, and actions remain accessible text.

| Token | Desktop | Tablet | Mobile | Weight | Line height | Tracking | Usage |
|---|---:|---:|---:|---:|---:|---:|---|
| display-1 | 80px | 56px | 44px | 600 | 1.05 | -0.015em | Primary hero statement |
| display-2 | 56px | 40px | 32px | 600 | 1.07 | -0.005em | Major section statement |
| display-3 | 40px | 32px | 26px | 600 | 1.1 | 0em | Section title |
| headline | 28px | 28px | 24px | 600 | 1.14 | 0.007em | Card group or feature heading |
| copy | 21px | 19px | 17px | 400 | 1.19 | 0.011em | Lead or introductory copy |
| body | 17px | 17px | 16px | 400 | 1.47059 | -0.022em | Primary reading text |
| supporting | 14px | 14px | 14px | 400 | 1.43 | -0.016em | Supporting detail |
| footer | 12px | 12px | 12px | 400 | 1.33 | -0.01em | Footer and compact metadata |
| caption | 12px | 12px | 12px | 600 | 1.2 | 0.12em | UI caption; never below 12px |
| label | 12px | 12px | 12px | 700 | 1.2 | 0.08em | Control or token label; never below 12px |

| Weight token | Value | Usage |
|---|---:|---|
| `--ds-font-weight-400` | 400 | Body and long-form reading |
| `--ds-font-weight-500` | 500 | Controls and compact emphasis |
| `--ds-font-weight-600` | 600 | Headings and selected states |
| `--ds-font-weight-700` | 700 | Short labels and strong emphasis |

### Iconography contract

Sizes：`--ds-icon-size-16` = 16px; `--ds-icon-size-20` = 20px; `--ds-icon-size-24` = 24px; `--ds-icon-size-32` = 32px

Strokes：`--ds-icon-stroke-regular` = 1.5px; `--ds-icon-stroke-strong` = 2px

| State | Foreground role | Usage |
|---|---|---|
| default | `foreground` | Default informational icon |
| muted | `muted-foreground` | Secondary non-interactive icon |
| interactive | `link` | Interactive icon with visible focus state |
| inverse | `inverse-foreground` | Icon on a scoped inverse surface |

## 4. Layout and responsive behavior

The base content width is 1280px, desktop gutter 24px, primary radius 4px, and reference hero height clamp(560px, 76vh, 760px). Every interactive/touch target is at least `44px`.

| Viewport | Acceptance width | Applies through | Columns | Gutter | Purpose |
|---|---:|---:|---:|---:|---|
| phone | `360px` | `480px` | 1 | `16px` | Phone acceptance viewport |
| tablet | `768px` | `768px` | 6 | `20px` | Tablet acceptance viewport |
| desktop | `1440px` | — | 12 | `var(--ds-page-gutter)` | Desktop acceptance viewport |

### 360px (phone)

- Use 1 column with 16px page padding; collapse navigation while retaining the primary action.
- Place hero copy before media; stack buttons and keep every target at least 44px high.
- Crop media according to its intended ratio rather than scaling down desktop absolute positioning.
- Cards, tabs, filters, and carousels must support touch with no horizontal page overflow.

### 768px (tablet)

- Use a 6-column grid and 20px gutters; the hero may use a 5:7 or 1:1 split.
- Place two cards per row; retain a reduced horizontal navigation and allow secondary content to collapse.
- Preserve desktop information order and action priority without hiding critical specifications.

### 1440px (desktop)

- Use a 12-column grid centered within 1280px.
- Hero copy normally occupies 4–5 columns and media 7–8; imagery may bleed, but body copy must not become over-wide.
- Use 96–144px between major sections and only one primary action in the hero.
- Hover may enhance available information but must never be the only way to reach it.

## 5. Core components

1. **Global navigation**: brand slot, 3–5 main links, and one clear primary action; mobile navigation supports close, Escape, and focus return.
2. **Hero**: eyebrow, one H1, concise supporting copy, primary and secondary actions, and one main media asset.
3. **Core processes**: scannable cards or an index, with one decision criterion per item.
4. **Quality system**: prioritize verifiable information; comparison data uses consistent units and stable columns.
5. **Applications**: complete the decision context with a download, detail view, or next action.
6. **Closing action and footer**: repeat the core promise and contact path without introducing unexplained slogans.

## 6. Interaction and motion

Motion character for this theme: Reveal sections with a 180–240ms fade and 8px translation; capability cards only increase border contrast on hover; key figures count up once.

The recipes below are executable constraints; an implementation must not preserve only the prose description:

| Recipe | Usage | Trigger | Property | From | To | Duration | Easing | Iterations | Reduced motion | Constraint |
|---|---|---|---|---|---|---:|---|---:|---|---|
| `translate-up` | Reveal or elevate a bounded content block | `viewport-enter` | `transform, opacity` | `transform: translateY(8px); opacity: 0` | `transform: translateY(0); opacity: 1` | `240ms` | `cubic-bezier(0.2, 0.8, 0.2, 1)` | 1 | `remove-transform` | `content-remains-in-document-flow` |
| `border-contrast` | Increase card-border contrast on hover and keyboard focus | `hover-or-focus-visible` | `border-color` | `border-color: var(--ds-color-border)` | `border-color: var(--ds-color-primary)` | `160ms` | `cubic-bezier(0.2, 0.8, 0.2, 1)` | 1 | `keep-non-motion-feedback` | `equivalent-focus-visible-feedback` |
| `count-up` | Count a key figure once when it first enters view | `first-viewport-enter` | `number-value` | `value: 0` | `value: target` | `400ms` | `cubic-bezier(0.2, 0.8, 0.2, 1)` | 1 | `show-final-value` | `run-once; preserve-accessible-name` |

- Define hover, focus-visible, and active separately; touch must never depend on hover.
- Use 160ms for ordinary feedback and 240ms for content transitions. Exceed 400ms only for deliberate narrative sequences.
- Prefer transform and opacity animation to avoid layout shifts.
- Autoplay media must be pausable; video starts muted and includes a poster and failure fallback.
- Navigation, form submission, downloads, and purchase actions expose clear pending, success, and error states.

### Reduced motion

Under `prefers-reduced-motion: reduce`, remove parallax, autoplay carousels, translation, zoom, and count-up motion. Present content immediately and retain non-motion feedback through color, border, or underline. No function may disappear when motion is disabled.

## 7. Material replacement checklist

| ID | Material or configuration | Required/optional | Guidance | Purpose | Missing-state behavior |
|---|---|---|---|---|---|
| A01 | Brand name and logo | Required | Prefer SVG; supply variants for light and dark surfaces | Navigation and footer | Use a clearly marked text placeholder; never imitate the reference brand |
| A02 | Hero eyebrow, headline, and supporting copy | Required | Headline 5–12 words; supporting copy 15–35 words | Hero hierarchy | Use neutral industry copy marked for replacement |
| A03 | Hero media | Required | One authentic 16:9 or 3:2 facility/production image at 2400px or wider, with the subject in the right 60% of the frame. | Establish the theme and product context | Use a local neutral gradient block; never use a third-party hotlink |
| A04 | Primary/secondary labels and URLs | Required | 2–5 words each with a real relative or absolute URL | Conversion path | Use a disabled placeholder link and mark it |
| A05 | Content for Core processes, Quality system, Applications | Required | 3–6 items each with title, description, image/icon, and destination | Three core content sections | Keep the structure but never invent metrics or credentials |
| A06 | Proof material | Optional | Authorized customer logos, certificates, reports, or authentic reviews | Trust | Hide the section rather than fabricate evidence |
| A07 | Contact, policy, and legal content | Required | Email/phone/form destination plus privacy and terms URLs | Forms and footer | Disable submission and state the blocker |
| A08 | Font files and media-license notes | Optional | WOFF2 plus source, usage scope, and alt text | Performance, licensing, accessibility | Use system fonts; do not ship unconfirmed media |

## 8. Do / Don’t

### Do

- Expose brand, copy, media, data, and links as replaceable configuration or props.
- Keep hero hierarchy, grid proportions, focus order, and primary-action position stable.
- Give images intrinsic dimensions, alt text, and loading policy; give videos a poster and fallback.
- Replace every neutral placeholder with authentic product, context, and evidence assets.

### Don’t

- Do not retain a reference brand, author, popularity signal, fabricated review, fabricated metric, or third-party hotlink.
- Do not redesign the layout to fit supplied media or replace an interaction with a static approximation.
- Do not mount several autoplay videos or perpetual decorative animations at once.
- Do not change unrelated pages, routes, global styles, or project configuration.

## 9. AI implementation gate

### Phase 1: material intake only

1. Inspect the current project and conversation for A01–A08.
2. Output only the missing-item table, marking each item supplied, required missing, optional missing, placeholder approved, or skipped.
3. Request missing material once, then stop. Do not install dependencies or modify files.
4. Continue only when every required item is supplied or approved for placeholder use, every optional item is supplied or explicitly skipped, and the user replies “Start implementation.”

### Phase 2: implement after confirmation

1. Inspect the project framework, styling system, and dependencies, reusing existing capabilities first.
2. Treat this file’s layout, tokens, interactions, and motion as constraints. Customer materials replace only the content layer.
3. At 360px, 768px, 1440px, verify no horizontal overflow plus keyboard order, touch, focus-visible, asset failure, and reduced-motion behavior.
4. Run the project’s existing type check, tests, and production build. Report changed files, material mapping, adaptation differences, and unresolved blockers.

Current template specification

Complete design system

The page and Design.md share one data source. The benchmark informs structure only; these are not official tokens from the benchmark brand.

Template valueDerived valueShared contract

Derived ramps · generated from this template’s base colors

brand-900 #07253D
brand-800 #0A3456
brand-700 #0D436F
brand-600 #0F5287
brand-500 #1261A0
brand-400 #3C7DB1
brand-300 #6699C2
brand-200 #8FB4D2
brand-100 #B9D0E3
brand-50 #E3ECF4

background-900 #363637
background-800 #666667
background-700 #959798
background-600 #C5C7C8
background-500 #F4F7F8
background-400 #F6F9F9
background-300 #F8FAFB
background-200 #FBFCFC
background-100 #FDFDFE
background-50 #FFFFFF

text-900 #10212B
text-800 #253640
text-700 #3A4A54
text-600 #4E5F69
text-500 #63737D
text-400 #7D8A93
text-300 #96A1A8
text-200 #B0B9BE
text-100 #C9D0D3
text-50 #E3E7E9

icon-900 #1F303A
icon-800 #293A44
icon-700 #34454F
icon-600 #3E4F59
icon-500 #485963
icon-400 #66747D
icon-300 #849097
icon-200 #A1ABB0
icon-100 #BFC7CA
icon-50 #DDE2E4

Semantic roles

Template value background #F4F7F8 Page foundation
Template value surface #FFFFFF Cards and panels
Derived value foreground #10212B Accessible text on the page background
Derived value muted-foreground #63737D Accessible supporting text on the page background
Derived value surface-foreground #10212B Accessible primary text on the template surface
Derived value surface-muted-foreground #63737D Accessible supporting text on the template surface
Derived value link #1261A0 Accessible link on the page background
Derived value surface-link #1261A0 Accessible link on the template surface
Derived value white-foreground #10212B Accessible text on a white surface
Derived value white-link #1261A0 Accessible link on a white surface
Template value primary #1261A0 Primary fill for actions and selection
Template value secondary #E36F2D Limited secondary fill
Derived value border #63737D Structural boundaries
Derived value input #63737D Form-control boundary
Derived value ring #1261A0 Keyboard focus indicator

Functional and inverse

Shared contract success #18794E Success state
Derived value success-surface #DAE8E4 Success message surface
Shared contract error #B42318 Error and destructive state
Derived value error-surface #ECDEDD Error message surface
Derived value inverse-background #363637 Scoped inverse section
Derived value inverse-surface #666667 Scoped inverse panel
Derived value inverse-foreground #FFFFFF Text on the inverse background
Derived value inverse-primary #3C7DB1 Action fill on an inverse surface

Chart colors

Template value chart-1 #1261A0 Primary data series
Template value chart-2 #E36F2D Secondary data series
Shared contract chart-3 #18794E Positive data series
Shared contract chart-4 #B42318 Negative data series
Derived value chart-5 #7B6867 Supporting data series

Font families

Template value heading

Aa 字

ui-sans-serif, system-ui, sans-serif

Template value body

Aa 字

ui-sans-serif, system-ui, sans-serif

Shared contract mono

Aa 字

ui-monospace, SFMono-Regular, Menlo, monospace

Type scale

Precision

display-1Shared contract

Desktop80px Tablet56px Mobile44px
600 / 1.05 / -0.015em --ds-type-display-1
Built for scale

display-2Shared contract

Desktop56px Tablet40px Mobile32px
600 / 1.07 / -0.005em --ds-type-display-2
Manufacturing clarity

display-3Shared contract

Desktop40px Tablet32px Mobile26px
600 / 1.1 / 0em --ds-type-display-3
Reliable production evidence

headlineShared contract

Desktop28px Tablet28px Mobile24px
600 / 1.14 / 0.007em --ds-type-headline
From design to delivery, every step stays verifiable.

copyShared contract

Desktop21px Tablet19px Mobile17px
400 / 1.19 / 0.011em --ds-type-copy
Place process, quality, and delivery information where decision-makers can evaluate it quickly.

bodyShared contract

Desktop17px Tablet17px Mobile16px
400 / 1.47059 / -0.022em --ds-type-body
Industrial manufacturing solutions

supportingShared contract

Desktop14px Tablet14px Mobile14px
400 / 1.43 / -0.016em --ds-type-supporting
Parameters, dates, and supporting detail

footerShared contract

Desktop12px Tablet12px Mobile12px
400 / 1.33 / -0.01em --ds-type-footer
DESIGN SYSTEM

captionShared contract

Desktop12px Tablet12px Mobile12px
600 / 1.2 / 0.12em --ds-type-caption
TOKEN LABEL

labelShared contract

Desktop12px Tablet12px Mobile12px
700 / 1.2 / 0.08em --ds-type-label

Weights

Shared contract

400Body and long-form reading

Shared contract

500Controls and compact emphasis

Shared contract

600Headings and selected states

Shared contract

700Short labels and strong emphasis

space-4Shared contract
4px
space-8Shared contract
8px
space-12Shared contract
12px
space-16Shared contract
16px
space-24Shared contract
24px
space-32Shared contract
32px
space-48Shared contract
48px
space-64Shared contract
64px
space-96Shared contract
96px
space-128Shared contract
128px

Radius

Shared contract radius-none 0px

Derived value radius-sm 2px

Template value radius-md 4px Current

Derived value radius-lg 6px

Derived value radius-xl 8px

Shared contract radius-full 999px

Borders and focus

Derived value structural 1px solid #63737D

Derived value input 1px solid #63737D

Derived value focus-ring 0 0 0 2px #1261A0

Shadows

Shared contract shadow-2xs 0 1px 2px -1px rgb(0 0 0 / 4%)

Shared contract shadow-xs 0 1px 2px 0 rgb(0 0 0 / 4%)

Shared contract shadow-sm 0 1px 2px rgb(0 0 0 / 5%), 0 1px 3px -1px rgb(0 0 0 / 5%)

Shared contract shadow 0 2px 4px -1px rgb(0 0 0 / 6%), 0 1px 2px -1px rgb(0 0 0 / 5%)

Shared contract shadow-md 0 4px 8px -2px rgb(0 0 0 / 6%), 0 2px 4px -2px rgb(0 0 0 / 5%)

Shared contract shadow-lg 0 8px 24px -8px rgb(0 0 0 / 8%), 0 4px 8px -4px rgb(0 0 0 / 5%)

Shared contract shadow-xl 0 16px 40px -10px rgb(0 0 0 / 10%), 0 8px 16px -8px rgb(0 0 0 / 6%)

Shared contract shadow-2xl 0 24px 64px -12px rgb(0 0 0 / 12%)

content-max: 1280px
page-gutter: 24px
hero-height: clamp(560px, 76vh, 760px)
touch-target: 44px

Shared contract

phone360px

1 columns · 16px · Phone acceptance viewport

Shared contract

tablet768px

6 columns · 20px · Tablet acceptance viewport

Shared contract

desktop1440px

12 columns · var(--ds-page-gutter) · Desktop acceptance viewport

Template valueMedia specification

One authentic 16:9 or 3:2 facility/production image at 2400px or wider, with the subject in the right 60% of the frame.

Shared contract

Iconography

No verified icon asset ships with this template, so the guide does not fabricate icon samples. Size and stroke rules apply only after a real icon library is connected.

icon-1616pxShared contract
icon-2020pxShared contract
icon-2424pxShared contract
icon-3232pxShared contract
icon-stroke-regular1.5pxShared contract
icon-stroke-strong2pxShared contract

default: Default informational icon
muted: Secondary non-interactive icon
interactive: Interactive icon with visible focus state
inverse: Icon on a scoped inverse surface

Duration tokens

Shared contractfast160msHover, focus, and pressed feedback
Shared contractstandard240msContent and state changes
Shared contractnarrative400msOne-time narrative reveal

Interaction recipes

translate-upDerived value

Automatic preview · translate-up

Reveal or elevate a bounded content block

Trigger: viewport-enter
Property: transform, opacity
From: transform: translateY(8px); opacity: 0
To: transform: translateY(0); opacity: 1
Duration: 240ms
Easing: cubic-bezier(0.2, 0.8, 0.2, 1)
Iterations: 1
Reduced motion: remove-transform
Constraint: content-remains-in-document-flow

border-contrastDerived value

Increase card-border contrast on hover and keyboard focus

Trigger: hover-or-focus-visible
Property: border-color
From: border-color: var(--ds-color-border)
To: border-color: var(--ds-color-primary)
Duration: 160ms
Easing: cubic-bezier(0.2, 0.8, 0.2, 1)
Iterations: 1
Reduced motion: keep-non-motion-feedback
Constraint: equivalent-focus-visible-feedback

count-upDerived value

Automatic preview · count-up

Count a key figure once when it first enters view

Trigger: first-viewport-enter
Property: number-value
From: value: 0
To: value: target
Duration: 400ms
Easing: cubic-bezier(0.2, 0.8, 0.2, 1)
Iterations: 1
Reduced motion: show-final-value
Constraint: run-once; preserve-accessible-name

Template valueMotion character for this template

Reveal sections with a 180–240ms fade and 8px translation; capability cards only increase border contrast on hover; key figures count up once.

cubic-bezier(0.2, 0.8, 0.2, 1)

BUTTON · State matrix

Input field · State matrix

Default Focused Success Error Read only Disabled

NAVIGATION

CARD

Industrial manufacturing solutions

Verifiable manufacturing capability

Keep process, material, quality, and delivery evidence in one decision path.

Every visible value above is synchronized to the current Design.md.

DESIGN-industrial-precision-grid.md

Transferable patterns

Lead with one manufacturing value proposition and a clear quote path instead of promoting every capability at once.
Create stable capability families for molding, machining, 3D printing, sheet metal, and related processes.
Keep materials, quality, design guidance, and industry applications inside the buyer evaluation path.
Support different buying stages through service, material, industry, and resource routes.

Replication boundary

Borrow only the procurement hierarchy and task paths. Do not reuse the Protolabs name, marks, quoting UI, NASA case, process copy, imagery, certifications, or delivery figures.

Checked 2026-09-12

Turn complex manufacturing capability into clear buying evidence

Precision Manufacturing Blueprint

Protolabs — Online Manufacturing Services

Complete design system

Colors

brand

background

text

icon

Semantic roles

Functional and inverse

Chart colors

Typography

Font families

Type scale

Weights

Spacing

Radius, borders, and shadows

Radius

Borders and focus

Shadows

Layout and breakpoints

Interaction and motion

Duration tokens

Interaction recipes

Applied components

Verifiable manufacturing capability

Transferable patterns

Replication boundary

Cookie preferences