Atlas collected source screenshot — Northline Interconnect — Style Reference · Source preview ↗

Northline Interconnect — Style Reference

A black, white, and orange B2B connector-sourcing portal with hard-edge grids and deliberate white space.

The visual direction translates a black, white, and orange editorial interface into an original B2B path for connectors, terminals, and accessories: orient by interconnect family → describe application and supply requirements → prepare an RFQ. It is a high-effort industry adaptation. Northline Interconnect 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, case studies, commercial terms, or claims.

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

hero92px · 700 · .92
section42px · 700 · 1
card22px · 700 · 1.05
lead20px · 400 · 1.5
body16px · 400 · 1.6
label13px · 800 · 1.35
caption12px · 700 · 1.4

Fonts

Font family

Weights: 700 · 800 · 400
Sizes: 12–20px · 4 values
Line heights: 1.35–1.6 · 4 values
Fallback: Arial, sans-serif

caption / label / body / lead

Font family

Weights: 700
Sizes: 22–92px · 3 values
Line heights: 0.92–1.05 · 3 values
Fallback: Arial, sans-serif

card / section / hero

Spacing & Shape

Spacing

Purpose	Value	Preview
Density
Base unit
Page shell
Hero
Phone

Border Radius

Purpose	Value	Preview
cards
controls
panels

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

Use orange for actions, rules, sequence cues, and focal geometry.
Keep the B2B journey at interconnect-family orientation, 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 turn the technical procurement journey into a direct consumer transaction.
Do not reuse source logos, HTML, CSS, photography, people, metrics, commercial terms, 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.

Design.mdMarkdown

DESIGN-reference-f57090d9aa54.md

# Northline Interconnect — Style Reference
> A black, white, and orange B2B connector-sourcing 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 connectors, terminals, and accessories: orient by interconnect family → describe application and supply requirements → prepare an RFQ. It is a high-effort industry adaptation. Northline Interconnect 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, case studies, commercial terms, or 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 technical sourcing orientation without presenting unverified product, stock, or commercial facts.

### Interconnect Family Cards
`.series-grid` is a three-column ruled grid. Each `.series-card` has a family label, a concise application-orientation 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 interconnect-family orientation, 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 turn the technical procurement journey into a direct consumer transaction.
- Do not reuse source logos, HTML, CSS, photography, people, metrics, commercial terms, 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 → interconnect-family 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. **Interconnect 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. **Family orientation grid:** Create three ruled, flat cards with generic connector-family labels and RFQ links. Include no claims about inventory, SKU, commercial terms, certification, compatibility, 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

- **TE Connectivity** — Broad interconnect taxonomies illustrate why family and application navigation must remain distinct; do not borrow its identity.
- **Molex** — Deep product architecture shows the value of disciplined terminology backed by approved facts.
- **Amphenol** — Multi-market interconnect organization can inform hierarchy without copying names, assets, or claims.
- **Phoenix Contact** — Technical selection paths demonstrate why owned identity and verified compatibility data 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}.hero:after{right:-90vw;top:12%;width:140vw;opacity:.28}.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;
}
```