# Devin — B2B Connector Systems Style Reference
> Calm editorial software direction for industrial connector and terminal teams.

**Theme:** light

Devin uses a warm paper field, substantial navy typography, cobalt actions, and coral accents to make technical B2B services feel direct and organized. The journey supports evaluation, a project conversation, and a locally validated RFQ; it does not include retail purchase controls.

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| Paper | `#f8f6f1` | `--canvas` | Main canvas |
| Navy | `#10233f` | `--ink` | Headlines and dark bands |
| Cobalt | `#315ecf` | `--action` | Primary actions and active signals |
| Coral | `#f07f68` | `--coral` | Eyebrows and inquiry surface |
| Mist | `#e8eefb` | `--mist` | Process background |
| Slate | `#5d6880` | `--muted` | Supporting text |
| Rule | `#cfd5df` | `--rule` | Borders and divisions |

## Tokens — Typography

Use `Inter, ui-sans-serif, system-ui, sans-serif`; local system fallbacks keep the build self-contained. Headlines are compact, heavy and tightly tracked; body copy is open and readable.

### Type Scale

| Role | Family | Weight | Size | Line Height | Token |
|---|---|---:|---:|---:|---|
| eyebrow | Inter | 800 | 11px | 1.2 | `--type-eyebrow` |
| body | Inter | 400 | 16px | 1.55 | `--type-body` |
| lead | Inter | 400 | 18px | 1.55 | `--type-lead` |
| card | Inter | 700 | 27px | 1.03 | `--type-card` |
| display | Inter | 800 | 72px | 1.03 | `--type-display` |

## Tokens — Spacing & Shapes

Comfortable spacing, square panels, fine rules, and two circular hero orbits create a disciplined systems aesthetic.

### Spacing Scale

| Name | Value | Token |
|---|---:|---|
| compact | 12px | `--space-compact` |
| control | 16px | `--space-control` |
| card | 24px | `--space-card` |
| section | 112px | `--space-section` |

### Border Radius

| Element | Value | Token |
|---|---:|---|
| cards | 0px | `--radius` |
| controls | 0px | `--radius` |

### Layout

- **Page shell:** `--layout-max` / 1180px with `--gutter` / 32px.
- **Hero:** `--hero-height` / 640px at desktop.
- **Phone:** below 760px, all multi-column grids become one column.

## Components

### Header and Mobile Navigation
The sticky header pairs the brand with Services, Work, Pricing and Contact. Below 760px, a labelled menu button discloses navigation; Escape closes it and returns focus to the trigger.

### Evaluation Hero
The hero places a clear operating-system message beside a local WebP workflow illustration and circular CSS orbits. Primary action goes to the project inquiry.

### Service Cards
Three numbered, ruled cards describe discovery, product design and connected operations. Cards communicate capability themes without unverified specification claims.

### Case Panels
Two flat panels use cobalt and coral to introduce connector-platform and terminal-experience scenarios, each ending in a discussion link.

### Local Inquiry Form
The form has visible labels, inline required-field messages, a disabled sending state, and a local completion message. It stores and transmits nothing.

## Do's and Don'ts

### Do

- Use cobalt for one primary action at a time.
- Preserve visible keyboard focus and descriptive labels.
- Use navy, paper, coral and mist in large flat editorial bands.
- Keep the path oriented around service evaluation and an RFQ conversation.

### Don't

- Do not add a cart, checkout, payment UI, price promotion or retail product grid.
- Do not use gradients, drop shadows, or rounded-card decoration.
- Do not load remote fonts, analytics, embeds, or form endpoints.
- Do not present fictional metrics or case outcomes as company proof.

## Surfaces

| Level | Name | Value | Purpose |
|---|---|---|---|
| 0 | Paper canvas | `#f8f6f1` | Default page field |
| 1 | Mist process | `#e8eefb` | Structured process section |
| 2 | Navy case | `#10233f` | Work and footer bands |
| 3 | Coral inquiry | `#f07f68` | Contact conversion zone |

