Asset Library

<!-- Real navigation surface — wrap in <a href> AND add the          -->
<!-- .brand-lockup--back modifier so the chevron→back-arrow hover    -->
<!-- swap fires. Catalog previews omit the modifier and stay static. -->
<a href="/" class="brand-lockup brand-lockup--back" aria-label="Back to lifi.fi">
  <span class="brand-lockup__glyph">
    <svg class="brand-lockup__glyph-idle"><!-- LI.FI mark --></svg>
    <svg class="brand-lockup__glyph-hover"><!-- back arrow --></svg>
  </span>
  <svg class="brand-lockup__wordmark"><!-- LI.FI letters --></svg>
  <span class="brand-lockup__label">Playground</span>
</a>

• One label per surface. Each LI.FI sub-product surface owns exactly one label string. Don't stack multiple labels (e.g. "Playground · Beta") — use a separate chip primitive for status modifiers.
• Wrap in <a href> + add .brand-lockup--back when it's an interactive back-link. The hover swap (chevron → back-arrow) reads as "click here to return to LI.FI" only on real navigation surfaces. Static identity (footer brand, marketing hero, catalog previews) uses bare .brand-lockup — no modifier, no swap, no implied interactivity.
• Match the navbar's own logo via display: none. When the lockup lives inside a sub-product chrome (rail, drawer, sidebar), hide the host page's .navbar-site__logo so the brand identity reads from one place per surface.
• Never restyle the wordmark. No outlines, shadows, gradients, or font swaps — the LI.FI letters are a brand asset, not a styled text element.
• Sub-product label is mono uppercase. Same recipe across every sub-product so the family reads as a system. Don't introduce per-product label fonts or weights.
• Below 720px, the label hides. The mark + wordmark continue to identify the brand; sub-product context is implicit on small screens. Don't author override media queries for individual sub-products.

CSS: styles.css — search for .brand-lockup.
Consumers: playground.html (rail header), ds-nav.js (DS catalog navbar). Future LI.FI sub-products import the same primitive.
Tokens: var(--space-24), var(--space-4), var(--space-2), var(--text-body), var(--font-mono), var(--text-primary), var(--text-muted), var(--text-secondary).
Spec: design/components/imagery.md → ### Brand lockup

<!-- Jumper variant — same slot anatomy as the LI.FI lockup. Add       -->
<!-- .brand-lockup--jumper (sub-product label renders in Urbanist +    -->
<!-- accent-2 purple). The SVG fills are token-driven so the mark      -->
<!-- flips with the mode: var(--jumper-indigo) body + wordmark,        -->
<!-- var(--jumper-purple) accent piece + label. Never bake the hex.    -->
<a href="/" class="brand-lockup brand-lockup--jumper brand-lockup--back" aria-label="Back to jumper.xyz">
  <span class="brand-lockup__glyph">
    <svg class="brand-lockup__glyph-idle"><!-- Jumper mark · logos/jumper/jumper-mark.svg --></svg>
    <svg class="brand-lockup__glyph-hover"><!-- back arrow --></svg>
  </span>
  <svg class="brand-lockup__wordmark" viewBox="29 0 89 25"><!-- JUMPER letters --></svg>
  <span class="brand-lockup__label">Pass</span>
</a>

• Tokens, never literals. The mark's two tones are var(--jumper-indigo) (body + wordmark) and var(--jumper-purple) (accent piece) — mode-paired to Jumper's own published light/dark tokens. Baking #31007A / #8700B8 into a consumer freezes the logo in light mode; the hex literals exist only as var() fallbacks inside the asset files so <img>/downloaded copies stay brand-correct.
• One shared primitive, one modifier. Jumper lockups compose .brand-lockup--jumper onto the same slot anatomy as LI.FI. Don't fork a Jumper-specific lockup component — the modifier owns exactly three label deltas (Urbanist typography, accent-2 colour, optical baseline nudge), and everything else inherits.
• Sub-product naming: wordmark + label. JumperPass / JumperScan / JumperLearn render as the JUMPER wordmark + a quiet sub-product label (Pass / Scan / Learn) — same pattern as LI.FI Playground. Don't typeset the compound name ("JumperPass") as a single wordmark.
• Mark crops come from the canonical files. Reach for jumper-mark.svg (viewBox 0 0 24 25) for the glyph alone and jumper-lockup-stacked.svg for square slots — never crop the horizontal lockup's viewBox by hand.
• Never restyle the wordmark. No outlines, shadows, gradients, or font swaps — the JUMPER letters are path-based brand assets, not styled text.
• Theme presets are a separate channel. jumper-1 / jumper-2 in the Theme Composer re-theme SURFACES with Jumper accents; the logo tokens here are brand constants that don't move when a user composes a theme. Don't wire the logo fills to --accent-*.

