# Vector Relay — Style Reference
> Structured industrial-control planning with an orange command signal

**Theme:** light

Vector Relay is a B2B industrial-controls design system for teams organizing system context, interface requirements and project constraints before an engineering conversation. Warm technical neutrals, navy structure and a single orange command signal create a precise path from capability orientation to a local project-request draft.

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| Drafting Canvas | `#f4f1eb` | `--canvas` | Page background |
| Control Paper | `#ffffff` | `--paper` | Cards and inputs |
| Relay Navy | `#172033` | `--ink` | Primary text and technical bands |
| Slate Note | `#596273` | `--muted` | Secondary copy |
| Command Orange | `#f05a28` | `--command` | Large display emphasis and structural markers |
| Command Ink | `#9f3a18` | `--command-ink` | Small text, white-surface buttons, and accessible orange actions |
| Logic Blue | `#2457d6` | `--logic` | Secondary focus and selected state |
| Steel Rule | `#ccd2dc` | `--line` | Structural borders |
| Logic Wash | `#e8edf7` | `--wash` | Alternate surface |

## Tokens — Typography

The system uses local sans-serif fallbacks only. Compact labels use wide tracking while large headings use dense spacing and firm line breaks.

### Type Scale

| Role | Family | Weight | Size | Line Height | Token |
|---|---|---:|---:|---:|---|
| caption | Arial | 800 | 12px | 1.4 | `--text-caption` |
| label | Arial | 800 | 13px | 1.35 | `--text-label` |
| body | Arial | 400 | 16px | 1.6 | `--text-body` |
| lead | Arial | 400 | 20px | 1.5 | `--text-lead` |
| card | Arial | 700 | 25px | 1.1 | `--text-card` |
| hero | Arial | 800 | 72px | 0.98 | `--text-hero` |

## Tokens — Spacing & Shapes

Squared cards, measured gaps and mechanical markers keep the interface purposeful. Rounded geometry is limited to the CSS control dial and focus indicators.

### Spacing Scale

| Name | Value | Token |
|---|---:|---|
| 1 | 8px | `--space-1` |
| 2 | 12px | `--space-2` |
| 3 | 16px | `--space-3` |
| 4 | 24px | `--space-4` |
| 5 | 32px | `--space-5` |
| 6 | 48px | `--space-6` |
| section | 100px | `--space-section` |

### Border Radius

| Element | Value | Token |
|---|---:|---|
| panels | 3px | `--radius` |
| controls | 3px | `--radius` |

### Layout

- **Content width:** `--layout-max` / 1200px with `--gutter` / 28px.
- **Hero:** `--hero-min-height` / 660px in a split editorial and control-board layout.
- **Narrow screens:** below 760px, navigation is disclosed and every grid becomes one column.

## Components

### Relay Header
The sticky header pairs a compact wordmark with capabilities, environments and request anchors. On narrow screens, a labeled disclosure closes through the toggle, a menu link or Escape.

### Control-Board Hero
The first screen combines a concise engineering headline with a CSS-only control board. Axis rules, a rotary dial and numbered status block establish visual character without external imagery.

### Capability Cards
Three ruled panels organize discovery, interface mapping and project framing. Copy describes planning activities and avoids unsupported compatibility, performance or compliance claims.

### Environment Selector
Three local controls let a buyer identify a broad operating context. A pressed state and textual summary keep the chosen context visible before the project request.

### Local Project Request
The form collects company, work email and requirement summary, validates locally, focuses the first error and confirms without sending or retaining information.

## Do's and Don'ts

### Do
- Keep the B2B path at capability orientation → operating context → requirement brief → local project confirmation.
- Use Command Orange for primary actions and Logic Blue for selected-state reinforcement.
- Keep labels, validation errors, focus outlines and reduced-motion behavior visible.
- Replace generic planning terms only with approved and supportable engineering facts.

### Don't
- Do not connect the local request form to email, CRM, database or automatic submission.
- Do not imply protocol compatibility, safety certification, uptime, response time or commissioning scope without approval.
- Do not add cart, checkout, payment, subscription or consumer-purchase controls.
- Do not reuse third-party photographs, logos, testimonials, project claims or interface screenshots.

## Surfaces

| Level | Name | Value | Purpose |
|---:|---|---|---|
| 0 | Drafting Canvas | `#f4f1eb` | Overall page field |
| 1 | Control Paper | `#ffffff` | Cards and fields |
| 2 | Relay Navy | `#172033` | Process band and footer |
| 3 | Logic Wash | `#e8edf7` | Selected context and request panel |

## Elevation

Cards remain flat and use structural rules. Buttons shift two pixels on hover. Keyboard focus uses a three-pixel outline; no component depends on shadow for hierarchy.

## Imagery

Use CSS control geometry, approved equipment photography or licensed engineering imagery. The starter build uses only vector-like CSS axes, dial marks and status blocks so it remains complete without third-party media.

## Layout

Desktop order is header → control-board hero → capability cards → engineering sequence → environment selector → local project request → footer. Narrow screens preserve this order in one column and keep the selected context next to the request.

## Agent Prompt Guide