## Elevation

- **Service cards:** 1px `--rule` border, no shadow.
- **Buttons:** flat cobalt fill, no elevation.
- **Header:** sticky positioning only; no decorative shadow.

## Imagery

Use the local `assets/devin-hero.webp` workflow illustration as a contained hero visual over CSS orbit rings. Raster assets are WebP and decorative marks are SVG or CSS. Alt text describes the illustration rather than repeating nearby copy.

## Layout

Stack the sticky header, split hero, proof strip, service cards, dark case panels, four-step process, engagement cards, coral inquiry form, and footer. The desktop hero is 1fr/.88fr; services and engagement models use three columns; the process uses four columns; mobile uses one-column reading order.

## Agent Prompt Guide

**Quick Color Reference**

- Background: `#f8f6f1` paper and `#10233f` navy bands.
- Text: `#10233f` on light surfaces and white on navy.
- Border: `#cfd5df` hairline rules.
- Accent: `#315ecf` cobalt action and `#f07f68` coral inquiry.

**Example Component Prompts**

1. **B2B Service Card:** white or paper surface, 1px rule, 24px padding, 27px navy headline, short supporting copy, and an inquiry link.
2. **Primary Inquiry Button:** cobalt `#315ecf`, white 700/14px label, square corners, 13px by 20px padding, arrow suffix.
3. **Process Step Row:** mist background, four ruled columns, 11px cobalt number, 25px navy heading, and concise supporting copy; stack at 760px.

## Similar Brands

- **IDEO** — outcome-oriented consultancy storytelling with editorial hierarchy.
- **Work & Co** — restrained digital-service presentation and portfolio rhythm.
- **Instrument** — systems-focused product direction with strong typography.
- **Base Design** — layout-first studio composition and color blocking.

## Quick Start

Use the standalone implementation block for a local build and the Tailwind block for token registration.

### CSS Custom Properties

```css
:root {
  --canvas: #f8f6f1;
  --surface: #ffffff;
  --ink: #10233f;
  --action: #315ecf;
  --coral: #f07f68;
  --mist: #e8eefb;
  --muted: #5d6880;
  --rule: #cfd5df;
  --font-heading: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --type-eyebrow: 11px;
  --type-body: 16px;
  --type-lead: 18px;
  --type-card: 27px;
  --type-display: 72px;
  --space-compact: 12px;
  --space-control: 16px;
  --space-card: 24px;
  --space-section: 112px;
  --layout-max: 1180px;
  --gutter: 32px;
  --radius: 0px;
  --hero-height: 640px;
}
.shell { width: min(var(--layout-max), calc(100% - (var(--gutter) * 2))); margin-inline: auto; }
.button { display: inline-flex; gap: 13px; padding: 13px 20px; background: var(--action); color: var(--surface); font: 700 14px/1 var(--font-body); text-decoration: none; }
.service-card { border: 1px solid var(--rule); padding: 24px; background: var(--surface); }
@media (max-width: 760px) { :root { --gutter: 16px; --hero-height: 480px; } .split-grid, .service-grid, .process-grid { grid-template-columns: 1fr; } }
```

### Tailwind v4

```css
@theme {
  --color-canvas: #f8f6f1;
  --color-surface: #ffffff;
  --color-ink: #10233f;
  --color-action: #315ecf;
  --color-coral: #f07f68;
  --color-mist: #e8eefb;
  --color-muted: #5d6880;
  --color-rule: #cfd5df;
  --font-heading: Inter, ui-sans-serif, system-ui, sans-serif;
  --font-body: Inter, ui-sans-serif, system-ui, sans-serif;
  --spacing-layout-max: 1180px;
  --spacing-gutter: 32px;
  --radius-system: 0px;
  --spacing-hero-height: 640px;
}
```