Design

Yoke identity and interface guide

Yoke connects equipment through small hardware boxes and Ethernet. Its identity should feel like the equipment and tools an operator can depend on: clear, quiet, and easy to identify. Use the same name and mark on documentation, interfaces, and proposed endpoint enclosures.

Yoke wordmark

Name and voice

Write Yoke in prose. Use yoke for commands, package names, and code; use Yoke in the outlined website wordmark. Existing YOKE equipment labels remain valid. The short line is USB, HDMI and IR over Ethernet. Describe the USB product as two hardware boxes: one beside the USB device, one connected by USB to the computer. The selected prototype uses Radxa ZERO 3E and targets USB 2 first. The USB design is the authority for that choice.

Name the equipment, cables, and action. Explain the product before its implementation. On product pages, say "USB device", "Yoke box", "Ethernet switch", "computer", and "pair". Keep terms such as "control plane", "payload", "intent", "producer", "consumer", and "warden" in technical reference pages. Do not use vague slogans such as "Connections, made explicit" or "A connection should follow the task". Keep commands, endpoint IDs, error messages, and measured units exact. Distinguish configured pairing, backend readiness, and independently observed media. Describe proposed hardware as proposed until a documented bench result supports a stronger claim. Avoid decorative slogans in operational output.

Mark and source assets

The mark is a symmetric yoke: two equal uprights join one lower stem. Its shape references paired endpoints and a shared link. It is drawn as one solid silhouette so the same geometry works on screen and on a part.

Asset Use
yoke-mark.svg Canonical monochrome geometry; CAD import, engraving, and single-color reproduction
yoke-lockup.svg Mark and outlined Instrument Sans wordmark; site header, README, and document covers
favicon.svg Small browser icon, with a quiet neutral background
site.css Authoritative interface color, type, spacing, and responsive tokens

yoke-mark.svg is the only geometry authority for the symbol. It has a 0 0 32 32 viewBox and one closed, black filled path. It contains no font, stroke, transformation, embedded image, or external reference. The visual bounds are x = 4…28, y = 3…29: 24 units wide and 26 units tall. Arms, curved band, and stem are 6 units thick. The inner and outer arcs have radii of 6 and 12 units. Do not replace it with a typed character.

The lockup and favicon repeat the canonical path as presentation derivatives. Their first symbol path must match the canonical path exactly; the asset test checks this. The title-case wordmark is outlined Instrument Sans at weight 620. Its geometry is a web presentation asset; it is independent of the canonical manufacturing mark and does not require an installed font. Both the site and the lockup support the system's light or dark preference without downloading assets.

Use the mark in one solid foreground color. Preserve its proportions and open upper center. Do not outline, stretch, tilt, animate, add a gradient, or enclose it in a new badge. Use the supplied favicon for browser contexts. Leave at least one band width (6 source units) clear around the visible mark in normal layouts. The SVG canvas alone supplies only part of that clear space. In a compact application icon, the supplied canvas is the minimum padding. Use the lockup at 104 CSS pixels wide or larger and the standalone mark at 24 CSS pixels wide or larger. The favicon is the small size exception.

Color

The palette pairs warm offwhite with charcoal and one restrained cobalt accent. Product pages use space, type, and device illustrations to explain Yoke. Documentation uses the same identity at a quieter reading scale. Cobalt identifies links, primary actions, and selected states; it is not an operational success indicator. Status always needs words as well as color.

Role / CSS token Light Dark
Heading and identity / --ink #17202A #F3F4F6
Body text / --text #39424D #C6CBD2
Secondary text / --muted #626B76 #9AA4B2
Page / --paper #F8F7F4 #15191F
Elevated surface / --surface #FFFFFF #1B2028
Quiet panel / --panel #EEEDE9 #202630
Decorative rule / --line #D9DCE0 #353D49
Selection surface / --accent #E8EEFC #223354
Text on selection / --accent-ink #244D9D #C6D6FF
Link / --link #2452BC #A2BDFF
Identity accent and focus / --cobalt #315FCD #82A7FF
Inline code / --code #EEEFEF #262E39
Research notice / --warning #F3EEE0 #302E27
Code block / --code-bg #202732 #10141B
Code text / --code-text #ECF0F7 #E5EBF7
Primary action / --button-bg #2452BC #A2BDFF
Action text / --button-text #FFFFFF #142342

