// corner-system.jsx — "Corner marks as system, not mark."
//
// Argument made visually:
// (1) W2 standalone — clean, scales down, reads as a glyph.
// (2) Corner registration pips live on the LAYOUT, not on the logo.
// (3) The two pieces meet across a page, never inside the mark.
//
// Six artboards:
// R6-A Specimen — the two primitives, one rule
// R6-B Scale test — W2 alone vs V1 (W2 + crop marks) at 16/32/64/120
// R6-C Letterhead — pips at the page corners, W2 in the lockup
// R6-D Business card — pips at the card bleed, W2 in the lockup
// R6-E Datasheet section block — pips framing the part-no register
// R6-F Web content card — pips as a recurring module frame
const CS_BLUE = '#003DA5';
const CS_INK = '#111111';
const CS_GREY = '#666666';
const CS_RULE = '#dcd9d2';
const CS_BG = '#f0eee9';
// ─────────────────────────────────────────────────────────────
// Primitive: page-corner registration pips.
// Renders four filled squares at the corners of its parent box.
// `inset` is the distance from the parent edge to the OUTER edge
// of the pip (in px). `size` is the pip side length.
// ─────────────────────────────────────────────────────────────
function CornerPips({ size = 8, inset = 16, color = CS_BLUE }) {
const s = { position:'absolute', width: size, height: size, background: color };
return (
);
}
// Variant: tick-style crop marks (two-line registration ticks),
// closer to printer's setup marks than filled pips. Used at
// page-scale where filled squares would feel decorative.
function CornerTicks({ length = 14, thickness = 1.25, inset = 20, color = CS_INK, gap = 6 }) {
const tickHoriz = (x, y) => ({
position:'absolute', height: thickness, width: length,
background: color, left: x, top: y,
});
const tickVert = (x, y) => ({
position:'absolute', width: thickness, height: length,
background: color, left: x, top: y,
});
return (
{/* TL */}
{/* TR */}
{/* BL */}
{/* BR */}
);
}
// ─────────────────────────────────────────────────────────────
// R6-A · Specimen — the two primitives, side by side.
// Left column: W2 mark, big, isolated.
// Right column: the four corner pips, isolated.
// Rule at the bottom: "they meet on the page, not inside the mark."
// ─────────────────────────────────────────────────────────────
function CSSpecimen() {
return (
ROUND 08 · SYSTEM SPLIT · MARK + LAYOUT PRIMITIVE
R6-A · SPECIMEN
{/* Mark column */}
PRIMITIVE 01 · MARK
W2 alone. Narrow, upright, typographic.
Carries the semiconductor read by proportion, not by
ornament. Survives 16 px. Locks up cleanly with the
wordmark with nothing extra to balance.
{/* Layout primitive column */}
PRIMITIVE 02 · LAYOUT
Corner pips. A page rule, not a logo rule.
Sit at the corners of pages, cards, and section blocks
across the system. Read as registration / crop marks
from print — the same vocabulary as a fab
datasheet.
RULE — THE TWO PRIMITIVES MEET ACROSS A LAYOUT. THEY NEVER COMBINE INSIDE THE MARK.
);
}
// ─────────────────────────────────────────────────────────────
// R6-B · Scale test
// W2 alone vs W6 (W2 + crop marks baked in) at 16 / 32 / 64 / 120 px.
// The point: at favicon / nav-bar scale, the bolted-on pips
// disappear into noise. W2 stays legible. So the pips weren't
// adding signal where it mattered — better to spend that
// surface on the layout.
// ─────────────────────────────────────────────────────────────
function CSScaleTest() {
const sizes = [16, 32, 64, 120];
const Row = ({ label, Comp, sub }) => (
{label}
{sub}
{sizes.map((s) => (
{s}px
))}
);
return (
R6-B · SCALE TEST · WHERE THE BAKED-IN PIPS GO TO DIE
16 / 32 / 64 / 120 PX
|
|
Below ~32 px the corner squares stop being legible — they smear into the
leg edges and reduce contrast around the N. Pushing the pips out to the layout
gives them room to do their job, and gives the mark room to do its.
);
}
// ─────────────────────────────────────────────────────────────
// R6-C · Letterhead with corner registration marks at the page.
// Pips live on the page; mark lives in the lockup.
// ─────────────────────────────────────────────────────────────
function CSLetterhead() {
return (
{/* Top band — lockup */}
OFFICE OF THE CORPORATE SECRETARY
TELEX 510-3211 NATLSEMI
{/* Body block — memorandum to the file, no recipient, no street */}
14 MAY 1986
MEMORANDUM FOR THE FILE
The matter referenced above has been noted and recorded.
No reply is invited or required.
Communications to the Company are not accepted by post,
telephone or facsimile. Where a response is contemplated
by these terms, it shall be made by telex or marine cable
to the address shown in the header.
For the Company,
William S. Fraser
Office of the Corporate Secretary
{/* Footer — telex + marine cable, no street */}
TELEX 510-3211 NATLSEMI
MARINE CABLE NATLSEMI NEW YORK
{/* annotation badge */}
← PIPS LIVE HERE, NOT ON THE MARK
);
}
// ─────────────────────────────────────────────────────────────
// R6-D · Business card
// Pips at card bleed. Mark in the lockup, no pips on the mark.
// ─────────────────────────────────────────────────────────────
function CSCard() {
return (
NORTH ATLANTIC
SEMICONDUCTOR
William S. Fraser
OFFICE OF THE CORPORATE SECRETARY
TELEX 510-3211 NATLSEMI
MARINE CABLE NATLSEMI NEW YORK
);
}
// ─────────────────────────────────────────────────────────────
// R6-E · Datasheet header — pips frame a register block.
// The pips behave like fab crop marks around a die: they
// bracket the part-no / package data block, not the logo.
// ─────────────────────────────────────────────────────────────
function CSDatasheetHeader() {
const Field = ({ label, value }) => (
);
return (
R6-E · DATASHEET REGISTER BLOCK
PIPS AS DIE FRAME, NOT LOGO FRAME
{/* Top lockup row */}
{/* The register block — this is where the pips live */}
PART REGISTER
NA-1804B
14-bit successive-approximation A/D converter · 200 ksps ·
on-chip 2.5 V reference · 28-pin DIP / SOIC
);
}
// ─────────────────────────────────────────────────────────────
// R6-F · Web content card module
// A repeating card on the website uses corner pips as its
// signature. The mark in the nav above stays clean (W2 only).
// ─────────────────────────────────────────────────────────────
function CSWebCards() {
const Card = ({ kicker, title, body }) => (
);
return (
{/* Nav */}
PRODUCTS
DATASHEETS
COMPANY
CONTACT
{/* Hero strip */}
PRODUCT INDEX · ANALOG · CONVERTERS
Successive-approximation A/D · 8 to 16 bit
{/* Three cards */}
ROUND 08 · W2 STANDS ALONE · CORNER PIPS PROMOTED TO LAYOUT SYSTEM
The crop-mark idea was right — but it belongs on the page, not on the mark.
W2 carries the brand. Corner pips bracket every page, card, register block
and content module across the system. Two primitives, one rule: they never
meet inside the logo.
ARTBOARDS · R6-A SPECIMEN · R6-B SCALE · R6-C LETTERHEAD ·
R6-D CARD · R6-E DATASHEET BLOCK · R6-F WEB
);
}
Object.assign(window, {
CSHero, CSSpecimen, CSScaleTest,
CSLetterhead, CSCard, CSDatasheetHeader, CSWebCards,
CornerPips, CornerTicks,
});