# Forge Supply — Style Reference
> A black, white, and orange editorial tool-supply portal with hard-edge grids and deliberate white space.

**Theme:** light

The visual direction translates a black, white, and orange editorial interface into an original B2B path for hand-tool sourcing: compare tool-series fit → describe application and supply needs → prepare an RFQ. It is a high-effort industry adaptation. Forge Supply is an invented name; all copy, CSS geometry, and interface patterns here are original. It does not reproduce any source identity, code, image, people, metrics, pricing, case studies, or commercial claims.

## Tokens — Colors

| Name | Value | Token | Role |
|---|---|---|---|
| Workshop Canvas | `#f7f5f0` | `--canvas` | Page field |
| Paper | `#fffefa` | `--paper` | Cards and form fields |
| Carbon Ink | `#171717` | `--ink` | Typography and structural surfaces |
| Signal Orange | `#e85d24` | `--orange` | Primary action and section marker |
| Deep Orange | `#ef713d` | `--orange-deep` | Hover state |
| Surface Orange Text | `#8d2808` | `--orange-text` | Small text, generated labels, and hover text on light or pale-orange surfaces |
| Orange Field | `#fde3d5` | `--orange-pale` | Secondary card surface |
| Grid Line | `#e9e4dc` | `--grid` | Editorial grid mark |
| Body Muted | `#625f58` | `--muted` | Supporting copy |

## Tokens — Typography

Space Grotesk directs display hierarchy; Inter keeps operational text compact. Both are local fallbacks only in this reference—do not load remote font files.

### Type Scale

| Role | Family | Weight | Size | Line Height | Letter Spacing | Token |
|---|---|---:|---:|---:|---:|---|
| caption | Inter | 700 | 12px | 1.4 | .08em | `--text-caption` |
| label | Inter | 800 | 13px | 1.35 | .08em | `--text-label` |
| body | Inter | 400 | 16px | 1.6 | normal | `--text-body` |
| lead | Inter | 400 | 20px | 1.5 | normal | `--text-lead` |
| card | Space Grotesk | 700 | 22px | 1.05 | -.05em | `--text-card` |
| section | Space Grotesk | 700 | 42px | 1 | -.06em | `--text-section` |
| hero | Space Grotesk | 700 | 92px | .92 | -.085em | `--text-hero` |

## Tokens — Spacing & Shapes

The system is intentionally spacious. Hard edges, one-pixel rules, grid lines, offset circles, and clipped geometric objects replace illustration and photography.

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

### Border Radius

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

### Layout

- **Page shell:** `--layout-max` / 1200px with `--gutter` / 28px.
- **Hero:** a 640px minimum desktop grid with original CSS geometry, not imagery.
- **Phone:** at 760px, all grids collapse to one column, gutters become 16px, and `--text-hero` becomes 48px.

## Components

### Header and Mobile Navigation
`.site-header` carries a compact, sticky navigation over the canvas. On phones, `.nav-toggle` discloses `.nav-list`; Escape, a second toggle, and a selected link close it.

### Editorial Hero
`.hero` uses a hard-grid background, one oversized orange CSS circle, and a numbered geometric panel. It frames sourcing orientation without a product image, price, inventory, or cart.

### Tool-Series Cards
`.series-grid` is a three-column ruled grid. Each `.series-card` has a category label, a concise fit statement, and an RFQ-oriented next step; it must not state specifications, stock, certification, or performance until approved facts are available.

### Application and Supply Grid
`.application-grid` presents use contexts and supply-planning topics in the dark surface. It is a conversation organizer, not proof of application compatibility or delivery capability.

### RFQ Preparation Form
`.form` requires a contact or organization, work email, and sourcing note. Invalid fields receive linked errors and first-error focus. Valid interaction is busy for 500ms, then says the RFQ was prepared locally and was not sent. It creates no network request, storage, order, quote, or lead.

### Footer
Use generic navigation and placeholders only. Do not add supplier marks, client logos, source brands, testimonials, outcomes, or contact claims.

## Do's and Don'ts

### Do

