Loopline Recovery B2B recycling capability interface preview — Loopline Recovery — Style Reference · Source preview ↗

Loopline Recovery — Style Reference

Precision-led recovery planning with a luminous signal accent

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.

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

hero70px · 800 · 0.98
card25px · 700 · 1.1
lead20px · 400 · 1.5
body16px · 400 · 1.65
label13px · 800 · 1.35
caption12px · 800 · 1.4

Fonts

Font family

Weights: 800 · 400 · 700
Sizes: 12–70px · 6 values
Line heights: 0.98–1.65 · 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 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.

Design.mdMarkdown

DESIGN-reference-458c034fe8ea.md

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