Assets: logos/jumper/jumper-mark.svg · logos/jumper/jumper-lockup.svg · logos/jumper/jumper-lockup-stacked.svg.
CSS: styles.css — search .brand-lockup--jumper (modifier) and --jumper-indigo (brand tokens, dark in :root / light in [data-theme="light"]).
Export: shared.js → initBrandLockupExport() — per-brand geometry via the BRANDS map (data-lockup-brand="jumper").
Typography: var(--font-jumper) (Urbanist) — see Foundations → Typography.
Theme presets: presets.js → jumper-1 / jumper-2.
Spec: design/components/imagery.md → ### Brand lockup

• Single ink, always. Black on light, white on dark, --text-primary in-product. Never accent colours, never gradients, never two-tone — the LI.FI logo's monochrome restraint is its identity.
• Respect the ½H clear space. No text, icons, other logos, or container edges inside the zone. When a slot can't honour it, the slot is too small — drop to a smaller variant rather than crowding.
• Ship the canonical files. logos/lifi/ is the source for all three variants. Never crop a lockup's viewBox down to the mark (the mark file exists for that) and never redraw — the mark's corner curves paint past intuition (x≈38.628 in the 40-wide box).
• No transforms, no effects. Don't stretch, skew, rotate, outline, shadow, or glow. Scale uniformly only.
• Never typeset the wordmark. The LI.FI letters are paths, not a font — don't rebuild them in Figtree or anything else.
• On photography or busy surfaces, plate it. Place the logo on a solid plate (white or near-black) sized to the clear-space zone rather than directly on imagery.

Assets: logos/lifi/lifi-mark.svg · logos/lifi/lifi-lockup.svg · logos/lifi/lifi-lockup-stacked.svg — downloadable from the Brand Lockup card above.
In-product rendering: .brand-lockup (styles.css).
Spec: design/components/imagery.md → ### Brand lockup → Logo usage guidelines

