Mark & lockup
The nx ligature — a constant ink n crossed by a per-product accent x — plus family lockups, including SkyONEx's companion-mark form.
Preview
Product lockup Prefix as ink text + the ligature standing in for "NX".
Check
<span class="nx-lockup" style="font-size:20px" aria-label="CheckNX"><span class="nx-lockup__word">Check</span><span class="nx-mark" data-variant="check" aria-hidden="true"></span></span><NxLockup product="check" size={20} />API
React props (NxKit)
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
variant | "nx"|"ord"|"check"|"point"|"cert"|"file"|"firm"|"sky" | "nx" | nx = neutral parent (spectrum x); others colour the x. | |
animated | boolean | false | Draw-on when scrolled into view; respects reduced-motion. | |
tight | boolean | false | Crop viewBox to the glyph bbox for inline/lockup use. | |
title | string | "NX" | Accessible label. |
Classes
| Class | Description |
|---|---|
.nx-mark | SVG wrapper |
.nx-lockup | Product word + tight mark, direction:ltr always |
.nx-lockup--sky | SkyONEx companion-mark composition |
.nx-lockup__word | 780/-0.02em ink text |
Accessibility
- The lockup's accessible name is the full product name via aria-label; the inline SVG is aria-hidden.
- All mark animation is gated behind prefers-reduced-motion.
Do / Don’t
- Do: Use NxMark tight inside text (lockups); square elsewhere.Don’t: Don't recolour the mark's n or add a per-product glyph — differentiation is accent + wordmark only.