- Use orange for actions, rules, sequence cues, and focal geometry.
- Keep the B2B journey at series fit, application context, supply questions, then RFQ preparation.
- Use original CSS shapes and approved project assets only.
- Preserve visible keyboard focus, labels, errors, and reduced-motion behavior.

### Don't

- Do not add a functional cart, bag, checkout, payment, or consumer purchase path.
- Do not reuse source logos, HTML, CSS, photography, people, metrics, pricing, or case studies.
- Do not present generic series labels as SKU, stock, certification, test, compatibility, delivery, or performance facts.
- Do not imply that the local form sends, saves, or submits information.

## Surfaces

| Level | Name | Value | Purpose |
|---:|---|---|---|
| 0 | Workshop Canvas | `#f7f5f0` | Overall page field |
| 1 | Paper | `#fffefa` | Hero, cards, and inputs |
| 2 | Carbon Ink | `#171717` | Application and footer blocks |
| 3 | Signal Orange | `#e85d24` | Inquiry block and actions |

## Elevation

- Cards remain flat and are separated by one-pixel rules.
- Buttons shift two pixels on hover rather than gaining a shadow.
- The hero circle and geometric object are planar CSS shapes, not floating assets.

## Imagery

This reference uses no photography, icons, screenshots, or external files. Its grid, circle, clipped panel, and type-led numbering are original CSS geometry. Later product imagery must be licensed, project-approved, and described with fact-based alternative text.

## Layout

Desktop order is header → editorial hero → tool-series grid → application/supply grid → RFQ preparation → footer. On narrow screens the menu becomes disclosed, and every content grid stacks while retaining all primary content.

## Agent Prompt Guide

**Quick Color Reference**

- Canvas `#f7f5f0`, paper `#fffefa`, ink `#171717`, muted `#625f58`.
- Signal orange `#e85d24`; hover orange `#ef713d`; surface text orange `#8d2808`; pale orange `#fde3d5`.
- Use `#8d2808` focus on light surfaces and `#fffaf2` on dark or orange surfaces.

**Example Component Prompts**

1. **Tool sourcing hero:** Create a hard-edge, 640px desktop hero with CSS grid lines, an orange outlined circle, a numbered geometric panel, and one RFQ preparation action.
2. **Series orientation grid:** Create three ruled, flat cards with generic series labels and RFQ links. Include no claims about inventory, SKU, pricing, certification, or performance.
3. **Local RFQ form:** Validate contact-or-organization, email, and sourcing note; focus the first error; show a 500ms local busy state and explicit no-send completion.

## Similar Brands

- **Bahco** — Clear category orientation can help users scan tool families without borrowing its identity.
- **Gedore** — Industrial catalog structure illustrates the value of disciplined terminology with verified facts.
- **Facom** — Strong product-family architecture can inform navigation hierarchy without copying visual assets.
- **Wera** — Distinctive tool presentation demonstrates why owned identity and approved content matter.

## Quick Start

### CSS Custom Properties

Use this complete stylesheet as the blank-project starting point. It contains tokens, responsive layouts, named components, focus states, validation states, local-only busy feedback, and reduced-motion handling. It uses no third-party source code or assets.

