# Loopline Recovery — Style Reference
> Precision-led recovery planning with a luminous signal accent

**Theme:** light

Loopline Recovery is a B2B recycling solution system for teams evaluating materials, operating constraints and project fit before requesting a quotation. A quiet mineral canvas, dark technical panels and one luminous green signal create a focused path from capability orientation to a local RFQ draft.

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| Mineral Canvas | `#f2f6f5` | `--canvas` | Page background |
| Clean Paper | `#ffffff` | `--paper` | Cards and form fields |
| Carbon Ink | `#102a2a` | `--ink` | Primary text and dark sections |
| Technical Gray | `#526766` | `--muted` | Secondary text |
| Signal Mint | `#0ee6b0` | `--signal` | Indicators and focal geometry |
| Signal Deep | `#08755f` | `--signal-deep` | Primary actions and accessible links |
| Grid Line | `#c7d5d1` | `--line` | Rules and structural dividers |

## Tokens — Typography

The system uses local sans-serif fallbacks only. Wide tracking distinguishes technical labels from concise, high-weight headings.

### 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.65 | `--text-body` |
| lead | Arial | 400 | 20px | 1.5 | `--text-lead` |
| card | Arial | 700 | 25px | 1.1 | `--text-card` |
| hero | Arial | 800 | 70px | 0.98 | `--text-hero` |

## Tokens — Spacing & Shapes

The layout uses disciplined spacing, squared panels and clipped signal marks. Every group should read as an evaluation surface, not a decorative card cloud.

### 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 | 96px | `--space-section` |

### Border Radius

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

### Layout

- **Content width:** `--layout-max` / 1180px with `--gutter` / 28px.
- **Hero:** `--hero-min-height` / 650px in an asymmetric two-column grid.
- **Narrow screens:** below 760px, navigation is disclosed and all content grids stack.

## Components

### Signal Header
A compact sticky header pairs the wordmark with capability and RFQ anchors. On narrow screens it becomes a labeled disclosure controlled by button, link selection and Escape.

### Capability Spotlight
The hero combines an editorial headline with a dark technical board. A CSS-only crosshair and signal disc provide a visual focus without borrowed imagery.

### Capability Matrix
Three bordered panels describe evaluation categories such as intake review, material routing and project planning. Labels stay generic until approved operating facts are supplied.

### Material Brief Selector
Three local controls let a buyer select a broad material stream for the project brief. The active selection is visible through `aria-pressed` and a textual confirmation.

### Local RFQ Form
The form collects company, work email and project requirements, validates locally, focuses the first error and presents a local-only confirmation. It performs no network request and stores no data.

## Do's and Don'ts

### Do
- Keep the B2B journey at capability orientation → material stream → project brief → local RFQ confirmation.
- Use Signal Mint for indicators and Signal Deep for readable primary actions.
- Keep form labels, errors, keyboard focus and reduced-motion behavior visible.
- Replace generic planning language only with approved, supportable business facts.

### Don't
- Do not connect the reference form to email, CRM, database or automatic submission.
- Do not imply accepted materials, processing capacity, certifications, recovery rates or turnaround commitments without approval.
- Do not add cart, checkout, payment or consumer-purchase controls.
- Do not reuse third-party logos, photographs, testimonials or project claims.

## Surfaces

| Level | Name | Value | Purpose |
|---:|---|---|---|
| 0 | Mineral Canvas | `#f2f6f5` | Overall page field |
| 1 | Clean Paper | `#ffffff` | Cards and form inputs |
| 2 | Carbon Ink | `#102a2a` | Technical matrix and footer |
| 3 | Signal Wash | `#d9fff5` | RFQ and selected-state field |

## Elevation

Panels remain flat and are separated by one-pixel rules. Primary buttons shift by two pixels on hover; focus uses a three-pixel outline instead of shadow.

## Imagery

Use CSS geometry, approved material photography or licensed operational imagery. The starter build uses only a signal disc, grid lines and crosshair geometry, so it remains usable before an image library is approved.

## Layout

Desktop order is header → capability spotlight → capability matrix → material brief selector → local RFQ → footer. Narrow screens preserve that sequence in one column, keeping the selected material and form status adjacent to the RFQ.

## Agent Prompt Guide

**Quick Color Reference**

Use Mineral Canvas `#f2f6f5`, Carbon Ink `#102a2a`, Signal Mint `#0ee6b0`, Signal Deep `#08755f` and Grid Line `#c7d5d1`. Keep claims generic and request-led until approved project facts are available.

**Example Component Prompts**

1. **Capability spotlight:** Create a 650px asymmetric hero with a CSS signal disc, crosshair board and one RFQ action.
2. **Material selector:** Create three ruled controls with visible pressed state and a local project-brief summary.
3. **Local RFQ:** Validate company, work email and project requirements, focus the first error and confirm locally without sending or saving data.

## Similar Brands

- **Tomra** — technical clarity can inspire information hierarchy without borrowing identity.
- **Veolia** — disciplined environmental-service grouping can inform navigation without copying visuals.
- **Sims Lifecycle Services** — enterprise material-flow framing can guide B2B content structure.

## Quick Start

### CSS Custom Properties

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

