Vector Relay B2B industrial-control planning interface preview — Vector Relay — Style Reference · Source preview ↗

Vector Relay — Style Reference

Structured industrial-control planning with an orange command signal

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.

https://bootstrapmade.com

Color Palette

Implementation tokens for this adaptation; use the foreground/background pairs specified in DESIGN.md.

Reference colors

Typography

Font sizes and roles follow the delivered implementation. Check the font-provider requirements in Quick Start before production use.

Type Scale

hero72px · 800 · 0.98
card25px · 700 · 1.1
lead20px · 400 · 1.5
body16px · 400 · 1.6
label13px · 800 · 1.35
caption12px · 800 · 1.4

Fonts

Font family

Weights: 800 · 400 · 700
Sizes: 12–72px · 6 values
Line heights: 0.98–1.6 · 6 values
Fallback: sans-serif

caption / label / body / lead / card / hero

Spacing & Shape

Spacing

Purpose	Value	Preview
Density
Base unit
Content width
Hero
Narrow screens

Border Radius

Purpose	Value	Preview
panels
controls

Full spacing scale

1 --space-1
2 --space-2
3 --space-3
4 --space-4
5 --space-5
6 --space-6
section --space-section

Guidelines

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.

Design.mdMarkdown

DESIGN-reference-0fa5ee2aebf6.md

# 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;
}
```