```css
:root {
  --canvas:#f7f5f0; --paper:#fffefa; --ink:#171717; --muted:#625f58; --line:#d5d0c6; --orange:#e85d24; --orange-deep:#ef713d; --orange-text:#8d2808; --orange-pale:#fde3d5; --grid:#e9e4dc; --focus:#8d2808; --on-dark:#fffaf2;
  --font-display:'Space Grotesk',Arial,sans-serif; --font-body:Inter,Arial,sans-serif;
  --text-caption:12px; --text-label:13px; --text-body:16px; --text-lead:20px; --text-card:22px; --text-section:42px; --text-hero:92px;
  --space-1:8px; --space-2:12px; --space-3:16px; --space-4:24px; --space-5:32px; --space-6:48px; --space-section:112px; --layout-max:1200px; --gutter:28px; --radius:0px; --hero-min-height:640px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--canvas);color:var(--ink);font:400 var(--text-body)/1.6 var(--font-body);overflow-x:hidden} a{color:inherit} button,input,textarea{font:inherit}.shell{width:min(calc(100% - 2 * var(--gutter)),var(--layout-max));margin:auto}.skip-link{position:fixed;z-index:30;top:8px;left:8px;padding:10px 14px;background:var(--orange);color:var(--ink);transform:translateY(-170%)}.skip-link:focus{transform:translateY(0)}
.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--canvas) 94%,transparent);backdrop-filter:blur(12px)}.nav-row{min-height:72px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.brand{font:700 22px/1 var(--font-display);letter-spacing:-.07em;text-decoration:none}.brand-mark{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:8px;background:var(--orange);color:var(--ink);font-size:16px;transform:rotate(45deg)}.brand-mark b{transform:rotate(-45deg)}.nav-list{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}.nav-list a{font-size:var(--text-label);font-weight:700;text-decoration:none;text-transform:uppercase;letter-spacing:.08em}.nav-list a:hover{color:var(--orange-text)}.nav-toggle{display:none;border:1px solid var(--ink);padding:10px 12px;background:var(--paper);font-weight:700}
.hero{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--ink);background:var(--paper)}.hero:before{content:'';position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,transparent 0 49.9%,var(--grid) 50% 50.1%,transparent 50.2%),linear-gradient(var(--grid) 1px,transparent 1px);background-size:100% 100%,100% 40px}.hero:after{content:'';position:absolute;right:-10vw;top:12%;z-index:-1;width:min(47vw,620px);aspect-ratio:1;border:clamp(45px,6vw,90px) solid var(--orange);border-radius:50%;box-shadow:inset 0 0 0 1px var(--ink);transform:rotate(-16deg)}.hero-grid{min-height:var(--hero-min-height);display:grid;grid-template-columns:1.1fr .9fr;align-items:end}.hero-copy{padding:116px 0 104px;max-width:760px}.eyebrow{margin:0 0 var(--space-4);font-size:var(--text-label);font-weight:700;letter-spacing:.12em;text-transform:uppercase}.eyebrow:before{content:'// ';color:var(--orange-text)}h1,h2,h3{margin:0;font-family:var(--font-display);line-height:1;color:var(--ink)}h1{font-size:var(--text-hero);letter-spacing:-.085em;text-transform:uppercase}h1 em{font-style:normal;color:var(--orange-text)}h2{font-size:var(--text-section);letter-spacing:-.06em}.hero-copy>p:last-of-type{max-width:580px;margin:var(--space-5) 0;color:var(--muted);font-size:var(--text-lead)}.hero-object{align-self:center;justify-self:end;width:min(100%,440px);aspect-ratio:1;position:relative;border:1px solid var(--ink);background:repeating-linear-gradient(0deg,transparent 0 30px,var(--grid) 31px 32px),repeating-linear-gradient(90deg,transparent 0 30px,var(--grid) 31px 32px)}.hero-object:before{content:'01';position:absolute;top:16px;left:18px;font:700 clamp(72px,12vw,150px)/.8 var(--font-display);letter-spacing:-.12em;color:var(--orange-text)}.hero-object:after{content:'';position:absolute;right:13%;bottom:15%;width:46%;aspect-ratio:1;border:2px solid var(--ink);background:var(--paper);clip-path:polygon(0 0,100% 0,100% 25%,74% 25%,74% 100%,0 100%)}.button{display:inline-flex;align-items:center;justify-content:center;min-height:52px;border:1px solid var(--orange);padding:12px 20px;background:var(--orange);color:var(--ink);font-size:var(--text-label);font-weight:800;letter-spacing:.08em;text-decoration:none;text-transform:uppercase;transition:background .18s,transform .18s}.button:hover{background:var(--orange-deep);transform:translate(-2px,-2px)}.button--quiet{background:transparent;color:var(--ink);border-color:var(--ink)}
.section{padding-block:var(--space-section)}.section-heading{max-width:700px;margin-bottom:var(--space-6)}.section-heading p{margin:var(--space-3) 0 0;color:var(--muted)}.series-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-left:1px solid var(--ink)}.series-card{min-height:305px;padding:var(--space-5);border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);background:var(--paper)}.series-card:nth-child(2){background:var(--orange-pale)}.series-card:before{content:attr(data-index);display:block;margin-bottom:60px;color:var(--orange-text);font:800 15px/1 var(--font-display);letter-spacing:.1em}.series-card h3{font-size:var(--text-card);letter-spacing:-.05em}.series-card p{color:var(--muted)}.series-card a{font-size:var(--text-label);font-weight:800;text-decoration:none;text-transform:uppercase}.series-card a:after{content:' →';color:var(--orange-text)}
.applications{border-block:1px solid var(--ink);background:var(--ink);color:var(--on-dark)}.applications h2{color:var(--on-dark)}.applications .section-heading p{color:#d8d3ca}.application-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#65615a;border:1px solid #65615a}.application{min-height:210px;padding:var(--space-4);background:var(--ink)}.application b{display:block;margin-bottom:58px;color:#ff9b70;font:700 var(--text-label)/1 var(--font-display);letter-spacing:.12em}.application h3{color:var(--on-dark);font-size:var(--text-card);letter-spacing:-.045em}.application p{color:#d8d3ca}.process{background:var(--paper)}.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}.process-item{padding-top:18px;border-top:5px solid var(--orange)}.process-number{display:block;margin-bottom:var(--space-4);font:700 68px/.8 var(--font-display);letter-spacing:-.09em;color:var(--orange-text)}.process-item h3{font-size:var(--text-card)}
.inquiry{background:var(--orange);color:var(--ink)}.inquiry-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--space-6)}.inquiry h2{max-width:480px}.inquiry .eyebrow:before{color:var(--ink)}.form{display:grid;gap:var(--space-3)}.field{display:grid;gap:6px}.field label{font-size:var(--text-label);font-weight:800;letter-spacing:.03em}.field input,.field textarea{width:100%;border:1px solid var(--ink);border-radius:0;padding:13px;background:var(--paper);color:var(--ink)}.field textarea{min-height:112px;resize:vertical}.field [aria-invalid='true']{border:3px solid #791b00}.field-error{min-height:1.4em;color:#401000;font-size:var(--text-caption);font-weight:700}.form-status{min-height:1.6em;margin:0;font-weight:700}.inquiry .button{border-color:var(--ink);background:var(--ink);color:var(--on-dark)}.button[disabled]{cursor:wait}.site-footer{padding-top:var(--space-6);background:var(--ink);color:#d8d3ca}.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:var(--space-5);padding-bottom:var(--space-5)}.site-footer .brand{color:var(--on-dark)}.site-footer h3{color:var(--on-dark);font-size:var(--text-label);letter-spacing:.04em}.footer-base{padding-block:var(--space-3);border-top:1px solid #5c5953;font-size:var(--text-caption)}
:where(a,button,input,textarea):focus-visible{outline:3px solid var(--focus);outline-offset:3px}.inquiry :where(a,button,input,textarea):focus-visible,.site-footer :where(a):focus-visible{outline-color:#fffaf2}@media(max-width:760px){:root{--gutter:16px;--space-section:72px;--text-section:34px;--text-hero:48px}.nav-toggle{display:inline-flex}.nav-list{position:absolute;top:72px;left:var(--gutter);right:var(--gutter);display:none;flex-direction:column;align-items:stretch;gap:0;padding:var(--space-3);border:1px solid var(--ink);background:var(--paper)}.nav-list[data-open='true']{display:flex}.nav-list a{display:block;padding:var(--space-3) 0}.hero-grid,.inquiry-grid{grid-template-columns:1fr}.hero-copy{padding-block:84px 42px}.hero-object{width:72%;margin-bottom:54px;justify-self:start}.series-grid,.application-grid,.process-grid,.footer-grid{grid-template-columns:1fr}.series-card{min-height:0}.application{min-height:0}.process-grid{gap:var(--space-6)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}
```

### Tailwind v4

Optional Tailwind v4 compiler input. Keep the complete stylesheet above for component rules.

```css
@import "tailwindcss";
@theme {
  --color-canvas: #f7f5f0;
  --color-ink: #171717;
  --color-signal: #e85d24;
  --font-display: 'Space Grotesk', Arial, sans-serif;
  --font-body: Inter, Arial, sans-serif;
  --radius-control: 0px;
}
```