```css
:root {
  --canvas: #f2f6f5;
  --paper: #ffffff;
  --ink: #102a2a;
  --muted: #526766;
  --signal: #0ee6b0;
  --signal-deep: #08755f;
  --line: #c7d5d1;
  --wash: #d9fff5;
  --danger: #8b2500;
  --focus: #5b21b6;
  --on-dark: #ffffff;
  --font-display: Arial, sans-serif;
  --font-body: Arial, sans-serif;
  --layout-max: 1180px;
  --gutter: 28px;
  --hero-min-height: 650px;
  --radius: 4px;
  --text-caption: 12px;
  --text-label: 13px;
  --text-body: 16px;
  --text-lead: 20px;
  --text-card: 25px;
  --text-section: 46px;
  --text-hero: 70px;
  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-section: 96px;
}

* { 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.65 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(--signal); color: var(--ink); 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(242, 246, 245, .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: -.04em; text-decoration: none; }
.brand-mark { width: 23px; height: 23px; background: var(--signal-deep); clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 30% 100%, 0 70%); }
.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; }
.spotlight { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--paper); }
.spotlight-grid { min-height: var(--hero-min-height); display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: var(--space-6); }
.hero-copy { padding-block: 82px; }
.kicker { margin: 0 0 var(--space-4); color: var(--signal-deep); font-size: var(--text-label); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.kicker::before { content: ''; display: inline-block; width: 18px; height: 3px; margin: 0 10px 4px 0; background: var(--signal); }
h1, h2, h3 { margin: 0; font-family: var(--font-display); line-height: 1.05; }
h1 { max-width: 720px; font-size: var(--text-hero); letter-spacing: -.065em; text-transform: uppercase; }
h1 em { color: var(--signal-deep); 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(--signal-deep); border-radius: var(--radius); padding: 11px 18px; background: var(--signal-deep); 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); transform: translate(-2px, -2px); }
.button--quiet { background: transparent; color: var(--signal-deep); }
.signal-board { position: relative; min-height: 430px; overflow: hidden; border: 1px solid var(--ink); border-radius: var(--radius); background: var(--ink); color: var(--on-dark); }
.signal-board::before, .signal-board::after { content: ''; position: absolute; z-index: 1; background: rgba(255, 255, 255, .22); }
.signal-board::before { top: 0; bottom: 0; left: 50%; width: 1px; }
.signal-board::after { top: 50%; right: 0; left: 0; height: 1px; }
.signal-disc { position: absolute; top: 50%; left: 50%; width: 260px; aspect-ratio: 1; border: 48px solid var(--signal); border-radius: 50%; transform: translate(-50%, -50%); }
.signal-note { position: absolute; z-index: 2; right: var(--space-4); bottom: var(--space-4); width: min(260px, calc(100% - 48px)); padding: var(--space-4); border: 1px solid var(--signal); background: var(--ink); }
.signal-note b { display: block; margin-bottom: var(--space-2); color: var(--signal); font-size: var(--text-label); letter-spacing: .12em; }
.signal-note p { margin: 0; color: #d8e5e1; }
.section { padding-block: var(--space-section); }
.section-heading { max-width: 760px; 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: 68px; color: var(--signal-deep); 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); }
.technical { border-block: 1px solid var(--ink); background: var(--ink); color: var(--on-dark); }
.technical .kicker { color: var(--signal); }
.technical h2 { color: var(--on-dark); }
.technical .section-heading p:last-child { color: #c9d9d5; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid #46615f; background: #46615f; }
.process-grid article { min-height: 220px; padding: var(--space-4); background: var(--ink); }
.process-grid b { display: block; margin-bottom: 58px; color: var(--signal); font-size: var(--text-label); letter-spacing: .1em; }
.process-grid h3 { font-size: var(--text-card); }
.process-grid p { color: #c9d9d5; }
.material-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.material-option { min-height: 170px; border: 1px solid var(--ink); border-radius: var(--radius); padding: var(--space-4); background: var(--paper); color: var(--ink); text-align: left; cursor: pointer; }
.material-option span { display: block; margin-bottom: var(--space-5); color: var(--signal-deep); font-size: var(--text-label); font-weight: 800; letter-spacing: .1em; }
.material-option strong { display: block; font: 700 var(--text-card)/1.1 var(--font-display); }
.material-option[aria-pressed='true'] { border-width: 3px; background: var(--wash); box-shadow: inset 8px 0 0 var(--signal); }
.brief-status { min-height: 1.6em; margin: var(--space-4) 0 0; font-weight: 700; }
.rfq { padding-block: var(--space-section); background: var(--signal); }
.rfq-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: var(--space-6); }
.rfq .kicker { color: var(--ink); }
.rfq-copy p { max-width: 480px; }
.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: #5d1b00; font-size: var(--text-caption); font-weight: 800; }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rfq .button { border-color: var(--ink); background: var(--ink); }
.rfq .button--reset { 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: #c9d9d5; }
.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 #46615f; font-size: var(--text-caption); }
:where(a, button, input, textarea):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.technical a:focus-visible, .footer a:focus-visible { outline-color: var(--signal); }

@media (max-width: 760px) {
  :root { --gutter: 16px; --space-section: 72px; --text-section: 36px; --text-hero: 48px; }
  .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; }
  .spotlight-grid, .rfq-grid { grid-template-columns: 1fr; }
  .hero-copy { padding: 72px 0 24px; }
  .signal-board { min-height: 360px; margin-bottom: 56px; }
  .signal-disc { width: 220px; border-width: 38px; }
  .capability-grid, .process-grid, .material-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-loopline-canvas: #f2f6f5;
  --color-loopline-ink: #102a2a;
  --color-loopline-signal: #0ee6b0;
  --color-loopline-action: #08755f;
  --radius-loopline-panel: 4px;
}
```