@tolinax/ayoune-icons

Brand icon pack for the aYOUne platform — one SVG per customer-facing application, derived from the master aYOUne "a" mark.

Design system

Two axes of differentiation:

• Body colour expresses the domain (admin = pink, scanner = teal, terminal = amber, status-page = emerald, …).
• Badge glyph anchored bottom-right of the canvas expresses the purpose (gear, barcode, register, lock, pulse, …).

The brand pink + wine accent ribbon at the top-left is preserved on every variant — that is the recognisable aYOUne marker. On pink-family bodies the accent flips to teal + wine for contrast.

Two icons are intentionally badge-less for tradition / brand reasons:

• mobile-app → master violet, master ribbon, no badge — the canonical aYOUne mark on consumer devices.
• admin → pink body, no badge — exact match with the existing G:/Marketing/Logo/Admin Icons/ family.

What's in the box

37 icons across 7 categories:

• core (6): mobile-app, admin, desktop-client, scanner, terminal, auth
• tenant (6): account, customer-portal, agencies, reseller, supplier, developer-portal
• display (4): company-wallboard, softphone, communication-widget, bot
• consumer (9): consumer-app, consumer-dashboard, startpage, status-page, link-portal, ratings, newsletter-view, registration, event-register
• tool (8): forms, import, meeting-minutes, video-editor, stream-player, dashboard-viewer, control-panel, user-functions-editor
• thematic (2): alerts, devops (recreations of the legacy aYOUne_Icon_alerts.ai / aYOUne_Icon_devops.ai from G:/Marketing/Logo/)
• tooling (2): cli (ay), mcp

src/assets/contact-sheet.png is a one-page grid of all 37 previews for visual review.

Layout

src/
  manifest.json          ← single source of truth (colors, badges, use-cases)
  index.ts               ← typed manifest + iconUrl() helpers
  express.ts             ← /ayoune/icons static-mount helper for customer-meta
  lib/
    paths.ts             ← master "a" glyph SVG path data
    badges.ts            ← line-art badge glyph library
  assets/
    core/<id>.svg        ← per-category SVG output
    tenant/<id>.svg
    display/<id>.svg
    consumer/<id>.svg
    tool/<id>.svg
    thematic/<id>.svg
    tooling/<id>.svg
    all/<id>.svg         ← flat copy for consumers who want one folder
    preview/<id>.png     ← 512×512 PNG previews (regenerated from SVG)
    contact-sheet.png    ← grid of all previews

tools/
  generate.mjs           ← reads manifest → emits SVGs (idempotent)
  rasterize.mjs          ← reads SVGs → emits 512×512 PNG previews (sharp)
  contact-sheet.mjs      ← stitches all previews into one review image

Adding a new app

1. Add the entry to src/manifest.json (id, category, displayName, bodyColor, accentPrimary/Shadow, badge, badgeAccent, useCases).
2. If you need a new badge glyph, add the path data to tools/generate.mjs (and src/lib/badges.ts for parity).
3. Run:

   node tools/generate.mjs       # writes the new SVG
   node tools/rasterize.mjs      # rerenders all preview PNGs
   node tools/contact-sheet.mjs  # rebuilds the review grid

Source colour palette (from the master aYOUne_Icon.svg):

| Token | Value | Use | | ------ | --------- | --------------------------------- | | violet | #5a4797 | master body, alerts/devops body | | pink | #e72468 | accent ribbon (default), admin | | wine | #580d2b | accent shadow (always) | | teal | #087cab | accent ribbon when body is pink |

Consuming

URL helper (most consumers)

import { iconUrl } from '@tolinax/ayoune-icons';
const src = iconUrl('scanner'); // 'https://cm.ayoune.app/ayoune/icons/core/ayoune-scanner.svg'

Express static mount (customer-meta only)

import express from 'express';
import { ayouneIconsMount } from '@tolinax/ayoune-icons/express';

const m = ayouneIconsMount();
app.use(m.path, express.static(m.root, m.options));
// MUST be mounted BEFORE the customer-slug router.
// Serves GET /ayoune/icons/<category|all>/ayoune-<id>.svg

Direct file import (bundled apps)

import scanner from '@tolinax/ayoune-icons/src/assets/core/ayoune-scanner.svg';

Provenance

The master "a" glyph path data was extracted from G:/Geteilte Ablagen/aYOUne/Marketing/Logo/aYOUne_Icon.svg (Adobe Illustrator export, viewBox 0 0 297.1 303.7, 4 layers: counter cutout, body, accent ribbon, accent shadow). All variants reuse those four paths verbatim — only the fill colours change — so every icon stays pixel-identical to the brand master in shape.