Normal text needs at least 4.5:1 contrast against its actual surface. Focus indicators and interactive boundaries need at least 3:1. --line supplies decorative separators; input boundaries use --muted. Prose links remain underlined. Keyboard focus uses a visible 3-pixel outline with space around it. Navigation identifies the current page through aria-current, weight, and a non-color cue.

Typography and layout

The website serves Instrument Sans locally from site/assets/fonts. Its full variable upright and italic fonts preserve the upstream glyph set and support weight 400–700. They are redistributed under the SIL Open Font License 1.1. The font source and conversion are recorded beside the asset. Arial and Helvetica provide fallbacks. Commands and identifiers use the local monospace stack. No external runtime resources or font services are used.

Product headings use weight 500, tight tracking, and generous whitespace. The large opening statement belongs to the product page; documentation headings stay smaller. Body copy uses regular weight and a 1.65 line height. Keep a readable documentation measure, short paragraphs, and technical tables that scroll in their own boxes. Do not shrink the page to fit code.

The product layout has no documentation sidebar. Its opening pairs a plain product statement with an illustration of familiar devices and connections. Describe hardware illustrations as concepts. Follow with broad editorial sections, clear connection paths, and concrete uses. Avoid decorative terminal windows, dashboard furniture, and repeated stacks of small cards.

Documentation has curated navigation, a hub with local search, breadcrumbs, on-page headings, and previous/next links. The 760-pixel navigation breakpoint is shared with site.js. Preserve keyboard access after viewport changes and when JavaScript is unavailable. Use 4-pixel spacing steps, 1-pixel rules, restrained 4–7-pixel corner radii, and no decorative shadows.

Diagrams use the surrounding palette and clear labels. Give every image a useful alternative description and every inline diagram an accessible title and description. Distinguish endpoint media from control traffic. An interactive concept must identify its simulated behavior and retain a useful static explanation without JavaScript. Respect reduced-motion preferences. Do not give the identity mark an operational status meaning.

Equipment and CAD reproduction

Import the canonical yoke-mark.svg, rather than a lockup or screenshot. Its black area is the intended solid or recessed region. SVG coordinates run down the page; CAD may need a Y-axis flip to keep the upright mark facing outward. Verify the assembled exterior view, scale, and orientation before export.

For the proposed USB housing R2 lid, use a monochrome recessed mark with 8 mm visible width, 8.667 mm visible height, and 0.45 mm depth. The SVG scale is 8/24 = 1/3 mm per source unit, so the band is 2 mm wide. Place it on a clear exterior region away from vents, wall edges, fasteners, connector openings, and required engineering labels. The housing source owns the exact position and records how it imports the mark.

Use at least 1.2 mm positive features and negative clearances in future FDM applications, and prefer the 8 mm mark or larger. These are conservative design dimensions, not a claim of a validated printer/material finish. Review the sliced first layers and recess before printing. Use one material color; no color-change or extra print job is required for recognition. Keep the mark independent of revision IDs, port labels, electrical ratings, and safety markings. An engraving does not establish a part's mechanical or electrical fitness.

The R1 enclosure retains its existing YOKE lettering and released geometry. Branding revisions belong in a new CAD revision; never revise a released artifact or a running print to apply an identity update. A future revision that changes the mark must deliberately update its source reference and reproduce the derivative asset check.

Terminal and code use

Keep command output plain, compact, and useful when copied into an issue. Do not add a logo banner, forced ANSI color, Unicode art, or animation to a CLI. In human documentation, use yoke pair …, yoke status, and yoke snoop exactly as commands. Keep endpoint IDs in monospace, and show status as a word: active, pending, or error, with the backend detail when it matters.

Brand colors may decorate a terminal or editor theme, but output must remain understandable in monochrome and when redirected. Naming and appearance do not alter YWP/1 frames, authentication, wire values, configuration keys, exit codes, or protocol behavior. Protocol changes remain governed by the normative wire specification.