• The two-tone pair IS the logo. Spark = --jumper-purple, body + wordmark = --jumper-indigo. Never swap the tones, and never flatten to a single colour without brand review.
• The pair flips together by mode. Light pair (#31007A + #8700B8) on light surfaces, dark pair (#653CA2 + #B49BDA) on dark. Never mix across pairs — a light indigo body with a dark lavender spark is a broken logo.
• Tokens in code, literals only in standalone files. Inline usage rides var(--jumper-indigo) / var(--jumper-purple) so the mode flip is automatic; the asset files carry the light-mode literals as var() fallbacks for <img> and downloads.
• Don't recolour to surface accents. The Theme Composer's --accent-* tokens re-theme SURFACES; the logo tokens are brand constants. A Jumper logo in LI.FI blue (or any composed accent) is never correct.
• Respect the ½H clear space and the size floors — same system as LI.FI above.
• No transforms, no effects, no typeset wordmark. Scale uniformly; the JUMPER letters are paths, not Urbanist text.
• Ship the canonical files from logos/jumper/; never hand-crop the horizontal lockup's viewBox to get a mark.

Assets: logos/jumper/jumper-mark.svg · logos/jumper/jumper-lockup.svg · logos/jumper/jumper-lockup-stacked.svg — downloadable from the Brand Lockup card above.
Brand tokens: styles.css — --jumper-indigo / --jumper-purple (dark in :root, light in [data-theme="light"]).
In-product rendering: .brand-lockup--jumper (styles.css).
Spec: design/components/imagery.md → ### Brand lockup → Logo usage guidelines

Never hand-author the SVG — generate it from the scene, then embed the output inline (inline so it reads --surface-page + animates):

# generate a bare SVG from any scene
node scripts/iso/mac-studio.mjs back > out.svg
node scripts/iso/macbook.mjs > out.svg

# standalone preview harness (dark panel) to iterate
node scripts/iso/mac-studio.mjs html > scripts/iso/mac-studio-preview.html

<!-- embed: a fixed-ink tile that pins light mode -->
<figure class="ds-iso-tile" data-theme="light">
  <svg class="bb-iso" viewBox="…">…</svg>
</figure>

Every scene composes the shared engine scripts/iso/engine.mjs:

• C — the white-on-ink palette (edge 20% · faint 13% · mark 48% · lit 85%), every colour a color-mix over --surface-page.
• SW — the stroke-weight ladder (hair 1.1 · edge 1.6 · bold 2.4), rendered with vector-effect:non-scaling-stroke so edges read at one consistent width across every scene regardless of its viewBox scale.
• createIsoKit — the 2:1 dimetric projection + slab() / keycap() for hardware scenes; flat scenes (coin, swap) use the core only.
• autoFrame + wrapSvg — a square viewBox from the content bbox + the SVG wrapper (which injects the non-scaling-stroke rule).

Method, contracts and the per-scene worked examples live in the iso-illustration skill.

• Generate, never hand-edit the SVG. Change the scene generator, regenerate, re-embed.
• Author every stroke from SW + colour from C so a new scene is edge-consistent with the family by construction.
• Embed inline, on a data-theme="light" ink tile. An <img> can neither read --surface-page nor animate; the light-pin keeps the white-on-ink look on any theme.
• Outline-only. The one fill is the active/moving element (a typed keystroke, the flow pip).
• The brand-guide "in motion" cards are the motion showcase; this is the asset library.

<!-- Icons live in /icons/ as bare-stroke SVGs. Inline them so currentColor + size work. -->
<svg viewBox="0 0 24 24" fill="none"
     stroke="currentColor" stroke-width="2"
     stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
  <path d="M12 5v14"/>
</svg>

/* Size tokens: 14 / 16 / 18 / 20 / 24. Scale via width+height attrs or font-size on parent. */

• Lucide for UI glyphs. stroke-width="1.5" on Marketing/Docs surfaces; 2.0 on dense Product UI where the line needs more presence.
• Source from /icons/ first. Every icon you reach for must already exist in the project's library at /icons/<name>.svg. If it doesn't: stop and ask whether to add it to the library from the official source (lucide.dev for UI glyphs, the brand's own asset repo for logos). Don't paste a one-off SVG straight into a feature file — the library is the canonical surface, and ad-hoc copies drift over time.
• Use the exact path from the library file. No truncated decimals (4.93 → 4.9), no Feather-era variants (e.g. the old moon M21 12.79A9 9 0 1 1 11.21 3… was replaced upstream by M20.985 12.486a9 9 0 1 1-9.473-9.472…). Copy the path verbatim from the corresponding SVG.
• One action ↔ one icon. Every recurring affordance — edit, save, delete, copy, more, back — uses the same Lucide glyph everywhere it appears. Before introducing a new icon for an action, grep for the existing one (theme-card-edit, copy-button, etc.) and reuse it. Picking a similar-but-different Lucide glyph (pencil vs pencil-line, save vs save-all) for the same action is the most common drift in this codebase.
• Plated logos for chains / tokens / partners. Source SVG inside .avatar — the wrapper handles the plate. Avatar SVGs live in /avatars/{chains,tokens,dexs,bridges,wallets,exchanges,payments,social,lifi}/; same library-first rule applies (verify the file exists before referencing it).
• Pick the shape by context. Square for tables, rounded for chips, circle for avatars.
• Don't mix Lucide with brand glyphs in one row. Lucide is chrome; brand glyphs are content.

<!-- Plated avatars (32 × 32 source). Six sizes via .avatar--xs/--sm/--lg/--xl/--2xl (default = 40px, no modifier). -->
<span class="avatar">
  <img src="/avatars/chains/ethereum.svg" alt="Ethereum">
</span>

<!-- Stacked / overlapping -->
<span class="avatar-stack avatar-stack--tight">
  <span class="avatar">…</span>
  <span class="avatar">…</span>
</span>

Tokens deviate from the kebab-case convention because tokens are canonically referenced by ticker in trading / wallet UI (eth.svg, not ethereum-token.svg).

• 32×32 SVG, pre-plated. Use the library's plate, don't add your own — the source already has the right padding for .avatar wrappers.
• Default render = 40px — no modifier needed (was 32px before April 2026; the source viewBox is unchanged, the wrapper just scales).
• Avatar ≠ partner logo. If the asset is a wordmark with brand typography, it belongs in logos/partners/ with a -dark / -light pair, rendered through .ds-doc-partner-logo — not here.
• Add via the library, never inline. Reference by path (../avatars/chains/foo.svg); never paste an SVG inline.
• When importing a new avatar, prompt the user to add a cell to this grid in the catalog. The library is not auto-synced.
• Compress on import. Source SVGs from official brand pages are often 50KB+; SVGO + manual cleanup brings them under 4KB.

<span class="ds-doc-partner-logo ds-doc-partner-logo--md" role="img" aria-label="MetaMask">
  <img class="ds-doc-partner-logo__dark"  src="logos/partners/metamask-dark.svg"  alt="">
  <img class="ds-doc-partner-logo__light" src="logos/partners/metamask-light.svg" alt="">
</span>

Both <img> tags ship in source; CSS swaps display on [data-theme="light"]. Use aria-label for the brand name and leave individual <img alt> empty (the wrapper carries semantics).

• Wordmarks only. If a partner has only a square mark, use .avatar instead — partner-logo expects a wide-aspect logo with brand typography baked in.
• Always ship a -dark + -light pair. Single-variant logos break the theme swap; if a partner only has one variant, render it through .avatar instead.
• Use aria-label on the wrapper, not alt on imgs. The <span> carries the role + label; the inner imgs are decorative (alt="").
• Don't tint or recolour. Partner logos are sacrosanct — no opacity overrides, no greyscale unless the wider section is .logo-cloud--mono.
• Compress on import. SVG wordmarks frequently include unused fonts as paths; SVGO + manual cleanup brings most under 6KB.

<!-- Persona portrait — circular, brand-gradient plate revealed through alpha. -->
<img class="avatar avatar--lg avatar--circle avatar--plate-brand"
     src="../portraits/personas/kim-96.png"
     srcset="../portraits/personas/kim-96.png 96w,
             ../portraits/personas/kim-256.png 256w,
             ../portraits/personas/kim.png 1024w"
     sizes="(max-width: 600px) 48px, 96px"
     alt="Kim — Shrimp persona">

<!-- Plate alternatives:                                                  -->
<!--   Accent solids  — .avatar--plate-primary / -secondary / -tertiary  -->
<!--   Neutrals       — .avatar--plate-ink / -paper                      -->
<!--   Brand gradients — .avatar--plate-brand / -brand-rich / -brand-radial -->
<!--   Strip plate    — .avatar--plate-none                              -->
<!--   Shape ladder   — .avatar--square / -rounded / -circle             -->
<!--   Inline custom  — style="--avatar-bg: oklch(60% 0.18 200);"        -->

• Personas — no consent constraint. Reusable on public surfaces, decks, demos. The four current archetypes (Kim · Finn · Dale · Mabel) are fictional and were generated for the system.
• Team — internal sign-off required before any external surface (marketing, decks shared outside the company, public site). Add the master at portraits/team/<firstname>-<lastname>.png.
• External — explicit per-person consent, often with expiration. Treat the bucket as "ask before each new use" — terms may have lapsed since the file was committed.
• Never reuse a real-person photo for a fictional persona, or vice versa. The folder boundary is also a semantic boundary.
• Don't apply tints or background plates inside the PNG. Photos are documentary — if a layout needs the person on a coloured ground, build the ground via .avatar--plate-* or inline --avatar-bg, never bake it.