**Quick Color Reference**

Use Drafting Canvas `#f4f1eb`, Relay Navy `#172033`, Command Orange `#f05a28`, Logic Blue `#2457d6` and Steel Rule `#ccd2dc`. Keep language factual, conditional and requirement-led.

**Example Component Prompts**

1. **Control-board hero:** Create a 660px split hero with CSS axis rules, a rotary dial, a numbered status panel and one project-request action.
2. **Environment selector:** Create three ruled buttons with visible `aria-pressed` state and a local requirement summary.
3. **Local request:** Validate company, work email and requirements, focus the first error and confirm locally without sending or storing information.

## Similar Brands

- **Siemens** — technical hierarchy can inspire scanability without borrowing identity.
- **Rockwell Automation** — disciplined system grouping can inform structure without copying visual assets.
- **Phoenix Contact** — precise component labeling can guide B2B navigation and requirement capture.

## Quick Start

### CSS Custom Properties

Use this complete local stylesheet as the blank-project starting point. It includes tokens, responsive layouts, named components, focus states, validation, reset and reduced-motion support.

```css
:root {
  --canvas: #f4f1eb;
  --paper: #ffffff;
  --ink: #172033;
  --muted: #596273;
  --command: #f05a28;
  --command-ink: #9f3a18;
  --logic: #2457d6;
  --line: #ccd2dc;
  --wash: #e8edf7;
  --danger: #8b2500;
  --focus: #007a5e;
  --on-dark: #ffffff;
  --font-display: Arial, sans-serif;
  --font-body: Arial, sans-serif;
  --layout-max: 1200px;
  --gutter: 28px;
  --hero-min-height: 660px;
  --radius: 3px;
  --text-caption: 12px;
  --text-label: 13px;
  --text-body: 16px;
  --text-lead: 20px;
  --text-card: 25px;
  --text-section: 46px;
  --text-hero: 72px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-section: 100px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--canvas); color: var(--ink); font: 400 var(--text-body)/1.6 var(--font-body); }
a { color: inherit; }
button, input, textarea { font: inherit; }
.shell { width: min(calc(100% - 2 * var(--gutter)), var(--layout-max)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 10px 14px; background: var(--command-ink); color: var(--on-dark); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid var(--line); background: rgba(244, 241, 235, .96); backdrop-filter: blur(10px); }
.nav { min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 20px/1 var(--font-display); letter-spacing: -.045em; text-decoration: none; }
.brand-mark { position: relative; width: 25px; height: 25px; border: 5px solid var(--command); }
.brand-mark::after { content: ''; position: absolute; right: -7px; bottom: -7px; width: 8px; height: 8px; background: var(--logic); }
.nav-links { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.nav-links a { font-size: var(--text-label); font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.menu-toggle { display: none; min-height: 42px; border: 1px solid var(--ink); border-radius: var(--radius); padding: 8px 13px; background: var(--paper); color: var(--ink); font-weight: 800; }
.hero { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--paper); }
.hero-grid { min-height: var(--hero-min-height); display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--space-6); }
.hero-copy { padding-block: 86px; }
.eyebrow { margin: 0 0 var(--space-4); color: var(--logic); font-size: var(--text-label); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow::before { content: 'CTRL / '; color: var(--command-ink); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); line-height: 1.04; }
h1 { max-width: 720px; font-size: var(--text-hero); letter-spacing: -.067em; text-transform: uppercase; }
h1 em { color: var(--command); font-style: normal; }
.lead { max-width: 620px; margin: var(--space-5) 0; color: var(--muted); font-size: var(--text-lead); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.button { display: inline-flex; min-height: 50px; align-items: center; justify-content: center; border: 1px solid var(--command-ink); border-radius: var(--radius); padding: 11px 18px; background: var(--command-ink); color: var(--on-dark); font-size: var(--text-label); font-weight: 800; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; transition: transform .15s ease, background .15s ease; }
.button:hover { background: var(--ink); border-color: var(--ink); transform: translate(-2px, -2px); }
.button--quiet { border-color: var(--logic); background: transparent; color: var(--logic); }
.control-board { position: relative; min-height: 440px; overflow: hidden; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--wash); }
.control-board::before, .control-board::after { content: ''; position: absolute; background: var(--line); }
.control-board::before { top: 0; bottom: 0; left: 38%; width: 1px; }
.control-board::after { top: 62%; right: 0; left: 0; height: 1px; }
.dial { position: absolute; top: 47%; left: 38%; width: 250px; aspect-ratio: 1; border: 42px solid var(--ink); border-radius: 50%; transform: translate(-50%, -50%); }
.dial::before { content: ''; position: absolute; top: 50%; left: 50%; width: 5px; height: 104px; background: var(--command); transform: translate(-50%, -94%) rotate(38deg); transform-origin: 50% 94%; }
.dial::after { content: ''; position: absolute; top: 50%; left: 50%; width: 26px; aspect-ratio: 1; border-radius: 50%; background: var(--logic); transform: translate(-50%, -50%); }
.board-note { position: absolute; z-index: 2; right: var(--space-4); bottom: var(--space-4); width: min(270px, calc(100% - 48px)); padding: var(--space-4); border: 1px solid var(--ink); background: var(--paper); }
.board-note b { display: block; margin-bottom: var(--space-2); color: var(--command-ink); font-size: var(--text-label); letter-spacing: .12em; }
.board-note p { margin: 0; color: var(--muted); }
.section { padding-block: var(--space-section); }
.section-heading { max-width: 770px; margin-bottom: var(--space-6); }
.section-heading p:last-child { margin: var(--space-3) 0 0; color: var(--muted); }
h2 { font-size: var(--text-section); letter-spacing: -.055em; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--ink); }
.capability-card { min-height: 320px; padding: var(--space-5); border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); background: var(--paper); }
.capability-card:nth-child(2) { background: var(--wash); }
.capability-card b { display: block; margin-bottom: 70px; color: var(--logic); font-size: var(--text-label); letter-spacing: .12em; }
.capability-card h3 { font-size: var(--text-card); letter-spacing: -.035em; }
.capability-card p { color: var(--muted); }
.sequence { border-block: 1px solid var(--ink); background: var(--ink); color: var(--on-dark); }
.sequence .eyebrow { color: #9eb5ff; }
.sequence .eyebrow::before { color: #ff8a5c; }
.sequence h2 { color: var(--on-dark); }
.sequence .section-heading p:last-child { color: #d4d9e3; }
.sequence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid #4c566b; background: #4c566b; }
.sequence-grid article { min-height: 220px; padding: var(--space-4); background: var(--ink); }
.sequence-grid b { display: block; margin-bottom: 58px; color: #ff8a5c; font-size: var(--text-label); letter-spacing: .1em; }
.sequence-grid h3 { font-size: var(--text-card); }
.sequence-grid p { color: #d4d9e3; }
.environment-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.environment-option { min-height: 174px; border: 1px solid var(--ink); border-radius: var(--radius); padding: var(--space-4); background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; }
.environment-option span { display: block; margin-bottom: var(--space-5); color: var(--logic); font-size: var(--text-label); font-weight: 800; letter-spacing: .1em; }
.environment-option strong { display: block; font: 700 var(--text-card)/1.1 var(--font-display); }
.environment-option[aria-pressed='true'] { border-width: 3px; background: var(--wash); box-shadow: inset 8px 0 0 var(--logic); }
.brief-status { min-height: 1.6em; margin: var(--space-4) 0 0; font-weight: 700; }
.request { position: relative; padding-block: var(--space-section); background: var(--wash); }
.request::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 9px; background: var(--command); }
.request-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: var(--space-6); }
.request-copy p { max-width: 490px; }
.form { display: grid; gap: var(--space-3); }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--text-label); font-weight: 800; }
.field input, .field textarea { width: 100%; border: 1px solid var(--ink); border-radius: var(--radius); padding: 13px; background: var(--paper); color: var(--ink); }
.field textarea { min-height: 118px; resize: vertical; }
.field [aria-invalid='true'] { border: 3px solid var(--danger); }
.error { min-height: 1.35em; color: #6b1d00; font-size: var(--text-caption); font-weight: 800; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.request .button--reset { border-color: var(--ink); background: transparent; color: var(--ink); }
.status { min-height: 1.6em; margin: 0; font-weight: 800; }
.footer { padding-top: var(--space-6); background: var(--ink); color: #d4d9e3; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-5); padding-bottom: var(--space-5); }
.footer .brand, .footer h3 { color: var(--on-dark); }
.footer h3 { font-size: var(--text-label); letter-spacing: .08em; }
.footer p { margin: 8px 0; }
.footer-base { padding-block: var(--space-3); border-top: 1px solid #4c566b; font-size: var(--text-caption); }
:where(a, button, input, textarea):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sequence a:focus-visible, .footer a:focus-visible { outline-color: #ff8a5c; }

@media (max-width: 760px) {
  :root { --gutter: 16px; --space-section: 72px; --text-section: 36px; --text-hero: 49px; }
  .menu-toggle { display: inline-flex; }
  .nav-links { position: absolute; top: 74px; right: var(--gutter); left: var(--gutter); display: none; flex-direction: column; gap: 0; border: 1px solid var(--ink); padding: 14px; background: var(--paper); }
  .nav-links[data-open='true'] { display: flex; }
  .nav-links a { display: block; padding: 12px 0; }
  .hero-grid, .request-grid { grid-template-columns: 1fr; }
  .hero-copy { padding: 72px 0 24px; }
  .control-board { min-height: 370px; margin-bottom: 56px; }
  .dial { width: 218px; border-width: 36px; }
  .capability-grid, .sequence-grid, .environment-grid, .footer-grid { grid-template-columns: 1fr; }
  .capability-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

```

### Tailwind v4

```css
@import "tailwindcss";
@theme {
  --color-vector-canvas: #f4f1eb;
  --color-vector-ink: #172033;
  --color-vector-command: #f05a28;
  --color-vector-command-ink: #9f3a18;
  --color-vector-logic: #2457d6;
  --radius-vector-panel: 3px;
}
```